Project final - Quiz
Finalize the quiz app and display the total score.
What we've built so far
Across the previous four lessons we built:
- An empty
questionsarray. - Question objects added to the array.
- A
for...ofloop that shows questions and turns answers into numbers withparseInt. - A
===check that bumps ascorecounter.
The final step is to extend the app to three questions and show both the number of correct answers and the total number of questions.
Showing the result
When the loop ends, the score variable tells how many answers were correct. For the total number of questions we use questions.length. Printing both side by side gives the user a clear result.
For example console.log("Correct answers:", score) and console.log("Total questions:", questions.length) would print two lines like "Correct answers: 2" and "Total questions: 3".
Exercise Finalize the quiz app
Bring the code to its final form. Add a third question object to the questions array. Add a third answer string to the userAnswers array (three elements in total). After the loop, print both the number of correct answers with console.log("Correct answers:", score) and the total number of questions with console.log("Total questions:", questions.length).
Show example solution
// Define the quiz questions
const questions = [
{ question: "Capital of Turkey?", options: ["İzmir", "Ankara", "Bursa"], answer: 1 },
{ question: "Wettest city?", options: ["Rize", "Konya", "Ankara"], answer: 0 },
{ question: "Longest river?", options: ["Kızılırmak", "Fırat", "Sakarya"], answer: 0 }
];
// User answers (option indexes as strings)
const userAnswers = ["1", "0", "0"];
let score = 0;
let answerIndex = 0;
for (const q of questions) {
const userAnswer = parseInt(userAnswers[answerIndex]);
if (userAnswer === q.answer) {
score++;
}
answerIndex++;
}
console.log("Correct answers:", score);
console.log("Total questions:", questions.length);Project complete!
Congratulations! At the end of five lessons you have a working quiz app:
- It defines questions as an array of objects.
- It shows each question in turn with
for...of. - It turns string answers into numbers with
parseInt. - It checks correctness with
===and bumpsscore. - It prints both the number of correct answers and the total questions.
In the next sections you'll learn how to extend this with functions and more objects.
Test yourself
-
Where do we store the correct answer for each question in the quiz app?
- In a separate correctAnswers array
- In the answer property of the question object
- In the score variable
- In the console.log output
Show answer
In the answer property of the question object — Correct! Each question object's answer property holds that question's correct index.
-
Complete the score message
console.log("Correct answers:", ____);Show answer
console.log("Correct answers:", score); -
Match the piece to its purpose
- questions array
- Holds questions and correct answers
- userAnswers array
- Answers given by the user
- for...of loop
- Walks the questions in order
- score counter
- Accumulates the number of correct