jiebi/CodeConvo huggingface dataset:
"tests": [ "assert($("img").hasClass("smaller-image"), 'Your <code>img</code> element should have the class <code>smaller-image</code>.')", "assert($("img").hasClass("thick-green-border"), 'Your <code>img</code> element should have the class <code>thick-green-border</code>.')", <del> "assert($("img").hasClass("thick-green-border") && parseInt($("img").css("border-top-width")), 'Give your image a border width of <code>10px</code>.')", "assert(new RegExp("solid", "gi").test(editor), 'Give your image a border style of <code>solid</code>.')", </del> <ins> "assert($("img").hasClass("thick-green-border") && parseInt($("img").css("border-top-width"), 10) === 10, 'Give your image a border width of <code>10px</code>.')", "assert($("img").css("border-right-style") === "solid", 'Give your image a border style of <code>solid</code>.')", </ins> "assert($("img").css("border-left-color") === "rgb(0, 128, 0)", 'The border around your <code>img</code> element should be green.')" ], "challengeSeed": [
], "tests": [ "assert.deepEqual(friendly(['2015-07-01', '2015-07-04']), ['July 1st','4th'], 'ending month should be omitted since it is already mentioned');", <del> "assert.deepEqual(friendly(['2015-12-01', '2016-02-03']), ['December 1st','February 3rd'], 'one month apart can be inferred it is the next year');", </del> <ins> "assert.deepEqual(friendly(['2015-12-01', '2016-02-03']), ['December 1st','February 3rd'], 'two months apart can be inferred if it is the next year');", </ins> "assert.deepEqual(friendly(['2015-12-01', '2017-02-03']), ['December 1st, 2015','February 3rd, 2017']);", "assert.deepEqual(friendly(['2016-03-01', '2016-05-05']), ['March 1st','May 5th, 2016']);", "assert.deepEqual(friendly(['2017-01-01', '2017-01-01']), ['January 1st, 2017'], 'since we do not duplicate only return once');",
"<code>function functionName (a, b) {</code>", "<code>&thinsp;&thinsp;return(a + b);</code>", "<code>}</code>", <del> "We can "call" our function like this: <code>functionName();</code>, and it will run and return it's <code>return</code> value to us.", "Create and call a function called <code>myFunction</code>." </del> <ins> "We can "call" our function like this: <code>functionName();</code>, and it will run and return its <code>return</code> value to us.", "Create and call a function called <code>myFunction</code> that returns the sum of a and b." </ins> ], "tests":[ "assert((function(){if(typeof(f) !== "undefined" && typeof(f) === "number" && f === a + b  && editor.getValue().match(/return/gi).length >= 1 && editor.getValue().match(/a/gi).length >= 1 && editor.getValue().match(/b/gi).length >= 1 && editor.getValue().match(/+/gi).length >= 1){return(true);}else{return(false);}})(), 'Your function should return the value of a + b');"
"// Only change code above this line.", "// We use this function to show you the value of your variable in your output box.", "// You'll learn about functions soon.", <del> "if(typeof(myArray) !== "undefined" && typeof(data) !== "undefined"){(function(y,z){return('myArray = ' + JSON.stringify(y) + ', data = ' + JSON.stringify(z));})(myArray, data);}" </del> <ins> "if(typeof(myArray) !== "undefined" && typeof(myData) !== "undefined"){(function(y,z){return('myArray = ' + JSON.stringify(y) + ', myData = ' + JSON.stringify(z));})(myArray, myData);}" </ins> ], "type": "waypoint", "challengeType": 1
"Try creating one of each." ], "tests":[ <del> "assert(editor.getValue().match(/(//)...../g), 'Create a <code>//</code> style comment that contains at least five letters');", "assert(editor.getValue().match(/(/*)...../g), 'Create a <code>/* */</code> style comment that contains at least five letters.');", "assert(editor.getValue().match(/(*/)/g), 'Make sure that you close the comment with a <code>*/</code>');" </del> <ins> "assert(editor.getValue().match(/(//)...../g), 'Create a <code>//</code> style comment that contains at least five letters');", "assert(editor.getValue().match(/(/*)[wW]{5,}(?=*/)/gm), 'Create a <code>/* */</code> style comment that contains at least five letters.');", "assert(editor.getValue().match(/(*/)/g), 'Make sure that you close the comment with a <code>*/</code>');" </ins> ], "challengeSeed":[ ],
"title": "Use Spans for Inline Elements", "difficulty": 2.105, "description": [ <del> "You can use use spans to create inline elements. Remember when we used the <code>btn-block</code> class to make the button fill the entire row?", </del> <ins> "You can use spans to create inline elements. Remember when we used the <code>btn-block</code> class to make the button fill the entire row?", </ins> "This image illustrates the difference between <code>inline</code> elements and <code>block-level</code> elements:", "<img class="img-responsive" src="https://www.evernote.com/l/AHTFU358y71AV6mokPeuTEgrZVdUJ4A8v3AB/image.png" alt="An "inline" button is as small as the text it contains. In this image, it's centered. Below it is a "block-level" button, which stretches to fill the entire horizontal space.'>", "By using the <code>span</code> element, you can put several elements together, and even style different parts of the same element differently.",
"<code>});</code>" ], "tests":[ <del> "assert.deepEqual(array, [1,2,3,4], 'message: You should have removed all the values from the array that are greater than 4.');", </del> <ins> "assert.deepEqual(array, [1,2,3,4,5], 'message: You should have removed all the values from the array that are greater than 5.');", </ins> "assert(editor.getValue().match(/array.filters*(/gi), 'message: You should be using the filter method to remove the values from the array.');", "assert(editor.getValue().match(/[1,2,3,4,5,6,7,8,9,10]/gi), 'message: You should only be using <code>.filter</code> to modify the contents of the array.');" ],
"id": "bad87fee1348cd8acef08812", "title": "Create a Block Element Bootstrap Button", "description": [ <del> "Normally, your <code>button</code> elements are only as wide as the text that they contain. By making them block elements, your button will stretch to fill your page's entire horizontal space.", </del> <ins> "Normally, your <code>button</code> elements are only as wide as the text that they contain. By making them block elements, your button will stretch to fill your page's entire horizontal space and any elements following it will flow onto a "new line" below the block.", </ins> "This image illustrates the difference between <code>inline</code> elements and <code>block-level</code> elements:", "<a href="http://i.imgur.com/O32cDWE.png" data-lightbox="img-enlarge"><img class="img-responsive" src="http://i.imgur.com/O32cDWE.png" title="Click to enlarge" alt="An "inline" button is as small as the text it contains. In this image, it's centered. Below it is a "block-level" button, which stretches to fill the entire horizontal space.'></a>", "Note that these buttons still need the <code>btn</code> class.",
"title": "Add ID Attributes to Bootstrap Elements", "description": [ "Recall that in addition to class attributes, you can give each of your elements an <code>id</code> attribute.", <del> "Each id should be unique to a specific element.", </del> <ins> "Each id must be unique to a specific element and used only once per page.", </ins> "Let's give a unique id to each of our <code>div</code> elements of class <code>well</code>.", "Remember that you can give an element an id like this: <code>&#60;div class="well" id="center-well"&#62;</code>", "Give the well on the left the id of <code>left-well</code>. Give the well on the right the <code>id</code> of <code>right-well</code>."
req.flash('info', { msg: dedent` Once you have completed all of our challenges, you should <del> join our <a href="//gitter.im/freecodecamp/HalfWayClub" target="_blank">Half Way Club</a> and start getting </del> <ins> join our <a href="https://gitter.im/freecodecamp/HalfWayClub" target="_blank">Half Way Club</a> and start getting </ins> ready for our nonprofit projects. `.split('n').join(' ') });
"<span class='text-info'>Bonus User Story:</span> As a user, I navigate to different sections of the webpage by clicking buttons in the navigation.", "Don't worry if you don't have anything to showcase on your portfolio yet - you will build several apps on the next few CodePen challenges, and can come back and update your portfolio later.", "There are many great portfolio templates out there, but for this challenge, you'll need to build a portfolio page yourself. Using Bootstrap will make this much easier for you.", <del> "Note that CodePen.io overrides the Window.open() function, so if you want to open windows using jquery, you will need to target invisible anchor elements like this one: <code>&lt;a target='_blank'&gt;</a></code>.", </del> <ins> "Note that CodePen.io overrides the Window.open() function, so if you want to open windows using jQuery, you will need to target invisible anchor elements like this one: <code>&lt;a target='_blank'&gt;</a></code>.", </ins> "Remember to use <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> if you get stuck.", "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 from fellow campers, click this button and paste in a link to your CodePen project. <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:%20PASTE_YOUR_CODEPEN_URL_HERE%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
"description": [ "We're done playing with our jQuery playground. Let's tear it down!", "jQuery can target the <code>body</code> element as well.", <del> "Here's how we would make the entire body fade out: <code> $("body").addClass("animated fadeOut")</code>", </del> <ins> "Here's how we would make the entire body fade out: <code> $("body").addClass("animated fadeOut");</code>", </ins> "But let's do something more dramatic. Add the classes <code>animated</code> and <code>hinge</code> to your <code>body</code> element." ], "tests": [
"descriptionEs": [ "Hemos terminado de jugar en nuestro patio de recreo jQuery. ¡Vamos a derribarlo!", "jQuery también puede elegir el elemento <code>body</code>.", <del> "Así es como haríamos que el cuerpo entero desapareciera: <code>$("body").addClass('animated fadeOut')</code>", </del> <ins> "Así es como haríamos que el cuerpo entero desapareciera: <code>$("body").addClass('animated fadeOut');</code>", </ins> "Pero vamos a hacer algo más dramático. Añade las clases <code>animated</code> y <code>hinge</code> a tu elemento <code>body</code>." ] }
"id": "cf1391c1c11feddfaeb4bdef", "title": "Create Decimal Numbers with JavaScript", "description": [ <del> "We can store decimal numbers in variables too. Decimal numbers are sometimes refered to as <dfn>floating point</dfn> numbers or <dfn>floats</dfn>.", </del> <ins> "We can store decimal numbers in variables too. Decimal numbers are sometimes referred to as <dfn>floating point</dfn> numbers or <dfn>floats</dfn>.", </ins> "<strong>Note</strong><br>Not all real numbers can accurately be represented in <dfn>floating point</dfn>. This can lead to rounding errors. <a href="https://en.wikipedia.org/wiki/Floating_point#Accuracy_problems" target="_blank">Details Here</a>.", "<h4>Instructions</h4>", "Create a variable <code>myDecimal</code> and give it a decimal value."
"<blockquote>5 % 2 = 1 because<br>Math.floor(5 / 2) = 2 (Quotient)<br>2 * 2 = 4<br>5 - 4 = 1 (Remainder)</blockquote>", "<strong>Usage</strong><br>In mathematics, a number can be checked even or odd by checking the remainder of the division of the number by <code>2</code>.", "<blockquote>17 % 2 = 1 (17 is Odd)<br>48 % 2 = 0 (48 is Even)</blockquote>", <del> "<strong>Note</strong><br>The <dfn>remainder</dfn> operator is sometimes incorrectly refered to as  the "modulus" operator. It is very similar to modulus, but does not work properly with negative numbers.", </del> <ins> "<strong>Note</strong><br>The <dfn>remainder</dfn> operator is sometimes incorrectly referred to as  the "modulus" operator. It is very similar to modulus, but does not work properly with negative numbers.", </ins> "<h4>Instructions</h4>", "Set <code>remainder</code> equal to the remainder of <code>11</code> divided by <code>3</code> using the <dfn>remainder</dfn> (<code>%</code>) operator." ],
"title": "Use Bracket Notation to Find the First Character in a String", "description": [ "<code>Bracket notation</code> is a way to get a character at a specific <code>index</code> within a string.", <del> "Most modern programming languages, like JavaScript, don't start counting at 1 like humans do. They start at 0. This is refered to as <dfn>Zero-based</dfn> indexing.", </del> <ins> "Most modern programming languages, like JavaScript, don't start counting at 1 like humans do. They start at 0. This is referred to as <dfn>Zero-based</dfn> indexing.", </ins> "For example, the character at index 0 in the word "Charles" is "C". So if <code>var firstName = "Charles"</code>, you can get the value of the first letter of the string by using <code>firstName[0]</code>.", "<h4>Instructions</h4>", "Use <dfn>bracket notation</dfn> to find the first character in the <code>lastName</code> variable and assign it to <code>firstLetterOfLastName</code>.",
"id": "56533eb9ac21ba0edf2244d4", "title": "Comparison with the Greater Than Operator", "description": [ <del> "The greater than operator (<code>&gt;</code>) compares the values of two numbers. If the number to the left is greater than the number to the right, it returns <code>true</code>. Otherwise, it returns <code>false</code>.<br>Like the equality operator, greater than operator will convert data types of values while comparing.", </del> <ins> "The greater than operator (<code>&gt;</code>) compares the values of two numbers. If the number to the left is greater than the number to the right, it returns <code>true</code>. Otherwise, it returns <code>false</code>.", "Like the equality operator, greater than operator will convert data types of values while comparing.", </ins> "<strong>Examples</strong>", "<blockquote> 5 > 3   // true<br> 7 > '3' // true<br> 2 > 3   // false<br>'1' > 9  // false</blockquote>", "<h4>Instructions</h4>",
"id": "56533eb9ac21ba0edf2244d5", "title": "Comparison with the Greater Than Or Equal To Operator", "description": [ <del> "The <code>greater than or equal to</code> operator (<code>&gt;=</code>) compares the values of two numbers. If the number to the left is greater than or equal to the number to the right, it returns <code>true</code>. Otherwise, it returns <code>false</code>.<br>Like the equality operator, <code>greater than or equal to</code> operator will convert data types while comparing.", </del> <ins> "The <code>greater than or equal to</code> operator (<code>&gt;=</code>) compares the values of two numbers. If the number to the left is greater than or equal to the number to the right, it returns <code>true</code>. Otherwise, it returns <code>false</code>.", "Like the equality operator, <code>greater than or equal to</code> operator will convert data types while comparing.", </ins> "<strong>Examples</strong>", "<blockquote> 6  >=  6  // true<br> 7  >= '3' // true<br> 2  >=  3  // false<br>'7' >=  9  // false</blockquote>", "<h4>Instructions</h4>",
"Al usar el elemento <code>span</code>, puedes poner varios elementos juntos, e incluso darle diferentes estilos a partes diferentes del mismo elemento.", "Anida la palabra "love" en tu elemento "Things cats love" dentro de un elemento <code>span</code>. Luego, asigna a ese elemento <code>span</code> la clase <code>text-danger</code> para hacer que el texto sea rojo.", "Así es como lo harías con el elemento "Top 3 things cats hate":", <del> "<code>&#60;p&#62;Top 3 things cats &#60;span class = "text-danger"&#62;hate&#60;/span&#62;&#60;/p&#62;</code>" </del> <ins> "<code>&#60;p&#62;Top 3 things cats &#60;span class = "text-danger"&#62;hate:&#60;/span&#62;&#60;/p&#62;</code>" </ins> ] }, {
"challengeType": 0, "nameEs": "Crea un encabezado personalizado", "descriptionEs": [ <del> "Crearemos un encabezado simple para nuestra aplicación de fotos de gatos poniéndolos en la misma línea.", </del> <ins> "Crearemos un encabezado simple para nuestra aplicación de fotos de gatos poniendo el título y la relajante imagen del gato en la misma línea.", </ins> "Recuerda, Bootstrap usa un sistema de cuadrícula adaptativo, el cual facilita poner elementos en filas y especificar el ancho relativo de cada elemento. La mayoría de las clases de Bootstrap pueden aplicarse a un elemento <code>div</code>.", "Aquí hay un diagrama del funcionamiento de la cuadrícula de 12 columnas Bootstrap:", "<a href="http://i.imgur.com/FaYuui8.png" data-lightbox="img-enlarge"><img class="img-responsive" src="http://i.imgur.com/FaYuui8.png" title="Pulsa para agrandar" alt="una imagen que muestra el sistema de cuadrícula de Bootstrap"></a>",
"nameEs": "Agrega iconos de Font Awesome a los botones", "descriptionEs": [ "Font Awesome es una librería de iconos muy conveniente. Estos iconos son imágenes vectoriales, almacenadas en formato <code>.svg</code>, y son tratados como si fueran fuentes. Puedes especificar su tamaño usando pixeles, y tomarán el tamaño de fuente de su elemento HTML padre.", <ins> "Puedes añadir Font Awesome a cualquier aplicación sólo incluyendo y agregando el siguiente código al comienzo de tu HTML:", "<code>&#60;link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/&#62;</code>", "En este caso, ya lo hemos agregado por tí a esta página tras bambalinas.", "El elemento <code>i</code> originalmente era usado para hacer textos en itálicas, pero ahora comunmente se usa para iconos.  Le agregas clases de Font Awesome al elemento <code>i</code> para convertirlo en un ícono, por ejemplo:", "<code>&lt;i class="fa fa-info-circle"&gt;&lt;/i&gt;</code>", </ins> "Usa Font Awesome para agregar un icono de "pulgar arriba" <code>thumbs-up</code> a tu botón de like dándole un elemento <code>i</code> con las clases <code>fa</code> y <code>fa-thumbs-up</code>." ] },
"Vamos a darle un id único a cada uno de nuestros elementos <code>div</code> que tienen la clase <code>well</code>.", "Recuerda que puedes darle a un elemento un id como el siguiente:", "<code>&#60;div class="well" id="center-well"&#62;</code>", <del> "Dale al pozo de la izquireda el id <code>left-well</code>. Al pozo de la derecha, dale un <code>id</code> de <code>right-well</code>." </del> <ins> "Dale al pozo de la izquireda el id <code>left-well</code>. Al pozo de la derecha, dale un id <code>right-well</code>." </ins> ] }, {
"nameEs": "Dale a cada elemento un ID único", "descriptionEs": [ "También quisiéramos referirnos a cada botón por su id utilizando jQuery.", <del> "Dale a cada uno de tus botones un id único, comenzando con <code>target1</code> y terminando con <code>target6</code>." </del> <ins> "Dale a cada uno de tus botones un id único, comenzando con <code>target1</code> y terminando con <code>target6</code>.", "Asegúrate que <code>target1</code> a <code>target3</code> queden en <code>#left-well</code>, mientras que <code>target4</code> a <code>target6</code> queden en <code>#right-well</code>." </ins> ] }, {
"tests": [ "assert($("#left-well").css("background-color") === 'red' || $("#left-well").css("background-color") === 'rgb(255, 0, 0)' || $("#left-well").css("background-color").toLowerCase() === '#ff0000' || $("#left-well").css("background-color").toLowerCase() === '#f00', 'message: Your <code>left-well</code> element should have a red background.');", "assert(code.match(/.parents*()s*.css/g), 'message: You should use the <code>&#46;parent&#40;&#41;</code> function to modify this element.');", <del> "assert(code.match(/$s*?(s*?(?:'|")s*?#target1s*?(?:'|")s*?).parent/gi), 'message: The <code>&#46;parent&#40;&#41;</code> method should be called on the <code>&#35;target1</code> element.');", </del> <ins> "assert(code.match(/$s*?(s*?(?:'|")s*?#target1s*?(?:'|")s*?)s*?.parent/gi), 'message: The <code>&#46;parent&#40;&#41;</code> method should be called on the <code>&#35;target1</code> element.');", </ins> "assert(code.match(/<div class="well" id="left-well">/g), 'message: Only use jQuery to add these classes to the element.');" ], "type": "waypoint",
] ], "type": "hike", <del> "challengeType": 6 </del> <ins> "challengeType": 6, "nameEs": "Herramientas de desarrollo de Chrome: Elementos", "descriptionEs": [ "Esta es información básica y una mini-lección sobre la pestaña Elements en las herramientas de desarrollo de Chrome. Echa un vistazo a la documentación más detallada aquí: developers.google.com/web/tools/iterate/inspect-styles/basics ", "Vamos a utilizar la página web mckellen.com/ por sugerencia del usuario de FreeCodeCamp kmiasko.", "Si pulsas con el botón derecho y seleccionas 'Inspeccionar elemento', tendrás acceso a la pestaña elements. ¡Puedes cambiar el texto, el color de fondo, el color de texto y cualquier otra propiedad CSS o elemento HTML que desees!", "Estos cambios no se establecen de forma automática, por lo que no debes usar el inspector como un IDE o como un lugar para crear o editar cualquier cosa que desees guardar. Puedes configurar algo que se llama 'autoría persistente' para salvar.", "Las reglas de CSS como cascada, herencia y otras se aplican, así que tenlo en cuenta a medida que juegas. Además, los estilos anulados se muestran con un tachado sobre ellos. ", "También hay que señalar que todo el código que veas en ese 'árbol' es código HTML actual, no el original que había cuando se cargó la página. Si utilizas jQuery o JavaScript para cambiar algo, esté árbol se actualizará.", "El relleno, los bordes y los márgenes se inspeccionan fácilmente y puedes editarlos usando la caja con colores que encontrarás al lado derecho o en la parte de abajo.", "Por favor, echa un vistazo a la documentación de las herramientas de desarrollo de Chrome en developers.google.com/web/tools/chrome-devtools/" ] </ins> }, { "id": "56b15f15632298c12f315183",
] ], "type": "hike", <del> "challengeType": 6 </del> <ins> "challengeType": 6, "nameEs": "Herramientas de desarrollo de Chrome: red", "descriptionEs": [ "La pestaña network (red) ayuda a responder preguntas como '¿Qué elemento o parte de la página fue el más demorado?' o '¿Qué inició una petición?'", "El panel de red registra información detallada sobre cuánto tarda en cargar cada elemento de su página o aplicación.", "Cada solicitud se registra en la bitácora, que se puede encontrar en la parte inferior del panel de red.", "Si te fijas en la línea al lado derecho, te darás cuenta de un patrón de colores. Cada color representa un tipo diferente de contenido en la solicitud. ", "Cuanto más larga sea la línea de un color determinado, tanto más tiempo tomó ese tipo de contenido en la solicitud. En últimas quieres líneas cortas, y si cualquier solicitud tiene largas líneas, sabes que puede estar ralentizando la página web.", "Si pulsas sobre una solicitud en la bitácora, podrás obtener información más detallada.", "Consulta más documentación detallada aquí: developers.google.com/web/tools/profile-performance/network-performance/resource-loading" ] </ins> }, { "id": "56b15f15632298c12f315182",