refactor(client): create quiz component for home page

pull/12/head
sundowndev 2019-12-07 15:27:58 +01:00
parent 546e7f588d
commit d699fcb7d3
2 changed files with 58 additions and 52 deletions

View File

@ -0,0 +1,52 @@
<template>
<div id="quizz_input">
<h2 id="question_text">{{ currentQuestion.text }}</h2>
<p>
Plus Éemien ou Héticien ?
<span class="progress">({{ index + 1 }}/{{ questions.length }})</span>
</p>
<span v-for="(choice) in schools" :key="choice.id">
<button class="choice-btn" @click="answer(choice.id)">{{ choice.name }}</button>
</span>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import { mapState, mapGetters, mapMutations } from 'vuex';
import router from '../router';
import IQuestion from '../models/question';
export default Vue.extend({
name: 'Quiz',
props: {},
computed: {
...mapGetters('schools', ['schools']),
...mapGetters('questions', [
'questions',
'index',
'score',
'currentQuestion',
'checkAnswer',
'isLastQuestion',
]),
},
methods: {
answer(answer: number): void {
const index: number = this.index;
const questions: IQuestion[] = this.questions;
if (this.checkAnswer({ answer })) {
this.$store.dispatch('questions/increaseScore');
}
if (!this.isLastQuestion) {
this.$store.dispatch('questions/increaseIndex');
} else {
router.push({ name: 'scoreScreen' });
}
},
},
});
</script>

View File

@ -1,68 +1,22 @@
<template>
<div class="home">
<div id="quizz_input" v-show="!finished">
<h2 id="question_text">{{ currentQuestion.text }}</h2>
<p>
Plus Éemien ou Héticien ?
<span class="progress">({{ index + 1 }}/{{ questions.length }})</span>
</p>
<span v-for="(choice) in schools" :key="choice.id">
<button class="choice-btn" @click="answer(choice.id)">{{ choice.name }}</button>
</span>
</div>
<ScoreScreen v-show="finished" :reset="resetGame" />
<Quiz />
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import IQuestion from '../models/question';
import { mapState, mapGetters, mapMutations } from 'vuex';
import ScoreScreen from '../components/ScoreScreen.vue';
import Quiz from '../components/Quiz.vue';
export default Vue.extend({
name: 'home',
data() {
return {
finished: false,
};
},
computed: {
...mapGetters('schools', ['schools']),
...mapGetters('questions', [
'questions',
'index',
'score',
'currentQuestion',
'checkAnswer',
'isLastQuestion',
]),
},
methods: {
answer(answer: number): void {
const index: number = this.index;
const questions: IQuestion[] = this.questions;
if (this.checkAnswer({ answer })) {
this.$store.dispatch('questions/increaseScore');
}
if (!this.isLastQuestion) {
this.$store.dispatch('questions/increaseIndex');
} else {
this.finished = true;
}
},
resetGame(): void {
this.finished = false;
this.$store.dispatch('questions/resetState');
},
},
components: {
ScoreScreen,
return {};
},
computed: {},
methods: {},
components: { Quiz },
async created() {
await this.$store.dispatch('questions/fetchQuestions');
await this.$store.dispatch('schools/fetchSchools');