How to set up a multi-page quiz with progress saving for long assessments
Building a multi-page quiz that saves progress helps learners tackle long assessments without losing work. This guide walks you through planning, implementation, and testing steps so users can pause and resume reliably. Expect to spend 4–12 hours building a basic version and 1–3 hours testing and polishing.
Step 1: Define scope and flow
Decide total length, page count, and navigation rules before coding. Aim for 6–12 pages or 30–100 questions, and specify whether users may jump between pages or must proceed linearly; this drives data structure and save points.
[Illustration: wireframe showing pages and arrows for flow]
Step 2: Choose storage method
Pick where progress will be kept: localStorage for single-device saving, sessionStorage for short sessions, or server-side storage for cross-device resume. Plan for periodic server sync every 60–120 seconds if using server storage.
[Illustration: icons for browser storage and server with arrows]
Step 3: Design data format
Create a compact JSON schema for answers, timestamps, and page indices. Include keys for question IDs, selected answers, lastSavedAt (ISO string), and currentPage to enable fast restores and conflict resolution.
[Illustration: JSON file icon with fields and timestamps]
Step 4: Implement autosave
Add an autosave routine that runs every 30–60 seconds and on page changes, sending only delta updates to reduce payload. Provide a visual ‘Saved’ indicator and retry logic that attempts up to 3 times with exponential backoff.
[Illustration: browser window showing saving spinner and checkmark]
Step 5: Build resume logic
On load, check storage for an existing session and validate timestamps; offer users options to resume or start over. For server-stored sessions, show lastSavedAt and page number and allow restoring answers for each question.
[Illustration: modal dialog with resume and restart buttons and last saved time]
Step 6: Secure and version data
Encrypt sensitive fields or use HTTPS for server sync, and include a schema version number to handle future format changes. Keep stored answers for a minimum of 7 days or per policy and purge stale sessions after 30 days.
[Illustration: lock icon over document and version badge]
Step 7: Test edge cases thoroughly
Simulate network loss, multiple devices, browser crashes, and large payloads for at least 2–4 hours of QA. Verify partial saves, conflict resolution (latest timestamp wins or prompt user), and accessibility of resume prompts.
[Illustration: QA checklist with red flags and network icons]
Step 8: Provide clear UX controls
Add explicit save, manual submit, and clear-progress buttons and display progress percent and estimated remaining time (e.g., 20 minutes left). Communicate autosave frequency and how to resume in plain language.
[Illustration: quiz header showing progress bar, time estimate, and save button]
- Keep each page to 5–10 questions to reduce cognitive load and save size.
- Use concise answer payloads (IDs instead of full text) to keep saves under 10 KB per page.
- Expose a visible lastSavedAt timestamp so users trust the autosave feature.
- Allow users to export their in-progress answers as JSON for backup in under 30 seconds.
- Debounce rapid input to prevent excessive save calls (e.g., 500–1000 ms).
- Provide a lightweight recovery mode that restores only question state without media to speed resume operations.
- Log save failures locally for at least 7 days to help debug intermittent issues.
- Avoid relying solely on client storage for high-stakes exams; users can clear local storage or switch devices. Use server-side backups when integrity is required.
- Do not store sensitive personal data in plaintext in client storage; follow encryption and privacy rules to avoid leaks.
- Be careful with autosave frequency — saving too often can overload the server, while saving too rarely risks data loss. Balance with 30–60 second intervals.
- Test for race conditions when two devices update the same session simultaneously; implement clear conflict rules to prevent data corruption.
Was this guide helpful?
More Quizzes guides
How to create shareable result graphics for personality test outcomes
Creating attractive, shareable graphics for personality test results helps your audience celebrate and spread their outcomes. This guide walks you through practical, repeatable steps to design clear, on-brand images people will want to post. Expect to spend about 20–90 minutes per graphic depending on complexity.
How to design a multiple-choice trivia quiz for classroom use
Designing a multiple-choice trivia quiz for the classroom can be a fun way to review material, spark engagement, and assess comprehension. With a clear structure and a handful of best practices, you can create quizzes that are fair, varied, and useful for learning. Use this guide to craft a 10–20 question quiz that fits a single 20–30 minute class period.
How to design a psychometric quiz with norm-referenced scoring
Designing a psychometric quiz with norm-referenced scoring helps you compare individual test takers to a defined reference group. This guide walks you through practical steps from defining constructs to creating norms, with concrete actions and reasoning so you can produce reliable, interpretable results. Expect to spend several weeks to months for sampling, piloting, and analysis depending on scale.