quiz fonctionel

src/assets/main.css

@@ -5,3 +5,8 @@
 .question {
   padding-top: 2rem;
 }
+
+.question button{
+  margin-left: auto;
+  display: block;
+}

src/components/Question.vue

@@ -1,17 +1,36 @@
 <template>
-
-    <div class="question">
-            <h3>{{ question.question }}</h3>
-
-    </div>
-
+  <div class="question">
+    <h3>{{ question.question }}</h3>
+    <ul>
+      <li v-for="(choice, index) in question.choices" :key="index">
+        <label :for="'answer' + index">
+          <input :id="'answer' + index" type="radio" name="answer" v-model="answer" :value="choice">
+          {{ choice }}
+        </label>
+      </li>
+    </ul>
+    <button :disabled="!hasAnswer" @click="submitAnswer">Question suivante</button>
+  </div>
 </template>
 
-
 <script setup>
+import { computed, ref, watch } from 'vue';
 
- const props = defineProps({
-    question : Object
-})
+const props = defineProps({
+  question: Object
+});
 
+const answer = ref(null);
+const emit = defineEmits(['answer']);
+const hasAnswer = computed(() => answer.value !== null);
+
+const submitAnswer = () => {
+  if (hasAnswer.value) {
+    emit('answer', answer.value);
+  }
+};
+
+watch(() => props.question, () => {
+  answer.value = null;
+});
 </script>

src/components/Quiz.vue

@@ -2,8 +2,10 @@
 
 <div>
     <h1>{{ quiz.title }}</h1>
-    <Progress :value="step" :max="quiz.questions.length -1 " />
-    <Question :question="question" v-if="question"/>
+    <Progress :value="step" :max="quiz.questions.length - 1" />
+    <Question :key="answers.answers" :question="question" v-if="state === 'question'" @answer="addAnswer"/>
+    <Recap v-if="state === 'recap'" :answers="answers" :quiz="quiz" />
+    {{ answers }}
 </div>
 
 
@@ -16,13 +18,26 @@
 import { computed, ref } from 'vue';
 import Progress from './Progress.vue';
 import Question from './Question.vue';
+import Recap from './Recap.vue';
 
 const props = defineProps({
     quiz: Object
 })
 
+const state = ref('question')
+const answers = ref(props.quiz.questions.map(() => null))
 const step = ref(0)
 const question = computed(() => props.quiz.questions[step.value])
 
+const addAnswer = (answer) =>{
+    answers.value[step.value] = answer
+    if (step.value === props.quiz.questions.length -1){
+        state.value = 'recap'
+    } else{
+        step.value++
+
+    }
+}
+
 
 </script>

src/components/Recap.vue

@@ -0,0 +1,29 @@
+<template>
+  <h1>Recap</h1>
+  <p>
+    {{ hasWon ? quiz.success_message : quiz.failure_message }}
+  </p>
+  <p>Score : {{ score }}/{{ quiz.questions.length }}</p>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  quiz: Object,
+  answers: Array
+});
+
+const score = computed(() => {
+  return props.quiz.questions.reduce((acc, question, k) => {
+    if (question.correct_answer === props.answers[k]) {  
+      return acc + 1;
+    }
+    return acc;
+  }, 0);
+});
+
+
+const hasWon = computed(() => score.value >= props.quiz.minimum_score)
+
+</script>