mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2025-04-26 05:53:39 -04:00
Update course info mock UI
This commit is contained in:
parent
899aae5798
commit
49a75d2d42
3 changed files with 67 additions and 41 deletions
app
styles/courses/mock1
templates/courses/mock1
views/courses/mock1
|
@ -6,6 +6,9 @@
|
|||
.center
|
||||
text-align: center
|
||||
|
||||
.caption-text
|
||||
font-size: 14px
|
||||
|
||||
.concepts-container
|
||||
width: 200px
|
||||
|
||||
|
@ -15,13 +18,14 @@
|
|||
|
||||
.info-container
|
||||
margin: 0% 10%
|
||||
font-size: 18px
|
||||
|
||||
.monitoring-img-container
|
||||
margin-top: 10px
|
||||
|
||||
.praise-quote
|
||||
font-size: 24px
|
||||
font-style: italic
|
||||
|
||||
.praise-source
|
||||
font-size: 16px
|
||||
|
||||
.progress-container
|
||||
width: 200px
|
||||
font-size: 20px
|
||||
|
|
|
@ -4,55 +4,77 @@ block content
|
|||
|
||||
//- DO NOT localize / i18n
|
||||
|
||||
div TODO: Add high-level blurb
|
||||
div TODO: course-specific gameplay screenshots
|
||||
div TODO: update images, add captions
|
||||
div TODO: Add real marketing copy.
|
||||
div
|
||||
span *UNDER CONSTRUCTION, send feedback to
|
||||
a.spl(href='mailto:team@codecombat.com') team@codecombat.com
|
||||
div(style='border-bottom: 1px solid black; margin-bottom: 20px')
|
||||
|
||||
|
||||
.well.info-container
|
||||
.info-container
|
||||
h1.center= course.title
|
||||
|
||||
p.center.gameplay-img-container
|
||||
img(src='/images/pages/courses/102_info.png' width='700')
|
||||
img(src='/images/pages/courses/102_info.png' width='800')
|
||||
div.center.caption-text TODO: Add caption
|
||||
p= course.description
|
||||
|
||||
h1.center Learn More in Less Time
|
||||
p
|
||||
span.spr Your students will learn
|
||||
strong.spr more computer science
|
||||
span.spr material in
|
||||
strong.spr less time
|
||||
span with CodeCombat!
|
||||
p
|
||||
span.spr In about
|
||||
strong.spr #{course.duration} hours
|
||||
span.spr your students will work through
|
||||
strong.spr #{course.levels.length} lessons
|
||||
span and cover these high-level topics:
|
||||
p
|
||||
span Approximately
|
||||
strong.spl 5 hours
|
||||
span.spl of content.
|
||||
ul
|
||||
each topic in course.topics
|
||||
li= topic
|
||||
|
||||
h1.center No Experience Necesssary
|
||||
p
|
||||
span.spr Concepts covered:
|
||||
each topic in course.topics
|
||||
span.spr= topic
|
||||
strong.spr No outside experience
|
||||
span is needed for students to complete this course. They will pick up where the left off from the previous CodeCombat course.
|
||||
p
|
||||
strong.spr Teachers do not need programming experience
|
||||
span to administer this course. Your students will learn on their own.
|
||||
p
|
||||
span.spr There are built-in
|
||||
strong.spr help videos, level guides, tool tips
|
||||
span to explain everything to your students.
|
||||
p
|
||||
span.spr Use
|
||||
strong.spr student progress monitoring
|
||||
span to match up stronger students with those that need a little extra help!
|
||||
|
||||
h1.center Monitor Student Progress
|
||||
p.center.monitoring-img-container
|
||||
img(src='/images/pages/clans/dashboard_preview.png' width='700')
|
||||
div.container-fluid
|
||||
div.row
|
||||
div.col-md-3
|
||||
div.col-md-6
|
||||
ul
|
||||
li
|
||||
strong Track concepts
|
||||
span.spl learned by each student
|
||||
li Track levels completed for each student
|
||||
li
|
||||
span See your students'
|
||||
strong.spl solutions
|
||||
li Sort students by name or progress
|
||||
div.col-md-3
|
||||
div.center.caption-text TODO: Add caption
|
||||
p.progress-container
|
||||
ul
|
||||
li
|
||||
strong Track concepts
|
||||
span.spl learned by each student
|
||||
li Track levels completed for each student
|
||||
li
|
||||
span See your students'
|
||||
strong.spl solutions
|
||||
li Sort students by name or progress
|
||||
|
||||
h1.center Teachers Love CodeCombat!
|
||||
p
|
||||
div.praise-quote "#{praise.quote}"
|
||||
div.praise-source - #{praise.source}
|
||||
div.caption-text - #{praise.source}
|
||||
|
||||
p.center
|
||||
button.btn.btn-info.btn-lg.btn-enroll(data-course-id="#{courseID}") Enroll
|
||||
button.btn.btn-info.btn-lg.btn-enroll(data-course-id="#{courseID}") Enroll Now
|
||||
|
||||
p.contact-container
|
||||
span For more information, please contact
|
||||
|
|
|
@ -26,63 +26,63 @@ data.courses = [
|
|||
title: 'Introduction to Computer Science'
|
||||
description: 'Learn basic syntax, while loops, and the CodeCombat learning environment.'
|
||||
topics: ['Basic Syntax', 'Strings', 'Loops']
|
||||
duration: '1 hour of material'
|
||||
duration: 1
|
||||
levels: ['Dungeons of Kithgard', 'Gems in the Deep', 'Shadow Guard', 'Kounter Kithwise', 'Crawlways of Kithgard', 'Enemy Mine', 'Illusory Interruption', 'Forgetful Gemsmith', 'Signs and Portents', 'Favorable Odds', 'True Names', 'The Prisoner', 'Banefire', 'The Raised Sword', 'Haunted Kithmaze', 'Riddling Kithmaze', 'Descending Further', 'The Second Kithmaze', 'Dread Door', 'Cupboards of Kithgard', 'Hack and Dash']
|
||||
},
|
||||
{
|
||||
title: 'Computer Science 102'
|
||||
description: 'Add parameters, if statements, and some other stuff.'
|
||||
description: 'Computer Science 102 introduces Arguments, Variables, If Statements, and Arithmetic.'
|
||||
topics: ['Arguments', 'Variables', 'If Statements', 'Arithmetic']
|
||||
duration: '5 hours of material'
|
||||
duration: 5
|
||||
levels: ['Known Enemy', 'Master of Names', 'Lowly Kithmen', 'Closing the Distance', 'Tactical Strike', 'The Final Kithmaze', 'The Gauntlet', 'Radiant Aura', 'Kithgard Gates', 'Destroying Angel', 'Deadly Dungeon Rescue', 'Kithgard Brawl', 'Cavern Survival', 'Breakout', 'Attack Wisely!', 'Kithgard Mastery', 'Kithgard Apprentice', 'Long Kithmaze', 'Boom! and Bust', 'Defense of Plainswood', 'Winding Trail', 'Thumb Biter', 'Gems or Death', 'Backwoods Ambush', 'Patrol Buster', 'Endangered Burl', 'Village Guard', 'Thornbush Farm', 'Back to Back', 'Ogre Encampment', 'Woodland Cleaver', 'Shield Rush', 'Peasant Protection', 'Munchkin Swarm']
|
||||
},
|
||||
{
|
||||
title: 'Computer Science 103'
|
||||
description: 'Learn how to handle input.'
|
||||
topics: ['If Statements', 'Arithmetic', 'Input Handling']
|
||||
duration: '5 hours of material'
|
||||
duration: 5
|
||||
levels: ['Munchkin Harvest', 'Swift Dagger', 'Shrapnel', 'Arcane Ally', 'Touch of Death', 'Bonemender', 'Coinucopia', 'Copper Meadows', 'Drop the Flag', 'Deadly Pursuit', 'Rich Forager', 'Siege of Stonehold', 'Multiplayer Treasure Grove', 'Dueling Grounds', 'Backwoods Brawl', 'Backwoods Treasure', 'Range Finder', 'Stillness in Motion', 'The Agrippa Defense', 'Storming the Towers of Areth', 'Hold the Forest Pass', 'Hold for Reinforcements', 'Storming the Farmhouse', 'Wild Horses', 'Boulder Woods', 'Unfair Support', 'Tactical Timing', 'Apocalypse', 'Doom Glade', 'Defend the Garrison', 'Lost Viking', 'Forest Flower Grove', 'The Dunes', 'The Mighty Sand Yak', 'Oasis', 'Sarven Road', 'Sarven Gaps', 'Thunderhooves', 'Medical Attention', 'The Great Yak Stampede', 'Minesweeper', 'Sarven Sentry', 'Keeping Time']
|
||||
},
|
||||
{
|
||||
title: 'Computer Science 104'
|
||||
description: 'Time to tackle arrays and some pvp stuff.'
|
||||
topics: ['Loops', 'Break Statements', 'Arrays']
|
||||
duration: '5 hours of material'
|
||||
duration: 5
|
||||
levels: ['Hoarding Gold', 'Decoy Drill', 'Yakstraction', 'Sarven Brawl', 'Desert Combat', 'Dust', 'Sarven Rescue', 'Sacred Statue', 'Mirage Maker', 'Sarven Savior', 'Odd Sandstorm', 'Lurkers', 'Preferential Treatment', 'Sarven Shepherd', 'Shine Getter', 'The Trials', 'Mad Maxer', 'Mad Maxer Strikes Back', 'Mad Maxer Sells Out', 'Mad Maxer Gets Greedy', 'Mad Maxer: Redemption', 'Sarven Treasure', 'Harrowland', 'Sarven Siege', 'Clash of Clones', 'Sand Snakes', 'Crag Tag']
|
||||
},
|
||||
{
|
||||
title: 'Computer Science 105'
|
||||
description: 'Time to tackle arrays and some PVP.'
|
||||
topics: ['Break Statements', 'Arrays', 'Object Literals']
|
||||
duration: '5 hours of material'
|
||||
duration: 5
|
||||
levels: ['Slalom', 'Black Diamond', 'Treasure Cave', 'Ogre Gorge Gouger', 'Dance-Off', 'Alpine Rally', 'Cloudrip Commander', 'Mountain Mercenaries']
|
||||
},
|
||||
{
|
||||
title: 'Computer Science 106'
|
||||
description: 'For loops!'
|
||||
topics: ['Break Statements', 'Object Literals', 'For loops']
|
||||
duration: '5 hours of material'
|
||||
duration: 5
|
||||
levels: ['Timber Guard', 'Hunting Party', 'Zoo Keeper', 'Cloudrip Brawl', 'Cloudrip Treasure', 'Cloudrip Siege', 'Noble Sacrifice', 'Zero Sum', 'Borrowed Sword', 'Protect and Serve']
|
||||
},
|
||||
{
|
||||
title: 'Computer Science 107'
|
||||
description: 'Functions!'
|
||||
topics: ['Object Literals', 'For loops', 'Functions']
|
||||
duration: '5 hours of material'
|
||||
duration: 5
|
||||
levels: ['Vital Powers', 'Timber Turncoat', 'Restless Dead', 'Ring Bearer', 'The Two Flowers', 'The Geometry of Flowers', 'Mountain Flower Grove', 'Hunters and Prey', 'Library Tactician']
|
||||
},
|
||||
{
|
||||
title: 'Computer Science 108'
|
||||
description: 'Maths.'
|
||||
topics: ['For loops', 'Functions', 'Math Operations']
|
||||
duration: '5 hours of material'
|
||||
duration: 5
|
||||
levels: ['Steelclaw Gap', 'Pesky Yaks', 'Mixed Unit Tactics', 'Sowing Fire', 'Reaping Fire', 'Toil and Trouble', 'What in Carnation', 'Misty Island Mine', 'Raiders of the Long Dark', 'Grim Determination', 'Deadly Discs', "Summit's Gate"]
|
||||
},
|
||||
{
|
||||
title: 'Computer Science 109'
|
||||
description: 'Vectors and strings.'
|
||||
topics: ['Vectors', 'Advanced Strings']
|
||||
duration: '5 hours of material'
|
||||
duration: 5
|
||||
levels: ['Circle Walking', 'Skating Away', 'Kelvintaph Crusader', 'Kelvintaph Burgler', 'Ice Soccer', 'Razorfray']
|
||||
}
|
||||
]
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue