121 lines
4.3 KiB
Vue
121 lines
4.3 KiB
Vue
<template>
|
|
<div class="p-2">
|
|
<h1 class="text-3xl text-center text-orange-900 font-bold mb-4">Quizz</h1>
|
|
<div v-if="!selectedQuizz" class="flex justify-center my-4">
|
|
<a v-for="(quizz, key) in quizzList"
|
|
:key="key"
|
|
class="btn-primary mr-1 cursor-pointer"
|
|
@click="selectedQuizz = key">
|
|
{{ key }}
|
|
</a>
|
|
</div>
|
|
<div v-if="!levelQuizz" class="flex justify-center my-4">
|
|
<a v-for="(level, index) in levels"
|
|
:key="index"
|
|
class="btn-primary mr-1 cursor-pointer"
|
|
@click="levelQuizz = level">
|
|
Niveau {{ level }}
|
|
</a>
|
|
</div>
|
|
<div v-if="selectedQuizz && levelQuizz">
|
|
|
|
<div v-if="!responses" class="flex justify-center my-4">
|
|
<span class="btn-primary" @click="startQuizz">Commencer</span>
|
|
</div>
|
|
<div v-else-if="results" class="flex flex-col items-center">
|
|
<div class="text-center text-2xl font-bold my-4">{{ selectedQuizz.name }}</div>
|
|
<div class="text-center text-2xl font-bold my-4">{{ note }} / {{ responses.length }}</div>
|
|
<span class="btn-primary mt-4" @click="newQuizz">Nouveau Quizz</span>
|
|
</div>
|
|
<div v-else class="flex flex-col">
|
|
<div class="text-center my-4"><span class="text-2xl font-bold">{{ currentQuestion[0] }}</span></div>
|
|
<div class="flex justify-center my-4">
|
|
<div v-for="(response, index) in currentResponses"
|
|
:key="index"
|
|
@click="responsed(currentQuestion, response)"
|
|
class="btn mx-1">
|
|
{{ response }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import quizz from './quizz.json'
|
|
|
|
export default {
|
|
name: 'Quizz',
|
|
data: function () {
|
|
return {
|
|
quizzList: quizz,
|
|
selectedQuizz: null,
|
|
levels: [
|
|
1, 2, 3
|
|
],
|
|
levelQuizz: false,
|
|
currentQuestion: null,
|
|
currentResponses: null,
|
|
responses: null,
|
|
results: false,
|
|
}
|
|
},
|
|
computed: {
|
|
note() {
|
|
let note = 0
|
|
this.responses.forEach(response => {
|
|
if(response[0][1] === response[1]) {
|
|
note = note + 1
|
|
}
|
|
})
|
|
return note
|
|
}
|
|
},
|
|
methods: {
|
|
startQuizz: function () {
|
|
this.responses = []
|
|
this.selectedQuizz = this.quizzList[this.selectedQuizz]
|
|
let newQuestion = this.newQuestion()
|
|
this.currentQuestion = newQuestion.question
|
|
this.currentResponses = newQuestion.responses
|
|
},
|
|
newQuizz: function() {
|
|
this.selectedQuizz = null
|
|
this.levelQuizz = false
|
|
this.responses = null
|
|
this.results = false
|
|
},
|
|
newQuestion: function() {
|
|
let responses, question
|
|
let random_boolean = (this.selectedQuizz.reversible) ? Math.random() >= 0.5 : false
|
|
|
|
question = this.selectedQuizz.responses[Math.floor(Math.random() * this.selectedQuizz.responses.length)].slice()
|
|
question = (random_boolean) ? question.reverse() : question
|
|
responses = [question[1]]
|
|
|
|
while (responses.length <= (this.levelQuizz * 2 - 1)) {
|
|
let response = this.selectedQuizz.responses[Math.floor(Math.random() * this.selectedQuizz.responses.length)].slice()
|
|
response = (random_boolean) ? response.reverse() : response
|
|
if(!responses.includes(response[1])) {
|
|
responses.push(response[1])
|
|
}
|
|
}
|
|
responses.sort((a, b) => a > b)
|
|
|
|
return { question, responses }
|
|
},
|
|
responsed: function(question, response) {
|
|
this.responses.push([question, response])
|
|
|
|
if(this.responses.length > 9) {
|
|
this.results = true
|
|
}
|
|
let newQuestion = this.newQuestion()
|
|
this.currentQuestion = newQuestion.question
|
|
this.currentResponses = newQuestion.responses
|
|
}
|
|
}
|
|
}
|
|
</script>
|