gistlib - create quiz with 20 questions on drag racing in javascript

To create a quiz with 20 questions on drag racing in javascript, you first need to create a list of questions with their corresponding answers. Here’s an example of an array in javascript:


index.tsx
let quizQuestions = [
  {
    question: "What is the minimum weight for a Top Fuel dragster?",
    choices: ["1,000 lbs", "1,500 lbs", "2,000 lbs", "2,500 lbs"],
    answer: "1,000 lbs"
  },
  {
    question: "What is the name of the first NHRA driver to reach 300 mph?",
    choices: ["Tony Schumacher", "Kenny Bernstein", "Angelle Sampey", "Gatornationals"],
    answer: "Kenny Bernstein"
  },
  {
    question: "What is the purpose of a burnout in drag racing?",
    choices: ["To warm up the tires", "To generate smoke for the audience", "To show off", "To test the engine"],
    answer: "To warm up the tires"
  },
  // add more questions here
  // ...
];
661 chars
20 lines

Once you have your list of questions, you can use HTML and CSS to create a quiz interface. Here’s an example of an HTML file that displays the quiz questions:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Drag Racing Quiz</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Drag Racing Quiz</h1>
  <div id="quiz"></div>

  <script src="script.js"></script>
</body>
</html>
262 chars
15 lines

And here’s an example of the CSS file to style the quiz:


body {
  font-family: Verdana, sans-serif;
}

h1 {
  text-align: center;
  margin-top: 30px;
}

#quiz {
  width: 70%;
  max-width: 700px;
  margin: 50px auto;
  background-color: #f7f7f7;
  border-radius: 4px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
  padding: 30px;
}

#quiz h2 {
  font-size: 20px;
  margin-top: 0;
}

#quiz ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#quiz li {
  margin: 10px 0;
  display: flex;
  align-items: center;
}

#quiz button {
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  padding: 10px 20px;
  cursor: pointer;
}

#quiz button:hover {
  background-color: #3e8e41;
}

#result {
  text-align: center;
}

#result h2 {
  font-size: 24px;
  font-weight: bold;
  margin-top: 50px;
}
784 chars
60 lines

Finally, you can use javascript to populate the HTML with quiz questions and check the selected answers against the correct answers. Here’s an example of a javascript file that creates a quiz:


index.tsx
let quiz = document.getElementById("quiz");
let result = document.getElementById("result");
let submitButton = document.getElementById("submit");

function showQuestions() {
  let output = [];

  quizQuestions.forEach((question, index) => {
    let choices = [];

    for (let i = 0; i < question.choices.length; i++) {
      choices.push(
        `<label>
          <input type="radio" name="question${index}" value="${question.choices[i]}">
          ${question.choices[i]}
        </label>`
      );
    }

    output.push(
      `<h2>${index + 1}. ${question.question}</h2>
      <ul>${choices.join("")}</ul>`
    );
  });

  quiz.innerHTML = output.join("");
}

function showResult() {
  let score = 0;
  let answerContainers = quiz.querySelectorAll("ul");
  
  quizQuestions.forEach((question, index) => {
    let choiceContainer = answerContainers[index];
    let selected = choiceContainer.querySelector(`input[name="question${index}"]:checked`);
    
    if (selected && selected.value === question.answer) {
      score++;
      choiceContainer.style.color = "green";
    } else {
      choiceContainer.style.color = "red";
    }
  });

  result.innerHTML = `<h2>You scored ${score} out of ${quizQuestions.length}.</h2>`;
}

submitButton.addEventListener("click", showResult);

showQuestions();
1305 chars
51 lines

This script creates a form with radio buttons for each question, and when the user clicks the submit button, it checks the selected answers against the correct answers and displays the score. You can further customize this quiz by adding a timer or a leaderboard.

create quiz with 20 questions on drag racing in javascript

similar javascript code snippets

related categories