The Ultimate Pub Quiz

The Ultimate Pub Quiz is a complete interactive browser quiz game built with HTML, CSS, and JavaScript. Players can choose a category, select a difficulty, race against a timer, hear game-show style sound effects, review their answers, and save scores to a local scoreboard.

The project is designed as a polished web development portfolio piece: it is responsive, accessible, animated, and deployable as a static GitHub Pages site.

Features

• 1,700 quiz questions stored across assets/js/questions.js and assets/js/question-expansion.js
• 14 playable categories plus a Random Mix mode
• Music category decade filters for 70s, 80s, 90s, 2000s, and After 2020
• Quizmaster controls for awarding one first-correct-answer point per question
• Easy, Medium, Hard, and Mixed difficulty filters
• Question count options for 10, 20, 50, or all matching questions
• Multi-player name import with one name per line or comma-separated names
• One-question-at-a-time gameplay with shuffled questions and answers
• Round-robin active player rotation with a live scoreboard during play
• 30-second optional timer with low-time visual urgency
• Web Audio API sound effects for start, click, hover, correct, wrong, ticking, and completion
• Spoken answer feedback using the browser Speech Synthesis API, including the custom correct-answer phrase
• Mute and unmute control with saved preference
• Neon fluorescent stage lights, answer feedback, score pop, progress bar, and confetti
• Results screen with score, percentage, message, category, difficulty, and time taken
• Answer review screen with selected answer, correct answer, result, explanation, category, and difficulty
• LocalStorage scoreboard with each player's name, rank, score, percentage, category, date, time, and performance message
• Clear scoreboard option
• Responsive layout for mobile, tablet, and desktop
• Reduced motion support for users who prefer less animation

Screenshots

Add screenshots after running the project locally or deploying it:

• Home screen
• Quiz setup screen
• Active question screen
• Results screen
• Answer review screen
• Scoreboard screen

Suggested screenshot folder: assets/images.

How To Play

1. Open the app and select Start Quiz.
2. Import player names by entering one per line or separating names with commas.
3. Choose a category, difficulty, number of questions, and timer mode.
4. Select one answer for each question.
5. Use Next Question to move through the round.
6. At the end, view your final score.
7. Check your answers or view the scoreboard.

Technologies Used

• HTML5
• CSS3
• JavaScript
• Web Audio API
• LocalStorage
• CSS animations
• No backend
• No paid APIs
• No external libraries

UX Design Notes

• The interface uses a neon fluorescent pub quiz and game show theme with stage lighting, a scoreboard-style sign, bold buttons, and high-energy feedback.
• The setup flow keeps choices visible before the round begins so players understand the quiz rules.
• The live scoreboard keeps the current player and every player's score visible during the round.
• Answer buttons are large and easy to tap on mobile.
• The timer changes style when 10 seconds remain to create urgency.
• Score feedback is immediate, while the answer review provides deeper learning after the round.
• The scoreboard is sorted by percentage first, then score, then fastest time.

Accessibility Features

• Semantic HTML sections, headings, forms, buttons, tables, and definitions
• Keyboard-friendly controls
• Visible focus states
• Text labels for all interactive controls
• ARIA labels and live regions where useful
• High contrast colour choices
• Timer can be disabled before starting
• Sound can be muted
• Reduced motion support with prefers-reduced-motion
• No autoplaying audio before user interaction

Testing

See TESTING.md for the full testing checklist.

Recommended checks:

• Validate HTML with the W3C Markup Validation Service
• Validate CSS with the W3C CSS Validation Service
• Play full rounds with and without timer
• Test scoreboard persistence after refresh
• Test keyboard navigation
• Test mobile, tablet, and desktop widths
• Check Chrome, Firefox, Edge, and Safari where available

Bugs Fixed During Development

• Prevented empty player-name lists from starting a quiz.
• Added a fallback message when no questions match the selected filters.
• Limited scoreboard storage to the best recent 100 saved results.
• Added LocalStorage error handling for browsers with disabled storage.
• Generated audio with the Web Audio API so no copyrighted sound files are required.

Future Improvements

• Add downloadable scoreboard export.
• Add custom quiz packs through an import form.
• Add a streak bonus mode.
• Add optional keyboard shortcuts for answer choices.
• Add saved theme preferences.
• Add generated or illustrated category artwork.

Deployment Instructions

GitHub Pages

1. Create a new GitHub repository.
2. Add all project files to the repository.
3. Commit and push the files.
4. In GitHub, open Settings.
5. Go to Pages.
6. Under Build and deployment, choose Deploy from a branch.
7. Select the main branch and the root folder.
8. Save and wait for GitHub Pages to publish the site.

Because this is a static project, no build command is required.

Credits

• Quiz content: original questions written for this project.
• Visual design: original CSS graphics and animations.
• Sound effects: generated in the browser with the Web Audio API.
• Fonts: system fonts only.