73 lines
2.2 KiB
Vue
73 lines
2.2 KiB
Vue
<template>
|
|
<div class="p-2">
|
|
<h1 class="text-3xl text-center text-orange-900 font-bold">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 mx-2">
|
|
<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 mt-8">
|
|
<span class="btn cursor-pointer" @click="startQuizz">Commencer</span>
|
|
</div>
|
|
<div v-else>
|
|
Start
|
|
</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, 4, 5
|
|
],
|
|
levelQuizz: false,
|
|
currentQuestion: null,
|
|
currentResponses: null,
|
|
responses: null,
|
|
}
|
|
},
|
|
methods: {
|
|
startQuizz: function () {
|
|
console.log('start')
|
|
this.responses = []
|
|
this.selectedQuizz = this.quizzList[this.selectedQuizz]
|
|
this.currentQuestion = this.selectedQuizz[Math.floor(Math.random() * this.selectedQuizz.length)]
|
|
this.currentResponses = [this.currentQuestion[1]]
|
|
|
|
while (this.currentResponses.length <= (this.levelQuizz * 2 - 1)) {
|
|
let response = this.selectedQuizz[Math.floor(Math.random() * this.selectedQuizz.length)]
|
|
console.log(response)
|
|
if(!this.currentResponses.includes(response[1])) {
|
|
this.currentResponses.push(response[1])
|
|
}
|
|
}
|
|
|
|
console.log(this.currentQuestion, this.currentResponses)
|
|
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|