quiz edits, adding first localization messages

pull/141/head
Jen Looper 4 years ago
parent 0448fc97a2
commit 4709b11586

@ -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",

@ -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": {

@ -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;

@ -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!',
},
},
};

@ -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;
},
};

@ -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');

Loading…
Cancel
Save