Courses UI: Add student option to courses landing page

This commit is contained in:
Matt Lott 2015-08-23 13:48:52 -07:00
parent 9e8e61aa2d
commit 69f874a31d
3 changed files with 49 additions and 27 deletions
app
templates/courses/mock1
views/courses/mock1

View file

@ -44,33 +44,39 @@ block content
input.code-input(type='text', placeholder="Enter unlock code") input.code-input(type='text', placeholder="Enter unlock code")
.col-md-4 .col-md-4
button.btn.btn-success.btn-enroll Enroll button.btn.btn-success.btn-enroll Enroll
.row.button-row.center if !studentMode
.col-md-12 .row.button-row.center
div.or Or .col-md-12
.row.button-row.center div.or Or
.col-md-12 .row.button-row.center
button.btn.btn-success.btn-lg.btn-buy Buy this course .col-md-12
button.btn.btn-success.btn-lg.btn-buy Buy this course
if !studentMode
br
button.btn.btn-warning.btn-student Students Click Here
h1.center Courses on CodeCombat h1.center Courses on CodeCombat
.info-container if !studentMode
p Courses are designed to introduce computer science concepts using CodeCombat's fun and engaging environment. CodeCombat levels are organized around key topics to encourage progressive learning, over the course of 5 hours. .info-container
p Courses are designed to introduce computer science concepts using CodeCombat's fun and engaging environment. CodeCombat levels are organized around key topics to encourage progressive learning, over the course of 5 hours.
.container-fluid .container-fluid
.row .row
.col-md-6 .col-md-6
ul ul
li Learn more in less time li Learn more in less time
li No coding experience necesssary li No coding experience necesssary
li Easily monitor student progress li Easily monitor student progress
div Purchase a course for your entire class. It's easy to sign up your students! div Purchase a course for your entire class. It's easy to sign up your students!
.col-md-6 .col-md-6
.well.well-sm .well.well-sm
div.praise-quote "#{praise.quote}" div.praise-quote "#{praise.quote}"
div.caption-text - #{praise.source} div.caption-text - #{praise.source}
h2.center Choose Your Course: h2.center Choose Your Course:
.container-fluid .container-fluid
- var i = 0 - var i = 0
@ -99,4 +105,7 @@ mixin course-block(course, courseID)
li= topic li= topic
strong Hours of content: #{course.duration} strong Hours of content: #{course.duration}
.col-md-6.center .col-md-6.center
button.btn.btn-lg.btn-success.btn-continue(data-toggle='modal', data-target="#continueModal", data-course-title="#{course.title}", data-course-id="#{courseID}") #{course.unlocked ? 'Continue' : 'Enter'} if !studentMode || !course.unlocked
button.btn.btn-lg.btn-success.btn-continue(data-toggle='modal', data-target="#continueModal", data-course-title="#{course.title}", data-course-id="#{courseID}") #{course.unlocked ? 'Continue' : 'Enter'}
else
a.btn.btn-lg.btn-success.btn-continue(href="/courses/mock1/#{courseID}?student=true") Continue

View file

@ -1,4 +1,5 @@
app = require 'core/application' app = require 'core/application'
utils = require 'core/utils'
RootView = require 'views/core/RootView' RootView = require 'views/core/RootView'
template = require 'templates/courses/mock1/course-details' template = require 'templates/courses/mock1/course-details'
CocoCollection = require 'collections/CocoCollection' CocoCollection = require 'collections/CocoCollection'
@ -20,6 +21,7 @@ module.exports = class CourseDetailsView extends RootView
constructor: (options, @courseID=0, @instanceID=0) -> constructor: (options, @courseID=0, @instanceID=0) ->
super options super options
@studentMode = utils.getQueryVariable('student', false) or options.studentMode
@initData() @initData()
destroy: -> destroy: ->
@ -39,7 +41,7 @@ module.exports = class CourseDetailsView extends RootView
context.userLevelStateMap = @userLevelStateMap ? {} context.userLevelStateMap = @userLevelStateMap ? {}
context.showExpandedProgress = @showExpandedProgress context.showExpandedProgress = @showExpandedProgress
context.stats = @stats context.stats = @stats
context.studentMode = @options.studentMode ? false context.studentMode = @studentMode ? false
conceptsCompleted = {} conceptsCompleted = {}
for user of context.userConceptsMap for user of context.userConceptsMap
@ -152,9 +154,9 @@ module.exports = class CourseDetailsView extends RootView
@render?() @render?()
onChangeStudent: (e) -> onChangeStudent: (e) ->
@options.studentMode = $('.student-mode-checkbox').prop('checked') @studentMode = $('.student-mode-checkbox').prop('checked')
@render?() @render?()
$('.student-mode-checkbox').attr('checked', @options.studentMode) $('.student-mode-checkbox').attr('checked', @studentMode)
onExpandedProgressCheckbox: (e) -> onExpandedProgressCheckbox: (e) ->
@showExpandedProgress = $('.expand-progress-checkbox').prop('checked') @showExpandedProgress = $('.expand-progress-checkbox').prop('checked')

