Project Vera Advanced

What she should understand

Websites can be interactive without needing a database. JavaScript can store small bits of information in the browser using localStorage. This is useful for simple scores, preferences and progress notes.

Step-by-step build

1. Create safety-quiz.html.
2. Add a quiz question area.
3. Add answer buttons.
4. Use JavaScript to move through questions.
5. Track the score.
6. Show the final score.
7. Save the latest score using localStorage.
8. Show the last score when the page loads.
9. Link the quiz from tools.html.

Quiz code

<h1>Website Safety Quiz</h1>
<p id="last-score"></p>

<div class="card">
  <h2 id="question">Question appears here</h2>
  <div id="answers"></div>
</div>

<p id="progress"></p>

<script>
const questions = [
  {
    question: "Should you publish your home address on a practice website?",
    answers: ["Yes", "No"],
    correct: "No"
  },
  {
    question: "What file usually loads first in a folder?",
    answers: ["index.html", "photo.jpg", "notes.txt"],
    correct: "index.html"
  },
  {
    question: "What does CSS help with?",
    answers: ["Website styling", "Cooking dinner", "Charging a phone"],
    correct: "Website styling"
  }
];

let current = 0;
let score = 0;

function showQuestion() {
  const item = questions[current];
  document.getElementById("question").innerText = item.question;

  const answers = document.getElementById("answers");
  answers.innerHTML = "";

  item.answers.forEach(function(answer) {
    const button = document.createElement("button");
    button.innerText = answer;
    button.onclick = function() {
      checkAnswer(answer);
    };
    answers.appendChild(button);
  });

  document.getElementById("progress").innerText =
    "Question " + (current + 1) + " of " + questions.length;
}

function checkAnswer(answer) {
  if (answer === questions[current].correct) {
    score++;
  }

  current++;

  if (current < questions.length) {
    showQuestion();
  } else {
    showFinalScore();
  }
}

function showFinalScore() {
  document.querySelector(".card").innerHTML =
    "<h2>Quiz complete!</h2><p>Your score was " + score + " out of " + questions.length + ".</p>";

  localStorage.setItem("projectVeraSafetyQuizScore", score + "/" + questions.length);
}

function showLastScore() {
  const lastScore = localStorage.getItem("projectVeraSafetyQuizScore");

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

showLastScore();
showQuestion();
</script>

Button CSS

button {
  background: #2563eb;
  color: white;
  border: 0;
  border-radius: 8px;
  padding: 10px 14px;
  margin: 6px;
  cursor: pointer;
}

button:hover {
  background: #1d4ed8;
}

Make it more educational

Extension task