num times (second argument). Return an empty string if num is not a positive number.",
"Remember to use Read-Search-Ask if you get stuck. Write your own code."
diff --git a/seed/challenges/01-front-end-development-certification/basic-javascript.json b/seed/challenges/01-front-end-development-certification/basic-javascript.json
index 90454cbd69..57fefa2c28 100644
--- a/seed/challenges/01-front-end-development-certification/basic-javascript.json
+++ b/seed/challenges/01-front-end-development-certification/basic-javascript.json
@@ -1036,14 +1036,14 @@
"title": "Escape Sequences in Strings",
"description": [
"Quotes are not the only characters that can be escaped inside a string. Here is a table of common escape sequences:",
- "| Code | Output |
|---|---|
\\' | single quote |
\\\" | double quote |
\\\\ | backslash |
\\n | new line |
\\r | carriage return |
\\t | tab |
\\b | backspace |
\\f | form feed |
| Code | Output |
|---|---|
\\' | single quote |
\\\" | double quote |
\\\\ | backslash |
\\n | newline |
\\r | carriage return |
\\t | tab |
\\b | backspace |
\\f | form feed |
Instructions
", - "Assign the following two lines of text into the single variablemyStr using escape sequences.",
- "Here is a backslash: \\.", - "You will need to use escape sequences to insert special characters correctly. You will also need to follow the spacing as it looks above with no additional spaces between each escape sequence.", + "Assign the following three lines of text into the single variable
Here is a new line with two tabs.
myStr using escape sequences.",
+ "FirstLine", + "You will need to use escape sequences to insert special characters correctly. You will also need to follow the spacing as it looks above, with no spaces between escape sequences or words.", "Here is the text with the escape sequences written out.", - "
\\SecondLine\\
ThirdLine
Here is a backslash:" + "backslash.newlinetabtabHere is a new line with two tabs.
FirstLine" ], "releasedOn": "January 1, 2016", "challengeSeed": [ @@ -1058,14 +1058,13 @@ "else{return null;}})();" ], "solutions": [ - "var myStr = \"Here is a backslash: \\\\.\\n\\t\\tHere is a new line with two tabs.\";" + "var myStr = \"FirstLine\\n\\\\SecondLine\\\\\\rThirdLine\";" ], "tests": [ - "assert(myStr === \"Here is a backslash: \\\\.\\n\\t\\tHere is a new line with two tabs.\", 'message:newlinebackslashSecondLinebackslashcarriage-returnThirdLine
myStr should have encoded text with the proper escape sequences and spacing.');",
- "assert(myStr.match(/\\t/g).length == 2, 'message: myStr should have two tab characters \\t');",
+ "assert(myStr === \"FirstLine\\n\\\\SecondLine\\\\\\rThirdLine\", 'message: myStr should have encoded text with the proper escape sequences and no spacing.');",
"assert(myStr.match(/\\n/g).length == 1, 'message: myStr should have one newline character \\n');",
- "assert(myStr.match(/\\\\/g).length == 1, 'message: myStr should have a correctly escaped backslash character \\\\');",
- "assert(myStr === \"Here is a backslash: \\\\.\\n\\t\\tHere is a new line with two tabs.\", 'message: myStr should not have any spaces in between consecutive escape sequences.');"
+ "assert(myStr.match(/\\r/g).length == 1, 'message: myStr should have one carriage return character \\r');",
+ "assert(myStr.match(/\\\\/g).length == 2, 'message: myStr should have two correctly escaped backslash characters \\\\');"
],
"type": "waypoint",
"challengeType": 1,
@@ -2845,7 +2844,7 @@
"assert(testStrictNotEqual(\"17\") === \"Not Equal\", 'message: testStrictNotEqual(\"17\") should return \"Not Equal\"');",
"assert(testStrictNotEqual(12) === \"Not Equal\", 'message: testStrictNotEqual(12) should return \"Not Equal\"');",
"assert(testStrictNotEqual(\"bob\") === \"Not Equal\", 'message: testStrictNotEqual(\"bob\") should return \"Not Equal\"');",
- "assert(code.match(/val\\s*!==\\s*\\d+/g).length > 0, 'message: You should use the !== operator');"
+ "assert(code.match(/(val\\s*!==\\s*\\d+)|(\\d+\\s*!==\\s*val)/g).length > 0, 'message: You should use the !== operator');"
],
"type": "waypoint",
"challengeType": 1,
@@ -3669,7 +3668,7 @@
"You may recall from Comparison with the Equality Operator that all comparison operators return a boolean true or false value.",
"A common anti-pattern is to use an if/else statement to do a comparison and then return true/false:",
"function isEqual(a,b) {", - "Since
if (a === b) {
return true;
} else {
return false;
}
}
=== returns true or false, we can simply return the result of the comparison:",
+ "Since === returns true or false, we can return the result of the comparison:",
"function isEqual(a,b) {", "
return a === b;
}
Instructions
", "Fix the functionisLess to remove the if/else statements."
@@ -4197,7 +4196,7 @@
"var ourDog = {\n \"name\": \"Camper\",\n \"legs\": 4,\n \"tails\": 1,\n \"friends\": [\"everything!\"],\n \"bark\": \"bow-wow\"\n};\nvar myDog = {\n \"name\": \"Happy Coder\",\n \"legs\": 4,\n \"tails\": 1,\n \"friends\": [\"Free Code Camp Campers\"],\n \"bark\": \"woof\"\n};\ndelete myDog.tails;"
],
"tests": [
- "assert(myDog.tails === undefined, 'message: Delete the property \"tails\" from myDog.');",
+ "assert(typeof myDog === \"object\" && myDog.tails === undefined, 'message: Delete the property \"tails\" from myDog.');",
"assert(code.match(/\"tails\": 1/g).length > 1, 'message: Do not modify the myDog setup');"
],
"type": "waypoint",
@@ -4517,14 +4516,14 @@
"id": "56533eb9ac21ba0edf2244cf",
"title": "Record Collection",
"description": [
- "You are given a JSON object representing (a small part of) your record collection. Each album is identified by a unique id number (its key) and has several properties. Not all albums have complete information.",
- "Write a function which takes an id, a property (prop), and a value.",
- "For the given id in collection:",
- "If prop does not contain the key \"tracks\", then update or set the value for that incomplete prop.",
- "If prop does not contain the key \"tracks\" before you update it, create an empty array before pushing a track to it.",
- "If prop does contain the key \"tracks\" and its value is non-blank, then push the value onto the end of its existing tracks array.",
- "If value is blank, delete that prop.",
- "Always return the entire collection object.",
+ "You are given a JSON object representing a part of your musical album collection. Each album has several properties and a unique id number as its key. Not all albums have complete information.",
+ "Write a function which takes an album's id (like 2548), a property prop (like \"artist\" or \"tracks\"), and a value (like \"Addicted to Love\") to modify the data in this collection.",
+ "If prop isn't \"tracks\" and value isn't blank, update or set the value for that record album's property.",
+ "Your function must always return the entire collection object.",
+ "There are several rules for handling incomplete data:",
+ "If prop is \"tracks\" but the album doesn't have a \"tracks\" property, create an empty array before adding the new value to the album's corresponding property.",
+ "If prop is \"tracks\" and value isn't blank, push the value onto the end of the album's existing tracks array.",
+ "If value is blank, delete that property from the album.",
"HintsUse
bracket notation when accessing object properties with variables.",
"Push is an array method you can read about on Mozilla Developer Network.",
"You may refer back to Manipulating Complex ObjectsIntroducing JavaScript Object Notation (JSON) for a refresher."
@@ -4991,7 +4990,7 @@
"description": [
"Random numbers are useful for creating random behavior.",
"JavaScript has a Math.random() function that generates a random decimal number between 0 (inclusive) and not quite up to 1 (exclusive). Thus Math.random() can return a 0 but never quite return a 1",
- "NoteLike Storing Values with the Equal Operator, all function calls will be resolved before the
return executes, so we can simply return the value of the Math.random() function.",
+ "NoteLike Storing Values with the Equal Operator, all function calls will be resolved before the
return executes, so we can return the value of the Math.random() function.",
"Instructions
", "ChangerandomFraction to return a random number instead of returning 0."
],
diff --git a/seed/challenges/01-front-end-development-certification/front-end-development-certificate.json b/seed/challenges/01-front-end-development-certification/front-end-development-certificate.json
index 4284162d8e..d48e9f18e9 100644
--- a/seed/challenges/01-front-end-development-certification/front-end-development-certificate.json
+++ b/seed/challenges/01-front-end-development-certification/front-end-development-certificate.json
@@ -123,7 +123,7 @@
},
{
"id": "a8e512fbe388ac2f9198f0fa",
- "title": "Where art thou"
+ "title": "Wherefore art thou"
},
{
"id": "a0b5010f579e69b815e7c5d6",
diff --git a/seed/challenges/01-front-end-development-certification/html5-and-css.json b/seed/challenges/01-front-end-development-certification/html5-and-css.json
index 44c4e70664..ca6cca12f2 100644
--- a/seed/challenges/01-front-end-development-certification/html5-and-css.json
+++ b/seed/challenges/01-front-end-development-certification/html5-and-css.json
@@ -44,6 +44,20 @@
"Каждое испытание имеет функцию проверки решения, которую вы можете запустить в любой момент нажатием на кнопку \"Run tests\". Как только ваше решение будет удовлетворять всем требованиям, вы сможете перейти к следующему испытанию.",
"Для прохождения этого испытания измените текст элемента h1 с \"Hello\" на \"Hello World\". Затем нажмите кнопку \"Run tests\"."
],
+ "titleFR": "Dites bonjour aux éléments HTML",
+ "descriptionFR": [
+ "Bienvenue au premier défi de code de Free Code Camp.",
+ "Vous pouvez modifier le code dans votre éditeur texte, lequel est disponible dans cette page.",
+ "Voyez-vous le code dans l'éditeur texte qui dit <h1>Hello</h1>? C'est un élément HTML.",
+ "La plupart des éléments HTML ont une balise ouvrante et une balise fermante",
+ "Les balises ouvrantes ont cette apparence :",
+ "<h1>",
+ "Les balises fermantes ont cette apparence :",
+ "</h1>",
+ "Notez que la seule différence entre une balise ouvrante et fermante est que la balise fermante a une barre oblique après son chevron ouvrant.",
+ "Chaque défi contient des tests que vous pouvez éxécuter en cliquant sur le bouton \"Run tests\". Lorsque tous les tests sont réussis, vous pouvez poursuivre avec le défi suivant.",
+ "Pour réussir le test de ce défi, changez le texte de l'élément h1 pour \"Hello World\" plutôt que \"Hello\". Cliquez ensuite sur le bouton \"Run tests\"."
+ ],
"title": "Say Hello to HTML Elements",
"description": [
"Welcome to Free Code Camp's first coding challenge.",
@@ -108,6 +122,14 @@
"Этот элемент сообщает браузеру о структуре вашего web-сайта. Элементы h1 часто применяют в качестве главных заголовков, в то время как элементы h2 обычно используют для обозначения позаголовков. Также существуют элементы h3, h4, h5 и h6 для обозначения отдельных секций.",
"Добавьте метку h2 с текстом \"CatPhotoApp\" для создания второго HTML элемента под вашим элементом h1 с текстом \"Hello World\"."
],
+ "titleFR": "Un titre avec l'élément h2",
+ "descriptionFR": [
+ "Pour les quelques prochains défis, nous construirons une application HTML5 qui ressemblera à ceci :",
+ "![\"Une](\"//i.imgur.com/jOc1JF1.png\" "\\"Cliquez")
",
+ "L'élément h2 que vous entrerez créera un élément h2 sur le site.",
+ "Cet élément renseigne votre navigateur sur la structure de votre site. Les éléments h1 sont souvent utilisés comme titre, tandis que les éléments h2 sont généralement utilisés comme sous-titres. Il existe également les éléments h3, h4, h5 et h6 qui indiquent une nouvelle et différente section.",
+ "Ajoutez une balise h2 contenant \"CatPhotoApp\" pour créer un second élément HTML sous l'élément h1 contenant \"Hello World\"."
+ ],
"title": "Headline with the h2 Element",
"description": [
"Over the next few challenges, we'll build an HTML5 app that will look something like this:",
@@ -160,6 +182,13 @@
"<p>Я метка p!</p>",
"Создайте элемент p под вашим элементом h2 и присвойте ему текст \"Hello Paragraph\"."
],
+ "titleFR": "Informez avec l'élément paragraphe",
+ "descriptionFR": [
+ "L'élément p est le préféré pour les textes de paragraphes de taille normale. P est l'acronyme de \"paragraphe\",",
+ "Vous pouvez créer un élément p comme ceci :",
+ "<p>Je suis une balise p!</p>",
+ "Créez un élément p sous votre élément h2 et inscrivez-y le texte \"Hello Paragraph\"."
+ ],
"title": "Inform with the Paragraph Element",
"description": [
"p elements are the preferred element for normal-sized paragraph text on websites. P is short for \"paragraph\".",
@@ -209,6 +238,13 @@
"Вы можете начать комментарий с <!-- и закончить его -->",
"Раскомментируйте свои элементы h1, h2 и p."
],
+ "titleFR": "Décommenter du HTML",
+ "descriptionFR": [
+ "Commenter est une façon de laisser des commentaires dans votre code sans affecter le fonctionnement du code.",
+ "Commenter est aussi un moyen pratique de rendre du code inactif sans devoir le supprimer entièrement.",
+ "Vous pouvez débuter un commentaire avec <!-- et le terminer avec -->.",
+ "Décommenter vos éléments h1, h2 et p."
+ ],
"title": "Uncomment HTML",
"description": [
"Commenting is a way that you can leave comments within your code without affecting the code itself.",
@@ -261,6 +297,12 @@
"Тут вам необходимо завершить комментарий до начала вашего элемента h2.",
"Закомментируйте ваши элементы h1 и p, но оставьте ваш элемент h2 раскомментированным."
],
+ "titleFR": "Commentez du HTML",
+ "descriptionFR": [
+ "Souvenez-vous que pour débuter un commentaire, vous devez utiliser <!-- et que pour le terminer, vous devez utiliser -->.",
+ "Ici vous devrez terminer le commentaire juste avant que l'élément h2 commence.",
+ "Commentez les éléments h1 et p, mais laissez l'élément h2 tel quel."
+ ],
"title": "Comment out HTML",
"description": [
"Remember that in order to start a comment, you need to use <!-- and to end a comment, you need to use -->",
@@ -314,7 +356,14 @@
"Текст lorem ipsum применяется в качестве замещающего текста наборщиками с 16-го века, и эта традиция продолжается в сети.",
"5 веков довольно долгий период. Так как мы строим приложение CatPhotoApp, давайте используем нечто называемое текстом kitty ipsum.",
"Замените текст внутри вашего элемента p первыми двумя словами текста kitty ipsum: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff."
- ],
+ ],
+ "titleFR": "Remplissez les blancs avec du faux-texte",
+ "descriptionFR": [
+ "Les développeurs Web utilisent traditionnellement du lorem ipsum comme texte de substitution. Le texte lorem ipsum provient d'un extrait de Cicero, de la Rome antique.",
+ "Le texte lorem ipsum a été utilisé comme faux-texte par des typographes depuis le 16ème siècle et cette tradition se poursuit sur le Web.",
+ "Enfin, 5 siècles est suffisament long. Étant donné que nous fabriquons une application de photos de chats, utilisons plutôt du texte Kitty ipsum.",
+ "Remplacez le texte à l'intérieur des éléments p avec ces quelques mots du texte Kitty ipsum : Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff."
+ ],
"title": "Fill in the Blank with Placeholder Text",
"description": [
"Web developers traditionally use lorem ipsum text as placeholder text. The 'lorem ipsum' text is randomly scraped from a famous passage by Cicero of Ancient Rome.",
@@ -362,6 +411,12 @@
"Давайте удалим некоторые ненужные элементы, чтобы мы могли приступить к созданию приложения CatPhotoApp.",
"Удалите ваш h1 элемент, чтобы упростить общий вид."
],
+ "titleFR": "Supprimer des éléments HTML",
+ "descriptionFR": [
+ "Notre téléphone n'a pas beaucoup d'espace vertical.",
+ "Enlevons les éléments superflus pour débuter la construction de notre application de photos de chats.",
+ "Supprimez l'élément h1 afin de simplifier l'affichage."
+ ],
"title": "Delete HTML Elements",
"description": [
"Our phone doesn't have much vertical space.",
@@ -418,6 +473,15 @@
"<h2 style=\"color: blue\">CatPhotoApp</h2>",
"Измените стиль вашего элемента h2 таким образом, чтобы текст элемента стал красным."
],
+ "titleFR": "Changer la couleur du texte",
+ "descriptionFR": [
+ "Changeons maintenant la couleur de quelques-uns de nos textes.",
+ "Nous pouvons le faire en changeant le style de votre élément h2.",
+ "Le style responsable de la couleur de texte d'un élément est \"color\".",
+ "Voici comment changer en bleu la couleur du texte de votre élément h2 :",
+ "<h2 style=\"color: blue\">CatPhotoApp</h2>",
+ "Changez le style de votre élément h2 pour que son texte soit de couleur rouge."
+ ],
"title": "Change the Color of Text",
"description": [
"Now let's change the color of some of our text.",
@@ -486,6 +550,18 @@
"Обратите внимание, что важно наличие открывающих и закрывающих фигурных скобок ({ и }) вокруг стиля каждого элемента. Также вам необходимо убедиться в том, что стиль элемента присвоен внутри элемента style. В завершении, убедитесь, что строка объявления каждого элемента стиля должна заканчиваться точкой с запятой.",
"Удалите атрибут стиль вашего элемента h2 и взамен создайте CSS-элемент style. Добавьте необходимый CSS, чтобы все элементы h2 стали синими."
],
+ "titleFR": "Utiliser les sélecteurs CSS pour styliser des éléments",
+ "descriptionFR": [
+ "Avec CSS, il y a des centaines de propriétés que vous pouvez utliser pour changer l'apparence d'un élément dans votre page.",
+ "Quand vous avez entré <h2 style=\"color: red\">CatPhotoApp</h2>, vous donniez à cet élément h2 uniquement, un style inline.",
+ "C'est une des façons d'ajouter un style à un élément, mais une meilleure approche est d'utiliser CSS, acronyme de Cascading Style Sheets.",
+ "Au sommet de votre code, créez un élément style comme ceci :",
+ "<style>", + "À l'intérieur de cet élément style, vous pouvez créer des
</style>
sélecteurs CSS pour tous les éléments h2. Par exemple, si vous voulez que tous les éléments h2 soient en rouge, votre élément style ressemblerait à ceci :",
+ "<style>", + "Prenez note qu'il est important d'avoir les accolades ouvrantes et fermantes (
h2 {color: red;}
</style>
{ and }) autour de chaque élément de style. Vous devez aussi vous assurer que vos styles se retrouvent entre une balise style ouvrante et fermante. Finalement, assurez-vous d'ajouter un point-virgule â la fin de chacun des styles d'éléments.",
+ "Supprimez les attributs de styles de votre élément h2 et créez plutôt un élément de style CSS. Ajoutez le CSS nécessaire pour rendre tous vos éléments h2 de couleur bleu."
+ ],
"title": "Use CSS Selectors to Style Elements",
"description": [
"With CSS, there are hundreds of CSS properties that you can use to change the way an element looks on your page.",
@@ -1094,7 +1170,9 @@
"Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
" ], "tests": [ - "assert($(\"img\").hasClass(\"smaller-image\"), 'message: Yourimg element should have the class smaller-image.');",
+ "assert($(\"img\").length === 1, 'message: Your code should only have 1 img tag.');",
+ "assert($(\"img\").attr(\"src\") && $(\"img\").attr(\"src\") === \"https://bit.ly/fcc-relaxing-cat\", 'message: Your img should have a src attribute with a value of https://bit.ly/fcc-relaxing-cat.');",
+ "assert($('img').attr(\"class\") && $(\"img\").attr(\"class\").match(/(^|\\s)smaller-image($|\\s)/), 'message: Your img element should have the class smaller-image.');",
"assert($(\"img\").width() === 100, 'message: Your image should be 100 pixels wide. Browser zoom should be at 100%.');"
],
"type": "waypoint",
@@ -1634,6 +1712,7 @@
"Nest your image within an a element. Here's an example:",
"<a href=\"#\"><img src=\"https://bit.ly/fcc-running-cats\"></a>",
"Remember to use # as your a element's href property in order to turn it into a dead link.",
+ "Place the existing image element within an anchor element.",
"Once you've done this, hover over your image with your cursor. Your cursor's normal pointer should become the link clicking pointer. The photo is now a link."
],
"challengeSeed": [
@@ -4266,7 +4345,7 @@
"assert($(\"h1\").hasClass(\"blue-text\"), 'message: Your h1 element should have the class blue-text.');",
"assert($(\"h1\").attr(\"id\") === \"orange-text\", 'message: Your h1 element should have the id of orange-text.');",
"assert(code.match(/color: white.');",
- "assert(code.match(/\\.pink-text\\s*?\\{\\s+color:.*pink.*!important;\\s+\\}/gi), 'message: Your pink-text class declaration should have the !important keyword to override all other declarations.');",
+ "assert(code.match(/\\.pink-text\\s*?\\{[\\s\\S]*?color:.*pink.*!important;[^\\.]*\\}/g), 'message: Your pink-text class declaration should have the !important keyword to override all other declarations.');",
"assert($(\"h1\").css(\"color\") === \"rgb(255, 192, 203)\", 'message: Your h1 element should be pink.');"
],
"descriptionPtBR": [
diff --git a/seed/challenges/01-front-end-development-certification/jquery.json b/seed/challenges/01-front-end-development-certification/jquery.json
index db5730aced..0dc48a11c5 100644
--- a/seed/challenges/01-front-end-development-certification/jquery.json
+++ b/seed/challenges/01-front-end-development-certification/jquery.json
@@ -69,6 +69,16 @@
"Füge innerhalb deines script Elements folgenden Code hinzu: $(document).ready(function() {. Schließe ihn danach in der nächsten Zeile (noch immer innerhalb deines script Elements) mit: });",
"Wir werden später noch mehr über Funktionen lernen. Wichtig zu wissen ist, dass der Code innerhalb der Funktion ausgeführt wird, sobald der Browser die Seite geladen hat.",
"Das ist wichtig, denn ohne deine Document Ready Funktion könnte dein Code ausgeführt werden, bevor das HTML gerendert wurde - was zu Fehlern führen kann."
+ ],
+ "titleFr" : "Apprendre comment fonctionnent les balises Script et Document Ready",
+ "descriptionFr": [
+ "Nous sommes maintenant prêt à apprendre jQuery, l'outil Javascript le plus populaire de tout les temps. Ne vous inquiétez pas à propos de JavaScript lui-même, nous y viendrons bientôt.",
+ "Avant de pouvoir utiliser jQuery, nous avons besoin d'ajouter certaines choses à notre HTML.",
+ "Premièrement, ajoutez un élément script en haut de votre page. Assurez-vous de le fermer à la ligne suivante.",
+ "Votre navigateur exécutera JavaScript à l'intérieur de l'élement script, y compris jQuery.",
+ "Á l'intérieur de votre élement script, ajoutez ce code : $(document).ready(function() { à votre script. Puis fermez-le à la ligne suivante (toujours à l'intérieur de votre élement script avec: });",
+ "Nous en apprendrons plus sur les functions plus tard. Le plus important à savoir est que le code à l'intérieur de cette function sera exécuté dès que le navigateur aura chargé votre page.",
+ "Ceci est important car sans votre document ready function, votre code pourrait être exécuté avant que votre HTML soit affiché, ce qui pourrait causer des problèmes."
]
},
{
@@ -76,11 +86,12 @@
"title": "Target HTML Elements with Selectors Using jQuery",
"description": [
"Now we have a document ready function.",
- "Now let's write our first jQuery statement. All jQuery functions start with a $, usually referred to as a dollar sign operator, or simply as bling.",
+ "Now let's write our first jQuery statement. All jQuery functions start with a $, usually referred to as a dollar sign operator, or as bling.",
"jQuery often selects an HTML element with a selector, then does something to that element.",
"For example, let's make all of your button elements bounce. Just add this code inside your document ready function:",
"$(\"button\").addClass(\"animated bounce\");",
- "Note that we've already included both the jQuery library and the Animate.css library in the background so that you can use them in the editor. So you are using jQuery to apply the Animate.css bounce class to your button elements."
+ "Note that we've already included both the jQuery library and the Animate.css library in the background so that you can use them in the editor. So you are using jQuery to apply the Animate.css bounce class to your button elements.",
+ "Additionally make sure to use $(\"button\").addClass(\"animated bounce\"); instead of $('button').addClass(\"animated bounce\"); since single-quote selectors will not pass our tests."
],
"challengeSeed": [
"fccss",
@@ -136,6 +147,16 @@
"Zum Beispiel, lasse alle deine Button Elemente hüpfen. Dazu musst du nur folgenden Code in deine Document Ready Funktion hinzufügen:",
"$(\"button\").addClass(\"animated bounce\");",
"Beachte, dass wir bereits jQuery und Animate.css im Hintergrund hinzugefügt haben, damit du diese im Editor nutzen kannst. Du nutzt also jQuery um die bounce Klasse von Animate.css zu deinen Button Elementen hinzuzufügen."
+ ],
+ "titleFr": "Cibler des élements HTML par sélecteurs avec jQuery",
+ "descriptionFr" : [
+ "Nous avons maintenant un document ready function.",
+ "Nous allons à présent écrire notre première expression jQuery. Chaque fonction jQuery commence avec un $, habituellement nommé opérateur dollar, ou bling.",
+ "jQuery sélectionne souvent un élément HTML à l'aide d'un selector, puis fait quelque chose à cet élement.",
+ "Par exemple, faisons en sorte que tous nos button rebondissent. Ajoutez juste ce code à l'intérieur de votre $(document).ready(function(){:",
+ "$(\"button\").addClass(\"animated bounce\");",
+ "Notez que nous avons déjà inclus à la fois la librairie jQuery et la librairie Animate.css en amont donc nous pouvons les utiliser dans l'éditeur. Donc, vous utilisez jQuery pour appliquer la classe bounce d'Animate.css à vos éléments button.",
+ "De plus, assurez-vous d'utiliser $(\"button\").addClass(\"animated bounce\"); et non $('button').addClass(\"animated bounce\"); car les apostrophes ne passeront pas nos tests."
]
},
{
@@ -206,6 +227,16 @@
"Dann nutze die jQuery Funktion .addClass() um die Klassen animated und shake hinzuzufügen.",
"Zum Beispiel könntest du alle Elemente mit der Klasse text-primary schütteln lassen, indem du folgendes zu deiner Document Ready Funktion hinzufügst:",
"$(\".text-primary\").addClass(\"animated shake\");"
+ ],
+ "titleFr" : "Cibler les élements par Classe avec jQuery",
+ "descriptionFr" : [
+ "Voyez comment nous avons fait rebondir tous nos éléments button? Nous les avons sélectionné avec $(\"button\"), puis nous leur avons ajouté des classes CSS avec .addClass(\"animated bounce\");.",
+ "Vous venez d'utiliser la fonction jQuery .addClass(), ce qui nous permet d'ajouter des classes aux éléments.",
+ "Tout d'abord, ciblons nos éléments div qui ont la classe well en utilisant le sélecteur $(\".well\").",
+ "Notez que, tout comme les expressions CSS, vous ajoutez un . avant le nom de la classe.",
+ "Puis, vous utilisez la fonction jQuery .addClass() pour ajouter les classes animated et shake.",
+ "Par exemple, vous pouvez faire en sorte que tous les éléments avec la classe text-primary s'agitent en ajoutant le code suivant à votre document ready function:",
+ "$(\".text-primary\").addClass(\"animated shake\");"
]
},
{
@@ -276,6 +307,15 @@
"Dann nutze die jQuery Funktion .addClass() um die Klassen animated und fadeOut hinzuzufügen.",
"So könntest du das Button Element mit der ID target6 ausblenden lassen:",
"$(\"#target6\").addClass(\"animated fadeOut\")."
+ ],
+ "titleFr" : "Cibler les éléments par ID avec jQuery",
+ "descriptionFr" : [
+ "Vous pouvez également cibler les éléments à l'aide de leurs attributs id.",
+ "Premièrement, cibler votre élément button avec l'id target3 en utilisant le sélecteur $(\"#target\").",
+ "Notez que, tout comme les expressions CSS, vous ajoutez un # avant le nom de l'id.",
+ "Puis, utilisez la fonction jQuery .addClass() afin d'ajouter les classes animated et fadeOut.",
+ "Voici comment vous pouvez faire en sorte que l'élément button avec l'id target6 disparaisse en fondu:",
+ "$(\"#target6\").addClass(\"animated fadeOut\")."
]
},
{
@@ -337,17 +377,24 @@
"descriptionDe": [
"Anfangs waren diese Animationen noch cool, jetzt sind sie aber ein wenig störend.",
"Lösche alle drei jQuery Funktionen deiner Document Ready Funktion, aber lasse die Document Ready Funktion selbst intakt."
- ]
+ ],
+ "titleFr" : "Effacer vos fonctions jQuery",
+ "descriptionFr" : [
+ "Ces animations sont sympathiques à première vue, mais maintenant elles deviennent plutôt distrayantes.",
+ "Effacez les trois fonctions jQuery de votre document ready function, mais laissez votre document ready function lui-même intact."
+ ]
},
{
"id": "bad87fee1348bd9aed908626",
"title": "Target the same element with multiple jQuery Selectors",
"description": [
"Now you know three ways of targeting elements: by type: $(\"button\"), by class: $(\".btn\"), and by id $(\"#target1\").",
+ "Although it is possible to add multiple classes in a single .addClass() call, let's add them to the same element in three separate ways.",
"Using .addClass(), add only one class at a time to the same element, three different ways:",
"Add the animated class to all elements with type button.",
"Add the shake class to all the buttons with class .btn.",
- "Add the btn-primary class to the button with id #target1."
+ "Add the btn-primary class to the button with id #target1.",
+ "NoteYou should only be targeting one element and adding only one class at a time. Altogether, your three individual selectors will end up adding the three classes
shake, animated, and btn-primary to #target1."
],
"challengeSeed": [
"fccss",
@@ -407,7 +454,15 @@
"Füge die Klasse animated zu allen Elementen des Typs button hinzu.",
"Füge die Klasse shake zu allen Buttons mit der Klasse .btn hinzu.",
"Füge die Klasse btn-primary zu dem Button mit der ID #target1 hinzu."
- ]
+ ],
+ "titleFr" : "Cibler le même élément avec plusieurs sélecteurs jQuery",
+ "descriptionFr" : [
+ "À présent, vous connaissez trois façons de cibler les éléments: par type: $(\"button\"), par classe: $(\".btn\"), et par id $(\"#target1\").",
+ "En utilisant .addClass(), ajoutez uniquement une classe à la fois au même élément, de trois façons différentes:",
+ "Ajoutez la classe animated à tous les éléments de type button.",
+ "Ajoutez la classe shake à tous les boutons qui ont la classe .btn.",
+ "Ajoutez la classe btn-primary au bouton qui a l'id #target1."
+ ]
},
{
"id": "bad87fee1348bd9aed918626",
@@ -472,7 +527,14 @@
"So könntest du das bei einem spezifischen Button machen:",
"$(\"#target2\").removeClass(\"btn-default\");",
"Lass uns alle btn-default Klassen von unseren Button Elementen entfernen."
- ]
+ ],
+ "titleFr" : "Supprimer des classes d'un élément avec jQuery",
+ "descriptionFr" : [
+ "De la même façon que vous pouvez ajouter des classes à un élément avec la fonction jQuery addClass(), vous pouvez les supprimer avec la fonction jQuery removeClass().",
+ "Voici comment procéder pour un bouton spécifique:",
+ "$(\"#target2\").removeClass(\"btn-default\");",
+ "Supprimons la classe btn-default de tous nos éléments button."
+ ]
},
{
"id": "bad87fee1348bd9aed908826",
@@ -546,7 +608,17 @@
"Das ist ein wenig anders als eine normale CSS-Deklaration, weil die CSS-Eigenschaft und deren Wert in Anführungszeichen sind und durch ein Komma anstatt eines Doppelpunkts getrennt werden.",
"Lösche deine jQuery Selektoren, damit eine leere Document Ready Funktion übrig bleibt.",
"Wähle target1 und ändere dessen Farbe zu Rot."
- ]
+ ],
+ "titleFr" : "Changer le CSS d'un élément en utilisant jQuery",
+ "descriptionFr" : [
+ "Nous pouvons aussi changer le CSS d'un élément HTML directement avec jQuery.",
+ "jQuery dispose d'une fonction appelée .css() qui vous permet de changer le CSS d'un élément.",
+ "Voici comment changer sa couleur en bleu:",
+ "$(\"#target1\").css(\"color\", \"blue\");",
+ "Ceci est légèrement différent d'une expression CSS normale, car la propriété CSS et sa valeur sont entre guillemets, et separées par une virgule au lieu de deux points.",
+ "Effacez vos sélecteurs jQuery, laissant votre document ready function vide.",
+ "Sélectionnez target1 et changez sa couleur en rouge."
+ ]
},
{
"id": "bad87fee1348bd9aed808826",
@@ -615,7 +687,25 @@
"So kannst du alle Buttons deaktivieren:",
"$(\"button\").prop(\"disabled\", true);",
"Deaktiviere nur den target1 Button."
- ]
+ ],
+ "titleFr" : "Désactivez un élément en utilisant jQuery",
+ "descriptionFr" : [
+ "Vous pouvez également changer les propriétés non-CSS des éléments HTML avec jQuery. Par exemple, vous pouvez désactiver les boutons.",
+ "Lorsque vous désactivez un bouton, il devient gris et on ne peut plus cliquer dessus.",
+ "jQuery dispose d'une fonction appelée .prop() qui vous permet de modifier les propriétés des éléments.",
+ "Voici comment vous pouvez désactiver tous les boutons:",
+ "$(\"button\").prop(\"disabled\", true);",
+ "Désactivez uniquement le bouton target1"
+ ],
+ "titleFr" : "Changer le texte à l'intérieur d'un élément en utilisant jQuery",
+ "descriptionFr" : [
+ "En utilisant jQuery, vous pouvez changer le texte entre les balises ouvrante et fermante d'un élément. Vous pouvez même changer les balises HTML.",
+ "jQuery dispose d'une fonction appelée .html() qui vous permet d'ajouter des balises HTML et du texte à l'intérieur d'un élément. Tout le contenu de l'élément sera alors remplacé par le contenu que vous indiquerez en utilisant la fonction.",
+ "Voici comment vous pourriez ré-écrire et mettre en italique le texte de notre titre:",
+ "$(\"h3\").html(\"<em>jQuery Playground</em>\");",
+ "jQuery dispose également d'une fonction similaire appelée .text() qui change uniquement le texte sans ajouter de balises. Autrement dit, cette fonction n'évaluera aucune balise HTML que vous lui donnez, mais les traitera comme du texte que vous désirez ajouter à votre élément.",
+ "Changez le bouton avec l'id target4 en mettant en italique son texte."
+ ]
},
{
"id": "564944c91be2204b269d51e3",
diff --git a/seed/challenges/01-front-end-development-certification/json-apis-and-ajax.json b/seed/challenges/01-front-end-development-certification/json-apis-and-ajax.json
index d64d6f00ab..bb14209852 100644
--- a/seed/challenges/01-front-end-development-certification/json-apis-and-ajax.json
+++ b/seed/challenges/01-front-end-development-certification/json-apis-and-ajax.json
@@ -175,11 +175,11 @@
"