\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}","createdAt",["D",1739822488564],"version",39,"currentUserHasLiked","likeCount","forkCount","referenceCount","dependencyCount",1,"commentCount","prCount","mergedPr",{"_130":131,"_132":133},"handle","webmonk","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ydEI3ZnkwYkg4WFJJMm4za2w2RjhBcXdwWkwifQ","forkedVal","interval","slug","webmonk/SmartQuiz","description","Smart Quiz - Challenge Your Knowledge This is an AI quiz generator. The generated questions are based on the subject selected by student(user). The overall score of the student is calculated as the student continues taking the test, displayed along with the total questions already answered. For more info: check it out for yourself","versions",[142,145,149,153,157,161,165,169,173,177,181,185,189,193,197,201,205,209,213,217,221,225,229,233,237,241,245,249,253,257,261,265,269,273,277,281,285,289,292,295],{"_118":119,"_143":-5,"_116":144,"_113":111},"prId",["D",1739822488564],{"_118":146,"_143":-5,"_116":147,"_113":148},38,["D",1739822238848],"64b3ab1c-ed69-11ef-b18f-e6cdfca9ef9f",{"_118":150,"_143":-5,"_116":151,"_113":152},37,["D",1739822140110],"29d9164e-ed69-11ef-b1ef-e6cdfca9ef9f",{"_118":154,"_143":-5,"_116":155,"_113":156},36,["D",1739822003157],"d8385fde-ed68-11ef-b5f4-e6cdfca9ef9f",{"_118":158,"_143":-5,"_116":159,"_113":160},35,["D",1739821839177],"767adf24-ed68-11ef-9a1f-e6cdfca9ef9f",{"_118":162,"_143":-5,"_116":163,"_113":164},34,["D",1739821634907],"fcb951ca-ed67-11ef-865c-e6cdfca9ef9f",{"_118":166,"_143":-5,"_116":167,"_113":168},33,["D",1739821577102],"da4537da-ed67-11ef-831d-e6cdfca9ef9f",{"_118":170,"_143":-5,"_116":171,"_113":172},32,["D",1739821463437],"96858fcc-ed67-11ef-9a9a-e6cdfca9ef9f",{"_118":174,"_143":-5,"_116":175,"_113":176},31,["D",1739821337626],"4b88fa72-ed67-11ef-8f58-e6cdfca9ef9f",{"_118":178,"_143":-5,"_116":179,"_113":180},30,["D",1739821297616],"33af84fc-ed67-11ef-bdba-e6cdfca9ef9f",{"_118":182,"_143":-5,"_116":183,"_113":184},29,["D",1739821245970],"14e6d7c8-ed67-11ef-8d6d-e6cdfca9ef9f",{"_118":186,"_143":-5,"_116":187,"_113":188},28,["D",1739821086661],"b5f1a392-ed66-11ef-ae8d-e6cdfca9ef9f",{"_118":190,"_143":-5,"_116":191,"_113":192},27,["D",1739820705961],"d3082786-ed65-11ef-a774-e6cdfca9ef9f",{"_118":194,"_143":-5,"_116":195,"_113":196},26,["D",1739820421122],"29408784-ed65-11ef-80e3-e6cdfca9ef9f",{"_118":198,"_143":-5,"_116":199,"_113":200},25,["D",1739820250906],"c3cc971c-ed64-11ef-a0e8-e6cdfca9ef9f",{"_118":202,"_143":-5,"_116":203,"_113":204},24,["D",1739820198047],"a449f5ce-ed64-11ef-bc7c-e6cdfca9ef9f",{"_118":206,"_143":-5,"_116":207,"_113":208},23,["D",1739820124404],"7864eb94-ed64-11ef-bde2-e6cdfca9ef9f",{"_118":210,"_143":-5,"_116":211,"_113":212},22,["D",1739820049618],"4bd169e0-ed64-11ef-88ea-e6cdfca9ef9f",{"_118":214,"_143":-5,"_116":215,"_113":216},21,["D",1739819896827],"f0c1a07e-ed63-11ef-9966-e6cdfca9ef9f",{"_118":218,"_143":-5,"_116":219,"_113":220},20,["D",1739819747653],"97d51518-ed63-11ef-8d60-e6cdfca9ef9f",{"_118":222,"_143":-5,"_116":223,"_113":224},19,["D",1739819285966],"84a6433c-ed62-11ef-9e7c-e6cdfca9ef9f",{"_118":226,"_143":-5,"_116":227,"_113":228},18,["D",1739819154210],"361e2c16-ed62-11ef-9db0-e6cdfca9ef9f",{"_118":230,"_143":-5,"_116":231,"_113":232},17,["D",1739818340979],"51644e1c-ed60-11ef-a127-e6cdfca9ef9f",{"_118":234,"_143":-5,"_116":235,"_113":236},16,["D",1739818133928],"d5fa02ee-ed5f-11ef-a247-e6cdfca9ef9f",{"_118":238,"_143":-5,"_116":239,"_113":240},15,["D",1739817832279],"22344e0e-ed5f-11ef-b544-e6cdfca9ef9f",{"_118":242,"_143":-5,"_116":243,"_113":244},14,["D",1739817598941],"971a56c4-ed5e-11ef-abcf-e6cdfca9ef9f",{"_118":246,"_143":-5,"_116":247,"_113":248},13,["D",1739816832790],"ce7066d8-ed5c-11ef-812f-e6cdfca9ef9f",{"_118":250,"_143":-5,"_116":251,"_113":252},12,["D",1739816630240],"55b80458-ed5c-11ef-a2f8-e6cdfca9ef9f",{"_118":254,"_143":-5,"_116":255,"_113":256},11,["D",1739816353009],"b077ecec-ed5b-11ef-9328-e6cdfca9ef9f",{"_118":258,"_143":-5,"_116":259,"_113":260},10,["D",1739816292071],"8c24f524-ed5b-11ef-951a-e6cdfca9ef9f",{"_118":262,"_143":-5,"_116":263,"_113":264},9,["D",1739816255493],"76586924-ed5b-11ef-8201-e6cdfca9ef9f",{"_118":266,"_143":-5,"_116":267,"_113":268},8,["D",1739816245430],"705902e0-ed5b-11ef-b9aa-e6cdfca9ef9f",{"_118":270,"_143":-5,"_116":271,"_113":272},7,["D",1739816130567],"2be17e44-ed5b-11ef-9983-e6cdfca9ef9f",{"_118":274,"_143":-5,"_116":275,"_113":276},6,["D",1739815740380],"43505e66-ed5a-11ef-8224-e6cdfca9ef9f",{"_118":278,"_143":-5,"_116":279,"_113":280},5,["D",1739815674487],"1c094e62-ed5a-11ef-b2e0-e6cdfca9ef9f",{"_118":282,"_143":-5,"_116":283,"_113":284},4,["D",1739815606241],"f3629f36-ed59-11ef-ac71-e6cdfca9ef9f",{"_118":286,"_143":-5,"_116":287,"_113":288},3,["D",1739815399360],"780c3c52-ed59-11ef-bb9e-e6cdfca9ef9f",{"_118":90,"_143":-5,"_116":290,"_113":291},["D",1739815006134],"8dab837a-ed58-11ef-8e02-e6cdfca9ef9f",{"_118":125,"_143":-5,"_116":293,"_113":294},["D",1739814668011],"c421c320-ed57-11ef-a967-e6cdfca9ef9f",{"_118":31,"_143":-5,"_116":296,"_113":297},["D",1739814374213],"1504268a-ed57-11ef-b553-e6cdfca9ef9f","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.versions.$(version)",{"_93":305,"_306":307,"_94":308},"single","redirect","/v/webmonk/SmartQuiz/versions",{"_113":168,"_114":309,"_118":166,"_116":310,"_311":99,"_100":101,"_108":109,"_130":131,"_11":96,"_312":-5,"_313":-5,"_314":-5,"_302":26,"_136":137},"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { OpenAI } from \"https://esm.town/v/std/openai\";\n\n// List of available subjects with icons and colors\nconst SUBJECTS = [\n { name: 'Mathematics', icon: '📐', color: '#3498db', gradient: ['#6a11cb', '#2575fc'] }, \n { name: 'Science', icon: '🔬', color: '#2ecc71', gradient: ['#38ef7d', '#11998e'] }, \n { name: 'History', icon: '🏛️', color: '#e74c3c', gradient: ['#ff6a00', '#ee0979'] }, \n { name: 'Computer Science', icon: '💻', color: '#9b59b6', gradient: ['#8e2de2', '#4a00e0'] }, \n { name: 'Geography', icon: '🌍', color: '#f39c12', gradient: ['#ffd700', '#ff8c00'] }, \n { name: 'Literature', icon: '📚', color: '#1abc9c', gradient: ['#16a085', '#2ecc71'] }\n];\n\nfunction QuestionLoader({ color, progress }) {\n return (\n

