diff --git a/app/core/Router.coffee b/app/core/Router.coffee index 45578c514..11a6ce09d 100644 --- a/app/core/Router.coffee +++ b/app/core/Router.coffee @@ -12,10 +12,6 @@ module.exports = class CocoRouter extends Backbone.Router '': -> if window.serverConfig.picoCTF return @routeDirectly 'play/CampaignView', ['picoctf'], {} - # Testing new home page - # group = me.getHomepageGroup() - # return @routeDirectly('NewHomeView', [], { jumbotron: 'student' }) if group is 'new-home-student' - # return @routeDirectly('NewHomeView', [], { jumbotron: 'characters' }) if group is 'new-home-characters' return @routeDirectly('NewHomeView', []) 'about': go('AboutView') diff --git a/app/locale/en.coffee b/app/locale/en.coffee index e01fc343f..df4ea2e28 100644 --- a/app/locale/en.coffee +++ b/app/locale/en.coffee @@ -81,6 +81,24 @@ boast: "Boasts riddles that are complex enough to fascinate gamers and coders alike." winning: "A winning combination of RPG gameplay and programming homework that pulls off making kid-friendly education legitimately enjoyable." run_class:"Everything you need to run a computer science class in your school today, no CS background required." + teachers: "Teachers!" + teachers_and_educators: "Teachers & Educators" + class_in_box: "Learn how our classroom-in-a-box platform fits into your curriculum." + get_started: "Get Started" + students: "Students:" + join_class: "Join Class" + role: "Your role:" + student_count: "Number of students:" + start_playing_for_free: "Start Playing for Free!" + students_and_players: "Students & Players" + goto_classes: "Go to my Classes" + educator_wiki: "Educator wiki" + view_profile: "View My Profile" + login_switch: "Have an account?" + check_out_wiki: "Check out our new educator Wiki" + want_coco: "Want CodeCombat at your school?" + form_select_role: "Select primary role" + form_select_range: "Select class size" nav: play: "Levels" # The top nav bar entry where players choose which levels to play diff --git a/app/models/User.coffee b/app/models/User.coffee index d6dae48ef..9514092c2 100644 --- a/app/models/User.coffee +++ b/app/models/User.coffee @@ -150,13 +150,17 @@ module.exports = class User extends CocoModel getHomepageGroup: -> # Only testing on en-US so localization issues are not a factor - return 'new-home-student' unless _.string.startsWith(me.get('preferredLanguage', true) or 'en-US', 'en') + return 'home-legacy' unless _.string.startsWith(me.get('preferredLanguage', true) or 'en-US', 'en') return @homepageGroup if @homepageGroup - group = me.get('testGroupNumber') % 4 + group = parseInt(util.getQueryVariable('variation')) + group ?= me.get('testGroupNumber') % 5 @homepageGroup = switch group - when 0, 1 then 'new-home-characters' - when 2, 3 then 'new-home-student' - application.tracker.identify newHomepageGroup: @homepageGroup unless me.isAdmin() + when 0 then 'home-legacy' + when 1 then 'home-teachers' + when 2 then 'home-legacy-left' + when 3 then 'home-dropdowns' + when 4 then 'home-play-for-free' + application.tracker.identify homepageGroup: @homepageGroup unless me.isAdmin() return @homepageGroup # Signs and Portents was receiving updates after test started, and also had a big bug on March 4, so just look at test from March 5 on. diff --git a/app/styles/new-home-view.sass b/app/styles/new-home-view.sass index 84282f478..0a6930c64 100644 --- a/app/styles/new-home-view.sass +++ b/app/styles/new-home-view.sass @@ -38,10 +38,21 @@ margin-top: 170px #classroom-edition-header margin-top: 10px + #educator-header + white-space: nowrap + #students-header + line-height: 25px + margin-top: 40px + margin-bottom: -5px #learn-to-code-header margin-top: 80px &#ideal-tickets-well margin-top: 20px + .form-group + text-align: left + label + line-height: 14px + font-size: 12px @media (max-width: $screen-md-min) margin-top: 320px diff --git a/app/templates/new-home-view.jade b/app/templates/new-home-view.jade index dbd0aa6bb..b48d91eae 100644 --- a/app/templates/new-home-view.jade +++ b/app/templates/new-home-view.jade @@ -1,52 +1,141 @@ extends /templates/base-flat +mixin box + .well.text-center + if me.isAnonymous() == true + if ['home-legacy','home-legacy-left'].indexOf(view.variation) != -1 + h6#classroom-edition-header(data-i18n="new_home.classroom_edition") + div + button.teacher-btn.btn.btn-primary.btn-lg.btn-block(data-i18n="new_home.im_a_teacher") + div + a.btn.btn-forest.btn-lg.btn-block(href="/courses", data-i18n="new_home.im_a_student") + h6#learn-to-code-header(data-i18n="new_home.learn_to_code") + a.btn.btn-gold.btn-lg.btn-block.play-btn(href=view.playURL, data-i18n="new_home.play_now") + else if ['home-teachers','home-dropdowns'].indexOf(view.variation) != -1 + h5#educator-header(data-i18n="new_home.teachers") + p.small(data-i18n="new_home.class_in_box") + + if view.variation == 'home-dropdowns' + div.form-group + h6.control-label(data-i18n="new_home.role") + select.form-control#request-form-role + option(value="", data-i18n="new_home.form_select_role") + option(data-i18n="courses.teacher", value="Teacher") + option(data-i18n="teachers_quote.tech_coordinator", value="Technology coordinator") + option(data-i18n="teachers_quote.advisor", value="Advisor") + option(data-i18n="teachers_quote.principal", value="Principal") + option(data-i18n="teachers_quote.superintendent", value="Superintendent") + option(data-i18n="teachers_quote.parent", value="Parent") + div.form-group + h6.control-label(data-i18n="new_home.student_count") + select.form-control#request-form-range + option(value="", data-i18n="new_home.form_select_range") + option 1-10 + option 11-50 + option 51-100 + option 101-200 + option 201-500 + option 501-1000 + option 1000+ + div + button.btn.btn-forest.btn-lg.btn-block.request-demo(href="#",data-i18n="new_home.get_started") + else + div + button.teacher-btn.btn.btn-forest.btn-lg.btn-block(data-i18n="new_home.get_started") + + if view.variation == 'home-teachers' + h5#students-header(data-i18n="new_home.students") + div + button.join-class.btn.btn-primary.btn-lg.btn-block(data-i18n="new_home.join_class", href="/courses") + div + a.btn.btn-default.btn-lg.btn-block.play-btn(href=view.playURL, data-i18n="new_home.play_now") + else + h6#students-header(data-i18n="new_home.students_and_players") + div + a.btn.btn-primary.btn-lg.play-btn.btn-block(href=view.playURL, data-i18n="new_home.play_now") + else + h5#educator-header(data-i18n="new_home.start_playing_for_free") + div + a.btn.btn-forest.btn-lg.btn-block.play-btn(href=view.playURL, data-i18n="new_home.play_now") + div + button.join-class.btn.btn-default.btn-lg.btn-block(data-i18n="new_home.join_class", href="/courses") + + + h6#classroom-edition-header(style="padding-top: 20px",data-i18n="new_home.teachers_and_educators") + p.small(data-i18n="new_home.class_in_box") + button.teacher-btn.btn.btn-primary.btn-lg.btn-block(data-i18n="new_home.get_started") + + + if ['home-teachers','home-dropdowns','home-play-for-free'].indexOf(view.variation) != -1 + p.small + span(data-i18n="new_home.login_switch") + span   + a.login-button(data-i18n="login.log_in", href="#") + else + h6#classroom-edition-header(data-i18n="new_home.logged_in_as") + p.small #{me.get("email")} + if me.isTeacher() + div + button.teacher-btn.btn.btn-forest.btn-lg.btn-block(data-i18n="new_home.goto_classes") + div + if false + h6(data-i18n="new_home.check_out_wiki") + a.btn.btn-primary.btn-lg.btn-block(href="https://sites.google.com/a/codecombat.com/teacher-guides/course-guides", data-i18n="new_home.educator_wiki") + else + h6(data-i18n="new_home.want_coco") + button.teacher-btn.btn.btn-primary.btn-lg.btn-block(data-i18n="new_home.get_started") + + else if view.justPlaysCourses() + div + button.teacher-btn.btn.btn-forest.btn-lg.btn-block(data-i18n="new_home.goto_classes") + div + a.btn.btn-primary.btn-lg.btn-block(href="https://sites.google.com/a/codecombat.com/teacher-guides/course-guides", data-i18n="new_home.educator_wiki") + + else + div + a.btn.btn-forest.btn-lg.btn-block.play-btn(href=view.playURL, data-i18n="courses.continue_playing") + div + a.btn.btn-primary.btn-lg.btn-block(href="/user/#{me.getSlugOrID()}", data-i18n="new_home.view_profile") + + p.small + span(data-i18n="courses.not_you") + span   + a.logout-btn(data-i18n="login.log_out", href="#") + + if (me.get('preferredLanguage', true) || 'en-US').split('-')[0] == 'nl' + .well#ideal-tickets-well.text-center.hidden-xs.hidden-sm + h6 Thuis versie: + a.btn.btn-purple.btn-lg.btn-block(href="http://codecombat.nl/kopen") Prepaid codes (iDeal) + + block content - .container-fluid#jumbotron-container-fluid(class=view.jumbotron === 'student' ? 'alt-image' : '') + .container-fluid#jumbotron-container-fluid.alt-image .container - .row + .row.hidden-sm.hidden-xs + case view.variation + when 'home-legacy-left' + .col-lg-3.col-md-4 + +box + .col-lg-7.col-lg-offset-2.col-md-8 + h1(data-i18n="new_home.slogan") + default + .col-lg-7.col-md-8 + h1(data-i18n="new_home.slogan") + .col-lg-3.col-lg-offset-2.col-md-4 + +box + .row.hidden-lg.hidden-md .col-lg-7.col-md-8 - h1(data-i18n="new_home.slogan") - - .col-lg-3.col-lg-offset-2.col-md-4 - .well.text-center.hidden-md.hidden-lg - .row - .col-xs-8 - h6(data-i18n="new_home.classroom_edition") - .col-xs-4 - h6(data-i18n="new_home.learn_to_code") - .row - .col-xs-4 - button#teacher-btn.btn.btn-primary.btn-lg.btn-block(data-i18n="new_home.teacher") - .col-xs-4 - a.btn.btn-forest.btn-lg.btn-block(href="/courses", data-i18n="new_home.student") - .col-xs-4 - a.btn.btn-gold.btn-lg.btn-block(href=view.playURL, data-i18n="new_home.play_now") - if (me.get('preferredLanguage', true) || 'en-US').split('-')[0] == 'nl' - .row - .col-xs-12 - a.btn.btn-purple.btn-lg.btn-block(href="http://codecombat.nl/kopen") Koop prepaid codes (iDeal) - - .well.text-center.hidden-xs.hidden-sm - h6#classroom-edition-header(data-i18n="new_home.classroom_edition") - div - button#teacher-btn.btn.btn-primary.btn-lg.btn-block(data-i18n="new_home.im_a_teacher") - div - a.btn.btn-forest.btn-lg.btn-block(href="/courses", data-i18n="new_home.im_a_student") - - h6#learn-to-code-header(data-i18n="new_home.learn_to_code") - a.btn.btn-gold.btn-lg.btn-block(href=view.playURL, data-i18n="new_home.play_now") - - if (me.get('preferredLanguage', true) || 'en-US').split('-')[0] == 'nl' - .well#ideal-tickets-well.text-center.hidden-xs.hidden-sm - h6 Thuis versie: - a.btn.btn-purple.btn-lg.btn-block(href="http://codecombat.nl/kopen") Prepaid codes (iDeal) + h1(data-i18n="new_home.slogan",style="margin-top: 200px") + .col + div(style="margin: auto; max-width: 300px") + +box .row#learn-more-row .col-xs-12.text-center a#learn-more-link h6(data-i18n="new_home.learn_more") h2 - span.glyphicon.glyphicon-chevron-down + span.glyphicon.glyphicon-chevron-down .container#classroom-in-box-container diff --git a/app/views/NewHomeView.coffee b/app/views/NewHomeView.coffee index b1e658e0b..d418f0ccd 100644 --- a/app/views/NewHomeView.coffee +++ b/app/views/NewHomeView.coffee @@ -3,6 +3,8 @@ template = require 'templates/new-home-view' CocoCollection = require 'collections/CocoCollection' Course = require 'models/Course' utils = require 'core/utils' +storage = require 'core/storage' +{logoutUser, me} = require('core/auth') # TODO: auto margin feature paragraphs @@ -12,13 +14,16 @@ module.exports = class NewHomeView extends RootView template: template events: - 'click #play-btn': 'onClickPlayButton' + 'click .play-btn': 'onClickPlayButton' 'change #school-level-dropdown': 'onChangeSchoolLevelDropdown' - 'click #teacher-btn': 'onClickTeacherButton' + 'click .teacher-btn': 'onClickTeacherButton' 'click #learn-more-link': 'onClickLearnMoreLink' 'click .screen-thumbnail': 'onClickScreenThumbnail' 'click #carousel-left': 'onLeftPressed' 'click #carousel-right': 'onRightPressed' + 'click .request-demo': 'onClickRequestDemo' + 'click .join-class': 'onClickJoinClass' + 'click .logout-btn': 'logoutAccount' shortcuts: 'right': 'onRightPressed' @@ -26,9 +31,9 @@ module.exports = class NewHomeView extends RootView 'esc': 'onEscapePressed' initialize: (options) -> - @jumbotron = options.jumbotron or utils.getQueryVariable('jumbotron') or 'student' @courses = new CocoCollection [], {url: "/db/course", model: Course} @supermodel.loadCollection(@courses, 'courses') + @variation ?= me.getHomepageGroup() window.tracker?.trackEvent 'Homepage Loaded', category: 'Homepage' if @getQueryVariable 'hour_of_code' @@ -50,8 +55,30 @@ module.exports = class NewHomeView extends RootView onClickPlayButton: (e) -> @playSound 'menu-button-click' - return if @playURL isnt '/play' - window.tracker?.trackEvent 'Click Play', category: 'Homepage' + e.preventDefault() + e.stopImmediatePropagation() + window.tracker?.trackEvent 'Homepage Click Play', category: 'Homepage' + application.router.navigate @playURL, trigger: true + #window.open @playURL, '_blank' + + onClickRequestDemo: (e) -> + @playSound 'menu-button-click' + e.preventDefault() + e.stopImmediatePropagation() + window.tracker?.trackEvent 'Homepage Submit Jumbo Form', category: 'Homepage' + obj = storage.load('request-quote-form') + obj ?= {} + obj.role = @$('#request-form-role').val() + obj.numStudents = @$('#request-form-range').val() + storage.save('request-quote-form', obj) + application.router.navigate "/teachers/demo", trigger: true + + onClickJoinClass: (e) -> + @playSound 'menu-button-click' + e.preventDefault() + e.stopImmediatePropagation() + window.tracker?.trackEvent 'Homepage Click Join Class', category: 'Homepage' + application.router.navigate "/courses", trigger: true afterRender: -> @onChangeSchoolLevelDropdown() @@ -62,6 +89,10 @@ module.exports = class NewHomeView extends RootView }) super() + logoutAccount: -> + Backbone.Mediator.publish("auth:logging-out", {}) + logoutUser() + onChangeSchoolLevelDropdown: (e) -> levels = elementary: {'introduction-to-computer-science': '2-4', 'computer-science-5': '15-20', default: '10-15', total: '50-70 hours (about one year)'} @@ -83,9 +114,11 @@ module.exports = class NewHomeView extends RootView not me.get('stats')?.gamesCompleted and not me.get('heroConfig') onClickLearnMoreLink: -> + window.tracker?.trackEvent 'Homepage Click Learn More', category: 'Homepage' @scrollToLink('#classroom-in-box-container') onClickTeacherButton: -> + window.tracker?.trackEvent 'Homepage Click Teacher Button', category: 'Homepage' @scrollToLink('.request-demo-row', 600) onRightPressed: (event) ->