feat: Ajout du slider avec les photos
This commit is contained in:
parent
2ab3ecd9ef
commit
128c675f2a
|
@ -36,7 +36,6 @@
|
|||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
|
|
@ -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">
|
||||
<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"
|
||||
:name="`question_${question.id}`"
|
||||
:value="answer.weight"
|
||||
@change="
|
||||
(event) => (question.value = parseFloat(event.target.value))
|
||||
"
|
||||
@click="nextQuestion"
|
||||
/>
|
||||
{{ answer.title }}
|
||||
</label>
|
||||
<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="(event) => {question.weight = parseFloat(event.target.value)}"
|
||||
@click="nextQuestion"
|
||||
/>
|
||||
{{ answer.title }}
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<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>
|
||||
|
|
Loading…
Reference in New Issue