1
0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-09-03 06:12:53 +02:00

fix: ai quizzes skipping (#8895)

* wip

* wip

* wip
This commit is contained in:
Arik Chakma
2025-07-09 22:34:58 +06:00
committed by GitHub
parent ef48708a94
commit 2b05f72a80
3 changed files with 41 additions and 23 deletions

View File

@@ -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>
);
}

View File

@@ -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}
/>
)}
</>

View File

@@ -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" />