codecombat/app/templates/courses/mock1/course-details.jade
2015-08-28 10:53:24 -07:00

271 lines
12 KiB
Text

extends /templates/base
block content
//- DO NOT localize / i18n
div
span *UNDER CONSTRUCTION, send feedback to
a.spl(href='mailto:team@codecombat.com') team@codecombat.com
div
input.student-mode-checkbox(type='checkbox', checked=studentMode)
span.spl Student view
div(style='border-bottom: 1px solid black;')
.modal#editSettingsModal
.modal-dialog
.modal-header
button.close(data-dismiss='modal')
span ×
h3.modal-title Edit Class Settings
.modal-body
p
strong Title
p
input.edit-name-input(type='text', value="#{instance.name}")
p
strong Description
p
textarea.edit-description-input(rows=2)= instance.description
p Select programming languages available to the class:
p
select.form-control.select-language
option(value="Python") Python
option(value="JavaScript") JavaScript
option(value="All Languages") All Languages
p
input(type='checkbox', checked)
span.spl Show student progress to everyone in the class
.modal-footer
button.btn.btn-save-settings(data-i18n="common.save_changes")
h1= instance.name
small.spl (#{course.title})
p
if instance.description
each line in instance.description.split('\n')
div= line
if !studentMode
p
button.btn.btn-xs.btn-edit-settings(data-toggle='modal', data-target='#editSettingsModal') edit class settings
div.well.well-sm.section-selector(role='tabpanel')
ul.nav.nav-pills(role='tablist')
if studentMode
li.active(role='presentation')
a(href='#levels', aria-controls='levels', role='tab', data-toggle='tab') Levels
li(role='presentation')
a(href='#progress', aria-controls='progress', role='tab', data-toggle='tab') Class
else
li.active(role='presentation')
a(href='#progress', aria-controls='progress', role='tab', data-toggle='tab') Class
li(role='presentation')
a(href='#invite', aria-controls='invite', role='tab', data-toggle='tab') Add Students
li(role='presentation')
a(href='#levels', aria-controls='levels', role='tab', data-toggle='tab') Levels
.tab-content
if studentMode
.tab-pane.active#levels(role='tabpanel')
+levels-tab
.tab-pane#progress(role='tabpanel')
+progress-tab
else
.tab-pane.active#progress(role='tabpanel')
+progress-tab
.tab-pane#invite(role='tabpanel')
br
p Invite students to join this class.
if course.title !== 'Introduction to Computer Science'
p Student unlock code: #{instance.code}
p Class capacity: 34/50
textarea.textarea-emails(rows=3, placeholder="Enter student emails to invite, one per line")
div(style='margin-top:10px;')
button.btn.btn-success.btn-invite Send Invites
.tab-pane#levels(role='tabpanel')
+levels-tab
mixin progress-tab
if instance.students
.container-fluid.summary-container
.row
.col-md-6
h3 Statistics
table.statistics-container
tr
td Total students:
td #{instance.students.length}
tr
td Average level play time:
td= moment.duration(stats.averageLevelPlaytime, "seconds").humanize()
tr
td Total play time:
td= moment.duration(stats.totalPlayTime, "seconds").humanize()
tr
td Average levels completed:
td #{stats.averageLevelsCompleted}
tr
td Total levels completed:
td #{stats.totalLevelsCompleted}
tr
td Furthest level completed:
td #{stats.lastLevelCompleted}
.col-md-6
h3 Concepts Covered
table.table-concepts-summary
each concept in courseConcepts
- var conceptCompletion = Math.round(parseFloat(conceptsCompleted[concept]) / instance.students.length * 100)
if isNaN(conceptCompletion)
- conceptCompletion = 0
tr
td.concept-completion-container
span.concept-summary(style="width:#{conceptCompletion}%;")
span.concept-completed-foreground(data-i18n="concepts." + concept)
span.spl - #{conceptCompletion}%
h3 Students
table.table.table-condensed
thead
tr
th
span.member-header.spr Name
if memberSort === 'nameAsc'
span.member-header.glyphicon.glyphicon-chevron-up
else if memberSort === 'nameDesc'
span.member-header.glyphicon.glyphicon-chevron-down
th
span.progress-header.spr Progress
if memberSort === 'progressAsc'
span.progress-header.glyphicon.glyphicon-chevron-up
else if memberSort === 'progressDesc'
span.progress-header.glyphicon.glyphicon-chevron-down
else
span(style='padding-left:16px;')
span.progress-key.progress-key-complete complete
span.progress-key.progress-key-started started
span.progress-key not started
input.expand-progress-checkbox(type='checkbox')
span.spl.expand-progress-label Expand details
tbody
each student in instance.students
tr
td.student-cell
a= student
div #{stats[student].levelsCompleted} levels completed
div #{moment.duration(stats[student].secondsPlayed, 'seconds').humanize()} played
div Played #{moment().subtract(stats[student].secondsLastPlayed, 'seconds').fromNow()}
td.progress-cell
if showExpandedProgress
.level-progression-concepts Concepts
each concept in courseConcepts
if userConceptsMap[student] && userConceptsMap[student][concept] === 'complete'
span.spr.progress-concept-cell.progress-concept-cell-complete(data-i18n="concepts." + concept)
else if userConceptsMap[student] && userConceptsMap[student][concept] === 'started'
span.spr.progress-concept-cell.progress-concept-cell-started(data-i18n="concepts." + concept)
else
span.spr.progress-concept-cell.progress-concept-cell-not-started(data-i18n="concepts." + concept)
.level-progression-levels Levels
- var i = 0
each level in course.levels
if userLevelStateMap[student][level] === 'complete'
span.progress-level-cell.progress-level-cell-complete #{i + 1}
span.spl= level.replace('Course: ', '')
.level-popup-container
h3 #{i + 1}. #{level.replace('Course: ', '')}
p
- var playTime = Math.round(Math.random() * 600)
span Time to solve
span : #{moment.duration(playTime, "seconds").humanize()}
p
- var completionDate = new Date()
- completionDate.setUTCDate(completionDate.getUTCDate() - Math.round(Math.random() * 60))
span Completed on
span : #{moment(completionDate).format('MMMM Do YYYY, h:mm:ss a')}
strong(data-i18n="clans.view_solution") Click to view solution.
else if userLevelStateMap[student][level] === 'started'
span.progress-level-cell.progress-level-cell-started #{i + 1} #{level.replace('Course: ', '')}
.level-popup-container
h3 #{i + 1}. #{level.replace('Course: ', '')}
p
- var completionDate = new Date()
- completionDate.setUTCDate(completionDate.getUTCDate() - Math.round(Math.random() * 60))
span Last played on
span : #{moment(completionDate).format('MMMM Do YYYY, h:mm:ss a')}
strong(data-i18n="clans.view_solution") Click to view solution.
else
span.progress-level-cell.level-progression-level-not-started #{i + 1} #{level.replace('Course: ', '')}
- i++
else
//- Condensed view
table
tbody
tr
td
.level-progression-concepts(style='margin:0px;') Concepts
td.condense-progress
each concept in courseConcepts
if userConceptsMap[student] && userConceptsMap[student][concept] === 'complete'
span.spr.progress-concept-cell.progress-concept-cell-complete(data-i18n="concepts." + concept)
else if userConceptsMap[student] && userConceptsMap[student][concept] === 'started'
span.spr.progress-concept-cell.progress-concept-cell-started(data-i18n="concepts." + concept)
else
break
tr
td
.level-progression-levels(style='margin:0px;') Levels
td.condense-progress
- var levelCellWidth = 100.00 / course.levels.length
- var i = 0
each level in course.levels
if userLevelStateMap[student][level] === 'complete'
span.progress-level-cell.progress-level-cell-complete(style="width:#{levelCellWidth}%;") #{i + 1}
.level-popup-container
h3 #{i + 1}. #{level.replace('Course: ', '')}
p
- var playTime = Math.round(Math.random() * 600)
span Time to solve
span : #{moment.duration(playTime, "seconds").humanize()}
p
- var completionDate = new Date()
- completionDate.setUTCDate(completionDate.getUTCDate() - Math.round(Math.random() * 60))
span Completed on
span : #{moment(completionDate).format('MMMM Do YYYY, h:mm:ss a')}
strong(data-i18n="clans.view_solution") Click to view solution.
else if userLevelStateMap[student][level] === 'started'
span.progress-level-cell.progress-level-cell-started(style="width:#{levelCellWidth}%;") #{i + 1}
.level-popup-container
h3 #{i + 1}. #{level.replace('Course: ', '')}
p
- var completionDate = new Date()
- completionDate.setUTCDate(completionDate.getUTCDate() - Math.round(Math.random() * 60))
span Last played on
span : #{moment(completionDate).format('MMMM Do YYYY, h:mm:ss a')}
strong(data-i18n="clans.view_solution") Click to view solution.
else
break
- i++
mixin levels-tab
br
table.table.table-striped.table-condensed
thead
tr
th
th Status
th Level
th Concepts
tbody
- var student = instance.students[0]
each level in course.levels
tr
td
button.btn.btn-success.btn-play-level(data-level=level) Play
td= userLevelStateMap[student][level]
td= level.replace('Course: ', '')
td
each concept in courseConcepts
if levelConceptsMap[level] && levelConceptsMap[level][concept]
span.spr.progress-level-cell.level-progression-level-not-started(data-i18n="concepts." + concept)