WordQuest is a simple, single-page vocabulary quiz built with HTML, CSS, Bootstrap, and JavaScript. Players answer five multiple-choice questions, each showing a word and four possible definitions. The game emphasizes accessibility, clarity, and confidence-building for young or beginner-level English learners.
Live Demo: To be added after GitHub Pages deployment
Repository: https://github.com/darakhshanda/Hackathon1
- Overview
- Site Goals
- User Stories
- Backlog
- Design
- Wireframes
- Features
- Accessibility
- Getting Started (Local Dev)
- File Structure
- Testing
- Bugs & Issues
- Deployment
- Technologies Used
- Team & Roles
- Development Workflow
- Roadmap
- Schedule
- License
WordQuest delivers a clean MVP experience:
- Intro + instructions
- A 5-question quiz (each with 4 answer options)
- Large, colorful buttons for accessibility
- Results page with score
- Game controls: start, next/back (optional), submit, restart
This project is collaboratively built by a small team with clear roles and a shared GitHub workflow.
- Provide an online quiz of at least 5 words with 4 possible answers each
- Collect user answers and show final results
- Provide large, bold, high-contrast UI elements for accessibility
- Keep things simple as a single-page app (
index.html) with linked CSS/JS in head for easy initial collaboration / no context switching. Until final.
- Simple instructions and readable UI
- Child-friendly design using colorful Bootstrap components
- Clear quiz progression and final score feedback
- Add difficulty levels using arrays. E.g "text: "What does Cold mean", options: ["Not warm; chilly", "Soft and furry", "Full of sunshine and heat", "Very loud and noisy"], },"
- Add custom question sets
- Optional grading system
- Optional accessibility controls (font size, contrast)
- Forkable project with changable quiz questions and concept (e.g JS fundamentals refresher, git commands, VSC tips and tricks, job interview questions)
- As a young player with a low reading level, I want to read simple intro instructions so I understand how to play the quiz.
- As a player with sight difficulties, I want to answer questions with clear answer buttons so I can choose a definition easily.
- As a young learner, I want bold, colorful buttons so I can click answers without difficulty.
- As a player, I want to see my results at the end so I know how many questions I got right.
- As a player, I want basic game controls (start, submit, restart) so I can action the quiz easily.
- As a player, I want to optionally move back and forth between questions so I can check my answers before finishing.
- Intro text and instructions
- Min 5 words in the quiz
- 4 answers per question
- Big colorful buttons (Bootstrap)
- Results screen / end-of-game landing page
- Game controls (start, submit, restart)
- Progress status
- Back/forward navigation
- Review answers before submit
- Difficulty selector
- Question count selector
- Custom question sets
- Grading system
- Accessibility controls (font size, contrast toggle)
- Additional game modes (e.g., Spelling Quest)
- sign in features
All content is served via one main HTML file (index.html) that links to styles and scripts for clarity and team collaboration.
Head:
<link>toassets/css/style.css- Bootstrap CDN
- Google Fonts CDN
Body:
- Header + Navbar
- Section 1: Intro/About/Instructions
- Section 2: Quiz container
- Question text
- 4 radio buttons or button-style options
- Submit button
- Hidden Results section (revealed on submit)
- Footer:
- Left: GitHub icon linking to README TBC
- Right: Team GitHub profile links TBC
assets/css/style.css(global styles)- Optional team imports: @import "DS/DS/JC/GC.css"
- Pink (accent) - Dark Pink #C65E82
- Blue (primary accent) - Dark Blue #3A8AC0
- Green (success) - Dark Green #4B7C48
- Beige/Pink (secondary) - Dusty Rose #B38A83
- Red (danger/error) - Dark Red #A82828
- Intro + Instructions — Simple explanation of how the quiz works.
- Quiz Engine — 5 questions, 4 multiple-choice radio button options, large Bootstrap buttons.
- Results Page — Shows score + restart option.
- Game Controls — Start Quiz, Next/Back (optional), Submit, Restart.
- Accessible Layout — High contrast, large buttons, simple labels.
- High-contrast color palette
- Large tap targets
- Clear focus states
- Semantic HTML + ARIA where useful
- Keyboard navigation supported
- Modern web browser
- (Optional) VS Code + Live Server
- Clone the repo
- Open the folder in VS Code
- Open
index.htmlin your browser
index.html
assets/
css/
style.css (with @import from users .css)
ds.css
dr.css
jc.css
gc.css
script/
script.js
- Check buttons
- Ensure one answer per question
- Test start, submit, restart
- Test responsiveness
- Check contrast accessibility
- Manual testing during process//AD Hoc
- Lighthouse automated
- Keyboard navigation
- WAVE or similar tooling
- Bootstrap ARIA defaults
- HTML5
- CSS3
- JavaScript
- Bootstrap
- Google Fonts
- VS Code
- Git & GitHub
- Copilot for debugging/quick questions, example of code reviewer
- ChatGPT for quick formatting
- DS — HTML structure; JavaScript logic
- Diane R — Intro, Q&A text, results writing
- Joe — Global CSS; Bootstrap styling; merging
- George — QA, accessibility checks, debugging
- Code reviews
- Pull request workflow
- Branch from
main - Small PRs with clear descriptions
- One peer review before merge
- Keep
mainstable
- Progress status
- Back/forward navigation
- Review-before-submit
- Difficulty + question count
- Custom questions
- Grading
- Accessibility controls
- Extra game modes
- 17-11 - project plan idea generation
- 18-11 - Readme and roles and basic html elements added to repoo
TBC