mirror of
https://github.com/kamranahmedse/developer-roadmap.git
synced 2025-09-03 06:12:53 +02:00
@@ -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>
|
||||
);
|
||||
}
|
||||
|
@@ -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}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
|
@@ -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" />
|
||||
|
Reference in New Issue
Block a user