quiz edits, adding first localization messages

quiz-app/package-lock.json

@@ -1087,6 +1087,16 @@
         "postcss": "^7.0.0"
       }
     },
+    "@kazupon/vue-i18n-loader": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@kazupon/vue-i18n-loader/-/vue-i18n-loader-0.5.0.tgz",
+      "integrity": "sha512-Tp2mXKemf9/RBhI9CW14JjR9oKjL2KH7tV6S0eKEjIBuQBAOFNuPJu3ouacmz9hgoXbNp+nusw3MVQmxZWFR9g==",
+      "dev": true,
+      "requires": {
+        "js-yaml": "^3.13.1",
+        "json5": "^2.1.1"
+      }
+    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@@ -10917,6 +10927,11 @@
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },
+    "vue-i18n": {
+      "version": "8.22.2",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.22.2.tgz",
+      "integrity": "sha512-rb569fVJInPUgS/bbCxEQ9DrAoFTntuJvYoK4Fpk2VfNbA09WzdTKk57ppjz3S+ps9hW+p9H+2ASgMvojedkow=="
+    },
     "vue-loader": {
       "version": "15.9.6",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.6.tgz",

quiz-app/package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
+    "vue-i18n": "^8.22.2",
     "vue-router": "^3.4.9"
   },
   "devDependencies": {

quiz-app/src/App.vue

@@ -2,9 +2,14 @@
   <div>
     <nav>
       <router-link class="navlink" to="/">Home</router-link>
+      <label for="locale">locale</label>
+      <select v-model="locale">
+        <option>en</option>
+        <option>fr</option>
+      </select>
     </nav>
     <div id="app">
-      <h1>Web Development for Beginners: Quizzes</h1>
+      <h1>{{ $t("message.title") }}</h1>
       <router-view>
         <Quiz />
       </router-view>
@@ -14,12 +19,22 @@
 
 <script>
 import Quiz from "@/components/Quiz.vue";
+import messages from "@/assets/translations/messages";
 
 export default {
   name: "App",
+  i18n: { messages },
   components: {
     Quiz,
   },
+  data() {
+    return { locale: "en" };
+  },
+  watch: {
+    locale(val) {
+      this.$root.$i18n.locale = val;
+    },
+  },
 };
 </script>
 
@@ -51,6 +66,9 @@ h3,
 .message {
   text-align: center;
 }
+.error {
+  color: red;
+}
 .card {
   width: 60%;
   border: #252d4a solid;

quiz-app/src/assets/translations/messages.js

@@ -0,0 +1,16 @@
+export default {
+	en: {
+		message: {
+			title: 'Web Development for Beginners: Quizzes',
+			complete: 'Congratulations, you completed the quiz!',
+			error: 'Sorry, try again',
+		},
+	},
+	fr: {
+		message: {
+			title: 'Developpement Web pour Débutants: Quizzes',
+			complete: 'Felicitations, vous avez completé le quiz!',
+			error: 'Désolé, réessayez!',
+		},
+	},
+};

quiz-app/src/components/Quiz.vue

@@ -2,19 +2,22 @@
   <div class="card">
     <div v-for="q in questions" :key="q.id">
       <div v-if="route == q.id">
-        <h2>
-          {{ q.quiz[currentQuestion].questionText }}
-        </h2>
-        <h3 class="message">{{ message }}</h3>
-        <div>
-          <button
-            :key="index"
-            v-for="(option, index) in q.quiz[currentQuestion].answerOptions"
-            @click="handleAnswerClick(option.isCorrect)"
-            class="btn ans-btn"
-          >
-            {{ option.answerText }}
-          </button>
+        <h3 v-if="complete" class="message">{{ $t("message.complete") }}</h3>
+        <div v-else>
+          <h3 v-if="error" class="error">{{ $t("message.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)"
+              class="btn ans-btn"
+            >
+              {{ option.answerText }}
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -22,39 +25,38 @@
 </template>
 
 <script>
-import questions from "@/assets/data/en/quiz.json";
+import questions from "@/assets/translations/en/quiz.json";
+import messages from "@/assets/translations/messages";
 
 export default {
   data() {
     return {
       currentQuestion: 0,
-      message: "",
-      startQuiz: false,
-      restart: false,
+      complete: false,
+      error: false,
       questions: questions,
       route: "",
     };
   },
 
+  i18n: { messages },
   methods: {
     handleAnswerClick(isCorrect) {
+      this.error = false;
       let nextQuestion = this.currentQuestion + 1;
-      console.log(nextQuestion);
       if (isCorrect == "true") {
-        this.message = "";
         //always 3 questions per quiz
         if (nextQuestion < 3) {
           this.currentQuestion = nextQuestion;
         } else {
-          this.message = "Well done, you've completed the quiz";
+          this.complete = true;
         }
       } else {
-        this.message = "sorry, try again";
+        this.error = true;
       }
     },
   },
   created() {
-    console.log(this.$route.params.id);
     this.route = this.$route.params.id;
   },
 };

quiz-app/src/main.js

@@ -3,4 +3,14 @@ import App from './App.vue';
 Vue.config.productionTip = false;
 import router from './router';
 
-new Vue({ router, render: (h) => h(App) }).$mount('#app');
+import VueI18n from 'vue-i18n';
+Vue.use(VueI18n);
+
+const i18n = new VueI18n({
+	locale: 'en',
+	messages: {
+		en: {},
+	},
+});
+
+new Vue({ i18n, router, render: (h) => h(App) }).$mount('#app');