From 5380a9ea747b5bd3de11a07f54583c50b78a6f3f Mon Sep 17 00:00:00 2001 From: Quincy Larson Date: Sun, 31 May 2015 02:01:55 -0700 Subject: [PATCH] add yet unfinished curriculum overview to challengeMap --- controllers/challengeMap.js | 3 +- controllers/resources.js | 5 +- public/css/main.less | 9 +- seed_data/challenges/basic-html5-and-css.json | 180 +++++++++++++++++- seed_data/challenges/bootstrap.json | 2 +- seed_data/challenges/computer-science.json | 2 +- .../get-set-for-free-code-camp.json | 2 +- views/challengeMap/show.jade | 91 ++++++--- 8 files changed, 246 insertions(+), 48 deletions(-) diff --git a/controllers/challengeMap.js b/controllers/challengeMap.js index 9c9eb36bac..210586f190 100644 --- a/controllers/challengeMap.js +++ b/controllers/challengeMap.js @@ -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, ','); diff --git a/controllers/resources.js b/controllers/resources.js index 28030eacf1..30bf362f5d 100644 --- a/controllers/resources.js +++ b/controllers/resources.js @@ -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 } }); } diff --git a/public/css/main.less b/public/css/main.less index 2a5cf1f433..dc43261bfa 100644 --- a/public/css/main.less +++ b/public/css/main.less @@ -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; diff --git a/seed_data/challenges/basic-html5-and-css.json b/seed_data/challenges/basic-html5-and-css.json index 12f5fce01f..7b85715f5b 100644 --- a/seed_data/challenges/basic-html5-and-css.json +++ b/seed_data/challenges/basic-html5-and-css.json @@ -398,13 +398,8 @@ "Classes are reusable styles that can be added to HTML elements.", "Here's the anatomy of a CSS class:", "a diagram of how style tags are composed, which is also described in detail on the following lines.", -<<<<<<< HEAD - "Here you can see that we've created a CSS class called \"blue-text\" within the <style> tag.", - "You can apply a class to an HTML element like this: <h2 class=\"blue-text\">CatPhotoApp<h2>", -======= "You can see that we've created a CSS class called \"blue-text\" within the <style> tag.", "You can apply a class to an HTML element like this: <h2 class=\"blue-text\">CatPhotoApp</h2>", ->>>>>>> d403204a3133042b8b7828f29ba1932674e71a66 "Note that in your CSS style 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 style element, try removing the h2 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 submit and a test value of \"Submit\".", + "Add a submit button to your form 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 action attribute.", "Here's an example submit button: <button type='submit'>this button submits the form</button>" ], @@ -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 div element.", + "The div element, or \"Division\" element, is a general purpose container for other elements.", + "The div 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 div element with <div> and close it on another line with </div>.", + "Try putting your opening div tag above your \"Things cats love\" p element and your closing div tag after your closing ol tag so that both of your lists are within one div." + ], + "tests": [ + "assert($('div').children('ol').length > 0, 'Wrap your ol element inside your div element.')", + "assert($('div').children('p').length > 1, 'Wrap your p element inside your div element.')", + "assert($('div').children('ul').length > 0, 'Wrap your ul element inside your div element.')" + ], + "challengeSeed": [ + "", + "", + "", + "

CatPhotoApp

", + "", + "

Click here for cat photos.

", + "", + "", + "", + "

Things cats love:

", + "", + "

Top 3 things cats hate:

", + "
    ", + "
  1. flea treatment
    2. ", + "
  2. thunder
    3. ", + "
  3. other cats
    4. ", + "
", + "", + "
", + " ", + " ", + "
", + " ", + " ", + " ", + "
", + " ", + " ", + "
" + ], + "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 div element.", + "" + ], + "tests": [ + "assert($('div').children('ol').length > 0, 'Wrap your ol element inside your div element.')", + "assert($('div').children('p').length > 1, 'Wrap your p element inside your div element.')", + "assert($('div').children('ul').length > 0, 'Wrap your ul element inside your div element.')" + ], + "challengeSeed": [ + "", + "", + "", + "

CatPhotoApp

", + "", + "

Click here for cat photos.

", + "", + "", + "", + "

Things cats love:

", + "", + "

Top 3 things cats hate:

", + "
    ", + "
  1. flea treatment
    2. ", + "
  2. thunder
    3. ", + "
  3. other cats
    4. ", + "
", + "", + "
", + " ", + " ", + "
", + " ", + " ", + " ", + "
", + " ", + " ", + "
" + ], + "challengeType": 0, + "nameCn": "", + "descriptionCn": [], + "nameFr": "", + "descriptionFr": [], + "nameRu": "", + "descriptionRu": [], + "nameEs": "", + "descriptionEs": [], + "namePt": "", + "descriptionPt": [] + }, { "_id": "bad88fee1348bd9aedf08825", "name": "Waypoint: Adjusting the Padding of an Element", diff --git a/seed_data/challenges/bootstrap.json b/seed_data/challenges/bootstrap.json index 58d8aa5dbe..c20cf49429 100644 --- a/seed_data/challenges/bootstrap.json +++ b/seed_data/challenges/bootstrap.json @@ -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 <div class=\"row\"> element, then each of them within a <div class=\"col-xs-4\"> element.", + "Put the \"Like\", \"Info\" and \"Delete\" buttons side-by-side by wrapping all three of them within one <div class=\"row\"> element, then each of them within a <div class=\"col-xs-4\"> 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 div element.", "Here's a diagram of how Bootstrap's 12-column grid layout works:", "", diff --git a/seed_data/challenges/computer-science.json b/seed_data/challenges/computer-science.json index cda0bb822f..15f5c3ebb6 100644 --- a/seed_data/challenges/computer-science.json +++ b/seed_data/challenges/computer-science.json @@ -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 https://class.stanford.edu/courses/Engineering/CS101/Summer2014/courseware/z229/z213/ y completa la sexta y última semana del curso." ], "namePt": "", diff --git a/seed_data/challenges/get-set-for-free-code-camp.json b/seed_data/challenges/get-set-for-free-code-camp.json index a8f345c2c9..db1ef4f5c8 100644 --- a/seed_data/challenges/get-set-for-free-code-camp.json +++ b/seed_data/challenges/get-set-for-free-code-camp.json @@ -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: http://freecodecamp.com/account.", - "Click this link, which will email you an invite to Free Code Camp's Slack chat rooms: http://freecodecamp.com/api/slack.", + "Click this link, which will email you can invite to Free Code Camp's Slack chat rooms: http://freecodecamp.com/api/slack.", "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!\".", diff --git a/views/challengeMap/show.jade b/views/challengeMap/show.jade index 551b7857d2..6cab45f6bc 100644 --- a/views/challengeMap/show.jade +++ b/views/challengeMap/show.jade @@ -19,39 +19,70 @@ block content span.text-primary #{daysRunning}   | 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   + 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