From 2b05f72a80a6fd69ebba873e8b8b9ad42db39381 Mon Sep 17 00:00:00 2001
From: Arik Chakma <arikchangma@gmail.com>
Date: Wed, 9 Jul 2025 22:34:58 +0600
Subject: [PATCH] fix: ai quizzes skipping (#8895)

* wip

* wip

* wip
---
 src/components/AIQuiz/AIOpenEndedQuestion.tsx | 49 ++++++++++++-------
 src/components/AIQuiz/AIQuizContent.tsx       |  5 +-
 src/components/AIQuiz/AIQuizGenerator.tsx     | 10 ++--
 3 files changed, 41 insertions(+), 23 deletions(-)

diff --git a/src/components/AIQuiz/AIOpenEndedQuestion.tsx b/src/components/AIQuiz/AIOpenEndedQuestion.tsx
index a4a7dfe9f..453fa5d3b 100644
--- a/src/components/AIQuiz/AIOpenEndedQuestion.tsx
+++ b/src/components/AIQuiz/AIOpenEndedQuestion.tsx
@@ -23,6 +23,8 @@ type AIOpenEndedQuestionProps = {
 
   isLastQuestion: boolean;
   onComplete: () => void;
+
+  onSkip: () => void;
 };
 
 export function AIOpenEndedQuestion(props: AIOpenEndedQuestionProps) {
@@ -36,6 +38,7 @@ export function AIOpenEndedQuestion(props: AIOpenEndedQuestionProps) {
     setCorrectAnswer,
     isLastQuestion,
     onComplete,
+    onSkip,
   } = props;
   const { title: questionText } = question;
 
@@ -118,25 +121,35 @@ export function AIOpenEndedQuestion(props: AIOpenEndedQuestionProps) {
         <QuestionExplanation explanation={feedback} status={feedbackStatus} />
       )}
 
-      <button
-        className={cn(
-          'mt-4 flex h-10 min-w-[142px] items-center justify-center rounded-xl bg-black px-4 py-2 text-white hover:bg-gray-900 disabled:opacity-70 disabled:cursor-not-allowed',
-        )}
-        onClick={handleSubmit}
-        disabled={!canSubmit || isVerifying}
-      >
-        {isVerifying ? (
-          <Loader2Icon className="size-4 animate-spin stroke-[2.5]" />
-        ) : isSubmittedAndNotSkipped ? (
-          isLastQuestion ? (
-            'Finish Quiz'
+      <div className="mt-4 flex items-center justify-between">
+        <button
+          onClick={onSkip}
+          disabled={isSubmitted}
+          className="rounded-xl bg-gray-100 px-8 py-3 text-base font-medium text-gray-800 hover:bg-gray-200 disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          Skip Question
+        </button>
+
+        <button
+          className={cn(
+            'rounded-xl bg-black px-8 py-3 text-base font-medium text-white hover:bg-gray-800 disabled:cursor-not-allowed disabled:opacity-50',
+          )}
+          onClick={handleSubmit}
+          disabled={!canSubmit || isVerifying}
+        >
+          {isVerifying ? (
+            <Loader2Icon className="size-4 animate-spin stroke-[2.5]" />
+          ) : isSubmittedAndNotSkipped ? (
+            isLastQuestion ? (
+              'Finish Quiz'
+            ) : (
+              'Next Question'
+            )
           ) : (
-            'Next Question'
-          )
-        ) : (
-          'Verify Answer'
-        )}
-      </button>
+            'Verify Answer'
+          )}
+        </button>
+      </div>
     </div>
   );
 }
diff --git a/src/components/AIQuiz/AIQuizContent.tsx b/src/components/AIQuiz/AIQuizContent.tsx
index f2f7f1cb7..5c4dd9f76 100644
--- a/src/components/AIQuiz/AIQuizContent.tsx
+++ b/src/components/AIQuiz/AIQuizContent.tsx
@@ -146,7 +146,9 @@ export function AIQuizContent(props: AIQuizContentProps) {
   };
 
   const handleSkip = () => {
-    handleSubmit('skipped');
+    const prevStatus = questionStates[activeQuestionIndex]?.status ?? 'pending';
+    handleSubmit(prevStatus === 'pending' ? 'skipped' : prevStatus);
+
     if (hasNextQuestion) {
       handleNextQuestion();
     } else {
@@ -231,6 +233,7 @@ export function AIQuizContent(props: AIQuizContentProps) {
                     setCorrectAnswer={handleSetCorrectAnswer}
                     isLastQuestion={isLastQuestion}
                     onComplete={handleComplete}
+                    onSkip={handleSkip}
                   />
                 )}
               </>
diff --git a/src/components/AIQuiz/AIQuizGenerator.tsx b/src/components/AIQuiz/AIQuizGenerator.tsx
index c94ab9580..45153cc3e 100644
--- a/src/components/AIQuiz/AIQuizGenerator.tsx
+++ b/src/components/AIQuiz/AIQuizGenerator.tsx
@@ -1,7 +1,9 @@
 import {
-  FileTextIcon, ListIcon,
-  ListTodoIcon, SparklesIcon,
-  type LucideIcon
+  FileTextIcon,
+  ListIcon,
+  ListTodoIcon,
+  SparklesIcon,
+  type LucideIcon,
 } from 'lucide-react';
 import { useEffect, useId, useState } from 'react';
 import { isLoggedIn } from '../../lib/jwt';
@@ -246,7 +248,7 @@ export function AIQuizGenerator() {
 
         <button
           type="submit"
-          className="flex w-full items-center justify-center gap-2 rounded-xl bg-black p-4 text-white focus:outline-none disabled:cursor-not-allowed disabled:opacity-80"
+          className="flex h-[56px] w-full items-center justify-center gap-2 rounded-xl bg-black p-4 text-white focus:outline-none disabled:cursor-not-allowed disabled:opacity-80"
           disabled={!canGenerate}
         >
           <SparklesIcon className="size-4" />