\n Generating your personalized question...\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\n const generateQuestion = async (subject) => {\n setLoading(true);\n setSelectedSubject(subject);\n \n try {\n const response = await fetch('/generate-question', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({ subject: subject.name })\n });\n \n const data = await response.json();\n \n // Parse the generated question\n const questionParts = data.question.split('**');\n const questionText = questionParts[2].trim().replace('Question: ', '');\n const optionsText = questionParts[3].trim().replace('Options:\\n', '');\n const explanationText = questionParts[4].trim().replace('Explanation: ', '');\n \n const options = optionsText.split('\\n').map((option, index) => {\n // Split the option and remove the letter prefix\n const [letter, ...textParts] = option.split('.');\n return {\n id: String.fromCharCode(65 + index), // A, B, C, D\n text: textParts.join('.').trim(), // Rejoin in case the text contains a period\n fullText: option.trim()\n };\n });\n \n setQuestion({\n text: questionText,\n options: options,\n explanation: explanationText\n });\n } catch (error) {\n console.error('Error generating question:', error);\n } finally {\n setLoading(false);\n }\n };\n\n return (\n

🧠 Quiz Generator

\n \n {!selectedSubject && (\n

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

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

\n {question.text}\n

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

setSelectedAnswer(option.id)}\n >\n setSelectedAnswer(option.id)}\n style={{ marginRight: '10px' }}\n />\n \n {option.text}\n \n

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

Explanation

{question.explanation}

\n )}\n\n \n

\n )}\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 a precise quiz question generator. Generate a well-structured, educational multiple-choice question about ${body.subject} for high school students.` \n },\n { \n role: \"user\", \n content: `Create a challenging but fair multiple-choice question about ${body.subject}. \nProvide the response in this EXACT format:\n\n**Question**: \nWhat is the main concept being tested?\n\n**Options**:\nA. First possible answer\nB. Second possible answer\nC. Third possible answer\nD. Fourth possible answer\n\n**Explanation**:\nBrief explanation of the correct answer and why other options are incorrect.` \n }\n ],\n model: \"gpt-4o-mini\",\n max_tokens: 250\n });\n\n return new Response(JSON.stringify({\n question: completion.choices[0].message.content\n }), {\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 Interactive Quiz App\n \n \n \n \n

\n \n \n \n \n `, {\n headers: { 'Content-Type': 'text/html' }\n });\n}",["D",1739821577102],"valName","deletedAt","messageId","threadId","routes/_app","actionData","errors"]

SmartQuiz

Version 33