mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2025-04-29 15:35:15 -04:00
Courses UI - Show progress to students by default
This commit is contained in:
Matt Lott
parent
ea90b93bd2
commit
d47f41548c
1 changed files with 101 additions and 94 deletions
|
|
@ -5,7 +5,6 @@ block content
|
||||||
//- DO NOT localize / i18n
|
//- DO NOT localize / i18n
|
||||||
|
|
||||||
div TODO: fix ugly tabs
|
div TODO: fix ugly tabs
|
||||||
div TODO: not enrolled yet
|
|
||||||
div
|
div
|
||||||
span *UNDER CONSTRUCTION, send feedback to
|
span *UNDER CONSTRUCTION, send feedback to
|
||||||
a.spl(href='mailto:team@codecombat.com') team@codecombat.com
|
a.spl(href='mailto:team@codecombat.com') team@codecombat.com
|
||||||
|
|
@ -55,102 +54,28 @@ block content
|
||||||
|
|
||||||
div(role='tabpanel')
|
div(role='tabpanel')
|
||||||
ul.nav.nav-tabs(role='tablist')
|
ul.nav.nav-tabs(role='tablist')
|
||||||
if !studentMode
|
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')
|
li.active(role='presentation')
|
||||||
a(href='#progress', aria-controls='progress', role='tab', data-toggle='tab') Class
|
a(href='#progress', aria-controls='progress', role='tab', data-toggle='tab') Class
|
||||||
li(role='presentation')
|
li(role='presentation')
|
||||||
a(href='#invite', aria-controls='invite', role='tab', data-toggle='tab') Add Students
|
a(href='#invite', aria-controls='invite', role='tab', data-toggle='tab') Add Students
|
||||||
li(role='presentation')
|
li(role='presentation')
|
||||||
a(href='#levels', aria-controls='levels', role='tab', data-toggle='tab') Levels
|
a(href='#levels', aria-controls='levels', role='tab', data-toggle='tab') Levels
|
||||||
|
|
||||||
.tab-content
|
.tab-content
|
||||||
if !studentMode
|
if studentMode
|
||||||
|
.tab-pane.active#levels(role='tabpanel')
|
||||||
|
+levels-tab
|
||||||
|
.tab-pane#progress(role='tabpanel')
|
||||||
|
+progress-tab
|
||||||
|
else
|
||||||
.tab-pane.active#progress(role='tabpanel')
|
.tab-pane.active#progress(role='tabpanel')
|
||||||
if instance.students
|
+progress-tab
|
||||||
h3 Summary
|
|
||||||
- var averagePlaytime = Math.round(Math.random() * 30) + 30
|
|
||||||
p
|
|
||||||
strong(style='font-size:12pt;') Average Play Time
|
|
||||||
p #{averagePlaytime} minutes
|
|
||||||
p
|
|
||||||
strong(style='font-size:12pt;') Concepts Covered
|
|
||||||
table.table.table-condensed
|
|
||||||
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-completed-foreground(data-i18n="concepts." + concept)
|
|
||||||
span.spl - #{conceptCompletion}%
|
|
||||||
span.concept-completion-background(style="width:#{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
|
|
||||||
if maxLastStartedIndex > 30
|
|
||||||
input.expand-progress-checkbox(type='checkbox')
|
|
||||||
span.spl.expand-progress-label(data-i18n="clans.exp_levels") Expand levels
|
|
||||||
tbody
|
|
||||||
each student in instance.students
|
|
||||||
tr
|
|
||||||
td
|
|
||||||
a= student
|
|
||||||
td.progress-cell
|
|
||||||
.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}
|
|
||||||
if showExpandedProgress || i === 0 || i === course.levels.length - 1
|
|
||||||
span.spl #{level}
|
|
||||||
.level-popup-container
|
|
||||||
h3 #{i + 1}. #{level}
|
|
||||||
p
|
|
||||||
div
|
|
||||||
- var playTime = Math.round(Math.random() * 600)
|
|
||||||
span Time to solve
|
|
||||||
span : #{playTime} seconds
|
|
||||||
div
|
|
||||||
- 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}
|
|
||||||
else
|
|
||||||
span.progress-level-cell.level-progression-level-not-started #{i + 1}
|
|
||||||
if showExpandedProgress || i === 0
|
|
||||||
span.spl #{level}
|
|
||||||
- i++
|
|
||||||
|
|
||||||
.tab-pane#invite(role='tabpanel')
|
.tab-pane#invite(role='tabpanel')
|
||||||
p Invite students to join this class.
|
p Invite students to join this class.
|
||||||
if course.title !== 'Introduction to Computer Science'
|
if course.title !== 'Introduction to Computer Science'
|
||||||
|
|
@ -159,12 +84,94 @@ block content
|
||||||
textarea.textarea-emails(rows=3, placeholder="Enter student emails to invite, one per line")
|
textarea.textarea-emails(rows=3, placeholder="Enter student emails to invite, one per line")
|
||||||
div
|
div
|
||||||
button.btn.btn-success.btn-invite Send Invites
|
button.btn.btn-success.btn-invite Send Invites
|
||||||
|
|
||||||
.tab-pane#levels(role='tabpanel')
|
.tab-pane#levels(role='tabpanel')
|
||||||
+levels-tab
|
+levels-tab
|
||||||
else
|
|
||||||
.tab-pane.active#levels(role='tabpanel')
|
mixin progress-tab
|
||||||
+levels-tab
|
if instance.students
|
||||||
|
h3 Summary
|
||||||
|
- var averagePlaytime = Math.round(Math.random() * 30) + 30
|
||||||
|
p
|
||||||
|
strong(style='font-size:12pt;') Average Play Time
|
||||||
|
p #{averagePlaytime} minutes
|
||||||
|
p
|
||||||
|
strong(style='font-size:12pt;') Concepts Covered
|
||||||
|
table.table.table-condensed
|
||||||
|
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-completed-foreground(data-i18n="concepts." + concept)
|
||||||
|
span.spl - #{conceptCompletion}%
|
||||||
|
span.concept-completion-background(style="width:#{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
|
||||||
|
if maxLastStartedIndex > 30
|
||||||
|
input.expand-progress-checkbox(type='checkbox')
|
||||||
|
span.spl.expand-progress-label(data-i18n="clans.exp_levels") Expand levels
|
||||||
|
tbody
|
||||||
|
each student in instance.students
|
||||||
|
tr
|
||||||
|
td
|
||||||
|
a= student
|
||||||
|
td.progress-cell
|
||||||
|
.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}
|
||||||
|
if showExpandedProgress || i === 0 || i === course.levels.length - 1
|
||||||
|
span.spl #{level}
|
||||||
|
.level-popup-container
|
||||||
|
h3 #{i + 1}. #{level}
|
||||||
|
p
|
||||||
|
div
|
||||||
|
- var playTime = Math.round(Math.random() * 600)
|
||||||
|
span Time to solve
|
||||||
|
span : #{playTime} seconds
|
||||||
|
div
|
||||||
|
- 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}
|
||||||
|
else
|
||||||
|
span.progress-level-cell.level-progression-level-not-started #{i + 1}
|
||||||
|
if showExpandedProgress || i === 0
|
||||||
|
span.spl #{level}
|
||||||
|
- i++
|
||||||
|
|
||||||
mixin levels-tab
|
mixin levels-tab
|
||||||
table.table.table-striped.table-condensed
|
table.table.table-striped.table-condensed
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue