Back To Tutorials

Quiz Web App

Beginnerchallenge

This project involves creating a dynamic quiz web application where users can answer multiple-choice questions and receive feedback on their performance. The app will use HTML for structure, CSS for styling, and JavaScript for interactivity.

Objective

The goal of this project is to build a simple, interactive quiz web application that displays multiple-choice questions, records answers, and provides feedback.

Requirements

  • Basic understanding of HTML, CSS, and JavaScript.
  • A text editor (VS Code, Sublime Text, etc.).
  • A browser to test the web app.
  • Knowledge of DOM manipulation in JavaScript.

Steps

  1. Set up the HTML structure:

    • Create a basic structure for displaying the quiz, including a title, question container, answer choices, and a submit button.

  2. Style the quiz using CSS:

    • Design a simple, user-friendly layout with a question, multiple answers, and a result section.

  3. Implement JavaScript functionality:

    • Write a script that handles loading the questions, storing user answers, and providing feedback.

  4. Add logic for checking answers:

    • Use JavaScript to compare the user’s selected answers to the correct ones and calculate the score.

  5. Display results:

    • Show the user their final score when all questions have been answered.

  6. Provide option to restart:

    • Allow the user to reset the quiz and try again.

Resources

Solution

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Quiz App</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="quiz-container">
    <h1>Quiz App</h1>
    <div id="quiz">
      <div class="question-container">
        <h2 id="question">Question text</h2>
        <ul class="choices">
          <li>
            <input type="radio" name="answer" class="answer" id="a">
            <label id="a_text" for="a">Choice A</label>
          </li>
          <li>
            <input type="radio" name="answer" class="answer" id="b">
            <label id="b_text" for="b">Choice B</label>
          </li>
          <li>
            <input type="radio" name="answer" class="answer" id="c">
            <label id="c_text" for="c">Choice C</label>
          </li>
          <li>
            <input type="radio" name="answer" class="answer" id="d">
            <label id="d_text" for="d">Choice D</label>
          </li>
        </ul>
      </div>
      <button id="submit">Submit</button>
      <div id="result"></div>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

CSS

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.quiz-container {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 400px;
  text-align: center;
}

h1 {
  font-size: 24px;
  margin-bottom: 20px;
}

.question-container {
  margin-bottom: 20px;
}

.choices {
  list-style: none;
  padding: 0;
}

.choices li {
  margin-bottom: 10px;
}

#submit {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 5px;
}

#submit:hover {
  background-color: #45a049;
}

#result {
  margin-top: 20px;
  font-size: 18px;
}

Javascript

const quizData = [
  {
    question: "What is the capital of France?",
    a: "Berlin",
    b: "Madrid",
    c: "Paris",
    d: "Lisbon",
    correct: "c"
  },
  {
    question: "Who is the President of the US?",
    a: "Barack Obama",
    b: "Joe Biden",
    c: "Donald Trump",
    d: "George Bush",
    correct: "b"
  },
  {
    question: "What is the largest planet in our solar system?",
    a: "Earth",
    b: "Mars",
    c: "Jupiter",
    d: "Saturn",
    correct: "c"
  },
  {
    question: "What does HTML stand for?",
    a: "Hyper Trainer Marking Language",
    b: "Hyper Text Markup Language",
    c: "Hyper Text Marketing Language",
    d: "Hyperlink Text Markup Language",
    correct: "b"
  },
];

let currentQuiz = 0;
let score = 0;

const questionEl = document.getElementById("question");
const a_text = document.getElementById("a_text");
const b_text = document.getElementById("b_text");
const c_text = document.getElementById("c_text");
const d_text = document.getElementById("d_text");
const submitBtn = document.getElementById("submit");
const resultEl = document.getElementById("result");

function loadQuiz() {
  deselectAnswers();

  const currentQuizData = quizData[currentQuiz];

  questionEl.innerText = currentQuizData.question;
  a_text.innerText = currentQuizData.a;
  b_text.innerText = currentQuizData.b;
  c_text.innerText = currentQuizData.c;
  d_text.innerText = currentQuizData.d;
}

function deselectAnswers() {
  const answers = document.querySelectorAll(".answer");
  answers.forEach(answer => (answer.checked = false));
}

function getSelected() {
  const answers = document.querySelectorAll(".answer");
  let selectedAnswer;

  answers.forEach(answer => {
    if (answer.checked) {
      selectedAnswer = answer.id;
    }
  });

  return selectedAnswer;
}

submitBtn.addEventListener("click", () => {
  const answer = getSelected();

  if (answer) {
    if (answer === quizData[currentQuiz].correct) {
      score++;
    }

    currentQuiz++;

    if (currentQuiz < quizData.length) {
      loadQuiz();
    } else {
      resultEl.innerHTML = `
        <h2>You answered ${score}/${quizData.length} questions correctly</h2>
        <button onclick="location.reload()">Restart Quiz</button>
      `;
    }
  }
});

loadQuiz();