Quiz App

A lightweight, client-side quiz application with a simple login and a strict one-attempt policy per user. Users log in with name and email, take a timed quiz, and are prevented from retaking with the same email.

Features

• Login with name and email
• Timed quiz: 2-minute countdown
• Shuffled questions and answers each run
• Immediate feedback on selected answer
• One attempt per user (by email) enforced via localStorage
• "Done" flow: returns to login screen and shows completion message

Tech Stack

• HTML, CSS, JavaScript (no frameworks)
• localStorage for storing user attempts

Getting Started

1. Open the app
   • Double-click index.html to open in your browser, or
   • Use VS Code Live Server: Right-click index.html → "Open with Live Server".
2. Login with your name and a valid email.
3. Take the quiz and click Done when finished.

Usage and Rules

• New users (new emails) can take the quiz normally.
• After finishing, if the same user logs in again with the same email, the quiz will not start.
  • The login screen will display: "You have already completed the quiz."
• The quiz remains available to different users who have not attempted it before.

Configuration

• Timer duration: Update QUIZ_DURATION_SECONDS in script.js.
• Questions: Edit the questions array in script.js. Each question has:
  • question: string
  • options: array of strings
  • answer: index (0-based) of the correct option

// Example question object in script.js
{
  question: "Which language runs in a web browser?",
  options: ["Java", "C", "Python", "JavaScript"],
  answer: 3,
}

Data Persistence

• Attempts are stored in localStorage under the key: quiz_users_attempts_v1.
• Structure per email:

{
  "user@example.com": {
    "name": "User Name",
    "completedAt": "2025-01-01T12:34:56.789Z",
    "score": 5,
    "total": 7
  }
}

Resetting Attempts (for testing)

• Open your browser DevTools → Console and run:

localStorage.removeItem("quiz_users_attempts_v1");

Project Structure

QuizApp/
├─ index.html
├─ style.css
├─ script.js
├─ assets/              # (optional assets)
└─ README.md

Accessibility & UX

• Keyboard-friendly buttons
• Focus on clear feedback states (correct/incorrect)
• Timer includes visual urgency indicators

Troubleshooting

• Blocked login unexpectedly: Clear attempts with the snippet above.
• Changes not visible: Hard refresh your browser (Ctrl+F5) to bypass cache.

License

MIT License (feel free to replace with your preferred license).