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 && (
+
)}