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

add yet unfinished curriculum overview to challengeMap

Browse Source
This commit is contained in:
Quincy Larson
2015-05-31 02:01:55 -07:00
parent 9dc504a99d
commit 5380a9ea74
8 changed files with 246 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
controllers/challengeMap.js
View File

@ -22,12 +22,11 @@ module.exports = {
var noDuplicatedChallenges = R.uniq(completedList);
var challengeList = resources.getChallengeMapForDisplay();
var completedChallengeList = noDuplicatedChallenges
.map(function(challenge) {
return challenge._id;
});
var challengeList = resources.getChallengeMapForDisplay(completedChallengeList);
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');

5
controllers/resources.js
View File

@ -72,13 +72,14 @@ Array.zip = function(left, right, combinerFunction) {
module.exports = {
getChallengeMapForDisplay: function() {
getChallengeMapForDisplay: function(completedChallengeList) {
if (!challengeMapForDisplay) {
challengeMapForDisplay = {};
Object.keys(challengeMap).forEach(function(key) {
challengeMapForDisplay[key] = {
name: challengeMap[key].name,
challenges: challengeMap[key].challenges
challenges: challengeMap[key].challenges,
completedCount: challengeMap[key].challenges //ToDo count number of uncompleted challenges
}
});
}

9
public/css/main.less
View File

@ -218,6 +218,11 @@ ul {
margin-bottom: -45px;
}
.negative-55 {
margin-top: -55px;
margin-bottom: -55px;
}
.negative-10 {
margin-top: -10px;
}
@ -906,10 +911,6 @@ iframe.iphone {
text-align: center;
}
.control-label .control-label-story-submission {
telt-align: left;
}
.img-story-post {
max-width: 110px;
max-height: 110px;

180
seed_data/challenges/basic-html5-and-css.json
View File

@ -398,13 +398,8 @@
"Classes are reusable styles that can be added to HTML elements.",
"Here's the anatomy of a CSS class:",
"<img class='img-responsive' alt='a diagram of how style tags are composed, which is also described in detail on the following lines.' src='https://www.evernote.com/l/AHSCzZV0l_dDLrqD8r9JsHaBWfEzdN0OpRwB/image.png'/>",
<<<<<<< HEAD
"Here you can see that we've created a CSS class called \"blue-text\" within the <code>&#60;style&#62;</code> tag.",
"You can apply a class to an HTML element like this: <code>&#60;h2 class=\"blue-text\"&#62;CatPhotoApp&#60;h2&#62;</code>",
=======
"You can see that we've created a CSS class called \"blue-text\" within the <code>&#60;style&#62;</code> tag.",
"You can apply a class to an HTML element like this: <code>&#60;h2 class=\"blue-text\"&#62;CatPhotoApp&#60;/h2&#62;</code>",
>>>>>>> d403204a3133042b8b7828f29ba1932674e71a66
"Note that in your CSS <code>style</code> element, classes should start with a period. In your HTML elements' class declarations, classes shouldn't start with a period.",
"Instead of creating a new <code>style</code> element, try removing the <code>h2</code> style declaration from your existing style element, then replace it with the class declaration for \".red-text\"."
],
@ -1643,7 +1638,7 @@
"name": "Waypoint: Add a Submit Button to a Form",
"difficulty": 0.041,
"description": [
"Add a submit button to your form field with type <code>submit</code> and a test value of \"Submit\".",
"Add a submit button to your <code>form</code> element with type \"submit\" and \"Submit\" as its text.",
"Let's add a submit button to your form. Clicking this button will send the data from your form to the URL you specified with your form's <code>action</code> attribute.",
"Here's an example submit button: <code>&#60;button type='submit'&#62;this button submits the form&#60;/button&#62;</code>"
],
@ -1949,7 +1944,7 @@
"descriptionPt": []
},
{
"_id": "bad87fee1348bd9aede08835",
"_id": "bad87fee1348bd9aede18835",
"name": "Waypoint: Clean up your form using Linebreaks",
"difficulty": 0.045,
"description": [
@ -2110,6 +2105,177 @@
"namePt": "",
"descriptionPt": []
},
{
"_id": "bad87fee1348bd9aede08835",
"name": "Waypoint: Wrap Many Elements within a Div Element",
"difficulty": 0.047,
"description": [
"Wrap your \"Things cats love\" and \"Things cats hate\" lists all within a single <code>div</code> element.",
"The <code>div</code> element, or \"Division\" element, is a general purpose container for other elements.",
"The <code>div</code> element is probably the most commonly used HTML element of all. It's useful for assigning classes down to all the elements that it contains.",
"Just like any other non-self-closing element, you can open a <code>div</code> element with <code>&#60;div&#62;</code> and close it on another line with <code>&#60;/div&#62;</code>.",
"Try putting your opening <code>div</code> tag above your \"Things cats love\" <code>p</code> element and your closing <code>div</code> tag after your closing <code>ol</code> tag so that both of your lists are within one div."
],
"tests": [
"assert($('div').children('ol').length > 0, 'Wrap your <code>ol</code> element inside your <code>div</code> element.')",
"assert($('div').children('p').length > 1, 'Wrap your <code>p</code> element inside your <code>div</code> element.')",
"assert($('div').children('ul').length > 0, 'Wrap your <code>ul</code> element inside your <code>div</code> element.')"
],
"challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
"<style>",
" .red-text {",
" color: red;",
" }",
"",
" h2 {",
" font-family: Lobster, Monospace;",
" }",
"",
" p {",
" font-size: 16px;",
" font-family: Monospace;",
" }",
"",
" .thick-green-border {",
" border-color: green;",
" border-width: 10px;",
" border-style: solid;",
" border-radius: 50%;",
" }",
"",
" .smaller-image {",
" width: 100px;",
" }",
"</style>",
"",
"<h2 class='red-text'>CatPhotoApp</h2>",
"",
"<p>Click here for <a href='#'>cat photos</a>.</p>",
"",
"<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
"",
"<p>Things cats love:</p>",
"<ul>",
" <li>cat nip</li>",
" <li>laser pointers</li>",
" <li>lasagna</li>",
"</ul>",
"<p>Top 3 things cats hate:</p>",
"<ol>",
" <li>flea treatment</li>",
" <li>thunder</li>",
" <li>other cats</li>",
"</ol>",
"",
"<form action=\"/submit-cat-photo\">",
" <label><input type='radio' name='indoor-outdoor' checked> Indoor</label>",
" <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
" <br>",
" <label><input type='checkbox' name='personality' checked> Loving</label>",
" <label><input type='checkbox' name='personality'> Lazy</label>",
" <label><input type='checkbox' name='personality'> Energetic</label>",
" <br>",
" <input type='text' placeholder='cat photo URL' required>",
" <button type='submit'>Submit</button>",
"</form>"
],
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"_id": "bad87fee1348bd9aede07836",
"name": "Waypoint: Give a Background Color to a Div Element",
"difficulty": 0.048,
"description": [
"Create a class called \"gray-background\" with the background color of gray. Assign this class to your <code>div</code> element.",
""
],
"tests": [
"assert($('div').children('ol').length > 0, 'Wrap your <code>ol</code> element inside your <code>div</code> element.')",
"assert($('div').children('p').length > 1, 'Wrap your <code>p</code> element inside your <code>div</code> element.')",
"assert($('div').children('ul').length > 0, 'Wrap your <code>ul</code> element inside your <code>div</code> element.')"
],
"challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
"<style>",
" .red-text {",
" color: red;",
" }",
"",
" h2 {",
" font-family: Lobster, Monospace;",
" }",
"",
" p {",
" font-size: 16px;",
" font-family: Monospace;",
" }",
"",
" .thick-green-border {",
" border-color: green;",
" border-width: 10px;",
" border-style: solid;",
" border-radius: 50%;",
" }",
"",
" .smaller-image {",
" width: 100px;",
" }",
"</style>",
"",
"<h2 class='red-text'>CatPhotoApp</h2>",
"",
"<p>Click here for <a href='#'>cat photos</a>.</p>",
"",
"<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
"",
"<p>Things cats love:</p>",
"<ul>",
" <li>cat nip</li>",
" <li>laser pointers</li>",
" <li>lasagna</li>",
"</ul>",
"<p>Top 3 things cats hate:</p>",
"<ol>",
" <li>flea treatment</li>",
" <li>thunder</li>",
" <li>other cats</li>",
"</ol>",
"",
"<form action=\"/submit-cat-photo\">",
" <label><input type='radio' name='indoor-outdoor' checked> Indoor</label>",
" <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
" <br>",
" <label><input type='checkbox' name='personality' checked> Loving</label>",
" <label><input type='checkbox' name='personality'> Lazy</label>",
" <label><input type='checkbox' name='personality'> Energetic</label>",
" <br>",
" <input type='text' placeholder='cat photo URL' required>",
" <button type='submit'>Submit</button>",
"</form>"
],
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"_id": "bad88fee1348bd9aedf08825",
"name": "Waypoint: Adjusting the Padding of an Element",

2
seed_data/challenges/bootstrap.json
View File

@ -599,7 +599,7 @@
"name": "Waypoint: Use the Bootstrap Grid to Put Elements Side By Side",
"difficulty": 0.054,
"description": [
"Put the \"like\", \"Info\" and \"Delete\" buttons side-by-side by wrapping all three of them within one <code>&#60;div class=\"row\"&#62;</code> element, then each of them within a <code>&#60;div class=\"col-xs-4\"&#62;</code> element.",
"Put the \"Like\", \"Info\" and \"Delete\" buttons side-by-side by wrapping all three of them within one <code>&#60;div class=\"row\"&#62;</code> element, then each of them within a <code>&#60;div class=\"col-xs-4\"&#62;</code> element.",
"Bootstrap uses a responsive grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a <code>div</code> element.",
"Here's a diagram of how Bootstrap's 12-column grid layout works:",
"<a href='http://getbootstrap.com/css/#grid-example-basic' target='_blank'><img class='img-responsive' src='https://www.evernote.com/l/AHTwlE2XCLhGFYJzoye_QfsF3ho6y87via4B/image.png'></a>",

2
seed_data/challenges/computer-science.json
View File

@ -162,7 +162,7 @@
"descriptionEs": [
"¡Ya casi completamos el curso de Introducción a la Informática!",
"Aprenderemos sobre una de la más importante invención del siglo 20 - la hoja de cálculo.",
"También aprenderemos sobre la Seguridad Informática y sobre algunas de las vulnerabilidades más comúnes en los sistemas de software."
"También aprenderemos sobre la Seguridad Informática y sobre algunas de las vulnerabilidades más comúnes en los sistemas de software.",
"Ingresa a <a href='https://class.stanford.edu/courses/Engineering/CS101/Summer2014/courseware/z229/z213/' target='_blank'>https://class.stanford.edu/courses/Engineering/CS101/Summer2014/courseware/z229/z213/</a> y completa la sexta y última semana del curso."
],
"namePt": "",

2
seed_data/challenges/get-set-for-free-code-camp.json
View File

@ -47,7 +47,7 @@
"description": [
"Now we're going to join the Free Code Camp chat room. You can come here any time of day to hang out, ask questions, or find another camper to pair program with.",
"Make sure your Free Code Camp account includes your email address. Please note that the email address you use will be invisible to the public, but Slack will make it visible to other campers in our slack chat rooms. You can do this here: <a href='/account' target='_blank'>http://freecodecamp.com/account</a>.",
"Click this link, which will email you an invite to Free Code Camp's Slack chat rooms: <a href='/api/slack' target='_blank'>http://freecodecamp.com/api/slack</a>.",
"Click this link, which will email you can invite to Free Code Camp's Slack chat rooms: <a href='/api/slack' target='_blank'>http://freecodecamp.com/api/slack</a>.",
"Now check your email and click the link in the email from Slack.",
"Complete the sign up process, then update your biographical information and upload an image. A picture of your face works best. This is how people will see you in our chat rooms, so put your best foot forward.",
"Now enter the General chat room and introduce yourself to our chat room by typing: \"Hello world!\".",

91
views/challengeMap/show.jade
View File

@ -19,39 +19,70 @@ block content
span.text-primary #{daysRunning} &thinsp;
| days ago.
.spacer
for challengeBlock in challengeList
.row
.col-xs-12.col-sm-8.col-sm-offset-2
h3 #{challengeBlock.name}
.row
.col-xs-12
ol
for challenge in challengeBlock.challenges
if completedChallengeList.indexOf(challenge._id) > -1
.row
.hidden-xs.col-sm-3.col-md-2.text-primary.ion-checkmark-circled.padded-ionic-icon.text-center.large-p.negative-10
.col-xs-12.col-sm-9.col-md-10
li.faded.large-p.negative-10
a(href="/challenges/#{challenge.name}")= challenge.name
.well
h2.text-center Curriculum Overview
.row
.col-xs-12.col-sm-8.col-sm-offset-2
h3 800 Hours of Practice:
ol
for challengeBlock in challengeList
.row
.hidden-xs.col-sm-3.col-md-2
span.negative-10
.col-xs-12.col-sm-9.col-md-10
li.large-p.negative-10
a(href='#' + challengeBlock.name)= challengeBlock.name
= challengeBlock.challenges.length
else
.row
.hidden-xs.col-sm-3.col-md-2
span.negative-10
.col-xs-12.col-sm-9.col-md-10
li.large-p.negative-10
a(href="/challenges/#{challenge.name}")= challenge.name
h3.text-center Nonprofit Projects (800 hours of real-world experience)*
.row
.col-xs-12.col-sm-8.col-sm-offset-2.negative-28
h3 800 Hours of &thinsp;
a(href="/nonprofits/directory") Real World Work Experience
| :
ol
.row
.hidden-xs.col-sm-3.col-md-2.ion-locked.padded-ionic-icon.text-center.large-p.negative-10
.col-xs-12.col-sm-9.col-md-10
li.large-p.negative-10 100-hour Nonprofit Project
.row
.hidden-xs.col-sm-3.col-md-2.ion-locked.padded-ionic-icon.text-center.large-p.negative-10
.col-xs-12.col-sm-9.col-md-10
li.large-p.negative-10 First 200-hour Nonprofit Project
.row
.hidden-xs.col-sm-3.col-md-2.ion-locked.padded-ionic-icon.text-center.large-p.negative-10
.col-xs-12.col-sm-9.col-md-10
li.large-p.negative-10 Second 200-hour Nonprofit Project
.row
.hidden-xs.col-sm-3.col-md-2.ion-locked.padded-ionic-icon.text-center.large-p.negative-10
.col-xs-12.col-sm-9.col-md-10
li.large-p.negative-10 300-hour Nonprofit Project
for challengeBlock in challengeList
.row
a(href='#' name=challengeBlock.name)
.spacer.negative-55
.row
.col-xs-12.col-sm-8.col-sm-offset-2
h3 #{challengeBlock.name}
.row
.col-xs-12
ul
.row
.hidden-xs.col-sm-3.col-md-2
span.negative-10
.col-xs-12.col-sm-9.col-md-10
li.large-p.negative-10
a(href="/nonprofits/directory") Browse our nonprofit projects
p * Complete all Waypoints, Bonfires, Ziplines and Basejumps to be assigned your first nonprofit project
ol
for challenge in challengeBlock.challenges
if completedChallengeList.indexOf(challenge._id) > -1
.row
.hidden-xs.col-sm-3.col-md-2.text-primary.ion-checkmark-circled.padded-ionic-icon.text-center.large-p.negative-10
.col-xs-12.col-sm-9.col-md-10
li.faded.large-p.negative-10
a(href="/challenges/#{challenge.name}")= challenge.name
else
.row
.hidden-xs.col-sm-3.col-md-2
span.negative-10
.col-xs-12.col-sm-9.col-md-10
li.large-p.negative-10
a(href="/challenges/#{challenge.name}")= challenge.name
#announcementModal.modal(tabindex='-1')
.modal-dialog.animated.fadeInUp.fast-animation