Merge branch 'main' into add-portugueseBR-translation-quizz

quiz-app/src/App.vue

@@ -1,10 +1,20 @@
 <template>
   <div>
     <nav>
-      <router-link class="navlink" to="/">Home</router-link>
+      <router-link
+        class="navlink"
+        to="/"
+      >
+        Home
+      </router-link>
       <label for="locale">locale</label>
       <select v-model="locale">
-        <option v-for="localeName in availableLocales" :key="localeName">{{ localeName }}</option>
+        <option
+          v-for="localeName in availableLocales"
+          :key="localeName"
+        >
+          {{ localeName }}
+        </option>
       </select>
     </nav>
     <div id="app">

quiz-app/src/assets/translations/es.json

@@ -50,7 +50,7 @@
 								"isCorrect": "true"
 							},
 							{
-								"answerText": "Documentación del Systema Operativo",
+								"answerText": "Documentación del Sistema Operativo",
 								"isCorrect": "false"
 							}
 						]
@@ -229,7 +229,7 @@
 				"title": "Lección 3: Creación de Páginas Web Accesibles: Cuestionario Previo a la Lección",
 				"quiz": [
 					{
-						"questionText": "¿Con que herramienta de navegador puedes verificar si un sitio web es accesible?",
+						"questionText": "¿Con qué herramienta de navegador puedes verificar si un sitio web es accesible?",
 						"answerOptions": [
 							{
 								"answerText": "Lighthouse",
@@ -703,7 +703,7 @@
 			},
 			{
 				"id": 14,
-				"title": "Lesson 7: JavaScript Básico - Matrices (array) y Bucles (Loops): Cuestionario Posterior a Lección",
+				"title": "Lección 7: JavaScript Básico - Matrices (array) y Bucles (Loops): Cuestionario Posterior a Lección",
 				"quiz": [
 					{
 						"questionText": "¿Qué parte de un 'for-loop' necesitarías modificar para incrementar tu iteración por 5?",
@@ -730,7 +730,7 @@
 								"isCorrect": "true"
 							},
 							{
-								"answerText": "Una declaración-while tiene un contador y una expresión de iteración, mientras que  una declaración-for (for loop) solo tiene una condición.",
+								"answerText": "Una declaración-while tiene un contador y una expresión de iteración, mientras que una declaración-for (for loop) solo tiene una condición.",
 								"isCorrect": "false"
 							},
 							{
@@ -972,7 +972,7 @@
 						]
 					},
 					{
-						"questionText": "El DOM es como un arbol.",
+						"questionText": "El DOM es como un árbol.",
 						"answerOptions": [
 							{
 								"answerText": "true",
@@ -1654,7 +1654,7 @@
 						]
 					},
 					{
-						"questionText": "You draw images onto a screen with an operation called:",
+						"questionText": "Dibujas imágenes en la pantalla con una operación llamada:",
 						"answerOptions": [
 							{
 								"answerText": "paintImage()",
@@ -1799,7 +1799,7 @@
 								"isCorrect": "false"
 							},
 							{
-								"answerText": "Márqualo como muerto, solo pinta objetos no muertos la próxima vez que dibujes en la pantalla",
+								"answerText": "Marcarlo como muerto, solo pinta objetos no muertos la próxima vez que dibujes en la pantalla",
 								"isCorrect": "true"
 							},
 							{
@@ -2055,7 +2055,7 @@
 								"isCorrect": "false"
 							},
 							{
-								"answerText": "Muestre un mensaje adecuado, ofreziendo al jugador que reinicie y muestre qué tecla presionar para esa acción.",
+								"answerText": "Muestre un mensaje adecuado, ofreciendo al jugador que reinicie y muestre qué tecla presionar para esa acción.",
 								"isCorrect": "true"
 							}
 						]

quiz-app/src/components/Quiz.vue

@@ -1,21 +1,34 @@
 <template>
   <div class="card">
-    <div v-for="q in questions" :key="q.id">
+    <div
+      v-for="q in questions"
+      :key="q.id"
+    >
       <div v-if="route == q.id">
         <h2>{{ q.title }}</h2>
-        <hr />
-        <h3 v-if="complete" class="message">{{ $t("complete") }}</h3>
+        <hr>
+        <h3
+          v-if="complete"
+          class="message"
+        >
+          {{ $t("complete") }}
+        </h3>
         <div v-else>
-          <h3 v-if="error" class="error">{{ $t("error") }}</h3>
+          <h3
+            v-if="error"
+            class="error"
+          >
+            {{ $t("error") }}
+          </h3>
           <h2>
             {{ q.quiz[currentQuestion].questionText }}
           </h2>
           <div>
             <button
-              :key="index"
               v-for="(option, index) in q.quiz[currentQuestion].answerOptions"
-              @click="handleAnswerClick(option.isCorrect)"
+              :key="index"
               class="btn ans-btn"
+              @click="handleAnswerClick(option.isCorrect)"
             >
               {{ option.answerText }}
             </button>
@@ -47,6 +60,10 @@ export default {
   },
 
   i18n: { messages },
+  created() {
+    this.route = this.$route.params.id;
+    this.locale = this.$route.query.loc;
+  },
   methods: {
     handleAnswerClick(isCorrect) {
       this.error = false;
@@ -63,9 +80,5 @@ export default {
       }
     },
   },
-  created() {
-    this.route = this.$route.params.id;
-    this.locale = this.$route.query.loc;
-  },
 };
 </script>