jiebi/CodeConvo huggingface dataset:
"Create an <code>ordered list</code> of the the top 3 things cats hate the most.", "HTML has a special element for creating ordered lists, or numbered-style lists.", "Ordered lists start with a <code>&#60;ol&#62;</code> element. Then they contain some number of <code>&#60;li&#62;</code> elements.", <del> "For example: <code>&#60;ol&#62;&#60;li&#62;hydrogen&#60;/li&#62;&#60;li&#62;helium&#60;/li&#62;&#60;ol&#62;</code> would create a numbered list of "hydrogen" and "helium"." </del> <ins> "For example: <code>&#60;ol&#62;&#60;li&#62;hydrogen&#60;/li&#62;&#60;li&#62;helium&#60;/li&#62;&#60;/ol&#62;</code> would create a numbered list of "hydrogen" and "helium"." </ins> ], "tests": [ "assert($('ul').length > 0, 'You should have an <code>ul</code> element on your webpage.')",
"<span class='text-info'>Hint:</span> Here's an example call to Twitch.tv's JSON API: <code>https://api.twitch.tv/kraken/streams/freecodecamp</code>.", "<span class='text-info'>Hint:</span> The relevant documentation about this API call is here: <a href='https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel' target='_blank'>https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel</a>.", "<span class='text-info'>Hint:</span> Here's an array of the Twitch.tv usernames of people who regularly stream coding: <code>["freecodecamp", "storbeck", "terakilobyte", "habathcx","RobotCaleb","comster404","brunofin","thomasballinger","noobs2ninjas","beohoff"]</code>", <del> "Remember to use <a href='/field-guide/how-do-i-get-help-when-I-get-stuck' target='_blank'>RSAP</a> if you get stuck. Try using <a href='http://api.jquery.com/jquery.each/'>jQuery's $.getJSON()</a> to consume APIs.", </del> <ins> "Remember to use <a href='/field-guide/how-do-i-get-help-when-I-get-stuck' target='_blank'>RSAP</a> if you get stuck. Try using <a href='http://api.jquery.com/jquery.getjson/'>jQuery's $.getJSON()</a> to consume APIs.", </ins> "When you are finished, click the "I've completed this challenge" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.", "If you'd like immediate feedback on your project, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>" ],
"Here are the <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> you must enable, and optional bonus user stories:", "<span class='text-info'>User Story:</span> As a user, I can click a button to show me a new random quote.", "<span class='text-info'>Bonus User Story:</span> As a user, I can press a button to tweet out a quote.", <del> "Remember to use <a href='/field-guide/how-do-i-get-help-when-I-get-stuck' target='_blank'>RSAP</a> if you get stuck. Try using <a href='http://api.jquery.com/jquery.each/'>jQuery's $.getJSON()</a> to consume APIs.", </del> <ins> "Remember to use <a href='/field-guide/how-do-i-get-help-when-I-get-stuck' target='_blank'>RSAP</a> if you get stuck. Try using <a href='http://api.jquery.com/jquery.getjson/'>jQuery's $.getJSON()</a> to consume APIs.", </ins> "When you are finished, click the "I've completed this challenge" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.", "If you'd like immediate feedback on your project, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>" ],
"<span class='text-info'>Bonus User Story:</span> As a user, I can see an icon depending on the temperature..", "<span class='text-info'>Bonus User Story:</span> As a user, I see a different background image depending on the temperature (e.g. snowy mountain, hot desert).", "<span class='text-info'>Bonus User Story:</span> As a user, I can push a button to toggle between Fahrenheit and Celsius.", <del> "Remember to use <a href='/field-guide/how-do-i-get-help-when-I-get-stuck' target='_blank'>RSAP</a> if you get stuck. Try using <a href='http://api.jquery.com/jquery.each/'>jQuery's $.getJSON()</a> to consume APIs.", </del> <ins> "Remember to use <a href='/field-guide/how-do-i-get-help-when-I-get-stuck' target='_blank'>RSAP</a> if you get stuck. Try using <a href='http://api.jquery.com/jquery.getjson/'>jQuery's $.getJSON()</a> to consume APIs.", </ins> "When you are finished, click the "I've completed this challenge" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.", "If you'd like immediate feedback on your project, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>" ],
"<span class='text-info'>User Story:</span> As a user, I can click a link to go directly to the post's discussion page.", "<span class='text-info'>Bonus User Story:</span> As a user, I can see how many upvotes each story has.", "<span class='text-info'>Hint:</span> Here's the Camper News Hot Stories API endpoint: <code>http://www.freecodecamp.com/stories/hotStories</code>.", <del> "Remember to use <a href='/field-guide/how-do-i-get-help-when-I-get-stuck' target='_blank'>RSAP</a> if you get stuck. Try using <a href='http://api.jquery.com/jquery.each/'>jQuery's $.getJSON()</a> to consume APIs.", </del> <ins> "Remember to use <a href='/field-guide/how-do-i-get-help-when-I-get-stuck' target='_blank'>RSAP</a> if you get stuck. Try using <a href='http://api.jquery.com/jquery.getjson/'>jQuery's $.getJSON()</a> to consume APIs.", </ins> "When you are finished, click the "I've completed this challenge" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.", "If you'd like immediate feedback on your project, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>" ],
"<span class='text-info'>Bonus User Story:</span>As a user, I can click a button to see a random Wikipedia entry.", "<span class='text-info'>Bonus User Story:</span>As a user, when I type in the search box, I can see a dropdown menu with autocomplete options for matching Wikipedia entries.", "<span class='text-info'>Hint:</span> Here's an entry on using Wikipedia's API: <code>http://www.mediawiki.org/wiki/API:Main_page</code>.", <del> "Remember to use <a href='/field-guide/how-do-i-get-help-when-I-get-stuck' target='_blank'>RSAP</a> if you get stuck. Try using <a href='http://api.jquery.com/jquery.each/'>jQuery's $.getJSON()</a> to consume APIs.", </del> <ins> "Remember to use <a href='/field-guide/how-do-i-get-help-when-I-get-stuck' target='_blank'>RSAP</a> if you get stuck. Try using <a href='http://api.jquery.com/jquery.getjson/'>jQuery's $.getJSON()</a> to consume APIs.", </ins> "When you are finished, click the "I've completed this challenge" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.", "If you'd like immediate feedback on your project, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>" ],
], "tests": [ "assert((/cat photos/gi).test($("a").text()), 'Your <code>a</code> element should have the <code>anchor text</code> of "cat photos"')", <del> "assert(/http://catphotoapp.com/gi.test($("a").attr("href")), 'You need an <code>a</code> element that links to <code>http&#58;//catphotoapp.com<code>.')", </del> <ins> "assert(/http://catphotoapp.com/gi.test($("a").attr("href")), 'You need an <code>a</code> element that links to <code>http&#58;//catphotoapp.com</code>.')", </ins> "assert(editor.match(/</a>/g) && editor.match(/</a>/g).length === editor.match(/<a/g).length, 'Make sure your <code>a</code> element has a closing tag.')" ], "challengeSeed": [
"Wait for the workspace to finish processing and select it on the left sidebar, below the Create New Workspace button.", "Click the "Start Editing" button.", "In the lower right hand corner you should see a terminal window. In this window use the following commands. You don't need to know what these mean at this point.", <del> "Run this command: <code>npm install how-to-npm -g</code>", "Now start this tutorial by running <code>npm install how-to-npm@2.0.0</code>.", </del> <ins> "Install <code>how-to-npm</code> with this command: <code>npm install how-to-npm -g</code>", "Now start the tutorial by running <code>how-to-npm</code>.", </ins> "Note that you can resize the c9.io's windows by dragging their borders.", "Make sure that you are always in your project's "workspace" directory. You can always navigate back to this directory by running this command: <code>cd ~/workspace</code>.", "Note that you can only add dist tags to the specific version numbers published in steps 8 and 10. If you receive a 403 or 404 error, run <code>how-to-npm</code> and try again.",
"dashedName": "waypoint-add-two-numbers-with-javascript", "difficulty": "9.98141", "description": [ <del> "In JavaScript whole numbers (called integers) can be easily used to preform mathematical functions", "Let's try a few of the most commonly used ones now", "We use <code>+</code>for addition", </del> <ins> "In JavaScript whole numbers (called integers) can be easily used to perform mathematical functions.", "Let's try a few of the most commonly used ones now.", "We use <code>+</code>for addition.", </ins> "Replace the <code>0</code>with correct number to achieve the result in the comment." ], "tests": [
"dashedName": "waypoint-subtract-one-number-from-another-with-javascript", "difficulty": "9.98142", "description": [ <del> "In JavaScript whole numbers (called integers) can be easily used to preform mathematical functions", "Let's try a few of the most commonly used ones now", "We use <code>-</code>for subtraction", </del> <ins> "In JavaScript whole numbers (called integers) can be easily used to perform mathematical functions.", "Let's try a few of the most commonly used ones now.", "We use <code>-</code>for subtraction.", </ins> "Replace the <code>0</code>with correct number to achieve the result in the comment." ], "tests": [
"dashedName": "waypoint-multiply-two-numbers-with-javascript", "difficulty": "9.98143", "description": [ <del> "In JavaScript whole numbers (called integers) can be easily used to preform mathematical functions", "Let's try a few of the most commonly used ones now", "We use <code>*</code>for multiplication", </del> <ins> "In JavaScript whole numbers (called integers) can be easily used to perform mathematical functions.", "Let's try a few of the most commonly used ones now.", "We use <code>*</code>for multiplication.", </ins> "Replace the <code>0</code>with correct number to achieve the result in the comment." ], "tests": [
"dashedName": "waypoint-divide-one-number-by-another-with-javascript", "difficulty": "9.9814", "description": [ <del> "In JavaScript whole numbers (called integers) can be easily used to preform mathematical functions", "Let's try a few of the most commonly used ones now", "We use <code>/</code>for division", </del> <ins> "In JavaScript whole numbers (called integers) can be easily used to perform mathematical functions.", "Let's try a few of the most commonly used ones now.", "We use <code>/</code>for division.", </ins> "Replace the <code>0</code>with correct number to achieve the result in the comment." ], "tests": [
], "tests": [ "assert($("body").css("background-color") === "rgb(255, 0, 0)", 'Give your <code>body</code> element the <code>background-color</code> of red.')", <del> "assert(editor.match(/#FF0000/g) && editor.match(/#FF0000/g).length > 0, 'Use the <code>hex code</code> for the color red instead of the word <code>red</code>. For example <code>body { color&#58; #FF0000; }</code>.')" </del> <ins> "assert(editor.match(/#FF0000/ig) && editor.match(/#FF0000/ig).length > 0, 'Use the <code>hex code</code> for the color red instead of the word <code>red</code>. For example <code>body { color&#58; #FF0000; }</code>.')" </ins> ], "challengeSeed": [ "<style>",
], "tests": [ "assert($("body").css("background-color") === "rgb(0, 0, 255)", 'Give your <code>body</code> element the <code>background-color</code> of blue.')", <del> "assert(editor.match(/#0000FF/g) && editor.match(/#0000FF/g).length > 0, 'Use the <code>hex code</code> for the color blue instead of the word <code>blue</code>. For example <code>body { color&#58; #0000FF; }</code>.')" </del> <ins> "assert(editor.match(/#0000FF/ig) && editor.match(/#0000FF/ig).length > 0, 'Use the <code>hex code</code> for the color blue instead of the word <code>blue</code>. For example <code>body { color&#58; #0000FF; }</code>.')" </ins> ], "challengeSeed": [ "<style>",
], "tests": [ "assert($("body").css("background-color") === "rgb(255, 165, 0)", 'Give your <code>body</code> element the <code>background-color</code> of orange.')", <del> "assert(editor.match(/#FFA500/g) && editor.match(/#FFA500/g).length > 0, 'Use the <code>hex code</code> for the color orange instead of the word <code>orange</code>. For example <code>body { color&#58; #FFA500; }</code>.')" </del> <ins> "assert(editor.match(/#FFA500/ig) && editor.match(/#FFA500/ig).length > 0, 'Use the <code>hex code</code> for the color orange instead of the word <code>orange</code>. For example <code>body { color&#58; #FFA500; }</code>.')" </ins> ], "challengeSeed": [ "<style>",
"difficulty":"9.9825", "description":[ "You can run the same code multiple times by using a loop.", <del> "Another type of JavaScript loop is called a "while loop" because it runs "while" something is true, and stops once that something is no longer true.", </del> <ins> "Another type of JavaScript loop is called a "while loop", because it runs "while" something is true and stops once that something is no longer true.", </ins> "<code>var ourArray = [];</code>", "<code>var i = 0;</code>", "<code>while(i < 5) {</code>",
"<code>g</code> means that we want to search the entire string for this pattern.", "<code>i</code> means that we want to ignore the case (uppercase or lowercase) when searching for the pattern.", "<code>Regular expressions</code> are usually surrounded by <code>/</code> symbols.", <del> "Let's try selecting all the occurances of the word <code>and</code> in the string <code>George Boole and Alan Turing went to the shop and got some milk</code>. We can do this by replacing the <code>.+</code> part of our regular expression with the current <code>regular expression</code> with the word <code>and</code>." </del> <ins> "Let's try selecting all the occurrences of the word <code>and</code> in the string <code>George Boole and Alan Turing went to the shop and got some milk</code>. We can do this by replacing the <code>.+</code> part of our regular expression with the current <code>regular expression</code> with the word <code>and</code>." </ins> ], "tests":[ "assert(test==2, 'Your <code>regular expression</code> should find two occurrences of the word <code>and</code>');",
"Nest one <code>div</code> element with the class <code>well</code> within each of your <code>col-xs-6</code> <code>div</code> elements." ], "tests": [ <del> "assert($("div").length > 4, 'Add two <code>div</code> elements inside your <code>div class="well"></code> element both with the class <code>col-xs-6</code>')", </del> <ins> "assert($("div").length > 4, 'Add a <code>div</code> element with the class <code>well</code> inside each of your <code>div class="col-xs-6"> elements</code>')", </ins> "assert($("div.col-xs-6").children("div.well").length > 1, 'Nest both of your <code>div class="col-xs-6"</code> elements within your <code>div class="row"</code> element.')", "assert(editor.match(/</div>/g) && editor.match(/<div/g) && editor.match(/</div>/g).length === editor.match(/<div/g).length, 'Make sure all your <code>div</code> elements have closing tags.')" ],
"Choose Node.js in the selection area below the name field.", "Click the Create button. Then click into your new workspace.", "In the lower right hand corner you should see a terminal window. In this window use the following commands. You don't need to know what these mean at this point.", <del> "Install <code>how-to-npm</code> with this command: <code>npm install -g git-it</code>", </del> <ins> "Install <code>git-it</code> with this command: <code>npm install -g git-it</code>", </ins> "Now start the tutorial by running <code>git-it</code>.", "Note that you can resize the c9.io's windows by dragging their borders.", "Make sure that you are always in your project's "workspace" directory. You can always navigate back to this directory by running this command: <code>cd ~/workspace</code>.",
}, { "id":"cf1111c1c12feddfaeb8bdef", <del> "title": "Find White Space with Regular Expressions", </del> <ins> "title": "Find Whitespace with Regular Expressions", </ins> "difficulty":"9.986", "description":[ <del> "We can also use selectors like <code>s</code> to find spaces in a string.", </del> <ins> "We can also use selectors like <code>s</code> to find whitespace in a string.", "The whitespace characters are <code>" "</code> (space), <code>r</code> (carriage return), <code>n</code> (newline), <code>t</code> (tab), and <code>f</code> (form feed).", </ins> "It is used like this:", "<code>/s+/g</code>", <del> "Select all the spaces in the sentence string." </del> <ins> "Select all the whitespace characters in the sentence string." </ins> ], "tests":[ "assert(test === 7, 'message: Your RegEx should have found seven spaces in the <code>testString</code>.');",
"Many HTML elements have <code>children</code> which <code>inherit</code> their properties from their parent HTML elements.", "For example, every HTML element is a child of your <code>body</code> element, and your "jQuery Playground" <code>h3</code> element is a child of your <code>&#60;div class="container-fluid"&#62</code> element.", "jQuery has a function called <code>children()</code> that allows you to access the children of whichever element you've selected.", <del> "Here's an example of how you would use the <code>children()</code> function to give the children of your <code>left-well</code> element the background color of blue: <code>$("#left-well").children().css("color", "blue")</code>", </del> <ins> "Here's an example of how you would use the <code>children()</code> function to give the children of your <code>left-well</code> element the color of blue: <code>$("#left-well").children().css("color", "blue")</code>", </ins> "Give all the children of your <code>#right-well</code> element a color of green." ], "tests": [
"</style>", "", "<h2 class="red-text">CatPhotoApp</h2>", <ins> "<!--Do not alter code above this line-->", </ins> "", "<a href="http://www.freecatphotoapp.com">cat photos</a>", "", <ins> "<!--Do not alter code below this line-->", </ins> "<img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat">", "", "<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
"Let's delete the <code>"tails"</code> property from <code>myDog</code>." ], "tests": [ <del> "assert(myDog.bark === undefined, 'message: Delete the property <code>"bark"</code> from <code>myDog</code>.');" </del> <ins> "assert(myDog.tails === undefined, 'message: Delete the property <code>"tails"</code> from <code>myDog</code>.');" </ins> ], "challengeSeed": [ "var ourDog = {",
[ "http://i.imgur.com/EoTfOyC.jpg", "An image of some of our campers coding together in Montreal.", <del> "Keep practicing coding every day and hanging out with other people who code, and you will becoming a job-ready coder.", </del> <ins> "Keep practicing coding every day and hanging out with other people who code, and you will become a job-ready coder.", </ins> "" ], [
"challenges": [ { "id": "bb000000000000000000001", <del> "title":  "Trigger Click Events with jQuery", </del> <ins> "title": "Trigger Click Events with jQuery", </ins> "description": [ "In this section, we'll learn how to get data from APIs. APIs - or Application Programming Interfaces - are tools that computers use to communicate with one another.", "We'll also learn how to update HTML with the data we get from these APIs using a technology called Ajax.",
"</div>" ], "challengeType": 0, <del> "type": "waypoint" </del> <ins> "type": "waypoint", "nameEs": "Activa eventos de pulsación con jQuery", "descriptionEs": [ "En esta sección, vamos a aprender cómo obtener datos de las APIs. Las APIs - o interfaces de programación de aplicaciones - son herramientas que utilizan los computadores para comunicarse entre sí.", "También aprenderemos cómo actualizar HTML con los datos que obtenemos de estas API usando una tecnología llamada Ajax.", "En primer lugar, vamos a revisar lo que hace la función <code>$(document).ready()</code>. Esta función hace que todo el código dentro de ella se ejecute sólo hasta que nuestra página ha sido cargada.", "Hagamos que nuestro botón "Get message" cambie el texto del elemento con clase <code>message</code>.", "Antes de poder hacer esto, tenemos que implementar un <code>evento de pulsación</code> dentro de nuestra función <code>$(document).ready()</code>, añadiendo este código:", "<code>$("#getMessage").on("click", function(){</code>", "", "<code>});</code>" ] </ins> }, { "id": "bc000000000000000000001", <del> "title":  "Change Text with Click Events", </del> <ins> "title": "Change Text with Click Events", </ins> "description": [ "When our click event happens, we can use Ajax to update an HTML element.", "Let's make it so that when a user clicks the "Get Message" button, we change the text of the element with the class <code>message</code> to say "Here is the message".",
"</div>" ], "challengeType": 0, <del> "type": "waypoint" </del> <ins> "type": "waypoint", "nameEs": "Cambia texto con eventos de pulsación", "descriptionEs": [ "Cuando nuestro evento de pulsación ocurre, podemos utilizar Ajax para actualizar un elemento HTML.", "Hagamos que cuando un usuario pulse el botón "Get Message", el texto del elemento con la clase <code>message</code> cambie para decir "Here is the message".", "Podemos hacerlo añadiendo el siguiente código dentro de nuestro evento de pulsación:", "<code>&nbsp;&nbsp;$(".message").html("Here is the message");</code>" ] </ins> }, { "id": "bb000000000000000000002",