fix(projects): Add user stories to projects' description (#16924)

BREAKING CHANGE: none

Closes #16810

challenges/01-responsive-web-design/responsive-web-design-projects.json

@@ -174,8 +174,17 @@
       "id": "bd7158d8c442eddfaeb5bd18",
       "title": "Build a Tribute Page",
       "description": [
-        "Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
+        "<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/zNqgVx' target='_blank'>https://codepen.io/freeCodeCamp/full/zNqgVx</a>.",
-        "Here's a <a href='http://codepen.io/freeCodeCamp/full/zNqgVx' target='_blank'>working example</a>. Try not to look at its code.",
+        "Fulfill the below <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> and get all of the tests to pass. Give it your own personal style.",
+        "You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!",
+        "<strong>User Story #1:</strong> My tribute page should have an element with a corresponding <code>id=\"main\"</code>, which contains all other elements.",
+        "<strong>User Story #2:</strong> I should see an element with a corresponding <code>id=\"title\"</code>, which contains a string (i.e. text) that describes the subject of the tribute page (e.g. \"Dr. Norman Borlaug\").",
+        "<strong>User Story #3:</strong> I should see a <code>div</code> element with a corresponding <code>id=\"img-div\"</code>.",
+        "<strong>User Story #4:</strong> Within the <code>img-div</code> element, I should see an <code>img></code> element with a corresponding <code>id=\"image\"</code>.",
+        "<strong>User Story #5:</strong> Within the <code>img-div</code> element, I should see an element with a corresponding <code>id=\"img-caption\"</code> that contains textual content describing the image shown in <code>img-div</code>.",
+        "<strong>User Story #6:</strong> I should see an element with a corresponding <code>id=\"tribute-info\"</code>, which contains textual content describing the subject of the tribute page.",
+        "<strong>User Story #7:</strong> I  should see an <code>a</code> element with a corresponding <code>id=\"tribute-link\"</code>, which links to an outside site that contains additional information about the subject of the tribute page. HINT: You must give your element an attribute of <code>target</code> and set it to <code>_blank</code> in order for your link to open in a new tab (i.e. <code>target=\"_blank\"</code>).",
+        "<strong>User Story #8:</strong> The <code>img</code> element should responsively resize, relative to the width of its parent element, without exceeding its original size.",
         "You can build your project by forking <a href='http://codepen.io/freeCodeCamp/pen/MJjpwO' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js</code>.",
         "Once you're done, submit the URL to your working project with all its tests passing.",
         "Remember to use the <a href='https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> method if you get stuck."
@@ -202,8 +211,25 @@
       "id": "587d78af367417b2b2512b03",
       "title": "Build a Survey Form",
       "description": [
-        "Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
+        "<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/VPaoNP' target='_blank'>https://codepen.io/freeCodeCamp/full/VPaoNP</a>.",
-        "Here's a <a href='http://codepen.io/freeCodeCamp/full/VPaoNP' target='_blank'>working example</a>. Try not to look at its code.",
+        "Fulfill the below <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> and get all of the tests to pass. Give it your own personal style.",
+        "You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!",
+        "<strong>User Story #1:</strong> I can see a title with <code>id=\"title\"</code> in H1 sized text.",
+        "<strong>User Story #2:</strong> I can see a short explanation with <code>id=\"description\"</code> in P sized text.",
+        "<strong>User Story #3:</strong> I can see a <code>form</code> with <code>id=\"survey-form\"</code>.",
+        "<strong>User Story #4:</strong> Inside the form element, I am required to enter my name in a field with <code>id=\"name\"</code>.",
+        "<strong>User Story #5:</strong> Inside the form element, I am required to enter an email in a field with <code>id=\"email\"</code>.",
+        "<strong>User Story #6:</strong> If I enter an email that is not formatted correctly, I will see an HTML5 validation error.",
+        "<strong>User Story #7:</strong> Inside the form, I can enter a number in a field with <code>id=\"number\"</code>.",
+        "<strong>User Story #8:</strong> If I enter non-numbers in the number input, I will see an HTML5 validation error.",
+        "<strong>User Story #9:</strong> If I enter numbers outside the range of the number input, I will see an HTML5 validation error.",
+        "<strong>User Story #10:</strong> For the name, email, and number input fields inside the form I can see corresponding labels that describe the purpose of each field with the following ids: <code>id=\"name-label\"</code>, <code>id=\"email-label\"</code>, and <code>id=\"number-label\"</code>.",
+        "<strong>User Story #11:</strong> For the name, email, and number input fields, I can see placeholder text that gives me a description or instructions for each field.",
+        "<strong>User Story #12:</strong> Inside the form element, I can select an option from a dropdown that has a corresponding <code>id=\"dropdown\"</code>.",
+        "<strong>User Story #13:</strong> Inside the form element, I can select a field from one or more groups of radio buttons. Each group should be grouped using the <code>name</code> attribute.",
+        "<strong>User Story #14:</strong> Inside the form element, I can select several fields from a series of checkboxes, each of which must have a <code>value</code> attribute.",
+        "<strong>User Story #15:</strong> Inside the form element, I am presented with a <code>textarea</code> at the end for additional comments.",
+        "<strong>User Story #16:</strong> Inside the form element, I am presented with a button with <code>id=\"submit\"</code> to submit all my inputs.",
         "You can build your project by forking <a href='http://codepen.io/freeCodeCamp/pen/MJjpwO' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js</code>",
         "Once you're done, submit the URL to your working project with all its tests passing.",
         "Remember to use the <a href='https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> method if you get stuck."
@@ -220,8 +246,24 @@
       "id": "587d78af367417b2b2512b04",
       "title": "Build a Product Landing Page",
       "description": [
-        "Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
+        "<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/RKRbwL' target='_blank'>https://codepen.io/freeCodeCamp/full/RKRbwL</a>.",
-        "Here's a <a href='http://codepen.io/freeCodeCamp/full/RKRbwL' target='_blank'>working example</a>. Try not to look at its code.",
+        "Fulfill the below <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> and get all of the tests to pass. Give it your own personal style.",
+        "You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!",
+        "<strong>User Story #1:</strong> My product landing page should have a <code>header</code> element with a corresponding <code>id=\"header\"</code>.",
+        "<strong>User Story #2:</strong> I can see an image within the <code>header</code> element with a corresponding <code>id=\"header-img\"</code>. A company logo would make a good image here.",
+        "<strong>User Story #3:</strong> Within the <code>#header</code> element I can see a <code>nav</code> element with a corresponding <code>id=\"nav-bar\"</code>.",
+        "<strong>User Story #4:</strong> I can see at least three clickable elements inside the <code>nav</code> element, each with the class <code>nav-link</code>.",
+        "<strong>User Story #5:</strong> When I click a <code>.nav-link</code> button in the <code>nav</code> element, I am taken to the corresponding section of the landing page.",
+        "<strong>User Story #6:</strong> I can watch an embedded product video with <code>id=\"video\"</code>.",
+        "<strong>User Story #7:</strong> My landing page has a <code>form</code> element with a corresponding <code>id=\"form\"</code>.",
+        "<strong>User Story #8:</strong> Within the form, there is an <code>input</code> field with <code>id=\"email\"</code> where I can enter an email address.",
+        "<strong>User Story #9:</strong> The <code>#email</code> input field should have placeholder text to let the user know what the field is for.",
+        "<strong>User Story #10:</strong> The <code>#email</code> input field uses HTML5 validation to confirm that the entered text is an email address.",
+        "<strong>User Story #11:</strong> Within the form, there is a submit <code>input</code> with a corresponding <code>id=\"submit\"</code>.",
+        "<strong>User Story #12:</strong> When I click the <code>#submit</code> element, the email is submitted to a static page (use this mock URL: <a href='https://www.freecodecamp.com/email-submit' target='_blank'>https://www.freecodecamp.com/email-submit</a>) that confirms the email address was entered and that it posted successfully.",
+        "<strong>User Story #13:</strong> The navbar should always be at the top of the viewport.",
+        "<strong>User Story #14:</strong> My product landing page should have at least one media query.",
+        "<strong>User Story #15:</strong> My product landing page should utilize CSS flexbox at least once.",
         "You can build your project by forking <a href='http://codepen.io/freeCodeCamp/full/MJjpwO' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js</code>",
         "Once you're done, submit the URL to your working project with all its tests passing.",
         "Remember to use the <a href='https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> method if you get stuck."
@@ -238,8 +280,24 @@
       "id": "587d78b0367417b2b2512b05",
       "title": "Build a Technical Documentation Page",
       "description": [
-        "Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
+        "<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/NdrKKL' target='_blank'>https://codepen.io/freeCodeCamp/full/NdrKKL</a>.",
-        "Here's a <a href='http://codepen.io/freeCodeCamp/full/NdrKKL' target='_blank'>working example</a>. Try not to look at its code.",
+        "Fulfill the below <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> and get all of the tests to pass. Give it your own personal style.",
+        "You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!",
+        "<strong>User Story #1:</strong> I can see a <code>main</code> element with a corresponding <code>id=\"main-doc\"</code>, which contains the page's main content (technical documentation).",
+        "<strong>User Story #2:</strong> Within the <code>#main-doc</code> element, I can see several <code>section</code> elements, each with a class of <code>main-section</code>. There should be a minimum of 5.",
+        "<strong>User Story #3:</strong> The first element within each <code>.main-section</code> should be a <code>header</code> element which contains text that describes the topic of that section.",
+        "<strong>User Story #4:</strong> Each <code>section</code> element with the class of <code>main-section</code> should also have an id that corresponds with the text of each <code>header</code> contained within it. Any spaces should be replaced with underscores (e.g. The <code>section</code> that contains the header \"Javascript and Java\" should have a corresponding <code>id=\"Javascript_and_Java\"</code>).",
+        "<strong>User Story #5:</strong> The <code>.main-section</code> elements should contain at least 10 <code>p</code> elements total (not each).",
+        "<strong>User Story #6:</strong> The <code>.main-section</code> elements should contain at least 5 <code>code</code> elements total (not each).",
+        "<strong>User Story #7:</strong> The <code>.main-section</code> elements should contain at least 5 <code>li</code> items total (not each).",
+        "<strong>User Story #8:</strong> I can see a <code>nav</code> element with a corresponding <code>id=\"navbar\"</code>.",
+        "<strong>User Story #9:</strong> The navbar element should contain one <code>header</code> element which contains text that describes the topic of the technical documentation.",
+        "<strong>User Story #10:</strong> Additionally, the navbar should contain link (<code>a</code>) elements with the class of <code>nav-link</code>. There should be one for every element with the class <code>main-section</code>.",
+        "<strong>User Story #11:</strong> The <code>header</code> element in the navbar must come before any link (<code>a</code>) elements in the navbar.",
+        "<strong>User Story #12:</strong> Each element with the class of <code>nav-link</code> should contain text that corresponds to the <code>header</code> text within each <code>section</code> (e.g. if you have a \"Hello world\" section/header, your navbar should have an element which contains the text \"Hello world\").",
+        "<strong>User Story #13:</strong> When I click on a navbar element, the page should navigate to the corresponding section of the <code>main-doc</code> element (e.g. If I click on a <code>nav-link</code> element that contains the text \"Hello world\", the page navigates to a <code>section</code> element that has that id and contains the corresponding <code>header</code>.",
+        "<strong>User Story #14:</strong> On regular sized devices (laptops, desktops), the element with <code>id=\"navbar\"</code> should be shown on the left side of the screen and should always be visible to the user.",
+        "<strong>User Story #15:</strong> My Technical Documentation page should use at least one media query.",
         "You can build your project by forking <a href='http://codepen.io/freeCodeCamp/pen/MJjpwO' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js</code>",
         "Once you're done, submit the URL to your working project with all its tests passing.",
         "Remember to use the <a href='https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> method if you get stuck."
@@ -256,8 +314,20 @@
       "id": "bd7158d8c242eddfaeb5bd13",
       "title": "Build a Personal Portfolio Webpage",
       "description": [
-        "Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
+        "<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/zNBOYG' target='_blank'>https://codepen.io/freeCodeCamp/full/zNBOYG</a>.",
-        "Here's a <a href='http://codepen.io/freeCodeCamp/full/zNBOYG' target='_blank'>working example</a>. Try not to look at its code.",
+        "Fulfill the below <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> and get all of the tests to pass. Give it your own personal style.",
+        "You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!",
+        "<strong>User Story #1:</strong> My portfolio should have a welcome section with an id of <code>welcome-section</code>.",
+        "<strong>User Story #2:</strong> The welcome section should have an <code>h1</code> element that contains text.",
+        "<strong>User Story #3:</strong> My portfolio should have a projects section with an id of <code>projects</code>.",
+        "<strong>User Story #4:</strong> The projects section should contain at least one element with a class of <code>project-tile</code> to hold a project.",
+        "<strong>User Story #5:</strong> The projects section should contain at least one link to a project.",
+        "<strong>User Story #6:</strong> My portfolio should have a navbar with an id of <code>navbar</code>.",
+        "<strong>User Story #7:</strong> The navbar should contain at least one link that I can click on to navigate to different sections of the page.",
+        "<strong>User Story #8:</strong> My portfolio should have a link with an id of <code>profile-link</code>, which opens my GitHub or FCC profile in a new tab.",
+        "<strong>User Story #9:</strong> My portfolio should have at least one media query.",
+        "<strong>User Story #10:</strong> The height of the welcome section should be equal to the height of the viewport.",
+        "<strong>User Story #11:</strong> The navbar should always be at the top of the viewport.",
         "You can build your project by forking <a href='http://codepen.io/freeCodeCamp/pen/MJjpwO' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js</code>",
         "Once you're done, submit the URL to your working project with all its tests passing.",
         "Remember to use the <a href='https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> method if you get stuck."

challenges/03-front-end-libraries/front-end-libraries-projects.json

@@ -8,8 +8,20 @@
       "id": "bd7158d8c442eddfaeb5bd13",
       "title": "Build a Random Quote Machine",
       "description": [
-        "Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
+        "<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/qRZeGZ' target='_blank'>https://codepen.io/freeCodeCamp/full/qRZeGZ</a>.",
-        "Here's a <a href='http://codepen.io/freeCodeCamp/full/qRZeGZ' target='_blank'>working example</a>. Try not to look at its code.",
+        "Fulfill the below <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> and get all of the tests to pass. Give it your own personal style.",
+        "You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!",
+        "<strong>User Story #1:</strong> I can see a wrapper element with a corresponding <code>id=\"quote-box\"</code>.",
+        "<strong>User Story #2:</strong> Within <code>#quote-box</code>, I can see an element with a corresponding <code>id=\"text\"</code>.",
+        "<strong>User Story #3:</strong> Within <code>#quote-box</code>, I can see an element with a corresponding <code>id=\"author\"</code>.",
+        "<strong>User Story #4:</strong> Within <code>#quote-box</code>, I can see a clickable element with a corresponding <code>id=\"new-quote\"</code>.",
+        "<strong>User Story #5:</strong> Within <code>#quote-box</code>, I can see a clickable <codea</code> element with a corresponding <code>id=\"tweet-quote\"</code>.",
+        "<strong>User Story #6:</strong> On first load, my quote machine displays a random quote in the element with <code>id=\"text\"</code>.",
+        "<strong>User Story #7:</strong> On first load, my quote machine displays the random quote's author in the element with <code>id=\"author\"</code>.",
+        "<strong>User Story #8:</strong> When the <code>#new-quote</code> button is clicked, my quote machine should fetch a new quote and display it in the <code>#text</code> element.",
+        "<strong>User Story #9:</strong> My quote machine should fetch the new quote's author when the <code>#new-quote</code> button is clicked and display it in the <code>#author</code> element.",
+        "<strong>User Story #10:</strong> I can tweet the current quote by clicking on the <code>#tweet-quote</code> <code>a</code> element. This <code>a</code> element should include the <code>\"twitter.com/intent/tweet\"</code> path in it's <code>href</code> attribute to tweet the current quote.",
+        "<strong>User Story #11:</strong> The <code>#quote-box</code> wrapper element should be horizontally centered. Please run tests with browser's zoom level at 100% and page maximized.",
         "You can build your project by forking <a href='http://codepen.io/freeCodeCamp/pen/MJjpwO' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js</code>",
         "Once you're done, submit the URL to your working project with all its tests passing.",
         "Remember to use the <a href='https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> method if you get stuck."
@@ -31,8 +43,17 @@
       "id": "bd7157d8c242eddfaeb5bd13",
       "title": "Build a Markdown Previewer",
       "description": [
-        "Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
+        "<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/GrZVVO' target='_blank'>https://codepen.io/freeCodeCamp/full/GrZVVO</a>.",
-        "Here's a <a href='http://codepen.io/freeCodeCamp/full/GrZVVO' target='_blank'>working example</a>. Try not to look at its code.",
+        "Fulfill the below <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> and get all of the tests to pass. Give it your own personal style.",
+        "You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!",
+        "<strong>User Story #1:</strong> I can see a <code>textarea</code> element with a corresponding <code>id=\"editor\"</code>.",
+        "<strong>User Story #2:</strong> I can see an element with a corresponding <code>id=\"preview\"</code>.",
+        "<strong>User Story #3:</strong> When I enter text into the <code>#editor</code> element, the <code>#preview</code> element is updated as I type to display the content of the textarea.",
+        "<strong>User Story #4:</strong> When I enter GitHub flavored markdown into the <code>#editor</code> element, the text is rendered as HTML in the <code>#preview</code> element as I type (HINT: You don't need to parse Markdown yourself - you can import the Marked library for this: <a href='https://cdnjs.com/libraries/marked' target='_blank'>https://cdnjs.com/libraries/marked</a>).",
+        "<strong>User Story #5:</strong> When my markdown previewer first loads, the default text in the <code>#editor</code> field should contain valid markdown that represents at least one of each of the following elements: a header (H1 size), a sub header (H2 size), a link, inline code, a code block, a list item, a blockquote, an image, and bolded text.",
+        "<strong>User Story #6:</strong> When my markdown previewer first loads, the default markdown in the <code>#editor</code> field should be rendered as HTML in the <code>#preview</code> element.",
+        "<strong>Optional Bonus (you do not need to make this test pass):</strong> When I click a link rendered by my markdown previewer, the link is opened up in a new tab (HINT: read the Marked.js docs for this one!).",
+        "<strong>Optional Bonus (you do not need to make this test pass):</strong> My markdown previewer interprets carriage returns and renders them as <code>br</code> (line break) elements.",
         "You can build your project by forking <a href='http://codepen.io/freeCodeCamp/pen/MJjpwO' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js</code>",
         "Once you're done, submit the URL to your working project with all its tests passing.",
         "Remember to use the <a href='https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> method if you get stuck."
@@ -55,8 +76,16 @@
       "id": "587d7dbc367417b2b2512bae",
       "title": "Build a Drum Machine",
       "description": [
-        "Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
+        "<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/MJyNMd' target='_blank'>https://codepen.io/freeCodeCamp/full/MJyNMd</a>.",
-        "Here's a <a href='http://codepen.io/freeCodeCamp/full/MJyNMd' target='_blank'>working example</a>. Try not to look at its code.",
+        "Fulfill the below <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> and get all of the tests to pass. Give it your own personal style.",
+        "You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!",
+        "<strong>User Story #1:</strong> I should be able to see an outer container with a corresponding <code>id=\"drum-machine\"</code> that contains all other elements.",
+        "<strong>User Story #2:</strong> Within <code>#drum-machine</code> I can see an element with a corresponding <code>id=\"display\"</code>.",
+        "<strong>User Story #3:</strong> Within <code>#drum-machine</code> I can see 9 clickable drum pad elements, each with a class name of <code>drum-pad</code>, a unique id that describes the audio clip the drum pad will be set up to trigger, and an inner text that corresponds to one of the following keys on the keyboard: Q, W, E, A, S, D, Z, X, C. The drum pads MUST be in this order.",
+        "<strong>User Story #4:</strong> Within each <code>.drum-pad</code>, there should be an HTML5 <code>audio</code> element which has a <code>src</code> attribute pointing to an audio clip, a class name of <code>clip</code>, and an id corresponding to the inner text of its parent <code>.drum-pad</code> (e.g. <code>id=\"Q\"</code>, <code>id=\"W\"</code>, <code>id=\"E\"</code> etc.).",
+        "<strong>User Story #5:</strong> When I click on a <code>.drum-pad</code> element, the audio clip contained in its child <code>audio</code> element should be triggered.",
+        "<strong>User Story #6:</strong> When I press the trigger key associated with each <code>.drum-pad</code>, the audio clip contained in its child <code>audio</code> element should be triggered (e.g. pressing the Q key should trigger the drum pad which contains the string \"Q\", pressing the W key should trigger the drum pad which contains the string \"W\", etc.).",
+        "<strong>User Story #7:</strong> When a <code>.drum-pad</code> is triggered, a string describing the associated audio clip is displayed as the inner text of the <code>#display</code> element (each string must be unique).",
         "You can build your project by forking <a href='http://codepen.io/freeCodeCamp/pen/MJjpwO' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js</code>",
         "Once you're done, submit the URL to your working project with all its tests passing.",
         "Remember to use the <a href='https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> method if you get stuck."
@@ -79,8 +108,24 @@
       "id": "bd7158d8c442eddfaeb5bd17",
       "title": "Build a JavaScript Calculator",
       "description": [
-        "Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
+        "<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/wgGVVX' target='_blank'>https://codepen.io/freeCodeCamp/full/wgGVVX</a>.",
-        "Here's a <a href='http://codepen.io/freeCodeCamp/full/wgGVVX' target='_blank'>working example</a>. Try not to look at its code.",
+        "Fulfill the below <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> and get all of the tests to pass. Give it your own personal style.",
+        "You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!",
+        "<strong>User Story #1:</strong> My calculator should contain a clickable element containing an <code>=</code> (equal sign) with a corresponding <code>id=\"equals\"</code>.",
+        "<strong>User Story #2:</strong> My calculator should contain 10 clickable elements containing one number each from 0-9, with the following corresponding IDs: <code>id=\"zero\"</code>, <code>id=\"one\"</code>, <code>id=\"two\"</code>, <code>id=\"three\"</code>, <code>id=\"four\"</code>, <code>id=\"five\"</code>, <code>id=\"six\"</code>, <code>id=\"seven\"</code>, <code>id=\"eight\"</code>, and <code>id=\"nine\"</code>.",
+        "<strong>User Story #3:</strong> My calculator should contain 4 clickable elements each containing one of the 4 primary mathematical operators with the following corresponding IDs: <code>id=\"add\"</code>, <code>id=\"subtract\"</code>, <code>id=\"multiply\"</code>, <code>id=\"divide\"</code>.",
+        "<strong>User Story #4:</strong> My calculator should contain a clickable element containing a <code>.</code> (decimal point) symbol with a corresponding <code>id=\"decimal\"</code>.",
+        "<strong>User Story #5:</strong> My calculator should contain a clickable element with an <code>id=\"clear\"</code>.",
+        "<strong>User Story #6:</strong> My calculator should contain an element to display values with a corresponding <code>id=\"display\"</code>.",
+        "<strong>User Story #7:</strong> At any time, pressing the clear button clears the input and output values, and returns the calculator to its initialized state; 0 should be shown in the element with the id of <code>display</code>.",
+        "<strong>User Story #8:</strong> As I input numbers, I should be able to see my input in the element with the id of <code>display</code>.",
+        "<strong>User Story #9:</strong> In any order, I should be able to add, subtract, multiply and divide a chain of numbers of any length, and when I hit <code>=</code>, the correct result should be shown in the element with the id of <code>display</code>.",
+        "<strong>User Story #10:</strong> When inputting numbers, my calculator should not allow a number to begin with multiple zeros.",
+        "<strong>User Story #11:</strong> When the decimal element is clicked, a <code>.</code> should append to the currently displayed value; two <code>.</code> in one number should not be accepted.",
+        "<strong>User Story #12:</strong> I should be able to perform any operation (+, -, *, /) on numbers containing decimal points.",
+        "<strong>User Story #13:</strong> If 2 or more operators are entered consecutively, the operation performed should be the last operator entered.",
+        "<strong>User Story #14:</strong> Pressing an operator immediately following <code>=</code> should start a new calculation that operates on the result of the previous evaluation.",
+        "<strong>User Story #15:</strong> My calculator should have several decimal places of precision when it comes to rounding (note that there is no exact standard, but you should be able to handle calculations like <code>2 / 7</code> with reasonable precision to at least 4 decimal places).",
         "<strong>Note On Calculator Logic:</strong> It should be noted that there are two main schools of thought on calculator input logic: <dfn>immediate execution logic</dfn> and <dfn>formula logic</dfn>. Our example utilizes formula logic and observes order of operation precedence, immediate execution does not. Either is acceptable, but please note that depending on which you choose, your calculator may yield different results than ours for certain equations (see below example). As long as your math can be verified by another production calculator, please do not consider this a bug.",
         "<strong>EXAMPLE:</strong> <code>3 + 5 x 6 - 2 / 4 =</code><br><ul><li><strong>Immediate Execution Logic:</strong> <code>11.5</code></li><li><strong>Formula/Expression Logic:</strong> <code>32.5</code></li></ul>",
         "You can build your project by forking <a href='http://codepen.io/freeCodeCamp/pen/MJjpwO' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js</code>",
@@ -101,8 +146,37 @@
       "id": "bd7158d8c442eddfaeb5bd0f",
       "title": "Build a Pomodoro Clock",
       "description": [
-        "Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
+        "<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/XpKrrW' target='_blank'>https://codepen.io/freeCodeCamp/full/XpKrrW</a>.",
-        "Here's a <a href='http://codepen.io/freeCodeCamp/full/XpKrrW' target='_blank'>working example</a>. Try not to look at its code.",
+        "Fulfill the below <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> and get all of the tests to pass. Give it your own personal style.",
+        "You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!",
+        "<strong>User Story #1:</strong> I can see an element with <code>id=\"break-label\"</code> that contains a string (e.g. \"Break Length\").",
+        "<strong>User Story #2:</strong> I can see an element with <code>id=\"session-label\"</code> that contains a string (e.g. \"Session Length\").",
+        "<strong>User Story #3:</strong> I can see two clickable elements with corresponding IDs: <code>id=\"break-decrement\"</code> and <code>id=\"session-decrement\"</code>.",
+        "<strong>User Story #4:</strong> I can see two clickable elements with corresponding IDs: <code>id=\"break-increment\"</code> and <code>id=\"session-increment\"</code>.",
+        "<strong>User Story #5:</strong> I can see an element with a corresponding <code>id=\"break-length\"</code>, which by default (on load) displays a value of 5.",
+        "<strong>User Story #6:</strong> I can see an element with a corresponding <code>id=\"session-length\"</code>, which by default displays a value of 25.",
+        "<strong>User Story #7:</strong> I can see an element with a corresponding <code>id=\"timer-label\"</code>, that contains a string indicating a session is initialized (e.g. \"Session\").",
+        "<strong>User Story #8:</strong> I can see an element with corresponding <code>id=\"time-left\"</code>. NOTE: Paused or running, the value in this field should always be displayed in <code>mm:ss</code> format (i.e. 25:00).",
+        "<strong>User Story #9:</strong> I can see a clickable element with a corresponding <code>id=\"start_stop\"</code>.",
+        "<strong>User Story #10:</strong> I can see a clickable element with a corresponding <code>id=\"reset\"</code>.",
+        "<strong>User Story #11:</strong> When I click the element with the id of <code>reset</code>, any running timer should be stopped, the value within <code>id=\"break-length\"</code> should return to <code>5</code>, the value within <code>id=\"session-length\"</code> should return to 25, and the element with <code>id=\"time-left\"</code> should reset to it's default state.",
+        "<strong>User Story #12:</strong> When I click the element with the id of <code>break-decrement</code>, the value within <code>id=\"break-length\"</code> decrements by a value of 1, and I can see the updated value.",
+        "<strong>User Story #13:</strong> When I click the element with the id of <code>break-increment</code>, the value within <code>id=\"break-length\"</code> increments by a value of 1, and I can see the updated value.",
+        "<strong>User Story #14:</strong> When I click the element with the id of <code>session-decrement</code>, the value within <code>id=\"session-length\"</code> decrements by a value of 1, and I can see the updated value.",
+        "<strong>User Story #15:</strong> When I click the element with the id of <code>session-increment</code>, the value within <code>id=\"session-length\"</code> increments by a value of 1, and I can see the updated value.",
+        "<strong>User Story #16:</strong> I should not be able to set a session or break length to <= 0.",
+        "<strong>User Story #17:</strong> I should not be able to set a session or break length to > 60.",
+        "<strong>User Story #18:</strong> When I first click the element with <code>id=\"start_stop\"</code>, the timer should begin running from the value currently displayed in <code>id=\"session-length\"</code>, even if the value has been incremented or decremented from the original value of 25.",
+        "<strong>User Story #19:</strong> If the timer is running, the element with the id of <code>time-left</code> should display the remaining time in <code>mm:ss</code> format (decrementing by a value of 1 and updating the display every 1000ms).",
+        "<strong>User Story #20:</strong> If the timer is running and I click the element with <code>id=\"start_stop\"</code>, the countdown should pause.",
+        "<strong>User Story #21:</strong> If the timer is paused and I click the element with <code>id=\"start_stop\"</code>, the countdown should resume running from the point at which it was paused.",
+        "<strong>User Story #22:</strong> When a session countdown reaches zero (NOTE: timer MUST reach 00:00), and a new countdown begins, the element with the id of <code>timer-label</code> should display a string indicating a break has begun.",
+        "<strong>User Story #23:</strong> When a session countdown reaches zero (NOTE: timer MUST reach 00:00), a new break countdown should begin, counting down from the value currently displayed in the <code>id=\"break-length\"</code> element.",
+        "<strong>User Story #24:</strong> When a break countdown reaches zero (NOTE: timer MUST reach 00:00), and a new countdown begins, the element with the id of <code>timer-label</code> should display a string indicating a session has begun.",
+        "<strong>User Story #25:</strong> When a break countdown reaches zero (NOTE: timer MUST reach 00:00), a new session countdown should begin, counting down from the value currently displayed in the <code>id=\"session-length\"</code> element.",
+        "<strong>User Story #26:</strong> When a countdown reaches zero (NOTE: timer MUST reach 00:00), a sound indicating that time is up should play. This should utilize an HTML5 <code>audio</code> tag and have a corresponding <code>id=\"beep\"</code>.",
+        "<strong>User Story #27:</strong> The audio element with <code>id=\"beep\"</code> must be 1 second or longer.",
+        "<strong>User Story #28:</strong> The audio element with id of <code>beep</code> must stop playing and be rewound to the beginning when the element with the id of <code>reset</code> is clicked.",
         "You can build your project by forking <a href='http://codepen.io/freeCodeCamp/pen/MJjpwO' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js</code>",
         "Once you're done, submit the URL to your working project with all its tests passing.",
         "Remember to use the <a href='https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> method if you get stuck."

challenges/04-data-visualization/data-visualization-projects.json

@@ -8,8 +8,22 @@
       "id": "bd7168d8c242eddfaeb5bd13",
       "title": "Visualize Data with a Bar Chart",
       "description": [
-        "Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
+        "<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/GrZVaM' target='_blank'>https://codepen.io/freeCodeCamp/full/GrZVaM</a>.",
-        "Here's a <a href='https://codepen.io/freeCodeCamp/full/GrZVaM' target='_blank'>working example</a>. Try not to look at its code.",
+        "Fulfill the below <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> and get all of the tests to pass. Give it your own personal style.",
+        "You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. The tests require axes to be generated using the D3 axis property, which automatically generates ticks along the axis. These ticks are required for passing the D3 tests because their positions are used to determine alignment of graphed elements. You will find information about generating axes at <a href='https://github.com/d3/d3/blob/master/API.md#axes-d3-axis' target='_blank'>https://github.com/d3/d3/blob/master/API.md#axes-d3-axis</a>. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.",
+        "<strong>User Story #1:</strong> My chart should have a title with a corresponding <code>id=\"title\"</code>.",
+        "<strong>User Story #2:</strong> My chart should have a <code>g</code> element x-axis with a corresponding <code>id=\"x-axis\"</code>.",
+        "<strong>User Story #3:</strong> My chart should have a <code>g</code> element y-axis with a corresponding <code>id=\"y-axis\"</code>.",
+        "<strong>User Story #4:</strong> Both axes should contain multiple tick labels, each with the corresponding <code>class=\"tick\"</code>.",
+        "<strong>User Story #5:</strong> My chart should have a <code>rect</code> element for each data point with a corresponding <code>class=\"bar\"</code> displaying the data.",
+        "<strong>User Story #6:</strong> Each bar should have the properties <code>data-date</code> and <code>data-gdp</code> containing date and GDP values.",
+        "<strong>User Story #7:</strong> The bar elements' <code>data-date</code> properties should match the order of the provided data.",
+        "<strong>User Story #8:</strong> The bar elements' <code>data-gdp</code> properties should match the order of the provided data.",
+        "<strong>User Story #9:</strong> Each bar element's height should accurately represent the data's corresponding GDP.",
+        "<strong>User Story #10:</strong> The <code>data-date</code> attribute and its corresponding bar element should align with the corresponding value on the x-axis.",
+        "<strong>User Story #11:</strong> The <code>data-gdp</code> attribute and its corresponding bar element should align with the corresponding value on the y-axis.",
+        "<strong>User Story #12:</strong> I can mouse over an area and see a tooltip with a corresponding <code>id=\"tooltip\"</code> which displays more information about the area.",
+        "<strong>User Story #13:</strong> My tooltip should have a <code>data-date</code> property that corresponds to the <code>data-date</code> of the active area.",
         "Here is the dataset you will need to complete this project: <code>https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json</code>",
         "You can build your project by forking <a href='https://codepen.io/freeCodeCamp/pen/MJjpwO' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js</code>.",
         "Once you're done, submit the URL to your working project with all its tests passing.",
@@ -31,8 +45,24 @@
       "id": "bd7178d8c242eddfaeb5bd13",
       "title": "Visualize Data with a Scatterplot Graph",
       "description": [
-        "Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
+        "<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/bgpXyK' target='_blank'>https://codepen.io/freeCodeCamp/full/bgpXyK</a>.",
-        "Here's a <a href='https://codepen.io/freeCodeCamp/full/bgpXyK' target='_blank'>working example</a>. Try not to look at its code.",
+        "Fulfill the below <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> and get all of the tests to pass. Give it your own personal style.",
+        "You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. The tests require axes to be generated using the D3 axis property, which automatically generates ticks along the axis. These ticks are required for passing the D3 tests because their positions are used to determine alignment of graphed elements. You will find information about generating axes at <a href='https://github.com/d3/d3/blob/master/API.md#axes-d3-axis' target='_blank'>https://github.com/d3/d3/blob/master/API.md#axes-d3-axis</a>. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.",
+        "<strong>User Story #1:</strong> I can see a title element that has a corresponding <code>id=\"title\"</code>.",
+        "<strong>User Story #2:</strong> I can see an x-axis that has a corresponding <code>id=\"x-axis\"</code>.",
+        "<strong>User Story #3:</strong> I can see a y-axis that has a corresponding <code>id=\"y-axis\"</code>.",
+        "<strong>User Story #4:</strong> I can see dots, that each have a class of <code>dot</code>, which represent the data being plotted.",
+        "<strong>User Story #5:</strong> Each dot should have the properties <code>data-xvalue</code> and <code>data-yvalue</code> containing their corresponding x and y values.",
+        "<strong>User Story #6:</strong> The <code>data-xvalue</code> and <code>data-yvalue</code> of each dot should be within the range of the actual data and in the correct data format. For <code>data-xvalue</code>, integers (full years) or Date objects are acceptable for test evaluation. For <code>data-yvalue</code> (minutes), use Date objects.",
+        "<strong>User Story #7:</strong> The <code>data-xvalue</code> and its corresponding dot should align with the corresponding point/value on the x-axis.",
+        "<strong>User Story #8:</strong> The <code>data-yvalue</code> and its corresponding dot should align with the corresponding point/value on the y-axis.",
+        "<strong>User Story #9:</strong> I can see multiple tick labels on the y-axis with <code>%M:%S</code> time format.",
+        "<strong>User Story #10:</strong> I can see multiple tick labels on the x-axis that show the year.",
+        "<strong>User Story #11:</strong> I can see that the range of the x-axis labels are within the range of the actual x-axis data.",
+        "<strong>User Story #12:</strong> I can see that the range of the y-axis labels are within the range of the actual y-axis data.",
+        "<strong>User Story #13:</strong> I can see a legend containing descriptive text that has <code>id=\"legend\"</code>.",
+        "<strong>User Story #14:</strong> I can mouse over an area and see a tooltip with a corresponding <code>id=\"tooltip\"</code> which displays more information about the area.",
+        "<strong>User Story #15:</strong> My tooltip should have a <code>data-year</code> property that corresponds to the <code>data-xvalue</code> of the active area.",
         "Here is the dataset you will need to complete this project: <code>https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json</code>",
         "You can build your project by forking <a href='https://codepen.io/freeCodeCamp/pen/MJjpwO' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js</code>",
         "Once you're done, submit the URL to your working project with all its tests passing.",
@@ -54,8 +84,26 @@
       "id": "bd7188d8c242eddfaeb5bd13",
       "title": "Visualize Data with a Heat Map",
       "description": [
-        "Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
+        "<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/JEXgeY' target='_blank'>https://codepen.io/freeCodeCamp/full/JEXgeY</a>.",
-        "Here's a <a href='https://codepen.io/freeCodeCamp/full/JEXgeY' target='_blank'>working example</a>. Try not to look at its code.",
+        "Fulfill the below <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> and get all of the tests to pass. Give it your own personal style.",
+        "You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.",
+        "<strong>User Story #1:</strong> My heat map should have a title with a corresponding <code>id=\"title\"</code>.",
+        "<strong>User Story #2:</strong> My heat map should have a description with a corresponding <code>id=\"description\"</code>.",
+        "<strong>User Story #3:</strong> My heat map should have an x-axis with a corresponding <code>id=\"x-axis\"</code>.",
+        "<strong>User Story #4:</strong> My heat map should have a y-axis with a corresponding <code>id=\"y-axis\"</code>.",
+        "<strong>User Story #5:</strong> My heat map should have <code>rect</code> elements with a <code>class=\"cell\"</code> that represent the data.",
+        "<strong>User Story #6:</strong> There should be at least 4 different fill colors used for the cells.",
+        "<strong>User Story #7:</strong> Each cell will have the properties <code>data-month</code>, <code>data-year</code>, <code>data-temp</code> containing their corresponding month, year, and temperature values.",
+        "<strong>User Story #8:</strong> The <code>data-month</code>, <code>data-year</code> of each cell should be within the range of the data.",
+        "<strong>User Story #9:</strong> My heat map should have cells that align with the corresponding month on the y-axis.",
+        "<strong>User Story #10:</strong> My heat map should have cells that align with the corresponding year on the x-axis.",
+        "<strong>User Story #11:</strong> My heat map should have multiple tick labels on the y-axis with the full month name.",
+        "<strong>User Story #12:</strong> My heat map should have multiple tick labels on the x-axis with the years between 1754 and 2015.",
+        "<strong>User Story #13:</strong> My heat map should have a legend with a corresponding <code>id=\"legend\"</code>.",
+        "<strong>User Story #14:</strong> My legend should contain <code>rect</code> elements.",
+        "<strong>User Story #15:</strong> The <code>rect</code> elements in the legend should use at least 4 different fill colors.",
+        "<strong>User Story #16:</strong> I can mouse over an area and see a tooltip with a corresponding <code>id=\"tooltip\"</code> which displays more information about the area.",
+        "<strong>User Story #16:</strong> My tooltip should have a <code>data-year</code> property that corresponds to the <code>data-year</code> of the active area.",
         "Here is the dataset you will need to complete this project: <code>https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json</code>",
         "You can build your project by forking <a href='https://codepen.io/freeCodeCamp/pen/MJjpwO' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js</code>",
         "Once you're done, submit the URL to your working project with all its tests passing.",
@@ -77,8 +125,20 @@
       "id": "587d7fa6367417b2b2512bbf",
       "title": "Visualize Data with a Choropleth Map",
       "description": [
-        "Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
+        "<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/EZKqza' target='_blank'>https://codepen.io/freeCodeCamp/full/EZKqza</a>.",
-        "Here's a <a href='https://codepen.io/freeCodeCamp/full/EZKqza' target='_blank'>working example</a>. Try not to look at its code.",
+        "Fulfill the below <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> and get all of the tests to pass. Give it your own personal style.",
+        "You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.",
+        "<strong>User Story #1:</strong> My choropleth should have a title with a corresponding <code>id=\"title\"</code>.",
+        "<strong>User Story #2:</strong> My choropleth should have a description element with a corresponding <code>id=\"description\"</code>.",
+        "<strong>User Story #3:</strong> My choropleth should have counties with a corresponding <code>class=\"county\"</code> that represent the data.",
+        "<strong>User Story #4:</strong> There should be at least 4 different fill colors used for the counties.",
+        "<strong>User Story #5:</strong> My counties should each have <code>data-fips</code> and <code>data-education</code> properties containing their corresponding fips and education values.",
+        "<strong>User Story #6:</strong> My choropleth should have a county for each provided data point.",
+        "<strong>User Story #7:</strong> The counties should have data-fips and data-education values that match the sample data.",
+        "<strong>User Story #8:</strong> My choropleth should have a legend with a corresponding <code>id=\"legend\"</code>.",
+        "<strong>User Story #9:</strong> There should be at least 4 different fill colors used for the legend.",
+        "<strong>User Story #10:</strong> I can mouse over an area and see a tooltip with a corresponding <code>id=\"tooltip\"</code> which displays more information about the area.",
+        "<strong>User Story #11:</strong> My tooltip should have a <code>data-education</code> property that corresponds to the <code>data-education</code> of the active area.",
         "Here are the datasets you will need to complete this project:<br><ul><li><strong>US Education Data: </strong><code>https://raw.githubusercontent.com/no-stack-dub-sack/testable-projects-fcc/master/src/data/choropleth_map/for_user_education.json</code></li><li><strong>US County Data: </strong><code>https://raw.githubusercontent.com/no-stack-dub-sack/testable-projects-fcc/master/src/data/choropleth_map/counties.json</code></li></ul>",
         "You can build your project by forking <a href='https://codepen.io/freeCodeCamp/pen/MJjpwO' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js</code>",
         "Once you're done, submit the URL to your working project with all its tests passing.",
@@ -96,8 +156,20 @@
       "id": "587d7fa6367417b2b2512bc0",
       "title": "Visualize Data with a Treemap Diagram",
       "description": [
-        "Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
+        "<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/KaNGNR' target='_blank'>https://codepen.io/freeCodeCamp/full/KaNGNR</a>.",
-        "Here's a <a href='https://codepen.io/freeCodeCamp/full/KaNGNR' target='_blank'>working example</a>. Try not to look at its code.",
+        "Fulfill the below <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> and get all of the tests to pass. Give it your own personal style.",
+        "You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. The tests require axes to be generated using the D3 axis property, which automatically generates ticks along the axis. These ticks are required for passing the D3 tests because their positions are used to determine alignment of graphed elements. You will find information about generating axes at <a href='https://github.com/d3/d3/blob/master/API.md#axes-d3-axis' target='_blank'>https://github.com/d3/d3/blob/master/API.md#axes-d3-axis</a>. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.",
+        "<strong>User Story #1:</strong> My tree map should have a title with a corresponding <code>id=\"title\"</code>.",
+        "<strong>User Story #2:</strong> My tree map should have a description with a corresponding <code>id=\"description\"</code>.",
+        "<strong>User Story #3:</strong> My tree map should have <code>rect</code> elements with a corresponding <code>class=\"tile\"</code> that represent the data.",
+        "<strong>User Story #4:</strong> There should be at least 2 different fill colors used for the tiles.",
+        "<strong>User Story #5:</strong> Each tile should have the properties <code>data-name</code>, <code>data-category</code>, and <code>data-value</code> containing their corresponding name, category, and value.",
+        "<strong>User Story #6:</strong> The area of each tile should correspond to the data-value amount: tiles with a larger data-value should have a bigger area.",
+        "<strong>User Story #7:</strong> My tree map should have a legend with corresponding <code>id=\"legend\"</code>.",
+        "<strong>User Story #8:</strong> My legend should have <code>rect</code> elements with a corresponding <code>class=\"legend-item\"</code>.",
+        "<strong>User Story #9:</strong> The <code>rect</code> elements in the legend should use at least 2 different fill colors.",
+        "<strong>User Story #10:</strong> I can mouse over an area and see a tooltip with a corresponding <code>id=\"tooltip\"</code> which displays more information about the area.",
+        "<strong>User Story #11:</strong> My tooltip should have a <code>data-value</code> property that corresponds to the <code>data-value</code> of the active area.",
         "For this project you can use any of the following datasets:<br><ul><li><strong>Kickstarter Pledges:</strong> <code>https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/kickstarter-funding-data.json</code></li><li><strong>Movie Sales:</strong> <code>https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/movie-data.json</code></li><li><strong>Video Game Sales:</strong> <code>https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/video-game-sales-data.json</code></li></ul>",
         "You can build your project by forking <a href='https://codepen.io/freeCodeCamp/pen/MJjpwO' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js</code>",
         "Once you're done, submit the URL to your working project with all its tests passing.",