add radio

components/QuestionChoice.vue

@@ -1,15 +1,28 @@
 <template>
     <table class="emphased">
-        <tr>
-            <td>Très bien</td>
-            <td>Bien</td>
-            <td>Passable</td>
-            <td>Insuffisant</td>
-            <td>À rejeter</td>
-        </tr>
+        <tbody>
+            <tr>
+                <td v-for="(val, index) in values" :id="`${questionId}-${val}`" :key="index">
+                    <input type="radio" :value="val" :name="String(questionId)">
+                    <label :for="`${questionId}-${val}`">{{ val }}</label>
+                </td>
+            </tr>
+        </tbody>
     </table>
 </template>
 
+
+<script setup lang="ts">
+interface Props {
+    values?: string[]
+    questionId: string
+}
+
+const { values = ["Très bien", "Bien", "Passable", "Insuffisant", "À rejeter"], questionId } = defineProps<Props>()
+
+</script>
+
+
 <style scoped="true" lang="css">
 .emphased {
     border: 1px solid #444;

pages/poll.vue

@@ -36,7 +36,7 @@ import QuestionChoice from '~/components/QuestionChoice.vue';
                 </li>
             </ul>
 
-            <QuestionChoice />
+            <QuestionChoice question-id="1" />
         </div>
 
         <div>
@@ -46,7 +46,7 @@ import QuestionChoice from '~/components/QuestionChoice.vue';
             <div>
                 2.1) Estimer les heures que représentent chaque engagement/mission dans un souci d’égalité entre les
                 engagements de chacun.
-                <QuestionChoice />
+                <QuestionChoice question-id="2.1" />
             </div>
 
         </div>