📘 Short Note

{card.shortNote}

\n {!showQuestion && (\n \n )}\n

\n\n {showQuestion && (\n

❓ Question

{card.question}

\n \n

\n {card.options.map((option, index) => (\n handleOptionSelect(index)}\n style={{\n backgroundColor: selectedOption === index \n ? (isCorrect === true && index === card.correctAnswer \n ? '#2ecc71' \n : (isCorrect === false && index === selectedOption \n ? '#e74c3c' \n : '#3498db'))\n : '#3498db',\n color: 'white',\n border: 'none',\n padding: '10px',\n borderRadius: '5px',\n cursor: 'pointer',\n opacity: selectedOption !== null && selectedOption !== index ? 0.5 : 1\n }}\n disabled={selectedOption !== null}\n >\n {option}\n \n ))}\n

\n\n {isCorrect !== null && (\n

\n {isCorrect \n ? \"✅ Correct! Great job!\" \n : `❌ Incorrect. The correct answer is: ${card.options[card.correctAnswer]}`}\n

\n )}\n\n {isCorrect !== null && currentCardIndex < flashcards.length - 1 && (\n \n )}\n\n {showQuestion && (\n

🔍 Revision Guideline

{card.revisionGuideline}

\n )}\n

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

\n 📚 Revision Helper\n

\n \n {flashcards.length === 0 && (\n

setContent(e.target.value)}\n            placeholder=\"Paste your study content here...\"\n            style={{ \n              width: '100%', \n              height: '150px', \n              marginBottom: '10px',\n              borderRadius: '5px',\n              border: '1px solid #bdc3c7',\n              padding: '10px'\n            }}\n          />\n          <button \n            onClick={generateFlashcards}\n            style={{ \n              backgroundColor: '#3498db', \n              color: 'white', \n              border: 'none', \n              padding: '10px 20px', \n              cursor: 'pointer',\n              borderRadius: '5px',\n              width: '100%'\n            }}\n          >\n            Generate Revision Cards\n          </button>\n        </div>\n      )}\n\n      {renderFlashcard()}\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<RevisionHelper />);\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise<Response> {\n  if (request.method === 'POST' && new URL(request.url).pathname === '/generate-flashcards') {\n    const { content } = await request.json();\n    \n    const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n    const openai = new OpenAI();\n\n    const completion = await openai.chat.completions.create({\n      messages: [\n        { \n          role: \"system\", \n          content: `You are an expert educational content creator. Generate 3 detailed flashcards in a strict JSON format. \n          Each flashcard must have:\n          1. shortNote: A comprehensive and detailed explanation of a key concept (250-300 characters)\n          2. question: A challenging multiple-choice question testing understanding\n          3. options: 4 possible answers for the question\n          4. correctAnswer: Index of the correct answer (0-3)\n          5. revisionGuideline: A detailed strategy for understanding and remembering the concept (200-250 characters)\n          \n          Ensure the content is educational, engaging, and promotes deep learning.\n          \n          Example JSON structure:\n          {\n            \"flashcards\": [\n              {\n                \"shortNote\": \"Detailed explanation of the concept...\",\n                \"question\": \"What is the key aspect of this concept?\",\n                \"options\": [\"Option A\", \"Option B\", \"Option C\", \"Option D\"],\n                \"correctAnswer\": 1,\n                \"revisionGuideline\": \"Detailed strategy for learning and remembering...\"\n              }\n            ]\n          }`\n        },\n        { \n          role: \"user\", \n          content: `Generate educational flashcards for this content: ${content}`\n        }\n      ],\n      model: \"gpt-4o-mini\",\n      max_tokens: 800,\n      response_format: { type: \"json_object\" }\n    });\n\n    const responseText = completion.choices[0].message.content;\n    \n    try {\n      const parsedResponse = JSON.parse(responseText || '{}');\n      const flashcards = parsedResponse.flashcards || [];\n      return Response.json(flashcards);\n    } catch (error) {\n      return Response.json([\n        {\n          shortNote: \"Error generating flashcards\",\n          question: \"Please try again with different content\",\n          options: [\"Retry\", \"Cancel\", \"Modify Content\", \"Help\"],\n          correctAnswer: 0,\n          revisionGuideline: \"Check input, ensure clear and specific content\"\n        }\n      ]);\n    }\n  }\n\n  return new Response(`\n    <html>\n      <head>\n        <title>Revision Helper</title>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      </head>\n      <body>\n        <div id=\"root\"></div>\n        <script src=\"https://esm.town/v/std/catch\"></script>\n        <script type=\"module\" src=\"${import.meta.url}\"></script>\n      </body>\n    </html>\n  `, {\n    headers: { 'Content-Type': 'text/html' }\n  });\n}","deleted","label",[98],"permalink","https://www.val.town/x/dev_me/Flashcard_Generator/code/main.tsx","extension","actionData","errors"]
</article></body></html>