.png "Build a Simple Quiz Game with JavaScript: A Step-by-Step Guide:-") |
Are you interested in building a simple quiz game using JavaScript? Look no further! In this step-by-step guide, we'll cover everything from setting up the HTML structure to creating a quiz logic.
*Step 1: Set Up the HTML Structure*
Create a new HTML file and add the following code:
```
<!DOCTYPE html>
<html>
<head>
<title>Quiz Game</title>
</head>
<body>
<h1>Quiz Game</h1>
<div id="quiz-container">
<div id="question"></div>
<div id="options"></div>
<button id="submit">Submit</button>
<div id="result"></div>
</div>
<script src="script.js"></script>
</body>
</html>
```
*Step 2: Add CSS Styles for Layout and Design*
Create a new CSS file and add the following code:
```
body {
font-family: Arial, sans-serif;
}
#quiz-container {
width: 50%;
margin: 40px auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#question {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}
#options {
margin-bottom: 20px;
}
#submit {
background-color: #4CAF50;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
#result {
font-size: 24px;
font-weight: bold;
margin-top: 20px;
}
```
*Step 3: Create the Quiz Logic*
Create a new JavaScript file and add the following code:
```
const quizContainer = document.getElementById('quiz-container');
const questionElement = document.getElementById('question');
const optionsElement = document.getElementById('options');
const submitButton = document.getElementById('submit');
const resultElement = document.getElementById('result');
const quizQuestions = [
{
question: 'What is the capital of France?',
options: ['Paris', 'London', 'Berlin', 'Rome'],
answer: 0
},
{
question: 'What is the largest planet in our solar system?',
options: ['Earth', 'Saturn', 'Jupiter', 'Uranus'],
answer: 2
},
{
question: 'Who painted the famous painting "The Starry Night"?',
options: ['Leonardo da Vinci', 'Vincent van Gogh', 'Pablo Picasso', 'Claude Monet'],
answer: 1
}
];
let currentQuestion = 0;
function displayQuestion() {
questionElement.textContent = quizQuestions[currentQuestion].question;
optionsElement.innerHTML = '';
quizQuestions[currentQuestion].options.forEach((option, index) => {
const optionElement = document.createElement('div');
optionElement.textContent = option;
optionElement.addEventListener('click', () => {
submitButton.click();
});
optionsElement.appendChild(optionElement);
});
}
function checkAnswer() {
const selectedOption = optionsElement.children[quizQuestions[currentQuestion].answer];
if (selectedOption) {
resultElement.textContent = 'Correct!';
} else {
resultElement.textContent = 'Incorrect!';
}
}
submitButton.addEventListener('click', () => {
checkAnswer();
currentQuestion++;
if (currentQuestion >= quizQuestions.length) {
currentQuestion = 0;
}
displayQuestion();
});
displayQuestion();
```
*Conclusion:*
Congratulations! You've built a simple quiz game using JavaScript. You've learned how to set up the HTML structure, add CSS styles for layout and design, and create a quiz logic.
