French translation of first four jQuery challenges (#9468)

* French translation jQuery Challenge

* French Translation jQuery Challenges 2, 3 and 4

* Update jquery.json

* Update jquery.json

seed/challenges/01-front-end-development-certification/jquery.json

@@ -69,6 +69,16 @@
         "Füge innerhalb deines <code>script</code> Elements folgenden Code hinzu: <code>$(document).ready(function() {</code>. Schließe ihn danach in der nächsten Zeile (noch immer innerhalb deines <code>script</code> Elements) mit: <code>});</code>",
         "Wir werden später noch mehr über <code>Funktionen</code> lernen. Wichtig zu wissen ist, dass der Code innerhalb der <code>Funktion</code> ausgeführt wird, sobald der Browser die Seite geladen hat.",
         "Das ist wichtig, denn ohne deine <code>Document Ready Funktion</code> 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 <code>script</code> en haut de votre page. Assurez-vous de le fermer à la ligne suivante.",
+        "Votre navigateur exécutera JavaScript à l'intérieur de l'élement <code>script</code>, y compris jQuery.",
+        "Á l'intérieur de votre élement <code>script</code>, ajoutez ce code : <code>$(document).ready(function() {</code> à votre <code>script</code>. Puis fermez-le à la ligne suivante (toujours à l'intérieur de votre élement <code>script</code> avec: <code>});</code>",
+        "Nous en apprendrons plus sur les <code>functions</code> plus tard. Le plus important à savoir est que le code à l'intérieur de cette <code>function</code> sera exécuté dès que le navigateur aura chargé votre page.",
+        "Ceci est important car sans votre <code>document ready function</code>, votre code pourrait être exécuté avant que votre HTML soit affiché, ce qui pourrait causer des problèmes."
       ]
     },
     {
@@ -137,6 +147,16 @@
         "Zum Beispiel, lasse alle deine <code>Button</code> Elemente hüpfen. Dazu musst du nur folgenden Code in deine <code>Document Ready Funktion</code> hinzufügen:",
         "<code>$(\"button\").addClass(\"animated bounce\");</code>",
         "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 <code>bounce</code> Klasse von Animate.css zu deinen <code>Button</code> Elementen hinzuzufügen."
+      ],
+      "titleFr": "Cibler des élements HTML par sélecteurs avec jQuery",
+      "descriptionFr" : [
+        "Nous avons maintenant un <code>document ready function</code>.",
+        "Nous allons à présent écrire notre première expression jQuery. Chaque fonction jQuery commence avec un <code>$</code>, habituellement nommé <code>opérateur dollar</code>, ou <code>bling</code>.",
+        "jQuery sélectionne souvent un élément HTML à l'aide d'un <code>selector</code>, puis fait quelque chose à cet élement.",
+        "Par exemple, faisons en sorte que tous nos <code>button</code> rebondissent. Ajoutez juste ce code à l'intérieur de votre <code>$(document).ready(function(){</code>:",
+        "<code>$(\"button\").addClass(\"animated bounce\");</code>",
+        "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 <code>bounce</code> d'Animate.css à vos éléments <code>button</code>.",
+        "De plus, assurez-vous d'utiliser <code>$(\"button\").addClass(\"animated bounce\");</code> et non <code>$('button').addClass(\"animated bounce\");</code> car les apostrophes ne passeront pas nos tests."
       ]
     },
     {
@@ -207,6 +227,16 @@
         "Dann nutze die jQuery Funktion <code>.addClass()</code> um die Klassen <code>animated</code> und <code>shake</code> hinzuzufügen.",
         "Zum Beispiel könntest du alle Elemente mit der Klasse <code>text-primary</code> schütteln lassen, indem du folgendes zu deiner <code>Document Ready Funktion</code> hinzufügst:",
         "<code>$(\".text-primary\").addClass(\"animated shake\");</code>"
+      ],
+      "titleFr" : "Cibler les élements par Classe avec jQuery",
+      "descriptionFr" : [
+        "Voyez comment nous avons fait rebondir tous nos éléments <code>button</code>? Nous les avons sélectionné avec <code>$(\"button\")</code>, puis nous leur avons ajouté des classes CSS avec <code>.addClass(\"animated bounce\");</code>.",
+        "Vous venez d'utiliser la fonction jQuery <code>.addClass()</code>, ce qui nous permet d'ajouter des classes aux éléments.",
+        "Tout d'abord, ciblons nos éléments <code>div</code> qui ont la classe <code>well</code> en utilisant le sélecteur <code>$(\".well\")</code>.",
+        "Notez que, tout comme les expressions CSS, vous ajoutez un <code>.</code> avant le nom de la classe.",
+        "Puis, vous utilisez la fonction jQuery <code>.addClass()</code> pour ajouter les classes <code>animated</code> et <code>shake</code>.",
+        "Par exemple, vous pouvez faire en sorte que tous les éléments avec la classe <code>text-primary</code> s'agitent en ajoutant le code suivant à votre <code>document ready function</code>:",
+        "<code>$(\".text-primary\").addClass(\"animated shake\");</code>"
       ]
     },
     {
@@ -277,6 +307,15 @@
         "Dann nutze die jQuery Funktion <code>.addClass()</code> um die Klassen <code>animated</code> und <code>fadeOut</code> hinzuzufügen.",
         "So könntest du das <code>Button</code> Element mit der ID <code>target6</code> ausblenden lassen:",
         "<code>$(\"#target6\").addClass(\"animated fadeOut\")</code>."
+      ],
+      "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 <code>button</code> avec l'id <code>target3</code> en utilisant le sélecteur <code>$(\"#target\")</code>.",
+        "Notez que, tout comme les expressions CSS, vous ajoutez un <code>#</code> avant le nom de l'id.",
+        "Puis, utilisez la fonction jQuery <code>.addClass()</code> afin d'ajouter les classes <code>animated</code> et <code>fadeOut</code>.",
+        "Voici comment vous pouvez faire en sorte que l'élément <code>button</code> avec l'id <code>target6</code> disparaisse en fondu:",
+        "<code>$(\"#target6\").addClass(\"animated fadeOut\")</code>."
       ]
     },
     {