finish departement quizz meca
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="p-2">
|
||||
<h1 class="text-3xl text-center text-orange-900 font-bold">Quizz</h1>
|
||||
<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"
|
||||
@@ -9,7 +9,7 @@
|
||||
{{ key }}
|
||||
</a>
|
||||
</div>
|
||||
<div v-if="!levelQuizz" class="flex justify-center mx-2">
|
||||
<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"
|
||||
@@ -19,11 +19,24 @@
|
||||
</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 v-if="!responses" class="flex justify-center my-4">
|
||||
<span class="btn-primary" @click="startQuizz">Commencer</span>
|
||||
</div>
|
||||
<div v-else>
|
||||
Start
|
||||
<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>
|
||||
@@ -39,33 +52,68 @@ export default {
|
||||
quizzList: quizz,
|
||||
selectedQuizz: null,
|
||||
levels: [
|
||||
1, 2, 3, 4, 5
|
||||
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 () {
|
||||
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]]
|
||||
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
|
||||
|
||||
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])
|
||||
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)
|
||||
|
||||
console.log(this.currentQuestion, this.currentResponses)
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,20 +1,52 @@
|
||||
{
|
||||
"Départements" : [
|
||||
["Ain", 1],
|
||||
["Aisne", 2],
|
||||
["Allier", 3],
|
||||
["Alpes-de-Haute-Provence", 4],
|
||||
["Hautes-Alpes", 5],
|
||||
["Alpes-Maritimes", 6],
|
||||
["Ardèche", 7],
|
||||
["Ardennes", 8],
|
||||
["Ariège", 9],
|
||||
["Aube", 10],
|
||||
["Aude", 11],
|
||||
["Aveyron", 12],
|
||||
["Orne", 61],
|
||||
["Paris", 75]
|
||||
],
|
||||
"Départements" : {
|
||||
"name": "Départements",
|
||||
"reversible": true,
|
||||
"responses" : [
|
||||
["Ain", 1],
|
||||
["Aisne", 2],
|
||||
["Allier", 3],
|
||||
["Alpes-de-Haute-Provence", 4],
|
||||
["Hautes-Alpes", 5],
|
||||
["Alpes-Maritimes", 6],
|
||||
["Ardèche", 7],
|
||||
["Ardennes", 8],
|
||||
["Ariège", 9],
|
||||
["Aube", 10],
|
||||
["Aude", 11],
|
||||
["Aveyron", 12],
|
||||
["Bouches-du-Rhône", 13],
|
||||
["Calvados", 14],
|
||||
["Cantal", 15],
|
||||
["Charente", 16],
|
||||
["Charente-Maritime", 17],
|
||||
["Cher", 18],
|
||||
["Corrèze", 19],
|
||||
["Corse-du-Sud", "2A"],
|
||||
["Haute-Corse", "2B"],
|
||||
["Côte-d'Or", 21],
|
||||
["Côtes-d'Armor", 22],
|
||||
["Creuse", 23],
|
||||
["Dordogne", 24],
|
||||
["Doubs", 25],
|
||||
["Drôme", 26],
|
||||
["Eure", 27],
|
||||
["Eure-et-Loir", 28],
|
||||
["Finistère", 29],
|
||||
["Gard", 30],
|
||||
["Haute-Garonne", 31],
|
||||
["Gers", 32],
|
||||
["Gironde", 33],
|
||||
["Hérault", 34],
|
||||
["Ille-et-Vilaine", 35],
|
||||
["Indre", 36],
|
||||
["Indre-et-Loire", 37],
|
||||
["Isère", 38],
|
||||
["Jura", 39],
|
||||
["Orne", 61],
|
||||
["Paris", 75]
|
||||
]
|
||||
},
|
||||
"Pays" : [
|
||||
"ail", "amarante", "arachide", "artichaud", "asperge", "aubergine", "basilic", "betterave", "blette", "brocoli", "carotte", "chou", "ciboulette", "concombre", "courge", "courgette", "citrouille", "cresson", "echalote", "endive", "epinard", "fenouil", "flageolet", "gingembre", "haricot", "igname", "jacque", "laitue", "lentille", "marron", "navet", "oignon", "ortie", "oseille", "panais", "patisson", "persil", "piment", "pissenlit", "poireaux", "poivron", "potiron", "potimarron", "radis", "roquette", "scorsonere", "soja", "tomate"
|
||||
]
|
||||
|
||||
Reference in New Issue
Block a user