diff --git a/src/components/AIQuiz/AIQuizGenerator.tsx b/src/components/AIQuiz/AIQuizGenerator.tsx index de87ab051..01c230f40 100644 --- a/src/components/AIQuiz/AIQuizGenerator.tsx +++ b/src/components/AIQuiz/AIQuizGenerator.tsx @@ -2,6 +2,7 @@ import { BookOpenIcon, FileTextIcon, ListCheckIcon, + ListIcon, ListTodoIcon, MapIcon, SparklesIcon, @@ -25,6 +26,7 @@ import { cn } from '../../lib/classname'; import { getUrlParams } from '../../lib/browser'; import { useParams } from '../../hooks/use-params'; import { FormatItem } from '../ContentGenerator/FormatItem'; +import { AIQuizLayout } from './AIQuizLayout'; const allowedFormats = ['mcq', 'open-ended', 'mixed'] as const; export type AllowedFormat = (typeof allowedFormats)[number]; @@ -56,22 +58,26 @@ export function AIQuizGenerator() { const allowedFormats: { label: string; + formatTitle: string; icon: LucideIcon; value: AllowedFormat; }[] = [ { label: 'MCQ', + formatTitle: 'Multiple Choice Question', icon: ListTodoIcon, value: 'mcq', }, { label: 'Open-Ended', + formatTitle: 'Open-Ended Question', icon: FileTextIcon, value: 'open-ended', }, { label: 'Mixed', - icon: MapIcon, + formatTitle: 'Mixed Question (MCQ + Open-Ended)', + icon: ListIcon, value: 'mixed', }, ]; @@ -99,6 +105,9 @@ export function AIQuizGenerator() { const trimmedTitle = title.trim(); const canGenerate = trimmedTitle && trimmedTitle.length >= 3; + const selectedFormatTitle = allowedFormats.find( + (f) => f.value === selectedFormat, + )?.formatTitle; return (
@@ -118,10 +127,10 @@ export function AIQuizGenerator() {
)}

- What can I help you learn? + Test your Knowledge

- Enter a topic below to generate a personalized course for it + Create a personalized quiz to test your understanding of any topic

@@ -134,12 +143,12 @@ export function AIQuizGenerator() { >
{ setTitle(e.target.value); @@ -196,22 +205,22 @@ export function AIQuizGenerator() { }} /> - Answer the following questions for a better {selectedFormat} + Answer the following questions for a better result - Customize your {selectedFormat} + Customize your quiz - {/* {showFineTuneOptions && ( + {showFineTuneOptions && ( { handleSubmit(); }} /> - )} */} + )}
diff --git a/src/components/AIQuiz/AIQuizLayout.tsx b/src/components/AIQuiz/AIQuizLayout.tsx new file mode 100644 index 000000000..01c1e346c --- /dev/null +++ b/src/components/AIQuiz/AIQuizLayout.tsx @@ -0,0 +1,17 @@ +import { AITutorLayout } from '../AITutor/AITutorLayout'; + +type AIQuizLayoutProps = { + children: React.ReactNode; +}; + +export function AIQuizLayout(props: AIQuizLayoutProps) { + const { children } = props; + return ( + + {children} + + ); +} diff --git a/src/components/AITutor/AITutorSidebar.tsx b/src/components/AITutor/AITutorSidebar.tsx index 0bb5b801a..8be113465 100644 --- a/src/components/AITutor/AITutorSidebar.tsx +++ b/src/components/AITutor/AITutorSidebar.tsx @@ -1,6 +1,7 @@ import { BookOpen, Compass, + ListTodoIcon, MessageCircle, Plus, Star, @@ -39,6 +40,12 @@ const sidebarItems = [ href: '/ai/chat', icon: MessageCircle, }, + { + key: 'quiz', + label: 'Test my Knowledge', + href: '/ai/quiz', + icon: ListTodoIcon, + }, { key: 'library', label: 'My Learning', diff --git a/src/components/ContentGenerator/QuestionAnswerChat.tsx b/src/components/ContentGenerator/QuestionAnswerChat.tsx index 64ee4981e..134b0bde7 100644 --- a/src/components/ContentGenerator/QuestionAnswerChat.tsx +++ b/src/components/ContentGenerator/QuestionAnswerChat.tsx @@ -5,11 +5,7 @@ import { type AIQuestionSuggestionsResponse, } from '../../queries/user-ai-session'; import type { AllowedFormat } from './ContentGenerator'; -import { - Loader2Icon, - RefreshCcwIcon, - SendIcon, Trash2 -} from 'lucide-react'; +import { Loader2Icon, RefreshCcwIcon, SendIcon, Trash2 } from 'lucide-react'; import { useEffect, useRef, useState } from 'react'; import { cn } from '../../lib/classname'; import { flushSync } from 'react-dom'; @@ -26,7 +22,7 @@ export type QuestionAnswerChatMessage = type QuestionAnswerChatProps = { term: string; - format: AllowedFormat; + format: AllowedFormat | (string & {}); questionAnswerChatMessages: QuestionAnswerChatMessage[]; setQuestionAnswerChatMessages: ( messages: QuestionAnswerChatMessage[], @@ -259,7 +255,11 @@ export function QuestionAnswerChat(props: QuestionAnswerChatProps) { value={message} onChange={(e) => setMessage(e.target.value)} className="w-full bg-transparent text-sm focus:outline-none" - placeholder={activeMessage.possibleAnswers ? "Type your answer..." : "Or type your own answer..."} + placeholder={ + activeMessage.possibleAnswers + ? 'Type your answer...' + : 'Or type your own answer...' + } autoFocus onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey) { @@ -346,7 +346,7 @@ function QuestionAnswerChatMessage(props: QuestionAnswerChatMessageProps) {