feat: Ajout du slider avec les photos

src/assets/base.css

@@ -36,7 +36,6 @@
 *::after {
   box-sizing: border-box;
   margin: 0;
-  position: relative;
   font-weight: normal;
 }
 

src/components/Score.vue

@@ -33,6 +33,7 @@ function formatAnswers(answers) {
         id: answer.id,
         title: translation.length > 0 ? translation[0].title : "",
         weight: answer.weight,
+        image: answer.image,
       };
     })
     .filter((answer) => answer.title);
@@ -47,9 +48,10 @@ function formatScore(score) {
       );
       return {
         id: question.id,
-        value: null,
+        weight: null,
         title: translation.length > 0 ? translation[0].title : "",
         answers: formatAnswers(question.answers),
+        splide: ref(),
       };
     })
     .filter((question) => question.title);
@@ -57,16 +59,17 @@ function formatScore(score) {
 
 const title = score ? score.title : "";
 const questions = ref(formatScore(score));
+console.log(questions.value)
 function nextQuestion() {
   setTimeout(() => slides.value.go(">"), 100);
 }
 const scoreSum = computed(() => {
   return questions.value
-    .map((question) => question.value)
+    .map((question) => question.weight)
     .reduce((value, currentValue) => value + currentValue, 0);
 });
 const displayScoreResult = computed(
-  () => !questions.value.filter((q) => q.value == null).length
+  () => !questions.value.filter((q) => q.weight == null).length
 );
 function getResultsFromScore(score) {
   return score.results
@@ -94,12 +97,21 @@ const result = computed(() =>
         .filter((r) => !r.max || r.max >= scoreSum.value)[0]
     : null
 );
+function selectImage(event, question, answer) {
+  const input = document.querySelector(`input[name='question_${question.id}'][value='${answer.weight}']`)
+  if (input) {
+    input.checked = true
+    input.dispatchEvent(new Event("change"))
+  }
+  nextQuestion()
+}
 </script>
 
 <template>
   <ScoreHeader v-if="title" :title="title" />
   <Splide
     ref="slides"
+    class="questions"
     v-if="questions"
     :options="{
       pagination: false,
@@ -112,23 +124,35 @@ const result = computed(() =>
     }"
   >
     <SplideSlide v-for="question in questions" :key="question.id">
+      <div class="main">
+        <div class="top">
           <legend>{{ question.title }}</legend>
           <template v-if="question.answers">
             <div class="choice" v-for="answer in question.answers" :key="answer.id">
               <label>
                 <input
                   type="radio"
+                  :data-answerId="answer.id"
                   :name="`question_${question.id}`"
                   :value="answer.weight"
-              @change="
+                  @change="(event) => {question.weight = parseFloat(event.target.value)}"
-                (event) => (question.value = parseFloat(event.target.value))
-              "
                   @click="nextQuestion"
                 />
                 {{ answer.title }}
               </label>
             </div>
           </template>
+        </div>
+        <div class="bottom">
+          <template v-if="question.answers">
+            <Splide class="answers" :id="`question_${question.id}`" ref="question.splide">
+              <SplideSlide v-for="answer in question.answers" :key="answer.id" @click="(event) => selectImage(event, {...question}, {...answer})">
+                <img width="200" height="200" :src="`/answers/${answer.image}.png`">
+              </SplideSlide>
+            </Splide>
+          </template>
+        </div>
+      </div>
     </SplideSlide>
     <SplideSlide class="latest">
       <template v-if="displayScoreResult && result">
@@ -157,7 +181,7 @@ const result = computed(() =>
 </template>
 
 <style lang="sass" scoped>
-.splide
+.questions
   position: fixed
   top: var(--header-size)
   left: 0
@@ -165,6 +189,10 @@ const result = computed(() =>
   bottom: 0
   background: transparent
 
+  input[type=radio]
+    margin-right: .5rem
+
+
 .splide__slide
   background: transparent
   position: relative
@@ -217,4 +245,30 @@ label
       font-size: .5rem
       top: 0
       line-height: .7rem
+
+.main
+  height: 100%
+  max-width: 100%
+  display: flex
+  flex-direction: column
+  justify-content: space-around
+  align-items: center
+
+  .bottom
+    width: 400px
+    max-width: 100%
+    min-width: 280px
+
+.answers
+  text-align: center
+
+.splide__arrows
+  position: inherit
+
+@media only screen and (orientation : landscape)
+  .main
+    flex-direction: row
+
+    .bottom
+      max-width: 50%
 </style>