Week 8: Make the Quiz Feel Like a Commercial Tool

This week in plain English

ObjectiveImprove the quiz with better design, explanations, email-safe lead wording and localStorage.

Why this mattersA commercial quiz needs to feel helpful, trustworthy and easy to use.

What she will makeA polished quiz page with recommendation cards and saved latest result.

What “done” looks likeThe quiz looks polished, explains the recommendation and saves the last result on the same device.

At the end, she should be able to say:
“A commercial quiz should not just give an answer. It should explain why the recommendation fits.”

Fortnight project: Commercial Project 4 completed.

Skills: localStorage, result cards, UX writing, trust wording, quiz QA

Suggested session structure: 10 minutes objective, 10 minutes ChatGPT planning, 25 minutes building, 10 minutes testing, 5 minutes recap.

Commercial outcome

By the end of this week: The quiz should feel like something a business could use to help customers choose the right option.

Step-by-step

Style the quiz page with cards and buttons.
Add a short intro explaining the quiz.
Add a result card for each possible recommendation.
Save the last recommendation with localStorage.
Show the last result when the page reloads.
Add a clear note that this is a practice tool.
Test the quiz three times with different answers.

localStorage example

localStorage.setItem("lastSafetyRecommendation", recommendation);

const last = localStorage.getItem("lastSafetyRecommendation");

if (last) {
  document.getElementById("last-result").innerText =
    "Last recommendation on this device: " + last;
}

Result explanation example

const resultText = {
  home: "Home Safety Kit is a good fit if you want to learn about doors, locks, alarms and family emergency plans.",
  outdoor: "Outdoor Safety Kit is a good fit if you want to learn about parks, walking routes and staying visible.",
  online: "Online Safety Kit is a good fit if you want to learn about passwords, devices and safe internet habits."
};

Commercial quality checklist

Quiz intro explains who it is for.
Questions are easy to understand.
Buttons are easy to click.
Recommendation includes a reason.
Last result saves on the same device.
Practice/safety disclaimer is clear.