codeninjasllc/codecombat
1
0
Fork 0
mirror of https://github.com/codeninjasllc/codecombat.git synced 2024-11-28 01:55:38 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add course mock UI for student level progress

Browse source
This commit is contained in:
Matt Lott 2015-07-01 15:11:40 -07:00
parent 93b41285eb
commit 254d6a9d6b
3 changed files with 113 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
app/styles/courses/mock1/course-details.sass
View file

@ -10,3 +10,60 @@
.select-session
width: 300px
display: inline
.progress-header
margin-right: 14px
.progress-key
cursor: default
display: inline-block
white-space: nowrap
font-size: 9pt
font-weight: normal
border: 1px solid gray
border-radius: 5px
margin: 0px
padding: 2px
.progress-key-started
background-color: lightgreen
.progress-key-complete
background-color: lightgray
.expand-progress-checkbox
margin-left: 14px
.expand-progress-label
font-weight: normal
font-size: 14px
.progress-cell
padding: 2px
padding-bottom: 10px
.level-popup-container
display: none
position: absolute
padding: 10px
border: 1px solid black
z-index: 3
background-color: blanchedalmond
font-size: 10pt
.progress-level-cell
display: inline-block
white-space: nowrap
font-size: 9pt
border: 1px solid gray
border-radius: 5px
margin: 0px
padding: 2px
.progress-level-cell-started
cursor: pointer
background-color: lightgreen
.progress-level-cell-complete
cursor: pointer
background-color: lightgray

36
app/templates/courses/mock1/course-details.jade
View file

@ -11,9 +11,11 @@ block content
input.student-view-checkbox(type='checkbox')
span.spl Student view
div TODO: fix ugly tabs
div TODO: add student progress monitoring
div TODO: level concepts, status, working play button
div TODO: student view
div TODO: aggregate student progress
div TODO: student level progress popups
div TODO: student concept progress
div(style='border-bottom: 1px solid black;')
h1= course.title
@ -64,24 +66,48 @@ block content
table.table.table-condensed
thead
tr
th Name
th Progress
th
th
span.progress-header Progress
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 TODO: level progress
td.progress-cell
- var i = 0
each level in course.levels
if i <= userLevelStateMap[student].lastCompletedIndex
span.progress-level-cell.progress-level-cell-complete #{i + 1}
if showExpandedProgress || i === 0 || i === userLevelStateMap[student].lastStartedIndex
span.spl #{level}
else if i <= userLevelStateMap[student].lastStartedIndex
span.progress-level-cell.progress-level-cell-started #{i + 1}
if showExpandedProgress || i === 1 || i === userLevelStateMap[student].lastStartedIndex
span.spl #{level}
else
span.progress-level-cell.level-progression-level-not-started #{i + 1}
if showExpandedProgress || i === 1 || i === userLevelStateMap[student].lastStartedIndex
span.spl #{level}
if i === maxLastStartedIndex
- break
- i++
.tab-pane#invite(role='tabpanel')
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
button.btn.btn-success.btn-invite Send Invites
.tab-pane#levels(role='tabpanel')
table.table.table-condensed
thead

25
app/views/courses/mock1/CourseDetailsView.coffee
View file

@ -7,9 +7,10 @@ module.exports = class CourseDetailsView extends RootView
template: template
events:
'change .expand-progress-checkbox': 'onExpandedProgressCheckbox'
'change .select-session': 'onChangeSession'
'click .edit-class-name-btn': 'onClickEditClassName'
'click .edit-description-btn': 'onClickEditClassDescription'
'change .select-session': 'onChangeSession'
constructor: (options, @courseID) ->
super options
@ -20,21 +21,41 @@ module.exports = class CourseDetailsView extends RootView
context.course = @course ? {}
context.instance = @instances?[@currentInstanceIndex] ? {}
context.instances = @instances ? []
context.lastUserLevelMap = @lastUserLevelMap ? {}
context.levelProgression = @levelProgression ? []
context.maxLastStartedIndex = @maxLastStartedIndex ? 0
context.userLevelStateMap = @userLevelStateMap ? {}
context.showExpandedProgress = @maxLastStartedIndex <= 30 or @showExpandedProgress
context
initData: ->
mockData = require 'views/courses/mock1/CoursesMockData'
@course = mockData.courses[@courseID]
# @instance = mockData.instances[_.random(0, mockData.instances.length - 1)]
@currentInstanceIndex = 0
@instances = mockData.instances
@userLevelStateMap = {}
@maxLastStartedIndex = -1
for student in @instances?[@currentInstanceIndex].students
lastCompletedIndex = _.random(0, @course.levels.length)
lastStartedIndex = lastCompletedIndex + 1
@userLevelStateMap[student] =
lastCompletedIndex: lastCompletedIndex
lastStartedIndex: lastStartedIndex
@maxLastStartedIndex = lastStartedIndex if lastStartedIndex > @maxLastStartedIndex
onChangeSession: (e) ->
newSessionValue = $(e.target).val()
for val, index in @instances when val.name is newSessionValue
@currentInstanceIndex = index
@render?()
onExpandedProgressCheckbox: (e) ->
@showExpandedProgress = $('.expand-progress-checkbox').prop('checked')
# TODO: why does render reset the checkbox to be unchecked?
@render?()
$('.expand-progress-checkbox').attr('checked', @showExpandedProgress)
onClickEditClassName: (e) ->
alert 'TODO: Popup for editing name for this course session'