quiz fonctionel

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
+});
 
-</script>
+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>