Quizzes
180,019 views
28 min · 3 min read
8 steps
Advanced

How to create a timed online quiz that prevents players from changing answers after time expires

Creating a timed online quiz that locks answers when time runs out improves fairness and measures knowledge reliably. This guide walks you through planning, building, testing, and deploying a quiz that prevents post-time edits while staying usable and secure. Follow clear steps to set time limits, enforce them on the server, and handle edge cases like connectivity loss.

Verified by pleasexplain editors
  1. Step 1: Define purpose and time limit

    Decide the quiz goal and assign a realistic per-user time, for example 10–20 minutes for 20 questions or 60 seconds per question. Use consistent timing so behaviors are predictable and to make enforcement simpler on client and server sides.

    [Illustration: A checklist showing quiz goal, number of questions, and a clock set to 15 minutes]

  2. Step 2: Choose technology stack

    Pick a platform and languages that support secure server-side logic (for example Node.js, Python/Flask, or serverless functions) and a JavaScript frontend. Ensure the backend can hold state and record timestamps reliably to prevent client-side tampering.

    [Illustration: Icons for server, browser, and database connected by arrows]

  3. Step 3: Store start and end timestamps

    When the user begins, record server-side start_time and compute end_time = start_time + allowed_seconds, then return end_time to the client. Always use UTC timestamps and store them in the database with the user session for authoritative enforcement.

    [Illustration: A timestamp log with fields start_time and end_time and a calendar icon]

  4. Step 4: Enforce time on server

    On every answer submission and finalization, have the server compare current_time to stored end_time; reject changes if current_time > end_time. This prevents users from editing answers by modifying the client or replaying requests after the deadline.

    [Illustration: A server rejecting an edit request with a red blocked stamp and a clock]

  5. Step 5: Provide a resilient client timer

    Show a live countdown based on the server-provided end_time rather than local duration, refreshing every second. Sync the UI to perform a final auto-submit when the countdown reaches zero and disable inputs immediately to reflect server policy to users.

    [Illustration: A browser window with a large countdown timer and disabled answer fields]

  6. Step 6: Handle connectivity and retries

    Detect offline or slow connections and save answers locally as drafts every 10–30 seconds, but always attempt to submit to the server; if submission fails, mark as pending and retry until end_time. When connection returns, send timestamps and let the server decide acceptance.

    [Illustration: A phone showing offline icon with arrows retrying to send data to a cloud server]

  7. Step 7: Secure endpoints and audit actions

    Authenticate users and require session tokens on all endpoints, validate input on the server, and log all submissions with timestamps and IP for audit. Keep immutable records of final answers and a flag indicating whether the server accepted or rejected late edits.

    [Illustration: A secure API endpoint with padlock icon and a logbook of submissions]

  8. Step 8: Test edge cases and run dry runs

    Perform tests simulating delayed clients, clock skew up to 5 minutes, multiple tabs, and concurrent submissions. Run 10–20 pilot attempts and review logs to confirm the server rejected late changes and the UI matched server state before public launch.

    [Illustration: A test lab with various devices running the quiz and a bug tracker open]


  • Use end_time as the single source of truth rather than client timers to avoid tampering.
  • Set auto-save to every 10–30 seconds so minimal work is lost on disconnects.
  • Allow a 2–5 second grace display on the client only for UX, but do not accept edits after server end_time.
  • Limit answer-change API to the active session to prevent replay attacks with old tokens.
  • Show clear warnings at 60s, 30s, and 10s remaining so users can prioritize answers.
  • Log both server acceptance and the client’s last known state to help troubleshoot disputes.

  • Do not rely solely on client-side JavaScript to enforce the deadline — it can be bypassed.
  • Avoid storing authoritative timing only in cookies or localStorage, which users can alter.
  • Do not auto-extend time without explicit, auditable reasons — manual extensions create fairness issues.
  • Beware of trusting client-reported clocks; always use server UTC for comparisons.

Was this guide helpful?