From af4502859bcb0751332a3066a09413bc83430d43 Mon Sep 17 00:00:00 2001
From: jeremy bayse <jeremy.bayse@gmail.com>
Date: Tue, 14 Apr 2026 19:09:58 +0200
Subject: [PATCH] fix: QuizInterface crash on undefined text_content - add null
 guards and safe optional chaining

---
 resources/js/Pages/Candidate/QuizInterface.vue | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/resources/js/Pages/Candidate/QuizInterface.vue b/resources/js/Pages/Candidate/QuizInterface.vue
index 2502fd5..1876459 100644
--- a/resources/js/Pages/Candidate/QuizInterface.vue
+++ b/resources/js/Pages/Candidate/QuizInterface.vue
@@ -10,7 +10,7 @@ const props = defineProps({
 
 const currentQuestionIndex = ref(0);
 const answers = ref({});
-const timeLeft = ref(props.quiz.duration_minutes * 60);
+const timeLeft = ref(props.quiz?.duration_minutes ? props.quiz.duration_minutes * 60 : 0);
 let timer = null;
 
 // Initialize answers from existing attempt answers if any
@@ -58,8 +58,8 @@ const formatTime = (seconds) => {
     return `${mins}:${secs.toString().padStart(2, '0')}`;
 };
 
-const currentQuestion = computed(() => props.quiz.questions[currentQuestionIndex.value]);
-const progress = computed(() => ((currentQuestionIndex.value + 1) / props.quiz.questions.length) * 100);
+const currentQuestion = computed(() => props.quiz.questions?.[currentQuestionIndex.value] ?? null);
+const progress = computed(() => props.quiz.questions?.length ? ((currentQuestionIndex.value + 1) / props.quiz.questions.length) * 100 : 0);
 
 const saveAnswer = async () => {
     const qid = currentQuestion.value.id;
@@ -150,8 +150,11 @@ const finishQuiz = () => {
         <!-- Main Content -->
         <main class="flex-1 flex flex-col items-center justify-center p-8">
             <div class="w-full max-w-3xl">
+                <!-- Guard: wait until question is loaded -->
+                <div v-if="!currentQuestion" class="text-center text-slate-400 italic">Chargement de la question...</div>
+
                 <!-- Question Card -->
-                <div class="bg-slate-800/50 backdrop-blur-xl rounded-3xl p-8 sm:p-12 border border-slate-700 shadow-2xl relative overflow-hidden group">
+                <div v-else class="bg-slate-800/50 backdrop-blur-xl rounded-3xl p-8 sm:p-12 border border-slate-700 shadow-2xl relative overflow-hidden group">
                     <!-- Subtle background glow -->
                     <div class="absolute -top-24 -right-24 w-64 h-64 bg-indigo-600/10 blur-[100px] rounded-full group-hover:bg-indigo-600/20 transition-all duration-700"></div>
 
@@ -202,7 +205,8 @@ const finishQuiz = () => {
                             <textarea 
                                 class="w-full h-48 bg-slate-700/30 border border-slate-600 rounded-2xl p-6 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all outline-none resize-none text-lg"
                                 placeholder="Saisissez votre réponse ici..."
-                                v-model="answers[currentQuestion.id].text_content"
+                                :value="answers[currentQuestion.id]?.text_content ?? ''"
+                                @input="updateOpenAnswer($event.target.value)"
                                 @blur="saveAnswer"
                             ></textarea>
                         </div>