📚 Reading Challenge

Choose a topic or create your own!

\n\n {error && (\n

\n {error}\n

\n )}\n\n

\n \n Choose a topic:\n \n

\n {DEFAULT_TOPICS.map((topic) => (\n generateStory(topic)}\n disabled={loading}\n className=\"p-3 border-2 border-blue-200 rounded-lg hover:border-blue-500 hover:bg-blue-50 transition disabled:opacity-50 text-left\"\n >\n {topic}\n \n ))}\n

\n\n

\n OR\n

\n\n

\n \n Enter your own topic:\n \n

\n setCustomTopic(e.target.value)}\n onKeyPress={(e) => e.key === \"Enter\" && customTopic.trim() && generateStory(customTopic)}\n placeholder=\"e.g., Time Travel, Dragons, etc.\"\n className=\"flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500\"\n disabled={loading}\n />\n generateStory(customTopic)}\n disabled={!customTopic.trim() || loading}\n className=\"px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 disabled:bg-gray-300 disabled:cursor-not-allowed transition\"\n >\n {loading ? \"Generating...\" : \"Go\"}\n \n

\n );\n }\n\n // Story View\n if (view === \"story\" && story) {\n return (\n

{story.topic}

\n\n {error && (\n

\n {error}\n

\n )}\n\n

\n {story.content}\n

\n\n

\n \n {loading ? \"Loading Quiz...\" : \"Start Quiz 📝\"}\n \n \n New Topic\n \n

\n );\n }\n\n // Quiz View\n if (view === \"quiz\" && quiz) {\n const allAnswered = userAnswers.every(a => a !== -1);\n\n return (\n

Quiz Time! 📝

Answer all 3 questions about the story you just read.

\n\n

\n {quiz.questions.map((q, qIdx) => (\n

\n {qIdx + 1}. {q.question}\n

\n {q.options.map((option, oIdx) => (\n \n {\n const newAnswers = [...userAnswers];\n newAnswers[qIdx] = oIdx;\n setUserAnswers(newAnswers);\n }}\n className=\"mr-3\"\n />\n {option}\n \n ))}\n

\n ))}\n

\n\n \n Submit Quiz\n \n

\n );\n }\n\n // Results View\n if (view === \"results\" && result) {\n const percentage = Math.round((result.score / result.total) * 100);\n\n return (\n

Quiz Results

\n {result.score}/{result.total}\n

\n {percentage >= 100 ? \"Perfect! 🌟\" : percentage >= 67 ? \"Great job! 👏\" : \"Keep practicing! 💪\"}\n

\n\n

\n {result.questions.map((q, idx) => (\n \n

\n {idx + 1}. {q.question}\n

\n {q.options.map((option, oIdx) => {\n const isCorrect = oIdx === q.correctAnswer;\n const isUserAnswer = oIdx === q.userAnswer;\n\n return (\n \n {option}\n {isCorrect && \" ✓\"}\n {isUserAnswer && !isCorrect && \" ✗\"}\n

\n );\n })}\n

\n ))}\n

\n\n

\n \n Retake Quiz 🔄\n \n \n New Story 📚\n \n

\n \n \n );\n }\n\n return null;\n}\n","deleted","label",[175,176,157],"frontend","components","permalink","https://www.val.town/x/willemhelmet/reading-challenge/code/frontend/components/App.tsx","extension","actionData","errors"]