73 lines
2.8 KiB
Vue
73 lines
2.8 KiB
Vue
<template>
|
|
<v-card tile outlined :class="{ 'card--reduced': isCardReduced }">
|
|
<v-card-title class="card__title primary" @click="toggleCardSize">
|
|
<v-icon left class="white--text pr-5 pl-2" size="40">mdi-play-network-outline</v-icon>
|
|
Solution </v-card-title>
|
|
<v-container class="text-center" v-if="currentQuestion">
|
|
<div class="text-h6 mb-2">Question {{ currentQuestionIndex + 1 }}</div>
|
|
<div class="text-body-1 font-weight-bold mb-4">{{ currentQuestion.QuestionText }}</div>
|
|
|
|
<v-divider class="mb-4"></v-divider>
|
|
|
|
<v-btn
|
|
:color="showSolution ? 'red' : 'green'"
|
|
class="mb-4"
|
|
@click="showSolution = !showSolution"
|
|
>
|
|
{{ showSolution ? 'Masquer Solution' : 'Voir Solution' }}
|
|
</v-btn>
|
|
|
|
<v-slide-y-transition>
|
|
<div v-if="showSolution" class="solution-block">
|
|
<div class="text-h5 success--text mb-2">{{ currentQuestion.MasterData.CorrectAnswer }}</div>
|
|
<div class="text-body-2 grey--text text--lighten-1 mb-2">
|
|
<v-icon small>mdi-information</v-icon> {{ currentQuestion.MasterData.MasterNotes }}
|
|
</div>
|
|
<div class="text-body-2 info--text">
|
|
<v-icon small>mdi-help-circle</v-icon> {{ currentQuestion.MasterData.Help }}
|
|
</div>
|
|
</div>
|
|
</v-slide-y-transition>
|
|
|
|
</v-container>
|
|
<v-container v-else class="text-center">
|
|
<div class="text-caption">Aucun quiz chargé ou fin du quiz.</div>
|
|
</v-container>
|
|
</v-card>
|
|
</template>
|
|
<style>
|
|
@media (min-width: 1024px) {
|
|
.image-container {
|
|
width: 300px; overflow: hidden; /* Pour masquer le dépassement de l'image */
|
|
border: 1px solid #ccc; /* Bordure de l'image */
|
|
}
|
|
.image-container img {
|
|
width: 100%; /* Pour remplir complètement le conteneur */
|
|
height: auto; /* Pour maintenir le ratio d'aspect de l'image */
|
|
display: block; /* Pour éviter l'espace réservé pour les images */
|
|
}
|
|
}
|
|
.card--reduced {
|
|
height: 56px; /* Réglez la hauteur réduite selon vos besoins */
|
|
width: 160px;
|
|
overflow: hidden;
|
|
transition: height 0.6s ease-in-out;
|
|
}
|
|
</style>
|
|
|
|
<script setup>
|
|
import { ref, computed } from 'vue';
|
|
import quizStore from '@/store/quizStore';
|
|
|
|
// Variable pour contrôler l'état de la carte
|
|
const isCardReduced = ref(false);
|
|
const showSolution = ref(false);
|
|
|
|
// Méthode pour basculer l'état de la carte
|
|
function toggleCardSize() {
|
|
isCardReduced.value = !isCardReduced.value;
|
|
}
|
|
|
|
const currentQuestion = quizStore.getters.currentQuestion;
|
|
const currentQuestionIndex = quizStore.getters.currentQuestionIndex;
|
|
</script> |