Reading Time: 3 minutes

Are you ready to have some fun and learn a thing or two along the way? Today, we’re diving into the exciting world of web development by building a trivia quiz game using the magic of JavaScript!

What’s the Plan, Stan?

We’re going to create a simple yet captivating trivia quiz game that will challenge your brainpower and leave you feeling like a web wizard. Here’s the rundown of what we’ll cover:

  1. Setting the Stage: We’ll start by laying down the foundation of our quiz with some basic HTML. Think of it as setting up the playground where all the quiz action will happen.
  2. Sprucing Things Up: Next, we’ll sprinkle some CSS magic to make our quiz look stylish and inviting. After all, who wants to play a boring old quiz when you can play one that looks as snazzy as this?
  3. Making the Magic Happen: Here comes the exciting part! We’ll unleash the power of JavaScript to breathe life into our quiz. We’ll handle everything from displaying questions to checking answers and tallying up scores.

Let’s Get Our Hands Dirty!

First things first, let’s lay down the HTML structure of our quiz. This will include the container for our questions, options for answers, and a button for submitting answers.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Trivia Quiz</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>Trivia Quiz</h1>
    <div id="question"></div>
    <div id="options" class="options"></div>
    <div id="result"></div>
  </div>
  <script src="script.js"></script>
</body>
</html>

With our HTML in place, it’s time to sprinkle some CSS magic and make our quiz visually appealing. Let’s give it some flair!

/* styles.css */

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  color: #333;
}

.options {
  margin-top: 20px;
}

button {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

Now, the moment we’ve all been waiting for – the JavaScript part! This is where the real magic happens. We’ll handle all the quiz logic here, from displaying questions to checking answers and revealing the final score.

// script.js

const quizData = [
  {
    question: "What is the capital of France?",
    options: ["Paris", "Madrid", "Rome", "Berlin"],
    answer: "Paris"
  },
  {
    question: "What is 4 + 4?",
    options: ["4", "8", "12", "16"],
    answer: "8"
  },
  {
    question: "Who wrote 'To Kill a Mockingbird'?",
    options: ["Harper Lee", "Mark Twain", "Stephen King", "J.K. Rowling"],
    answer: "Harper Lee"
  }
];

const questionElement = document.getElementById('question');
const optionsElement = document.getElementById('options');
const submitButton = document.getElementById('submitBtn');
const resultElement = document.getElementById('result');

let currentQuestion = 0;
let score = 0;

function showQuestion() {
  const currentQuizData = quizData[currentQuestion];
  questionElement.textContent = currentQuizData.question;
  optionsElement.innerHTML = '';
  currentQuizData.options.forEach(option => {
    const button = document.createElement('button');
    button.textContent = option;
    button.classList.add('option-btn');
    button.addEventListener('click', () => selectAnswer(option));
    optionsElement.appendChild(button);
  });
}

function selectAnswer(selectedOption) {
  const currentQuizData = quizData[currentQuestion];
  if (selectedOption === currentQuizData.answer) {
    score++;
  }
  currentQuestion++;
  if (currentQuestion < quizData.length) {
    showQuestion();
  } else {
    showResult();
  }
}

function showResult() {
  questionElement.textContent = `Quiz completed! Your score is ${score}/${quizData.length}.`;
  optionsElement.innerHTML = '';
}

showQuestion();

Time to Play!

With our trivia quiz game all set up and ready to go, it’s time to put your knowledge to the test! Simply open up your browser, load the page, and get ready to answer some brain-teasing questions.

Trivia Quiz

Trivia Quiz

So, what are you waiting for? Let's dive in and build something awesome together! Trust me, once you've built your very own trivia quiz game, you'll feel like a coding rockstar.

Happy coding, and may the odds be ever in your favor!