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" "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": { "@mrmlnc/readdir-enhanced": {
"version": "2.2.1", "version": "2.2.1",
"resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz", "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@ -10917,6 +10927,11 @@
"integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==", "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
"dev": true "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": { "vue-loader": {
"version": "15.9.6", "version": "15.9.6",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.6.tgz", "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.6.tgz",

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

@ -2,9 +2,14 @@
<div> <div>
<nav> <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>en</option>
<option>fr</option>
</select>
</nav> </nav>
<div id="app"> <div id="app">
<h1>Web Development for Beginners: Quizzes</h1> <h1>{{ $t("message.title") }}</h1>
<router-view> <router-view>
<Quiz /> <Quiz />
</router-view> </router-view>
@ -14,12 +19,22 @@
<script> <script>
import Quiz from "@/components/Quiz.vue"; import Quiz from "@/components/Quiz.vue";
import messages from "@/assets/translations/messages";
export default { export default {
name: "App", name: "App",
i18n: { messages },
components: { components: {
Quiz, Quiz,
}, },
data() {
return { locale: "en" };
},
watch: {
locale(val) {
this.$root.$i18n.locale = val;
},
},
}; };
</script> </script>
@ -51,6 +66,9 @@ h3,
.message { .message {
text-align: center; text-align: center;
} }
.error {
color: red;
}
.card { .card {
width: 60%; width: 60%;
border: #252d4a solid; 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 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"> <div v-if="route == q.id">
<h2> <h3 v-if="complete" class="message">{{ $t("message.complete") }}</h3>
{{ q.quiz[currentQuestion].questionText }} <div v-else>
</h2> <h3 v-if="error" class="error">{{ $t("message.error") }}</h3>
<h3 class="message">{{ message }}</h3> <h2>
<div> {{ q.quiz[currentQuestion].questionText }}
<button </h2>
:key="index" <div>
v-for="(option, index) in q.quiz[currentQuestion].answerOptions" <button
@click="handleAnswerClick(option.isCorrect)" :key="index"
class="btn ans-btn" v-for="(option, index) in q.quiz[currentQuestion].answerOptions"
> @click="handleAnswerClick(option.isCorrect)"
{{ option.answerText }} class="btn ans-btn"
</button> >
{{ option.answerText }}
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -22,39 +25,38 @@
</template> </template>
<script> <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 { export default {
data() { data() {
return { return {
currentQuestion: 0, currentQuestion: 0,
message: "", complete: false,
startQuiz: false, error: false,
restart: false,
questions: questions, questions: questions,
route: "", route: "",
}; };
}, },
i18n: { messages },
methods: { methods: {
handleAnswerClick(isCorrect) { handleAnswerClick(isCorrect) {
this.error = false;
let nextQuestion = this.currentQuestion + 1; let nextQuestion = this.currentQuestion + 1;
console.log(nextQuestion);
if (isCorrect == "true") { if (isCorrect == "true") {
this.message = "";
//always 3 questions per quiz //always 3 questions per quiz
if (nextQuestion < 3) { if (nextQuestion < 3) {
this.currentQuestion = nextQuestion; this.currentQuestion = nextQuestion;
} else { } else {
this.message = "Well done, you've completed the quiz"; this.complete = true;
} }
} else { } else {
this.message = "sorry, try again"; this.error = true;
} }
}, },
}, },
created() { created() {
console.log(this.$route.params.id);
this.route = this.$route.params.id; this.route = this.$route.params.id;
}, },
}; };

@ -3,4 +3,14 @@ import App from './App.vue';
Vue.config.productionTip = false; Vue.config.productionTip = false;
import router from './router'; 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