diff --git a/src/components/AIQuiz/AIMCQQuestion.tsx b/src/components/AIQuiz/AIMCQQuestion.tsx index 9198dcfac..a4819e026 100644 --- a/src/components/AIQuiz/AIMCQQuestion.tsx +++ b/src/components/AIQuiz/AIMCQQuestion.tsx @@ -168,10 +168,11 @@ export function QuestionTitle(props: QuestionTitleProps) { type QuestionExplanationProps = { explanation: string; + title?: string; }; export function QuestionExplanation(props: QuestionExplanationProps) { - const { explanation } = props; + const { explanation, title } = props; const explanationHtml = markdownToHtml(explanation, false); @@ -179,7 +180,7 @@ export function QuestionExplanation(props: QuestionExplanationProps) {

- Explanation + {title || 'Explanation'}

{ - return httpPost( - `/v1-verify-quiz-answer/${quizSlug}`, - { - question: question.title, - userAnswer, - }, - ); - }, - onSuccess: (data) => { - setCorrectAnswer(data.correctAnswer ?? ''); - onSubmit?.(data.isCorrect ? 'correct' : 'incorrect'); - }, - }, - queryClient, - ); + verifyAnswer, + data: verificationData, + status: verifyStatus, + } = useVerifyAnswer({ + quizSlug, + question: questionText, + userAnswer, + onFinish: (data) => { + if (!data || !data.status) { + console.error('No data or status', data); + onSubmit('incorrect'); + return; + } - const handleSubmit = () => { + setCorrectAnswer(data.feedback || ''); + onSubmit(data.status); + }, + }); + + const handleSubmit = async () => { if (isSubmitted) { onNext?.(); return; } - verifyAnswer(userAnswer); + await verifyAnswer(); }; const canSubmit = userAnswer.trim().length > 0; - - const markdownClassName = - 'prose prose-lg prose-p:text-lg prose-p:font-normal prose-p:my-0 prose-pre:my-0 prose-p:prose-code:text-base! prose-p:prose-code:px-2 prose-p:prose-code:py-0.5 prose-p:prose-code:rounded-lg prose-p:prose-code:border prose-p:prose-code:border-black text-left text-black'; + const isVerifying = + verifyStatus === 'loading' || verifyStatus === 'streaming'; + const feedback = verificationData?.feedback || correctAnswer; + const feedbackStatus = verificationData?.status || status; return (
@@ -93,9 +87,14 @@ export function AIOpenEndedQuestion(props: AIOpenEndedQuestionProps) { 'focus:border-gray-400 focus:ring-0 focus:outline-none', isSubmitted && 'bg-gray-50', isSubmitted && - status === 'correct' && + feedbackStatus === 'correct' && 'border-green-500 bg-green-50', - isSubmitted && status === 'incorrect' && 'border-red-500 bg-red-50', + isSubmitted && + feedbackStatus === 'incorrect' && + 'border-red-500 bg-red-50', + isSubmitted && + feedbackStatus === 'can_be_improved' && + 'border-yellow-500 bg-yellow-50', )} placeholder="Type your answer here..." value={userAnswer} @@ -104,8 +103,15 @@ export function AIOpenEndedQuestion(props: AIOpenEndedQuestionProps) { />
- {!isVerifying && correctAnswer && ( - + {feedback && ( + )}