View file

@ -1,4 +1,5 @@
app = require 'core/application' app = require 'core/application'
utils = require 'core/utils'
RootView = require 'views/core/RootView' RootView = require 'views/core/RootView'
template = require 'templates/courses/mock1/courses' template = require 'templates/courses/mock1/courses'
@ -11,10 +12,12 @@ module.exports = class CoursesView extends RootView
'click .btn-continue': 'onClickContinue' 'click .btn-continue': 'onClickContinue'
'click .btn-enroll': 'onClickEnroll' 'click .btn-enroll': 'onClickEnroll'
'click .btn-enter': 'onClickEnter' 'click .btn-enter': 'onClickEnter'
'click .btn-student': 'onClickStudent'
'hidden.bs.modal #continueModal': 'onHideContinueModal' 'hidden.bs.modal #continueModal': 'onHideContinueModal'
constructor: (options) -> constructor: (options) ->
super options super options
@studentMode = utils.getQueryVariable('student', false) or options.studentMode
@initData() @initData()
getRenderData: -> getRenderData: ->
@ -22,6 +25,7 @@ module.exports = class CoursesView extends RootView
context.courses = @courses ? [] context.courses = @courses ? []
context.instances = @instances ? [] context.instances = @instances ? []
context.praise = @praise context.praise = @praise
context.studentMode = @studentMode
context context
initData: -> initData: ->
@ -61,7 +65,7 @@ module.exports = class CoursesView extends RootView
courseID = $(e.target).data('course-id') courseID = $(e.target).data('course-id')
instanceID = _.random(0, @instances.length - 1) instanceID = _.random(0, @instances.length - 1)
viewClass = require 'views/courses/mock1/CourseDetailsView' viewClass = require 'views/courses/mock1/CourseDetailsView'
viewArgs = [{}, courseID, instanceID] viewArgs = [{studentMode: @studentMode}, courseID, instanceID]
navigationEvent = route: "/courses/mock1/#{courseID}", viewClass: viewClass, viewArgs: viewArgs navigationEvent = route: "/courses/mock1/#{courseID}", viewClass: viewClass, viewArgs: viewArgs
Backbone.Mediator.publish 'router:navigate', navigationEvent Backbone.Mediator.publish 'router:navigate', navigationEvent
@ -76,5 +80,12 @@ module.exports = class CoursesView extends RootView
navigationEvent = route: "/courses/mock1/#{courseID}", viewClass: viewClass, viewArgs: viewArgs navigationEvent = route: "/courses/mock1/#{courseID}", viewClass: viewClass, viewArgs: viewArgs
Backbone.Mediator.publish 'router:navigate', navigationEvent Backbone.Mediator.publish 'router:navigate', navigationEvent
onClickStudent: (e) ->
route = "/courses/mock1?student=true"
viewClass = require 'views/courses/mock1/CoursesView'
viewArgs = [studentMode: true]
navigationEvent = route: route, viewClass: viewClass, viewArgs: viewArgs
Backbone.Mediator.publish 'router:navigate', navigationEvent
onHideContinueModal: (e) -> onHideContinueModal: (e) ->
$('#continueModal .row-pick-class').hide() $('#continueModal .row-pick-class').hide()