diff --git a/seed/challenges/01-front-end-development-certification/jquery.json b/seed/challenges/01-front-end-development-certification/jquery.json
index ed8430f735..00173ab56c 100644
--- a/seed/challenges/01-front-end-development-certification/jquery.json
+++ b/seed/challenges/01-front-end-development-certification/jquery.json
@@ -59,6 +59,16 @@
"Dentro de tu elemento script, agrega este código: $(document).ready(function () { A continuación, ciérralo en la línea siguiente (aún dentro de tu elemento script) con: })",
"Más adelante aprenderemos más acerca de funciones. Lo importante es saber que el código que pongas dentro de esta función (function) se ejecutará tan pronto como tu navegador haya cargado la página.",
"Esto es importante porque sin tu función de documento listo, tu código puede ejecutarse antes de que se haya presentado el HTML, lo que podría causar errores."
+ ],
+ "titleDe": "Lerne, wie Script Tags und Document Ready funktionieren",
+ "descriptionDe": [
+ "Jetzt sind wir bereit jQuery zu lernen, das populärste JavaScript-Tool aller Zeiten. Mach dir über JavaScript keine Sorgen - über dieses werden wir bald sprechen.",
+ "Bevor wir jQuery nutzen können, müssen wir erst ein paar Dinge zu unserem HTML hinzufügen.",
+ "Füge als erstes ein script Element am Beginn deiner Seite ein. Vergewissere dich, dass du das Element in der nächsten Zeile geschlossen hast.",
+ "Dein Browser wird jegliches JavaScript, jQuery eingeschlossen, innerhalb eines script Elements ausführen.",
+ "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."
]
},
{
@@ -117,6 +127,15 @@
"Por ejemplo, hagamos que todos tus elementos button reboten. Sólo tienes que añadir este código dentro de la función de documento listo: ",
"$(\"button\").addClass(\"animated bounce\")",
"Ten en cuenta que ya hemos incluido tanto la biblioteca jQuery como la biblioteca Animate.css en segundo plano para que pueda utilizarlos en el editor. Así que estás usando jQuery para aplicar la clase bounce de Animate.css a tus elementos button."
+ ],
+ "titleDe": "HTML-Elemente mit Selektoren durch jQuery auswählen",
+ "descriptionDe": [
+ "Jetzt haben wir eine Document Ready Funktion.",
+ "Lass uns unser erstes jQuery Statement schreiben. Alle jQuery Funktionen starten mit einem $, für gewöhnlich als Dollar-Zeichen Operator bezeichnet.",
+ "jQuery wählt oft HTML-Elemente mit einem Selektor aus, um dann mit diesen Elementen etwas zu machen.",
+ "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."
]
},
{
@@ -177,6 +196,16 @@
"A continuación, utiliza la función .addClass() de jQuery para agregar las clases animated y shake.",
"Por ejemplo, podrías hacer que todos los elementos con la clase text-primary se sacudieran añadiendo lo siguiente a tu función de documento listo:",
"$(\".text-primary\").addClass(\"animated shake\");"
+ ],
+ "titleDe": "Elemente anhand von Klassen mit jQuery auswählen",
+ "descriptionDe": [
+ "Siehst du, wie wir alle deine Button Elemente hüpfen haben lassen? Wir haben sie mit $(\"button\") ausgewählt, dann CSS-Klassen mit .addClass(\"animated bounce\"); hinzugefügt.",
+ "Du hast gerade jQuery's .addClass() Funktion genutzt, die dir erlaubt, Klassen zu Elemente hinzuzufügen.",
+ "Wähle als erstes deine div Elemente mit der Klasse well, indem du den $(\".well\") Selektor nutzt.",
+ "Bedenke, dass du - genauso wie bei CSS-Deklarationen - einen . vor den Namen der Klasse setzen musst.",
+ "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\");"
]
},
{
@@ -238,6 +267,15 @@
"A continuación, utiliza la función .addClass() de jQuery para agregar las clases animated y fadeOut.",
"He aquí cómo haces que desaparezca el elemento button con la identificación target6:",
"$(\"#target6\").addClass(\"animated fadeOut\")."
+ ],
+ "titleDe": "Elemente anhand der ID mit jQuery auswählen",
+ "descriptionDe": [
+ "Du kannst Elemente auch anhand deren ID-Attributs auswählen.",
+ "Wähle als erstes dein Button Element mit der ID target3, indem du den $(\"#target3\") Selektor nutzt.",
+ "Bedenke, dass du - genauso wie bei CSS-Deklarationen - eine # vor den Namen der Klasse setzen musst.",
+ "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\")."
]
},
{
@@ -294,6 +332,11 @@
"descriptionEs": [
"Estas animaciones eran divertidas al principio, pero ahora se están volviendo una distracción.",
"Elimina esas tres funciones jQuery de tu función de documento listo, pero deja intacta la declaración de la función de documento listo."
+ ],
+ "titleDe": "Lösche deine jQuery Funktionen",
+ "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."
]
},
{
@@ -356,6 +399,15 @@
"Agregar la clase animated a todos los elementos con tipo button.",
"Agregar la clase shake a todos los botones con clase .btn.",
"Agregar la clase btn-primary al botón con identificación #target1."
+ ],
+ "titleDe": "Wähle das gleiche Element mit mehreren jQuery Selektoren aus",
+ "descriptionDe": [
+ "Bis jetzt kennst du drei verschiedene Wege um Elemente auszuwählen: mit dem Element-Typ: $(\"button\"), mit der Element-Klasse: $(\".btn\"), und der Element-ID: $(\"#target1\").",
+ "Auch wenn es möglich ist, mehrere Klassen in einem einzigen .addClass() Aufruf hinzuzufügen, lass uns jetzt die Klassen in drei verschiedenen Wegen dem Element hinzufügen.",
+ "Nutze jeden der oben erwähnten jQuery Selektoren und die addClass() Funktion:",
+ "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."
]
},
{
@@ -414,6 +466,13 @@
"He aquí cómo puedes hacerlo para un botón específico:",
"$(\"#target2\").removeClass(\"btn-default\");",
"Vamos a quitar la clase btn-default de todos nuestros elementos button."
+ ],
+ "titleDe": "Entferne Klassen von einem Element mit jQuery",
+ "descriptionDe": [
+ "Genauso wie du Klassen mit der jQuery Funktion addClass() hinzufügen kannst, kannst du mit der jQuery Funktion removeClass() Klassen entfernen.",
+ "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."
]
},
{
@@ -478,6 +537,16 @@
"Esto es un poco diferente a una declaración normal CSS, porque la propiedad CSS y su valor están entre comillas y separadas por una coma en lugar de dos puntos.",
"Elimina tus selectores jQuery, dejando en blanco la función de documento listo.",
"Selecciona target1 y cambia su color a rojo."
+ ],
+ "titleDe": "Das CSS eines Elements mit jQuery ändern",
+ "descriptionDe": [
+ "Wir können auch das CSS eines HTML-Elements mit jQuery verändern.",
+ "jQuery hat die Funktion .css(), welche dir erlaubt, das CSS eines Elements zu ändern.",
+ "So können wir die Farbe einer ID zu Blau ändern:",
+ "$(\"#target1\").css(\"color\", \"blue\");",
+ "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."
]
},
{
@@ -538,6 +607,15 @@
"He aquí cómo puedes desactivar todos los botones:",
"$(\"button\").prop(\"disabled\", true);",
"Desactiva sólo el botón target1."
+ ],
+ "titleDe": "Elemente mit jQuery deaktivieren",
+ "descriptionDe": [
+ "Du kannst auch die nicht-CSS Eigenschaften eines HTML-Elements mit jQuery ändern. Zum Beispiel kannst du Buttons deaktivieren.",
+ "Wenn du einen Button deaktivierst, wird er grau unterlegt und kann nicht mehr geklickt werden.",
+ "jQuery hat eine Funktion namens .prop(), die es dir erlaubt, die Eigenschaften von Elementen anzupassen.",
+ "So kannst du alle Buttons deaktivieren:",
+ "$(\"button\").prop(\"disabled\", true);",
+ "Deaktiviere nur den target1 Button."
]
},
{
@@ -600,6 +678,15 @@
"$(\"h3\").html(\"<i>jQuery Playground</i>\");",
"jQuery también tiene una función similar llamada .text() que sólo altera el texto sin añadir etiquetas.",
"Cambia el botón con identificación target4 de forma que su texto quede en itálicas."
+ ],
+ "titleDe": "Ändere den Text innerhalb eines Elements mit jQuery",
+ "descriptionDe": [
+ "Mit jQuery kannst du den Text zwischen dem Start- und dem End-Tag eines Elements ändern. Du kannst sogar das HTML-Markup ändern.",
+ "jQuery hat eine Funktion namens .html(), die dich HTML-Tags und Text innerhalb eines Elements hinzufügen lässt. Jeglicher Content der sich vorher innerhalb des Elements befand, wird mit jenem Content ersetzt, den du durch diese Funktion bereitstellst.",
+ "So kannst du den Text unserer Überschrift überschreiben und hervorheben:",
+ "$(\"h3\").html(\"<em>jQuery Playground</em>\");",
+ "jQuery hat auch eine weitere ähnliche Funktion namens .text(), welche nur den Text ändert, ohne Tags hinzuzufügen. In anderen Worten: diese Funktion evaluiert keinerlei HTML-Tags, die an sie übergeben werden, sondern behandelt diese als Text, den du mit der Funktion ersetzen willst.",
+ "Ändere den Button mit der ID target4 indem du seinen Text hervorhebst."
]
},
{
@@ -654,6 +741,12 @@
"Ahora quitemos un elemento HTML de tu página usando jQuery.",
"jQuery tiene una función llamada .remove() que eliminará un elemento HTML por completo",
"Elimina el elemento con identificación target4 de la página utilizando la función .remove()."
+ ],
+ "titleDe": "Entferne ein Element mit jQuery",
+ "descriptionDe": [
+ "Lass uns jetzt ein HTML-Element mit jQuery von deiner Seite entfernen.",
+ "jQuery hat eine Funktion namens .remove(), die ein HTML-Element komplett entfernt.",
+ "Entferne das Element target4 von der Seite, indem du die .remove() Funktion nutzt."
]
},
{
@@ -714,6 +807,14 @@
"Por ejemplo, si quisiéramos mover target4 de nuestro pozo (well) derecho a nuestro pozo izquierdo, usaríamos:",
"$(\"#target4\").appendTo(\"#left-well\");",
"Mueve tu elemento target2 de tu left-well a tu right-well."
+ ],
+ "titleDe": "Verwende appendTo um Elemente mit jQuery zu verschieben.",
+ "descriptionDe": [
+ "Lass uns jetzt versuchen, ein Element von einem div zum Nächsten zu verschieben.",
+ "jQuery hat eine Funktion namens appendTo(), die es dir erlaubt HTML-Elemente auszuwählen und diese zu einem anderen Element anzuhängen.",
+ "Wenn wir zum Beispiel target4 von right-well zu left-well verschieben wollen, würden wir folgenden Code nutzen:",
+ "$(\"#target4\").appendTo(\"#left-well\");",
+ "Verschiebe dein target2 Element von left-well zu right-well."
]
},
{
@@ -777,6 +878,15 @@
"$(\"#target2\").clone().appendTo(\"#right-well\");",
"¿Te diste cuenta que esto implica pegar dos funciones jQuery? Esto se conoce como encadenamiento y es una manera conveniente de hacer las cosas con jQuery. ",
"Clona tu elemento target5 y añadelo a tu left-well."
+ ],
+ "titleDe": "Ein Element kopieren mit jQuery",
+ "descriptionDe": [
+ "Neben der Möglichkeit Elemente zu verschieben, können diese auch von einem Platz zum nächsten kopiert werden.",
+ "jQuery hat eine Funktion namens clone(), die eine Kopie eines Elements anfertigt.",
+ "Wenn wir zum Beispiel target2 von left-well zu right-well kopieren wollen, würden wir folgenden Code nutzen:",
+ "$(\"#target2\").clone().appendTo(\"#right-well\");",
+ "Ist dir aufgefallen, dass wir dazu zwei jQuery Funktionen miteinander verknüpfen? Das nennt sich function chaining und ist eine praktische Art um mit jQuery zu Lösungen zu kommen.",
+ "Kopiere dein target5 Element und verschiebe es zu left-well."
]
},
{
@@ -844,6 +954,15 @@
"He aquí un ejemplo de cómo se utiliza la función parent() si quisieras darle al elemento padre del elemento left-well un color de fondo azul:",
"$(\"#left-well\").parent().css(\"background-color\", \"blue\")",
"Dale al padre del elemento #target1 un color de fondo (background-color) rojo."
+ ],
+ "titleDe": "Wähle das Eltern-Element mit jQuery aus",
+ "descriptionDe": [
+ "Jedes HTML-Element hat ein Eltern-Element, von dem es Eigenschaften erbt.",
+ "Dein jQuery Playground h3 Element hat zum Beispiel das Eltern-Element <div class=\"container-fluid\">, welches das body Element als Eltern-Element hat.",
+ "jQuery hat eine Funktion namens parent(), die es dir erlaubt auf die Eltern-Elemente eines von dir ausgewählten Elements zuzugreifen.",
+ "Hier ist ein Beispiel, wie du die parent() Funktion nutzen kannst, wenn du dem Eltern-Element des left-well Elements eine blaue Hintergrundfarbe geben willst:",
+ "$(\"#left-well\").parent().css(\"background-color\", \"blue\")",
+ "Gib dem Eltern-Element des #target1 Elements eine rote Hintergrundfarbe."
]
},
{
@@ -909,6 +1028,15 @@
"He aquí un ejemplo de cómo se utiliza la función children() para darle a los hijos de tu elemento left-well el color azul:",
"$(\"#left-well\").children().css(\"color\", \"blue\")",
"Da a todos los hijos de tu elemento right-well el color naranja."
+ ],
+ "titleDe": "Wähle Kinder-Elemente mit jQuery aus",
+ "descriptionDe": [
+ "Viele HTML-Elemente haben Kinder-Elemente, die ihre Eigenschaften von ihren Eltern-Elementen erben.",
+ "Zum Beispiel ist jedes HTML-Element ein Kind-Element des body Elements und dein \"jQuery Playground\" h3 Element ist ein Kind-Element deines <div class=\"container-fluid\"> Elements.",
+ "jQuery hat eine Funktion namens children(), die es dir erlaubt, auf die Kinder-Elemente des von dir ausgewählten Elements zuzugreifen.",
+ "Hier ist ein Beispiel, wie du die children() Funktion nutzen kannst, wenn du den Kinder-Elementen von left-well die Farbe Blau geben willst:",
+ "$(\"#left-well\").children().css(\"color\", \"blue\")",
+ "Gib allen Kinder-Elementen von #right-well die Farbe Orange."
]
},
{
@@ -975,6 +1103,15 @@
"He aquí cómo le asignarás la clase bounce al tercer elemento de cada pozo:",
"$(\".target:nth-child(3)\").addClass(\"animated bounce\");",
"Haz que rebote el segundo hijo de cada uno de los elementos de tus pozos. Debes elegir los hijos de elementos con clase target."
+ ],
+ "titleDe": "Wähle ein spezifisches Kinder-Element mit jQuery aus",
+ "descriptionDe": [
+ "Du hast gesehen, warum ID-Attribute so praktisch sind, um Elemente mit jQuery Selektoren auszuwählen. Leider hast du aber nicht immer so praktische IDs, mit denen du arbeiten kannst.",
+ "Zum Glück hat jQuery einige Tricks auf Lager, um die richtigen Elemente auszuwählen.",
+ "jQuery nutzt CSS-Selektoren um Elemente auszuwählen. Der target:nth-child(n) CSS-Selektor erlaubt dir das n-te Element aus einer Zielklasse oder Element-Typ zu wählen.",
+ "Hier siehst du, wie du dem dritten Kind-Element einer jeden Vertiefung eine bounce Klasse hinzufügen kannst.",
+ "$(\".target:nth-child(3)\").addClass(\"animated bounce\");",
+ "Lasse das zweite Kind-Element jeder Vertiefung hüpfen. Dazu musst das Kind-Element mit der target Klasse auswählen."
]
},
{
@@ -1040,6 +1177,14 @@
"He aquí cómo elegirías todos los elementos impares con clase target y como les agregarías unas clases:",
"$(\".target:odd\").addClass(\"animated shake\");",
"Intenta seleccionar todos los elementos de número par y agrégales las clases animated y shake."
+ ],
+ "titleDe": "Wähle gerade Zahlen mit jQuery aus",
+ "descriptionDe": [
+ "Du kannst auch alle geradzahligen Elemente auswählen.",
+ "Hier siehst du, wie du ungeradzahlige Elemente mit der Klasse target auswählen und ihnen folgende Klassen geben kannst:",
+ "$(\".target:odd\").addClass(\"animated shake\");",
+ "Bedenke, dass jQuery null-indexiert ist; das bedeutet, dass - kontraintuitiverweise - :odd das zweite Element, das vierte Element und so weiter auswählt.",
+ "Versuche alle geradzahligen Elemente auszuwählen und ihnen die Klassen animated und shake hinzuzufügen."
]
},
{
@@ -1103,6 +1248,13 @@
"jQuery también puede elegir el elemento body.",
"Así es como haríamos que el cuerpo entero desapareciera: $(\"body\").addClass('animated fadeOut');",
"Pero vamos a hacer algo más dramático. Añade las clases animated y hinge a tu elemento body."
+ ],
+ "titleDe": "Mit jQuery die gesamte Seite modifizieren",
+ "descriptionDe": [
+ "Genug mit unserem jQuery Spielplatz herumgespielt. Reißen wir ihn ein!",
+ "jQuery kann auch das body Element auswählen.",
+ "Hier siehst du, wie wir den gesamten body Bereich ausblenden können: $(\"body\").addClass(\"animated fadeOut\");",
+ "Aber lass uns noch etwas Dramatischeres machen. Füge die Klassen animated und hinge zu deinem body Element hinzu."
]
}
]