VApp/src/components/CardSolution.vue

@@ -3,14 +3,36 @@
 		<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-row justify="center">     
-				<v-container class="text-center">       <!-- Utilisation de styles CSS personnalisés pour centrer l'image -->       
-					<v-img width="450" src="@/assets/copilot-solution-FULL-HD.jpg" style="margin: 0 auto;">
-					</v-img>     
-				</v-container>   
-			</v-row> 
+		<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>
@@ -34,13 +56,18 @@
 </style>
 
 <script setup>
-	import { ref } from 'vue';
+	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>