Merge pull request #3728 from FreeCodeCamp/update-step-challenges

Update step challenges

seed/challenges/basic-ziplines.json

@@ -5,46 +5,48 @@
     {
       "id": "bd7158d8c442eddfbeb5bd1f",
       "title": "Get Set for Ziplines",
-      "difficulty": 1.00,
+      "challengeSeed": [],
-      "challengeSeed": ["125658022"],
       "description": [
-        "Now you're ready to start our Zipline challenges. These front-end development challenges will give you many opportunities to apply the HTML, CSS, jQuery and JavaScript you've learned to build static (database-less) applications.",
+        [
-        "Whatever you do, don't get discouraged! Remember to use <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> if you get stuck.",
+          "http://i.imgur.com/6WLULsC.gif",
-        "We'll build these challenges using CodePen, a popular tool for creating, sharing, and discovering static web applications.",
+          "A gif showing how to create a Codepen account.",
-        "Go to <a href='http://codepen.io' target='_blank'>http://codepen.io</a> and create an account.",
+          "For our front end Zipline challenges, we'll use a popular browser-based code editor called CodePen. Open CodePen and click \"Sign up\" in the upper right hand corner, then scroll down to the free plan and click \"Sign up\" again. Click the \"Use info from GitHub button\", then add your email address and create a password. Click the \"Sign up\" button. Then in the upper right hand corner, click \"New pen\".",
-        "Click your user image in the top right corner, then click the \"New pen\" button that drops down.",
+          "http://codepen.io"
-        "Drag the windows around and press the buttons in the lower-right hand corner to change the orientation to suit your preference.",
-        "Click the gear next to CSS. Then under the \"Add External CSS\" section, use the \"Quick-add\" select box to select Bootstrap. Then click \"Save & Close\".",
-        "Verify that bootstrap is active by adding the following code to your HTML: <code>&lt;h1 class='text-primary'&gt;Hello CodePen!&lt;/h1&gt;</code>. The text's color should be Bootstrap blue.",
-        "Click the gear next to JavaScript. Click the \"Quick-add\" select box and choose jQuery (not jQuery UI).",
-        "Click the \"Quick-add\" select box again and choose Bootstrap. Then click \"Save & Close\".",
-        "Now add the following code to your JavaScript: <code>$(document).ready(function() { $('.text-primary').text('Hi CodePen!') });</code>. Click the \"Save\" button at the top. Your \"Hello CodePen!\" should change to \"Hi CodePen!\". This means that jQuery is working.",
-        "You can use this CodePen that you've just created as a starting point for your Ziplines. Just click the \"fork\" button at the top of your CodePen and it will create a duplicate CodePen.",
-        "Now you're ready for your first Zipline. Click the \"I've completed this challenge\" button."
         ],
-      "type": "waypoint",
+        [
-      "challengeType": 2,
+          "http://i.imgur.com/U4y9RJ1.gif",
+          "A gif showing that you can type \"hello world\" will output \"hello world\" in the preview window. You can also drag windows to resize them, and change their orientation.",
+          "In the HTML box, create an h1 element with the text \"Hello World\". You can drag the frames around to resize them. You can also click the \"Change View\" button and change the orientation of the frames.",
+          ""
+        ],
+        [
+          "http://i.imgur.com/G9KFQDL.gif",
+          "A gif showing the process of adding Bootstrap to your pen.",
+          "Click the gear in the upper left hand corner of the CSS box, then scroll down to \"Quick add\" and choose Bootstrap. Now give your h1 element the class of \"text-primary\" to change its color and prove that Bootstrap is now available.",
+          ""
+        ],
+        [
+          "http://i.imgur.com/Gi3aig0.gif",
+          "A gif showing the process of adding Animate.css and jQuery to pen.",
+          "Click the gear in the upper left hand corner of the CSS box, then scroll down to \"Quick add\" and choose Animate.css. Click the gear in the upper left hand corner of the JS box, then scroll down to \"Quick add\" and choose jQuery. Let's prove that Animate.css and jQuery are loaded properly. In the JS box, add the following code to make your h1 element bounce: <code>$(document).ready(function(){ $(\"h1\").addClass(\"animated bounce\"); });</code>.",
+          ""
+        ],
+        [
+          "http://i.imgur.com/Wzt6Y9Y.gif",
+          "A gif showing the process of saving and forking a pen.",
+          "Save your pen with the \"Save\" button. Then click the \"Fork\" button. This will create a fork (copy) of your pen that you can experimient with.",
+          ""
+        ]
+      ],
+      "type": "Waypoint",
+      "challengeType": 7,
       "tests": [],
       "nameCn": "",
       "descriptionCn": [],
       "nameFr": "",
       "descriptionFr": [],
-      "nameRu": "Приготовьтесь к Zipline'ам",
+      "nameRu": "",
-      "descriptionRu": [
+      "descriptionRu": [],
-        "Теперь вы готовы приступить к Zipline'ам. Это задания по фронт-энд разработке, в них вы примените ранее изученные HTML, CSS, jQuery и JavaScript и создадите статические (не использующие базу данных) приложения.",
-        "Ни в коем случае не унывайте! Воспользуйтесь <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a>, если что-то не получается.",
-        "Задания мы будем выполнять используя CodePen - популярный инструмент для создания и обмена статическими веб приложениями.",
-        "Перейдите по ссылке <a href='http://codepen.io' target='_blank'>http://codepen.io</a> и создайте аккаунт.",
-        "Нажмите на ваш аватар в правом верхнем углу, а затем в открывшемся меню на кнопку \"New pen\".",
-        "Выберите удобное расположение окон с помощью кнопок в правом нижнем углу, отрегулируйте их ширину.",
-        "Нажмите на звездочку рядом с CSS. Затем в секции \"Add External CSS\" выберите \"Quick-add\" и добавьте Bootstrap. Нажмите \"Save & Close\".",
-        "Проверьте, что Bootstrap подключен добавив следующий HTML код: <code>&lt;h1 class='text-primary'&gt;Hello CodePen!&lt;/h1&gt;</code>. Цвет текста должен быть синим.",
-        "Нажмите на звездочку рядом с JavaScript. Нажмите \"Quick-add\" и выберите jQuery (не jQuery UI). Нажмите \"Save & Close\".",
-        "Снова нажмите на поле \"Quick-add\", выберите Bootstrap и затем нажмите \"Save & Close\".",
-        "Теперь добавьте следующий код в окошко JavaScript: <code>$(document).ready(function() { $('.text-primary').text('Hi CodePen!') });</code>. Нажмите на кнопку \"Save\" расположенную наверху. Текст \"Hello CodePen!\" должен измениться на \"Hi CodePen!\". Это значит что jQuery работает.",
-        "CodePen, который мы создали, можно использовать в качестве отправной точки для ваших Zipline'ов. Кликните кнопку \"fork\", чтобы создать копию текущего CodePen'a.",
-        "Все готово для первого Zipline'а. Жмите кнопку \"I've completed this challenge\"."
-      ],
       "nameEs": "",
       "descriptionEs": [],
       "namePt": "",
@@ -53,7 +55,6 @@
     {
       "id": "bd7158d8c242eddfaeb5bd13",
       "title": "Build a Personal Portfolio Webpage",
-      "difficulty": 1.01,
       "challengeSeed": ["133315782"],
       "description": [
         "<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> app that successfully reverse-engineers this: <a href='http://codepen.io/ThiagoFerreir4/full/eNMxEp' target='_blank'>http://codepen.io/ThiagoFerreir4/full/eNMxEp</a>.",
@@ -107,7 +108,6 @@
     {
       "id": "bd7158d8c442eddfaeb5bd13",
       "title": "Build a Random Quote Machine",
-      "difficulty": 1.02,
       "challengeSeed": ["126415122"],
       "description": [
         "<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> app that successfully reverse-engineers this: <a href='http://codepen.io/AdventureBear/full/vEoVMw' target='_blank'>http://codepen.io/AdventureBear/full/vEoVMw</a>.",

seed/challenges/gear-up-for-success.json

@@ -36,7 +36,7 @@
         [
           "http://i.imgur.com/4GO4zcI.gif",
           "A gif showing how you can click the \"Wiki\" button in your upper-right corner to access the wiki.",
-          "Try this: Click the \"Wiki\" button in your upper right hand corner. Our community has contributed lots of useful information to this searchable wiki.",
+          "Click the \"Wiki\" button in your upper right hand corner. Our community has contributed lots of useful information to this searchable wiki.",
           ""
         ]
       ],
@@ -60,9 +60,9 @@
       "challengeSeed": [],
       "description": [
         [
-          "http://i.imgur.com/P7qfJXt.gif",
+          "http://i.imgur.com/vJyiXzU.gif",
           "A gif showing how you can click the link below and fill in the necessary fields to add your Free Code Camp studies to your LinkedIn profile.",
-          "You can add Free Code Camp to your LinkedIn education background. Set your graduation date as next year. For \"Degree\", type \"Full Stack Web Development\". For \"Field of study\", type \"Computer Software Engineering\". Then click \"Save Changes\".",
+          "You can add Free Code Camp to your LinkedIn education background. Set your graduation date as next year. For \"Degree\", type \"Full Stack Web Development Certification\". For \"Field of study\", type \"Computer Software Engineering\". Then click \"Save Changes\".",
           "https://www.linkedin.com/profile/edit-education?school=Free+Code+Camp"
         ]
       ],
@@ -88,7 +88,7 @@
         [
           "http://i.imgur.com/Og1ifsn.gif",
           "A gif showing how you can commit to a goal for your Free Code Camp studies and pledge a monthly donation to a nonprofit to give you external motivation to reach that goal.",
-          "You can set a goal and pledge to donate to a nonprofit each month until you achieve that goal. give you external motivation in your quest to learn to code, as well as the opportunity to help nonprofits right away. Choose your goal, choose a monthly donation. When you click \"commit\", the nonprofit's donate page will open in a new tab. You can change your committment or stop it at any time.",
+          "You can set a goal and pledge to donate to a nonprofit each month until you achieve that goal. give you external motivation in your quest to learn to code, as well as the opportunity to help nonprofits right away. Choose your goal, choose a monthly donation. When you click \"commit\", the nonprofit's donate page will open in a new tab. You can change your commitment or stop it at any time.",
           "/commit"
         ]
       ],

seed/challenges/getting-started.json

@@ -9,13 +9,13 @@
       "description": [
         [
           "http://i.imgur.com/RlEk2IF.jpg",
-          "a picture of Free Code Camp's 4 benefits: Get connected, Learn JavaScript, Build your Portfolio, Help nonprofits",
+          "A picture of Free Code Camp's 4 benefits: Get connected, Learn JavaScript, Build your Portfolio, Help nonprofits",
           "Welcome to Free Code Camp. We're an open source community of busy people who learn to code and help nonprofits.",
           ""
         ],
         [
           "http://i.imgur.com/pYsTbjI.jpg",
-          "a screenshot of our curriculum alongside a screenshot of our chat room.",
+          "A screenshot of our curriculum alongside a screenshot of our chat room.",
           "Learning to code is hard. To succeed, you'll need lots of practice and support. That's why we've created a rigorous curriculum and supportive community.",
           ""
         ],
@@ -33,13 +33,13 @@
         ],
         [
           "http://i.imgur.com/sKYQhdG.jpg",
-          "a screenshot of our Front End Development Certificate",
+          "A screenshot of our Front End Development Certificate",
           "About half way through our curriculum, you'll earn a verified Front End Development Certificate. If you can finish our entire curriculum, you'll earn a verified Full Stack Development Certificate.",
           ""
         ],
         [
           "http://i.imgur.com/yXyxbDd.jpg",
-          "a screen shot of our nonprofit project directory.",
+          "A screen shot of our nonprofit project directory.",
           "Then you'll build several real-life projects for nonprofits. By the time you finish, you'll have a portfolio of real apps that people use every day.",
           ""
         ]
@@ -65,7 +65,7 @@
       "description": [
         [
           "http://i.imgur.com/EAR7Lvh.jpg",
-          "a screenshot of our one of our Gitter chat rooms.",
+          "A screenshot of our one of our Gitter chat rooms.",
           "Now let's join Free Code Camp's chat rooms. You can come here any time of day to hang out, ask questions, or find another camper to pair program with. First you'll need a GitHub account.",
           ""
         ],
@@ -82,15 +82,15 @@
           "https://github.com/settings/profile"
         ],
         [
-          "http://i.imgur.com/OXL3G3n.gif",
+          "http://i.imgur.com/pYk0wOk.gif",
-          "Click the link below to navigate to Free Code Camp's open-source repository. In the upper right hand corner, you can click the \"star\" button to star this repository.",
+          "A gif showing how you can star a GitHub repo.",
           "Go to Free Code Camp's open-source repository and \"star\" it. \"Starring\" is the GitHub equivalent of \"liking\" something.",
           "https://github.com/freecodecamp/freecodecamp"
         ],
         [
-          "http://i.imgur.com/EZHzKCV.gif",
+          "http://i.imgur.com/zwYPeQT.gif",
           "A gif showing you how to click the link below to go to our chat room and click the \"sign in with GitHub\" button. Then you can click into the text input field and type a message to your fellow campers.",
-          " Now that you have a GitHub account, you can join our main chat room by logging in with GitHub. Introduce yourself by saying \"Hello world!\". Tell your fellow campers how you found Free Code Camp. Also tell us why you want to learn to code.",
+          "Now that you have a GitHub account, you can join our main chat room by logging in with GitHub. Introduce yourself by saying \"Hello world!\". Tell your fellow campers how you found Free Code Camp. Also tell us why you want to learn to code.",
           "https://gitter.im/FreeCodeCamp/FreeCodeCamp"
         ],
         [
@@ -112,7 +112,7 @@
           ""
         ],
         [
-          "http://i.imgur.com/SLQ27Gr.gif",
+          "http://i.imgur.com/WvQvNGN.gif",
           "A gif showing how you can click the link below to download a native chat room app for your computer.",
           "You can also download the chat room app to your computer or phone.",
           "https://gitter.im/apps"
@@ -138,15 +138,9 @@
       "challengeSeed": [],
       "description": [
         [
-          "http://i.imgur.com/FkEzbto.gif",
+          "http://i.imgur.com/tP2ccTE.gif",
           "A gif showing how you can click your profile image in your upper right hand corner to your code portfolio and connect GitHub.",
-          "Check out your code portfolio. Click your picture in your upper right hand corner. To activate your code portfolio, you'll need to link your GitHub account with Free Code Camp.",
+          "Check out your code portfolio. Click your picture in your upper right hand corner. To activate your code portfolio, you'll need to link your GitHub account with Free Code Camp. Your code portfolio shows your progress and how many Brownie Points you have. You can get Brownie Points by completing challenges and by helping other campers in our chat rooms. If you get Brownie Points on several days in a row, you'll get a streak.",
-          ""
-        ],
-        [
-          "http://i.imgur.com/WKzEr1q.gif",
-          "A gif showing how you can access your code portfolio and hover over different days to see how many brownie points you got on those days.",
-          "Your code portfolio shows your progress and how many Brownie Points you have. You can get Brownie Points by completing challenges and by helping other campers in our chat rooms. If you get Brownie Points on several days in a row, you'll get a streak.",
           ""
         ]
       ],
@@ -176,9 +170,9 @@
           ""
         ],
         [
-          "http://i.imgur.com/EZHzKCV.gif",
+          "http://i.imgur.com/fTFMjwf.gif",
           "A gif showing how you can click the link below, find your city on the list of Campsites, then click on the Facebook link for your city and join your city's Facebook group.",
-          "Find your city on this list, click the \"Facebook\" link, then click the \"Join group\" button to apply to join your city's Facebook group (someone from the campsite should approve you shortly). If your city isn't on this list, scroll to the bottom of the wiki article for instructions for how you can create your city's Campsite.",
+          "Find your city on this list and click it. This will take you to your city's Campsite's Facebook group. Click the \"Join group\" button to apply to join your city's Facebook group. Someone from the campsite should approve you shortly. If your city isn't on this list, scroll to the bottom of the wiki article for instructions for how you can create your city's Campsite.",
           "https://github.com/FreeCodeCamp/freecodecamp/wiki/List-of-Free-Code-Camp-city-based-Campsites"
         ]
       ],
@@ -226,8 +220,8 @@
           "https://gitter.im/FreeCodeCamp/Help"
         ],
         [
-          "http://i.imgur.com/WsfzvVo.gif",
+          "http://i.imgur.com/ZRgXraT.gif",
-          "A gif showing us clicking the \"map\" button in our upper right hand corner and browsing our challenge map.",
+          "A gif showing us scrolling through our challenge map.",
           "Now you're ready to start coding! The \"Map\" button in your upper right hand corner will show you our challenge map. This map shows all our coding challenges. We recommend that you complete these from top to bottom, at a sustainable pace. You can also return to your next challenge by clicking the \"Learn\" button.",
           ""
         ]

server/views/coursewares/showStep.jade

@@ -6,7 +6,7 @@ block content
                     .thumbnail.challenge-step(class=index !== 0 ? 'hidden': '')
                         img.gif-block.img-center.img-responsive.thumbnail(src='#{step[0]}' alt='#{step[1]}')
                         .caption
-                            p.large-p= step[2]
+                            p.large-p!= step[2]
                         if step[3]
                             a.btn.btn-block.btn-primary.challenge-step-btn-action(id='#{index}' href='#{step[3]}' target='_blank') Open link in new tab
                         if index + 1 === description.length

server/views/partials/navbar.jade

@@ -14,7 +14,7 @@ nav.navbar.navbar-default.navbar-fixed-top.nav-height
             li
                 a(href='//gitter.im/FreeCodeCamp/FreeCodeCamp', target='_blank') Chat
             li
-                a(href='/news') News
+                a(href='/news', target='_blank') News
             li
                 a(href='//github.com/FreeCodeCamp/freecodecamp/wiki/Home', target='_blank') Wiki
             if !user