From 69f874a31db2383ad98e148d3846627c6685a321 Mon Sep 17 00:00:00 2001 From: Matt Lott Date: Sun, 23 Aug 2015 13:48:52 -0700 Subject: [PATCH] Courses UI: Add student option to courses landing page --- app/templates/courses/mock1/courses.jade | 55 +++++++++++-------- .../courses/mock1/CourseDetailsView.coffee | 8 ++- app/views/courses/mock1/CoursesView.coffee | 13 ++++- 3 files changed, 49 insertions(+), 27 deletions(-) diff --git a/app/templates/courses/mock1/courses.jade b/app/templates/courses/mock1/courses.jade index 2fd547b8d..abf3b5668 100644 --- a/app/templates/courses/mock1/courses.jade +++ b/app/templates/courses/mock1/courses.jade @@ -44,33 +44,39 @@ block content input.code-input(type='text', placeholder="Enter unlock code") .col-md-4 button.btn.btn-success.btn-enroll Enroll - .row.button-row.center - .col-md-12 - div.or Or - .row.button-row.center - .col-md-12 - button.btn.btn-success.btn-lg.btn-buy Buy this course + if !studentMode + .row.button-row.center + .col-md-12 + div.or Or + .row.button-row.center + .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 - .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. + if !studentMode + .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 - .row - .col-md-6 - ul - li Learn more in less time - li No coding experience necesssary - li Easily monitor student progress - - div Purchase a course for your entire class. It's easy to sign up your students! - .col-md-6 - .well.well-sm - div.praise-quote "#{praise.quote}" - div.caption-text - #{praise.source} + .container-fluid + .row + .col-md-6 + ul + li Learn more in less time + li No coding experience necesssary + li Easily monitor student progress + + div Purchase a course for your entire class. It's easy to sign up your students! + .col-md-6 + .well.well-sm + div.praise-quote "#{praise.quote}" + div.caption-text - #{praise.source} - h2.center Choose Your Course: + h2.center Choose Your Course: .container-fluid - var i = 0 @@ -99,4 +105,7 @@ mixin course-block(course, courseID) li= topic strong Hours of content: #{course.duration} .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 diff --git a/app/views/courses/mock1/CourseDetailsView.coffee b/app/views/courses/mock1/CourseDetailsView.coffee index 97f463fb0..5cf91e0a6 100644 --- a/app/views/courses/mock1/CourseDetailsView.coffee +++ b/app/views/courses/mock1/CourseDetailsView.coffee @@ -1,4 +1,5 @@ app = require 'core/application' +utils = require 'core/utils' RootView = require 'views/core/RootView' template = require 'templates/courses/mock1/course-details' CocoCollection = require 'collections/CocoCollection' @@ -20,6 +21,7 @@ module.exports = class CourseDetailsView extends RootView constructor: (options, @courseID=0, @instanceID=0) -> super options + @studentMode = utils.getQueryVariable('student', false) or options.studentMode @initData() destroy: -> @@ -39,7 +41,7 @@ module.exports = class CourseDetailsView extends RootView context.userLevelStateMap = @userLevelStateMap ? {} context.showExpandedProgress = @showExpandedProgress context.stats = @stats - context.studentMode = @options.studentMode ? false + context.studentMode = @studentMode ? false conceptsCompleted = {} for user of context.userConceptsMap @@ -152,9 +154,9 @@ module.exports = class CourseDetailsView extends RootView @render?() onChangeStudent: (e) -> - @options.studentMode = $('.student-mode-checkbox').prop('checked') + @studentMode = $('.student-mode-checkbox').prop('checked') @render?() - $('.student-mode-checkbox').attr('checked', @options.studentMode) + $('.student-mode-checkbox').attr('checked', @studentMode) onExpandedProgressCheckbox: (e) -> @showExpandedProgress = $('.expand-progress-checkbox').prop('checked') diff --git a/app/views/courses/mock1/CoursesView.coffee b/app/views/courses/mock1/CoursesView.coffee index 45df18359..e6dfa143e 100644 --- a/app/views/courses/mock1/CoursesView.coffee +++ b/app/views/courses/mock1/CoursesView.coffee @@ -1,4 +1,5 @@ app = require 'core/application' +utils = require 'core/utils' RootView = require 'views/core/RootView' template = require 'templates/courses/mock1/courses' @@ -11,10 +12,12 @@ module.exports = class CoursesView extends RootView 'click .btn-continue': 'onClickContinue' 'click .btn-enroll': 'onClickEnroll' 'click .btn-enter': 'onClickEnter' + 'click .btn-student': 'onClickStudent' 'hidden.bs.modal #continueModal': 'onHideContinueModal' constructor: (options) -> super options + @studentMode = utils.getQueryVariable('student', false) or options.studentMode @initData() getRenderData: -> @@ -22,6 +25,7 @@ module.exports = class CoursesView extends RootView context.courses = @courses ? [] context.instances = @instances ? [] context.praise = @praise + context.studentMode = @studentMode context initData: -> @@ -61,7 +65,7 @@ module.exports = class CoursesView extends RootView courseID = $(e.target).data('course-id') instanceID = _.random(0, @instances.length - 1) viewClass = require 'views/courses/mock1/CourseDetailsView' - viewArgs = [{}, courseID, instanceID] + viewArgs = [{studentMode: @studentMode}, courseID, instanceID] navigationEvent = route: "/courses/mock1/#{courseID}", viewClass: viewClass, viewArgs: viewArgs 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 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) -> $('#continueModal .row-pick-class').hide()