• Townie
    AI
  • Blog
  • Docs
  • Pricing
  • We’re hiring!
Log inSign up
willemhelmet

willemhelmet

reading-challenge

Remix of jxnblk/react-router-hono-starter
Public
Like
reading-challenge
Home
Code
10
backend
1
frontend
4
shared
1
.vtignore
AGENTS.md
README.md
client.tsx
deno.json
routes.tsx
H
server.tsx
Branches
1
Pull requests
Remixes
History
Environment variables
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Sign up now
Code
/
README.md
Code
/
README.md
Search
…
README.md

📚 Reading Challenge

An interactive learning experience that tests reading comprehension using AI-generated stories and quizzes.

Features

  • Topic Selection: Choose from 10 default topics or enter your own custom topic
  • AI-Generated Stories: Creates engaging 4-paragraph stories at middle school reading level
  • Interactive Quiz: 3 multiple-choice questions per story to test comprehension
  • Instant Feedback: Results page shows score with correct answers highlighted in green and wrong answers in red
  • Flexible Options: Retake the same quiz or generate a new story on a different topic

How It Works

  1. Choose a Topic: Select from pre-made topics like "Space Exploration 🚀" or "Dinosaurs 🦕", or enter your own
  2. Read the Story: AI generates a custom 4-paragraph story appropriate for middle school students
  3. Take the Quiz: Answer 3 multiple-choice questions about the story
  4. View Results: See your score out of 3, with detailed feedback on each question
  5. Try Again: Retake the quiz or start fresh with a new topic

Tech Stack

  • Backend: Hono (lightweight web framework)
  • Frontend: React 18.2.0 with TypeScript
  • AI: OpenAI API (via Val Town standard library)
  • Styling: Tailwind CSS (via Twind CDN)
  • Platform: Val Town

Project Structure

├── server.tsx              # Main Hono server entry point
├── frontend/
│   ├── index.html         # HTML template
│   ├── index.tsx          # React app entry point
│   ├── style.css          # Custom CSS styles
│   └── components/
│       └── App.tsx        # Main React component with all views
└── shared/
    └── types.ts           # TypeScript interfaces

API Endpoints

POST /api/generate-story

Generates a story based on a topic.

Request:

{ "topic": "Space Exploration" }

Response:

{ "topic": "Space Exploration", "content": "Four paragraph story..." }

POST /api/generate-quiz

Generates quiz questions based on a story.

Request:

{ "story": "Story content..." }

Response:

{ "questions": [ { "question": "What is the main theme?", "options": ["A", "B", "C", "D"], "correctAnswer": 0 } ] }

Setup

This app runs on Val Town and uses the Val Town OpenAI standard library, so no API key configuration is needed. Simply deploy the files to your Val Town project and the app is ready to use.

Default Topics

  • Space Exploration 🚀
  • Ancient Egypt 🏛️
  • Underwater Life 🐠
  • Dinosaurs 🦕
  • Pirates 🏴‍☠️
  • Robots and AI 🤖
  • Medieval Knights ⚔️
  • Rainforest Adventures 🌴
  • The Wild West 🤠
  • Mysteries of the Ocean 🌊
FeaturesVersion controlCode intelligenceCLI
Use cases
TeamsAI agentsSlackGTM
ExploreDocsShowcaseTemplatesNewestTrendingAPI examplesNPM packages
PricingNewsletterBlogAboutCareers
We’re hiring!
Brandhi@val.townStatus
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Terms of usePrivacy policyAbuse contact
© 2025 Val Town, Inc.