gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

improve challenge map look

Browse Source
This commit is contained in:
Michael Q Larson
2015-04-18 14:17:10 -07:00
parent 6106dfa31a
commit aacfb86e1f
4 changed files with 81 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
public/css/main.less
View File

@ -916,9 +916,18 @@ iframe.iphone {
padding-bottom: 10px;
}
.italic {
font-style: italic;
.faded {
opacity: 0.5;
}
.same-line {
display: inline-block;
}
.padded-ionic-icon {
padding-top: 5px;
}
//uncomment this to see the dimensions of all elements outlined in red
//* {
// border-color: red;

6
public/js/main.js
View File

@ -26,7 +26,7 @@ $(document).ready(function() {
$('.checklist-element').each(function() {
var checklistElementId = $(this).attr('id');
if(!!localStorage[checklistElementId]) {
$(this).children('.step-text').addClass('italic');
$(this).children('.step-text').addClass('faded');
$(this).children().children('input').trigger('click');
}
});
@ -45,13 +45,13 @@ $(document).ready(function() {
$('.challenge-list-checkbox').on('change', function() {
var checkboxId = $(this).parent().parent().attr('id');
if ($(this).is(":checked")) {
$(this).parent().parent().children('.step-text').addClass('italic');
$(this).parent().parent().children('.step-text').addClass('faded');
if (!localStorage || !localStorage[checkboxId]) {
localStorage[checkboxId] = true;
}
}
if (!$(this).is(":checked")) {
$(this).parent().parent().children('.step-text').removeClass('italic');
$(this).parent().parent().children('.step-text').removeClass('faded');
if (localStorage[checkboxId]) {
localStorage.removeItem(checkboxId);
}

16
seed_data/coursewares.json
View File

@ -662,7 +662,7 @@
"<span class='text-info'>Hint:</span> Here's an example call to Twitch.tv's JSON API: <code>https://api.twitch.tv/kraken/streams/freecodecamp</code>.",
"<span class='text-info'>Hint:</span> The relevant documentation about this API call is here: <a href='https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel' target='_blank'>https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel</a>.",
"<span class='text-info'>Hint:</span> Here's an array of the Twitch.tv usernames of people who regularly stream coding: <code>[\"freecodecamp\", \"storbeck\", \"terakilobyte\", \"habathcx\",\"notmichaelmcdonald\",\"RobotCaleb\",\"comster404\",\"brunofin\",\"thomasballinger\",\"joe_at_underflow\",\"noobs2ninjas\",\"mdwasp\",\"beohoff\",\"xenocomagain\"]</code>",
"When you are finished, click the \"I've completed this challenge\" button and include a link to your Codepen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
"When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
"If you'd like immediate feedback on your project, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.<a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>."
],
"challengeType": 3,
@ -681,7 +681,7 @@
"Here are the <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> you must enable, and optional bonus user stories:",
"<span class='text-info'>User Story:</span> As a user, I can click a button to show me a new random quote.",
"<span class='text-info'>Bonus User Story:</span> As a user, I can press a button to tweet out a quote.",
"When you are finished, click the \"I've completed this challenge\" button and include a link to your Codepen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
"When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
"If you'd like immediate feedback on your project, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.<a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>."
],
"challengeType": 3,
@ -704,7 +704,7 @@
"<span class='text-info'>Bonus User Story:</span> As a user, I can push a button to toggle between Fahrenheit and Celsius.",
"<span class='text-info'>Hint:</span> Get a zipcode's weather (in Kelvin) at <code>http://api.openweathermap.org/data/2.5/weather?q=99705</code>.",
"<span class='text-info'>Hint:</span> Get your current user's zipcode (based on their IP address) with this line of jQuery: <code>$.get(\"http://ipinfo.io\", function(response) {}, \"jsonp\");</code>",
"When you are finished, click the \"I've completed this challenge\" button and include a link to your Codepen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
"When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
"If you'd like immediate feedback on your project, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.<a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>."
],
"challengeType": 3,
@ -726,7 +726,7 @@
"<span class='text-info'>User Story:</span> As a user, I can click on a link on that post and be taken to the post's discussion page.",
"<span class='text-info'>Bonus User Story:</span> As a user, I can see how many upvotes each story has.",
"<span class='text-info'>Hint:</span> Here's the Camper News Hot Stories API endpoint: <code>http://www.freecodecamp.com/stories/hotStories</code>.",
"When you are finished, click the \"I've completed this challenge\" button and include a link to your Codepen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
"When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
"If you'd like immediate feedback on your project, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.<a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>."
],
"challengeType": 3,
@ -746,7 +746,7 @@
"<span class='text-info'>User Story:</span> As a user, I can start a 25 minute pomodoro, and the timer will go off once 25 minutes have elapsed.",
"<span class='text-info'>Bonus User Story:</span> As a user, I can reset the clock for my next pomodoro.",
"<span class='text-info'>Bonus User Story:</span> As a user, I can customize the length of each pomodoro.",
"When you are finished, click the \"I've completed this challenge\" button and include a link to your Codepen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
"When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
"If you'd like immediate feedback on your project, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.<a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>."
],
"challengeType": 3,
@ -766,7 +766,7 @@
"<span class='text-info'>User Story:</span> As a user, I can add, subtract, multiply and divide two numbers.",
"<span class='text-info'>Bonus User Story:</span> I can clear the input field with a clear button.",
"<span class='text-info'>Bonus User Story:</span> I can keep chaining mathematical operations together until I hit the clear button and it will tell me the correct output.",
"When you are finished, click the \"I've completed this challenge\" button and include a link to your Codepen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
"When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
"If you'd like immediate feedback on your project, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.<a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>."
],
"challengeType": 3,
@ -774,7 +774,7 @@
},
{
"_id": "bd7158d8c442eddfaeb5bd1c",
"name": "Zipline: ",
"name": "Zipline: Build a Tic Tac Toe Game",
"difficulty": 1.07,
"challengeSeed": "123488494",
"description": [
@ -787,7 +787,7 @@
"<span class='text-info'>Bonus User Story:</span> As a user, my game will reset as soon as it's over so I can play again.",
"<span class='text-info'>Bonus User Story:</span> As a user, I can choose whether I want to play as X or O.",
"<span class='text-info'>Hint:</span> Here's an example call to Twitch.tv's JSON API: <code>https://api.twitch.tv/kraken/streams/freecodecamp</code>.",
"When you are finished, click the \"I've completed this challenge\" button and include a link to your Codepen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
"When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
"If you'd like immediate feedback on your project, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.<a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>."
],
"challengeType": 3,

86
views/challengeMap/show.jade
View File

@ -6,66 +6,98 @@ block content
h1 Challenge Map
.panel-body
.row
.col-xs-12.col-sm-12.col-md-8.col-md-offset-2
h3 You must complete all of these challenges before you can start working on nonprofit projects.
h3 You should complete these in order from top to bottom.
.col-xs-12.col-sm-12.col-md-10.col-md-offset-2
h3 Complete all of these challenges from top to bottom.
h3 Then we'll assign you to your first nonprofit project.
h2
span.fa.fa-flag
| &nbsp; Waypoints (web development lessons)
| &nbsp; Waypoints (200 hours of lessons)
.col-xs-12
h3.negative-15
ol
for waypoint in waypoints
if completedCoursewareList.indexOf(waypoint._id) > -1
li.strikethrough
a(href="/challenges/#{waypoint.name}")= waypoint.name
.row
.hidden-xs.col-sm-3.col-md-2.text-primary.ion-checkmark-circled.padded-ionic-icon.text-center
.col-xs-12.col-sm-9.col-md-10
li.faded
a(href="/challenges/#{waypoint.name}")= waypoint.name
else
li
a(href="/challenges/#{waypoint.name}")= waypoint.name
.row
.hidden-xs.col-sm-3.col-md-2
span
.col-xs-12.col-sm-9.col-md-10
li
a(href="/challenges/#{waypoint.name}")= waypoint.name
h2
span.ion-bonfire
| &nbsp; Bonfires (algorithm practice)
| &nbsp; Bonfires (200 hours of JavaScript algorithm practice)
.col-xs-12
h3.negative-15
ol
for bonfire in bonfires
if completedBonfireList.indexOf(bonfire._id) > -1
li.strikethrough
a(href="/bonfires/#{bonfire.name}")= bonfire.name
.row
.hidden-xs.col-sm-3.col-md-2.text-primary.ion-checkmark-circled.padded-ionic-icon.text-center
.col-xs-12.col-sm-9.col-md-10
li.faded
a(href="/bonfires/#{bonfire.name}")= bonfire.name
else
li
a(href="/bonfires/#{bonfire.name}")= bonfire.name
.row
.hidden-xs.col-sm-3.col-md-2
span
.col-xs-12.col-sm-9.col-md-10
li
a(href="/bonfires/#{bonfire.name}")= bonfire.name
h2
span.fa.fa-angle-double-right
| &nbsp; Ziplines (front end development practice)
| &nbsp; Ziplines (200 hours of front end development)
.col-xs-12
h3.negative-15
ol
for zipline in ziplines
if completedCoursewareList.indexOf(zipline._id) > -1
li.strikethrough
a(href="/challenges/#{zipline.name}")= zipline.name
.row
.hidden-xs.col-sm-3.col-md-2.text-primary.ion-checkmark-circled.padded-ionic-icon.text-center
.col-xs-12.col-sm-9.col-md-10
li.faded
a(href="/challenges/#{zipline.name}")= zipline.name
else
li
a(href="/challenges/#{zipline.name}")= zipline.name
.row
.hidden-xs.col-sm-3.col-md-2
span
.col-xs-12.col-sm-9.col-md-10
li
a(href="/challenges/#{zipline.name}")= zipline.name
h2
span.fa.fa-level-down
| &nbsp; Basejumps (full stack development practice)
| &nbsp; Basejumps (200 hours of full stack development)
.col-xs-12
h3.negative-15
ol
for basejump in basejumps
if completedCoursewareList.indexOf(basejump._id) > -1
li.strikethrough
a(href="/challenges/#{basejump.name}")= basejump.name
.row
.hidden-xs.col-sm-3.col-md-2.text-primary.ion-checkmark-circled.padded-ionic-icon.text-center
.col-xs-12.col-sm-9.col-md-10
li.faded
a(href="/challenges/#{basejump.name}")= basejump.name
else
li
a(href="/challenges/#{basejump.name}")= basejump.name
.row
.hidden-xs.col-sm-3.col-md-2
span
.col-xs-12.col-sm-9.col-md-10
li
a(href="/challenges/#{basejump.name}")= basejump.name
h2
span.ion-ios-heart
| &nbsp; Nonprofit Projects
span.ion-ios-heart &nbsp; Nonprofit Projects (800 hours of real-world experience)
h3.negative-15
ul
li
a(href="/nonprofits/directory") Browse our nonprofit projects
.row
.hidden-xs.col-sm-3.col-md-2
span
.col-xs-12.col-sm-9.col-md-10
li
a(href="/nonprofits/directory") Browse our nonprofit projects