Courses UI: Add student option to courses landing page
This commit is contained in:
parent
9e8e61aa2d
commit
69f874a31d
3 changed files with 49 additions and 27 deletions
app
|
@ -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
|
||||||
|
|
|
@ -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')
|
||||||
|
|
|
@ -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()
|
||||||
|
|
Reference in a new issue