- Home
- Who We Are
- Our Services
- Case Studies
- Journal
- SEO Audit
- Career
- Contact Us
This code creates an HTML quiz form, allows users to select answers, and calculates their score based on the correct answers provided. The result is then displayed on the page.
The document.getElementById(‘quizForm’).addEventListener(‘submit’, …) line attaches an event listener to the form’s submit event. When the form is submitted, the provided function is executed.
The function begins by preventing the default form submission behavior using event.preventDefault(), which stops the page from reloading.
The correct answers are defined in the answers object, with keys corresponding to the question numbers and values representing the correct answers.
The score variable is initialized to 0, which will keep track of the number of correct answers.
The code then loops through each question (from 1 to 3) using a for loop. For each question, it retrieves the selected answer using document.querySelector(‘input[name=”‘ + question + ‘”]:checked’). This line uses the question number to construct a CSS selector that matches the checked radio button for that question.
<!DOCTYPE html>
<html>
<head>
<title>Condition-based Quiz</title>
</head>
<body>
<h1>Condition-based Quiz</h1>
<form id="quizForm">
<h3>Question 1:</h3>
<p>What is the capital of France?</p>
<input type="radio" name="q1" value="paris"> Paris<br>
<input type="radio" name="q1" value="london"> London<br>
<input type="radio" name="q1" value="berlin"> Berlin<br>
<h3>Question 2:</h3>
<p>What is the largest planet in our solar system?</p>
<input type="radio" name="q2" value="jupiter"> Jupiter<br>
<input type="radio" name="q2" value="mars"> Mars<br>
<input type="radio" name="q2" value="venus"> Venus<br>
<h3>Question 3:</h3>
<p>Which country won the FIFA World Cup in 2018?</p>
<input type="radio" name="q3" value="brazil"> Brazil<br>
<input type="radio" name="q3" value="germany"> Germany<br>
<input type="radio" name="q3" value="france"> France<br>
<br>
<input type="submit" value="Submit">
</form>
<div id="result"></div>
<script>
document.getElementById('quizForm').addEventListener('submit', function(event) {
event.preventDefault();
// Define the correct answers and initialize the score
var answers = {
q1: 'paris',
q2: 'jupiter',
q3: 'france'
};
var score = 0;
// Loop through each question and check the selected answer
for (var i = 1; i <= 3; i++) {
var question = 'q' + i;
var selectedAnswer = document.querySelector('input[name="' + question + '"]:checked');
if (selectedAnswer) {
if (selectedAnswer.value === answers[question]) {
score++;
}
}
}
// Display the result
var resultElement = document.getElementById('result');
resultElement.innerHTML = 'You scored ' + score + ' out of 3.';
});
</script>
</body>
</html>