ceiba-scores/src/components/Question.vue

214 lines
4.5 KiB
Vue

<script setup>
import { ref } from "vue";
import { Splide, SplideSlide } from "@splidejs/vue-splide";
import "@splidejs/splide/dist/css/splide.min.css";
const props = defineProps({
question: {
type: Object,
required: true,
},
});
const emits = defineEmits(["answerSelected", "nextQuestion"]);
const slides = ref();
const answerWeight = ref(props.question.weight);
function selectAnswer(answer) {
const answerIndex = props.question.answers.findIndex(
(a) => a.id === answer.id
);
slides.value.splide.go(answerIndex);
}
function slideMove(splide, newIndex) {
answerWeight.value = props.question.answers[newIndex].weight;
emits("answerSelected", props.question, answerWeight);
}
</script>
<template>
<div class="main">
<div class="center">
<legend>{{ question.title }}</legend>
<div class="images">
<template v-if="question.answers">
<Splide
@splide:move="slideMove"
class="answers"
:id="`question_${question.id}`"
ref="slides"
>
<SplideSlide v-for="answer in question.answers" :key="answer.id">
<img height="200" :src="`/answers/${answer.image}.webp`" />
</SplideSlide>
</Splide>
</template>
</div>
<template v-if="question.answers">
<ul class="choices">
<li
class="choice"
v-for="answer in question.answers"
:key="answer.id"
>
<input
type="radio"
:data-answerId="answer.id"
:name="`question_${question.id}`"
:id="`question_${question.id}_answer_${answer.id}`"
:value="answer.weight"
v-model="answerWeight"
@change="selectAnswer(answer)"
@click="nextQuestion"
/>
<label :for="`question_${question.id}_answer_${answer.id}`">
{{ answer.title }}
</label>
</li>
</ul>
</template>
</div>
</div>
<button class="btn next" @click="$emit('nextQuestion')">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 40 40"
width="40"
height="40"
>
<path
d="m15.5 0.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4-14.6-14.6z"
></path>
</svg>
</button>
</template>
<style lang="sass">
.next
background: var(--color-highlight-background)
bottom: 1rem
right: 1rem
width: 3rem
height: 3rem
opacity: .8
&:hover
opacity: 1
svg
width: 80%
height: 80%
transform: rotate(90deg)
fill: var(--color-highlight-text)
.splide__arrow
background: transparent
border: 3px solid var(--color-green)
width: 3rem
height: 3rem
opacity: 1
svg
fill: var(--color-green)
height: 1.6rem
width: 1.6rem
.splide__pagination
bottom: -1.5em
display: none
.splide__pagination__page
width: .7rem
height: .7rem
background: var(--color-green)
&.is-active
background: var(--color-green)
</style>
<style lang="sass" scoped>
legend
text-align: center
font-size: 1.4rem
line-height: 2rem
font-weight: bold
.choices
list-style-type: none
text-align: left
display: inline-block
padding-left: 0
label
cursor: pointer
input[type=radio]
display: none
& + label
position: relative
padding: .2rem .2rem .2rem 2rem
& + label::before,
& + label::after
display: block
position: absolute
box-sizing: border-box
content:''
border-radius: 1rem
& + label::before
bottom: .3rem
left: 0
background-color: var(--color-green)
width: 1rem
height: 1rem
& + label::after
bottom: calc(3px + .3rem)
left: 3px
width: calc(1rem - 6px)
height: calc(1rem - 6px)
&:checked + label
text-shadow: -0.06ex 0 0 currentColor, 0.06ex 0 0 currentColor
&:checked + label::before
background-color: var(--color-green)
&:checked + label::after
background-color: white
.main
height: 100%
max-width: 100%
display: flex
flex-direction: column
justify-content: space-around
align-items: center
.center
width: 100%
text-align: center
.images
margin: 3rem auto
width: 400px
max-width: 100%
min-width: 280px
@media (max-height: 600px)
margin: 1rem auto
h2
font-size: 2rem
.answers
text-align: center
@media only screen and (orientation : landscape)
.main
flex-direction: row
.images
max-width: 50%
</style>