\n );\n}\n\nfunction QuestionLoader({ subject }) {\n const [dots, setDots] = useState('');\n\n useEffect(() => {\n const interval = setInterval(() => {\n setDots(prev => prev.length >= 3 ? '' : prev + '.');\n }, 500);\n return () => clearInterval(interval);\n }, []);\n\n return (\n

\n {subject.icon}\n

\n Generating {subject.name} Question{dots}\n

\n \n

\n );\n}\n\nfunction App() {\n const [selectedSubject, setSelectedSubject] = useState(null);\n const [question, setQuestion] = useState(null);\n const [loading, setLoading] = useState(false);\n const [selectedAnswer, setSelectedAnswer] = useState(null);\n const [score, setScore] = useState(0);\n const [questionCount, setQuestionCount] = useState(0);\n const [error, setError] = useState(null);\n\n const generateQuestion = useCallback(async (subject, difficulty = 'Intermediate') => {\n setLoading(true);\n setSelectedSubject(subject);\n setSelectedAnswer(null);\n\n try {\n const response = await fetch('/generate-question', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ \n subject: subject.name, \n difficulty \n })\n });\n \n const data = await response.json();\n \n if (!data.question || !data.options || !data.explanation) {\n throw new Error('Invalid question format');\n }\n\n setQuestion(data);\n setQuestionCount(prev => prev + 1);\n } catch (error) {\n console.error('Question generation error:', error);\n setError('Unable to generate question. Please try again.');\n } finally {\n setLoading(false);\n }\n }, []);\n\n const handleAnswerSelection = (optionId) => {\n setSelectedAnswer(optionId);\n \n if (optionId === question.correctAnswer) {\n setScore(prev => prev + 1);\n }\n };\n\n const renderSubjectSelection = () => (\n

\n {SUBJECTS.map((subject) => (\n

generateQuestion(subject)}\n onMouseOver={(e) => e.currentTarget.style.transform = 'scale(1.05)'}\n onMouseOut={(e) => e.currentTarget.style.transform = 'scale(1)'}\n >\n

\n {subject.icon}\n

{subject.name}

\n {subject.description}\n

\n ))}\n

\n );\n\n const renderQuestionView = () => (\n

\n {selectedSubject.icon}\n

{selectedSubject.name}

\n Score: {score}/{questionCount}\n

\n\n

\n {question.question}\n

\n \n {question.options.map((option) => (\n

!selectedAnswer && handleAnswerSelection(option.id)}\n >\n

\n \n {option.id}\n \n

\n \n {option.text}\n \n {selectedAnswer && option.id === question.correctAnswer && (\n ✓\n )}\n {selectedAnswer && selectedAnswer === option.id && option.id !== question.correctAnswer && (\n ✗\n )}\n

\n ))}\n\n {selectedAnswer && (\n

\n {selectedAnswer === question.correctAnswer \n ? '🎉 Correct Answer!' \n : '❌ Incorrect Answer'}\n

{question.explanation}

\n )}\n\n

\n \n \n

\n );\n\n return (\n

\n 🧠 Smart Quiz Challenge\n

\n \n {error && (\n

\n {error}\n

\n )}\n\n {loading && selectedSubject && }\n \n {!selectedSubject && !loading && renderSubjectSelection()}\n \n {selectedSubject && question && !loading && renderQuestionView()}\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI();\n\n if (request.method === 'POST') {\n const body = await request.json();\n\n if (request.url.includes('/generate-question')) {\n try {\n const completion = await openai.chat.completions.create({\n messages: [\n { \n role: \"system\", \n content: `You are an expert quiz question generator specializing in ${body.subject}. \n Generate high-quality, educational multiple-choice questions that:\n - Are appropriate for high school students\n - Test deep understanding, not just memorization\n - Include challenging but fair options\n - Provide educational explanations\n - Use clear, concise language` \n },\n { \n role: \"user\", \n content: `Create a ${body.difficulty} level multiple-choice question about ${body.subject} in this JSON format:\n{\n \"question\": \"Precise and engaging question text\",\n \"options\": [\n {\"id\": \"A\", \"text\": \"Thoughtful and plausible option\"},\n {\"id\": \"B\", \"text\": \"Another well-crafted option\"},\n {\"id\": \"C\", \"text\": \"A third option that seems reasonable\"},\n {\"id\": \"D\", \"text\": \"A final option to complete the set\"}\n ],\n \"correctAnswer\": \"B\",\n \"explanation\": \"A detailed, educational explanation that helps learners understand the concept deeply\"\n}` \n }\n ],\n model: \"gpt-4o-mini\",\n response_format: { type: \"json_object\" },\n max_tokens: 350\n });\n\n const questionData = JSON.parse(completion.choices[0].message.content);\n \n return new Response(JSON.stringify(questionData), {\n headers: { 'Content-Type': 'application/json' }\n });\n } catch (error) {\n console.error('Question generation error:', error);\n return new Response(JSON.stringify({ \n error: 'Failed to generate question', \n details: error.message \n }), { \n status: 500,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n }\n }\n\n return new Response(`\n \n \n Smart Quiz Challenge\n \n 🧠\">\n \n \n \n

\n \n \n \n \n `, {\n headers: { 'Content-Type': 'text/html' }\n });\n}","deleted","label",[98],"permalink","https://www.val.town/x/webmonk/SmartQuiz/code/main.tsx","extension","actionData","errors"]