Choose a Topic to Learn

\n {state.topics.map(topic => (\n handleTopicSelect(topic)}\n disabled={!!state.loadingMessage}\n >\n {topic}\n \n ))}\n

Or Add Your Own Topic:

\n \n \n

\n );\n\n case \"study\":\n // Ensure studyMaterial is not null before rendering\n if (!state.studyMaterial) {\n // This case should ideally be handled by loading/error states,\n // but as a fallback:\n return (\n

\n Preparing study material... If this takes too long, there might be an issue.\n

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

Study Material: {state.selectedTopic}

\n {/* WARNING: dangerouslySetInnerHTML can be risky if HTML isn't sanitized */}\n

\n \n \n

\n );\n\n case \"quiz\":\n // Ensure quizQuestions are loaded\n if (!state.quizQuestions || state.quizQuestions.length === 0) {\n return

Loading quiz questions...

;\n }\n const currentQuestion = state.quizQuestions[state.currentQuestionIndex];\n if (!currentQuestion) {\n // Should not happen with proper indexing, but safety check\n console.error(\"Error: Current question is undefined at index\", state.currentQuestionIndex);\n setError(\"An internal error occurred with the quiz questions.\");\n return null; // Error will be displayed by the main logic\n }\n return (\n

Quiz: {state.selectedTopic}

\n Question {state.currentQuestionIndex + 1} of {state.quizQuestions.length}\n

{currentQuestion.text}

\n {currentQuestion.options.map((option, index) => (\n handleAnswer(option)}\n disabled={!!state.loadingMessage}\n className=\"option-button\"\n >\n {option}\n \n ))}\n

\n );\n\n case \"results\":\n return (\n

Quiz Results: {state.selectedTopic}

Your Score: {state.score ?? \"Not calculated\"}%

\n\n

Detailed Results:

\n {state.userAnswers.map((answer, index) => (\n

\n Q{index + 1}: {answer.questionText}\n

Your Answer: {answer.selectedAnswer} {answer.isCorrect ? \"✅\" : \"❌\"}

\n {!answer.isCorrect &&

Correct Answer: {answer.correctAnswer}

}\n

\n ))}\n

\n\n

Topic Leaderboard (Top Scores)

\n {state.leaderboard && state.leaderboard.length > 0\n ? (\n \n \n \n \n \n \n \n \n {state.leaderboard.map((score, index) => (\n \n \n \n \n ))}\n \n

Rank	Score
{index + 1}	{score}%

\n )\n :

No leaderboard scores available for this topic yet.

}\n \n

\n );\n\n default:\n return

Something went wrong. Unknown stage: {state.stage}

;\n }\n };\n\n return (\n

AI Learning Assistant

\n {/* Render loading/error first if present */}\n {state.loadingMessage &&

{state.loadingMessage}

}\n {state.error && (\n

\n Error: {state.error} \n

\n )}\n {/* Render main content only if not loading/error */}\n {!state.loadingMessage && !state.error && renderContent()}\n

\n );\n}\n\n// --- Client-side Rendering ---\nfunction client() {\n const rootElement = document.getElementById(\"root\");\n if (rootElement) {\n createRoot(rootElement).render();\n } else {\n console.error(\"Root element not found\");\n }\n}\n// Ensure client() runs only in the browser\nif (typeof document !== \"undefined\") {\n // Use requestAnimationFrame to ensure the DOM is ready\n requestAnimationFrame(client);\n}\n\n// --- Backend Server (Val Town) ---\nexport default async function server(request: Request): Promise {\n // Standard Val Town imports (ensure these versions are suitable)\n const { OpenAI } = await import(\"http://esm.town/v/std/openai\"); // Use npm import for better version control if needed\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\"); // Stick with esm.town for sqlite unless issues arise\n\n // Use environment variable for API key (Val Town handles\n const openai = new OpenAI(); // Automatically uses process.env.OPENAI_API_KEY\n\n // --- Database Setup ---\n // Use a consistent key based on the val's path for table namespacing\n const valPath = new URL(import.meta.url).pathname.split(\"/\").pop() || \"default_learning_app\";\n const RESULTS_TABLE = `learning_app_${valPath}_results_v3`; // Added versioning in case of schema changes\n\n try {\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${RESULTS_TABLE} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n topic TEXT NOT NULL,\n score INTEGER NOT NULL, -- Store score as integer percentage\n timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n } catch (e) {\n console.error(\"Database setup failed:\", e);\n // Don't necessarily stop the whole app, but log the error\n }\n\n // --- API Route Handling ---\n const url = new URL(request.url);\n const pathname = url.pathname;\n\n if (request.method === \"POST\" && pathname === \"/generate-study-material\") {\n try {\n const { topic } = await request.json();\n if (!topic || typeof topic !== \"string\" || topic.trim() === \"\") {\n return Response.json({ error: \"Invalid topic provided.\" }, { status: 400 });\n }\n\n console.log(`Generating study material for: ${topic}`);\n const studyMaterialResponse = await openai.chat.completions.create({\n model: \"gpt-4o-mini\", // Or choose another appropriate model\n messages: [\n {\n role: \"system\",\n content:\n \"You are an AI assistant generating educational content. Provide comprehensive study material formatted in simple HTML (use headings, paragraphs, lists, bold text). Focus on clarity and accuracy.\",\n },\n {\n role: \"user\",\n content:\n `Create an in-depth HTML study guide for the topic: \"${topic}\". Include definitions, key concepts, examples, important historical context (if applicable), and potential areas of confusion. Structure it well with clear sections. Do not include or tags, just the content itself.`,\n },\n ],\n // No max_tokens needed - let the model decide based on prompt and context\n });\n\n const studyMaterial = studyMaterialResponse.choices[0]?.message?.content;\n if (!studyMaterial) {\n throw new Error(\"OpenAI did not return study material content.\");\n }\n\n return Response.json({ studyMaterial });\n } catch (error) {\n console.error(\"Error in /generate-study-material:\", error);\n return Response.json({ error: `Failed to generate study material: ${error.message}` }, { status: 500 });\n }\n }\n\n if (request.method === \"POST\" && pathname === \"/generate-quiz\") {\n try {\n const { topic } = await request.json();\n if (!topic || typeof topic !== \"string\" || topic.trim() === \"\") {\n return Response.json({ error: \"Invalid topic provided.\" }, { status: 400 });\n }\n\n console.log(`Generating quiz for: ${topic}`);\n const quizResponse = await openai.chat.completions.create({\n model: \"gpt-4o-mini\", // Or choose another appropriate model\n response_format: { type: \"json_object\" }, // Request JSON output\n messages: [\n {\n role: \"system\",\n content:\n `You are an AI assistant creating quizzes. Generate a JSON object containing a single key \"questions\". The value of \"questions\" should be an array of 5 multiple-choice quiz questions about the provided topic. Each question object in the array must have the following exact keys: \"text\" (string, the question), \"options\" (array of 4 distinct strings, the choices), and \"correctAnswer\" (string, one of the strings from the \"options\" array). Ensure questions are relevant and challenging.`,\n },\n {\n role: \"user\",\n content: `Generate the JSON quiz object for the topic: \"${topic}\"`,\n },\n ],\n // No max_tokens\n });\n\n const jsonString = quizResponse.choices[0]?.message?.content;\n if (!jsonString) {\n throw new Error(\"OpenAI did not return quiz content.\");\n }\n\n // Parse the JSON response from OpenAI\n let parsedQuiz;\n try {\n parsedQuiz = JSON.parse(jsonString);\n } catch (parseError) {\n console.error(\"Failed to parse JSON from OpenAI:\", jsonString);\n throw new Error(\"Failed to parse quiz data from AI response.\");\n }\n\n // Validate the structure\n if (!parsedQuiz || !Array.isArray(parsedQuiz.questions) || parsedQuiz.questions.length === 0) {\n console.error(\"Invalid quiz structure received:\", parsedQuiz);\n throw new Error(\"AI returned improperly formatted quiz data.\");\n }\n // Add more validation if needed (e.g., check if each question has text, options, correctAnswer)\n\n return Response.json({ questions: parsedQuiz.questions }); // Send only the array\n } catch (error) {\n console.error(\"Error in /generate-quiz:\", error);\n return Response.json({ error: `Failed to generate quiz: ${error.message}` }, { status: 500 });\n }\n }\n\n if (request.method === \"POST\" && pathname === \"/submit-quiz-results\") {\n try {\n const { topic, score } = await request.json();\n\n // Validate input\n if (\n !topic || typeof topic !== \"string\" || topic.trim() === \"\" || typeof score !== \"number\" || score < 0\n || score > 100\n ) {\n return Response.json({ error: \"Invalid topic or score provided.\" }, { status: 400 });\n }\n const integerScore = Math.round(score); // Ensure score is an integer\n\n // Store quiz result\n await sqlite.execute({\n sql: `INSERT INTO ${RESULTS_TABLE} (topic, score) VALUES (?, ?)`,\n args: [topic, integerScore],\n });\n\n // Fetch leaderboard (Top 10 distinct scores for this topic)\n const leaderboardResults = await sqlite.execute({\n sql: `SELECT DISTINCT score FROM ${RESULTS_TABLE} WHERE topic = ? ORDER BY score DESC LIMIT 10`,\n args: [topic],\n });\n\n // Extract just the scores into an array\n const leaderboardScores = leaderboardResults.rows.map(row => row.score);\n\n return Response.json({\n message: \"Result saved.\", // Provide a success message\n leaderboard: leaderboardScores, // Send the array of top scores\n });\n } catch (error) {\n console.error(\"Error in /submit-quiz-results:\", error);\n return Response.json({ error: `Failed to save or retrieve results: ${error.message}` }, { status: 500 });\n }\n }\n\n // --- Serve HTML for GET requests ---\n if (request.method === \"GET\" && pathname === \"/\") {\n // Serve the main HTML page that loads the React app\n return new Response(\n `\n \n \n \n AI Learning Assistant\n \n \n \n \n \n

