fix quizz vue

This commit is contained in:
2020-05-09 10:43:31 +02:00
parent d9f2e492d6
commit 08f165253f

View File

@@ -1,18 +1,18 @@
<template> <template>
<div class="p-2"> <div class="p-2">
<h1 class="text-3xl text-center text-orange-900 font-bold mb-4">Quizz</h1> <h1 class="text-3xl text-center text-gray-900 font-bold mb-4">Quizz</h1>
<div v-if="!selectedQuizz" class="flex justify-center my-4"> <div v-if="!selectedQuizz" class="flex justify-center flex-wrap my-4">
<a v-for="(quizz, key) in quizzList" <a v-for="(quizz, key) in quizzList"
:key="key" :key="key"
class="btn-primary mr-1 cursor-pointer" class="btn mr-1 mb-1 cursor-pointer"
@click="selectedQuizz = key"> @click="selectedQuizz = key">
{{ key }} {{ key }}
</a> </a>
</div> </div>
<div v-if="!levelQuizz" class="flex justify-center my-4"> <div v-if="!levelQuizz" class="flex justify-center flex-wrap my-4">
<a v-for="(level, index) in levels" <a v-for="(level, index) in levels"
:key="index" :key="index"
class="btn-primary mr-1 cursor-pointer" class="btn mr-1 mb-1 cursor-pointer"
@click="levelQuizz = level"> @click="levelQuizz = level">
Niveau {{ level }} Niveau {{ level }}
</a> </a>
@@ -20,20 +20,20 @@
<div v-if="selectedQuizz && levelQuizz"> <div v-if="selectedQuizz && levelQuizz">
<div v-if="!responses" class="flex justify-center my-4"> <div v-if="!responses" class="flex justify-center my-4">
<span class="btn-primary" @click="startQuizz">Commencer</span> <span class="btn" @click="startQuizz">Commencer</span>
</div> </div>
<div v-else-if="results" class="flex flex-col items-center"> <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">{{ selectedQuizz.name }}</div>
<div class="text-center text-2xl font-bold my-4">{{ note }} / {{ responses.length }}</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> <span class="btn-primary mt-4" @click="newQuizz">Nouveau Quizz</span>
</div> </div>
<div v-else class="flex flex-col"> <div v-else class="flex flex-col flex-wrap">
<div class="text-center my-4"><span class="text-2xl font-bold">{{ currentQuestion[0] }}</span></div> <div class="text-center my-4"><span class="text-2xl font-bold">{{ currentQuestion[0] }}</span></div>
<div class="flex justify-center my-4"> <div class="flex justify-center flex-wrap my-4">
<div v-for="(response, index) in currentResponses" <div v-for="(response, index) in currentResponses"
:key="index" :key="index"
@click="responsed(currentQuestion, response)" @click="responsed(currentQuestion, response)"
class="btn mx-1"> class="btn mx-1 mb-1">
{{ response }} {{ response }}
</div> </div>
</div> </div>