add color and routing

components/QuestionChoice.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="emphased">
-        <div v-for="(val, index) in values" :id="`${questionId}-${val}`" :key="index">
+        <div v-for="(val, index) in values" :id="`${questionId}-${val}`" :key="index"
+            :style="{ background: colors[index] }">
             <input type="radio" :value="val" :name="String(questionId)">
             <label :for="`${questionId}-${val}`">{{ val }}</label>
         </div>
@@ -11,10 +12,11 @@
 <script setup lang="ts">
 interface Props {
     values?: string[]
+    colors?: string[]
     questionId: string
 }
 
-const { values = ["Très bien", "Bien", "Passable", "Insuffisant", "À rejeter"], questionId } = defineProps<Props>()
+const { values = ["Très bien", "Bien", "Passable", "Insuffisant", "À rejeter"], colors = ["#4DB544", "#87E169", "#FFC33C", "#FF824B", "#E94A4D"], questionId } = defineProps<Props>()
 
 </script>
 

components/QuestionResult.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="emphased">
         <div v-for="(amount, val) in filtered_results" :id="`${questionId}-${val}`" :key="val"
-            :style="{ width: `${(amount / total) * 100}%` }">
+            :style="{ width: `${(amount / total) * 100}%`, background: colors[values.indexOf(val)] }">
             <span>({{ amount }}){{ val }}</span>
         </div>
     </div>
@@ -12,11 +12,12 @@
 
 interface Props {
     values?: string[]
+    colors?: string[]
     results: { [question_id: string]: { [values: string]: number } }
     questionId: string
 }
 
-const { values = ["Très bien", "Bien", "Passable", "Insuffisant", "À rejeter"], results, questionId } = defineProps<Props>()
+const { values = ["Très bien", "Bien", "Passable", "Insuffisant", "À rejeter"], colors = ["#4DB544", "#87E169", "#FFC33C", "#FF824B", "#E94A4D"], results, questionId } = defineProps<Props>()
 
 const filtered_results = computed(() => {
     if (!(questionId in results)) {
@@ -57,7 +58,7 @@ const total = computed(() => Object.values(filtered_results.value).reduce((acc,
 .emphased:after {
     content: "";
     position: absolute;
-    z-index: -1;
+    z-index: 100;
     top: -10px;
     bottom: -10px;
     left: 50%;