Loading Learning App...

\n \n \n \n \n `,\n {\n headers: { \"content-type\": \"text/html; charset=utf-8\" },\n },\n );\n }\n\n // --- Default 404 ---\n return new Response(\"Not Found\", { status: 404 });\n}\n\n// --- CSS Styling (moved outside main function for clarity) ---\nconst css = `\n:root {\n --primary-color: #4CAF50;\n --primary-hover: #45a049;\n --secondary-color: #f0f0f0;\n --secondary-hover: #e0e0e0;\n --text-color: #333;\n --bg-color: #f9f9f9;\n --container-bg: white;\n --border-color: #ddd;\n --error-color: #d9534f;\n --correct-color: #5cb85c;\n --incorrect-color: #f0ad4e;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n max-width: 800px;\n margin: 20px auto;\n padding: 15px;\n line-height: 1.6;\n background-color: var(--bg-color);\n color: var(--text-color);\n}\n\n.learning-app {\n background-color: var(--container-bg);\n border-radius: 8px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n padding: 20px 30px;\n}\n\nh1, h2, h3 {\n color: var(--primary-color);\n margin-bottom: 0.8em;\n}\nh1 {\n text-align: center;\n margin-bottom: 1.2em;\n}\n\nbutton {\n background-color: var(--primary-color);\n color: white;\n border: none;\n padding: 12px 22px;\n margin: 10px 5px 10px 0; /* Adjusted margin */\n border-radius: 5px;\n cursor: pointer;\n font-size: 1em;\n transition: background-color 0.2s ease, transform 0.1s ease;\n display: inline-block; /* Ensure buttons flow correctly */\n}\n\nbutton:hover {\n background-color: var(--primary-hover);\n transform: translateY(-1px);\n}\n\nbutton:disabled {\n background-color: #ccc;\n cursor: not-allowed;\n transform: none;\n}\n\nbutton.secondary {\n background-color: var(--secondary-color);\n color: var(--text-color);\n}\nbutton.secondary:hover {\n background-color: var(--secondary-hover);\n color: var(--text-color);\n}\n\n\ninput[type=\"text\"] {\n padding: 10px;\n margin-right: 5px;\n border: 1px solid var(--border-color);\n border-radius: 4px;\n font-size: 1em;\n}\n\n.topic-selection .topic-list {\n display: flex;\n flex-wrap: wrap;\n gap: 10px; /* Spacing between buttons */\n margin-bottom: 20px;\n}\n.topic-selection button {\n flex-grow: 1; /* Allow buttons to grow */\n min-width: 150px; /* Minimum width before wrapping */\n}\n\n.add-topic {\n margin-top: 20px;\n padding-top: 15px;\n border-top: 1px solid var(--border-color);\n}\n.add-topic h3 {\n margin-bottom: 10px;\n font-size: 1.1em;\n}\n\n.content-box, .study-material div[dangerouslySetInnerHTML] {\n background-color: #fdfdfd;\n border: 1px solid var(--border-color);\n padding: 15px;\n border-radius: 5px;\n margin-bottom: 20px;\n max-height: 400px; /* Limit height and add scroll */\n overflow-y: auto;\n}\n.content-box h1, .content-box h2, .content-box h3 { color: var(--text-color); } /* Override theme color inside box */\n\n\n.quiz .question-counter {\n font-size: 0.9em;\n color: #666;\n text-align: right;\n}\n.quiz .question-text {\n font-size: 1.2em;\n margin-bottom: 20px;\n font-weight: bold;\n}\n.quiz .options-container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive grid */\n gap: 10px;\n}\n.quiz .option-button {\n width: 100%; /* Buttons take full grid cell width */\n text-align: left;\n padding: 15px;\n}\n\n\n.results .final-score {\n font-size: 1.5em;\n font-weight: bold;\n color: var(--primary-color);\n text-align: center;\n margin-bottom: 25px;\n}\n.results-details {\n margin-bottom: 25px;\n}\n.result-item {\n border: 1px solid var(--border-color);\n border-left-width: 5px; /* Thicker left border for status indication */\n padding: 10px 15px;\n margin-bottom: 10px;\n border-radius: 4px;\n}\n.result-item.correct {\n border-left-color: var(--correct-color);\n}\n.result-item.incorrect {\n border-left-color: var(--incorrect-color);\n}\n.result-item p { margin: 5px 0; }\n.result-item strong { font-weight: 600;}\n\n\ntable {\n width: 100%;\n border-collapse: collapse;\n margin-bottom: 20px;\n}\nth, td {\n border: 1px solid var(--border-color);\n padding: 10px 12px;\n text-align: left;\n}\nth {\n background-color: #f2f2f2;\n font-weight: 600;\n}\ntd:first-child {\n text-align: center;\n width: 50px;\n}\n\n\n.message {\n padding: 15px;\n margin-bottom: 20px;\n border-radius: 5px;\n text-align: center;\n font-weight: 500;\n}\n.message.loading {\n background-color: #eef;\n border: 1px solid #cce;\n color: #337;\n}\n.message.error {\n background-color: #fdd;\n border: 1px solid var(--error-color);\n color: #a23;\n position: relative; /* For dismiss button */\n}\n.message.info {\n background-color: #eee;\n border: 1px solid #ccc;\n color: #555;\n}\n.dismiss-error {\n background: none;\n border: none;\n color: inherit;\n font-size: 0.8em;\n padding: 2px 5px;\n margin-left: 10px;\n cursor: pointer;\n border: 1px solid;\n border-radius: 3px;\n}\n\n/* Responsive adjustments */\n@media (max-width: 600px) {\n body {\n margin: 10px;\n padding: 10px;\n }\n .learning-app {\n padding: 15px;\n }\n button {\n padding: 10px 15px;\n font-size: 0.95em;\n }\n input[type=\"text\"] {\n font-size: 0.95em;\n }\n .quiz .options-container {\n grid-template-columns: 1fr; /* Stack options vertically */\n }\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/find/Learning/code/main.tsx","extension","actionData","errors"]