Merge branch 'main' into quiz-kr

quiz-app/src/App.vue

@@ -7,6 +7,7 @@
         <option>en</option>
         <option>fr</option>
         <option>ko</option>
+        <option>id</option>
       </select>
     </nav>
     <div id="app">
@@ -29,13 +30,18 @@ export default {
     Quiz,
   },
   data() {
-    return { locale: "en" };
+    return {
+      locale: "en",
+    };
   },
   watch: {
     locale(val) {
       this.$root.$i18n.locale = val;
     },
   },
+  created() {
+    this.locale = this.$route.query.loc;
+  },
 };
 </script>
 

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

@@ -2,6 +2,7 @@
 import en from './en.json';
 import fr from './fr.json';
 import ko from './ko.json';
+import id from './id.json';
 
 //export const defaultLocale = 'en';
 
@@ -9,6 +10,7 @@ const messages = {
 	en: en[0],
 	fr: fr[0],
 	ko: ko[0],
+	id: id[0],
 };
 
 export default messages;

quiz-app/src/components/Quiz.vue

@@ -1,10 +1,9 @@
 <template>
   <div class="card">
     <div v-for="q in questions" :key="q.id">
-      
       <div v-if="route == q.id">
-        <h2>{{q.title}}</h2>
-        <hr/>
+        <h2>{{ q.title }}</h2>
+        <hr />
         <h3 v-if="complete" class="message">{{ $t("complete") }}</h3>
         <div v-else>
           <h3 v-if="error" class="error">{{ $t("error") }}</h3>
@@ -38,12 +37,13 @@ export default {
       complete: false,
       error: false,
       route: "",
+      locale: "",
     };
   },
   computed: {
     questions() {
       return this.$t("quizzes");
-    }
+    },
   },
 
   i18n: { messages },
@@ -65,6 +65,7 @@ export default {
   },
   created() {
     this.route = this.$route.params.id;
+    this.locale = this.$route.query.loc;
   },
 };
 </script>