diff --git a/seed/challenges/01-front-end-development-certification/jquery.json b/seed/challenges/01-front-end-development-certification/jquery.json index 746653ddf5..0bcebbe37a 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." ] }, { @@ -137,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." ] }, { @@ -207,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\");" ] }, { @@ -277,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\")." ] }, {