mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2024-11-27 09:35:39 -05:00
New homepage variations.
This commit is contained in:
Rob Blanckaert
Rob
parent
914e7eb487
commit
9da65cdcff
6 changed files with 203 additions and 52 deletions
|
|
@ -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')
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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) ->
|
||||
|
|
|
|||
Loading…
Reference in a new issue