Skip to content

Commit

Permalink
Project finished
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexahijado
alexahijado committed Oct 24, 2023
0 parents commit 67ecb79
Show file tree
Hide file tree
Showing 3 changed files with 401 additions and 0 deletions.
180 changes: 180 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,180 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Interactive Quiz</title>
</head>

<body>
<div class="quiz-container">
<h1>Quiz Title</h1>
<div class="question">
<p>Question 1: What is 2 + 2?</p>
<ul class="choices">
<li><input type="radio" name="q1" value="A">A. 3</li>
<li><input type="radio" name="q1" value="B">B. 4</li>
<li><input type="radio" name="q1" value="C">C. 5</li>
</ul>
</div>
<div class="question">
<p>Question 2: Which planet is known as the Red Planet?</p>
<ul class="choices">
<li><input type="radio" name="q2" value="A">A. Mars</li>
<li><input type="radio" name="q2" value="B">B. Venus</li>
<li><input type="radio" name="q2" value="C">C. Jupiter</li>
</ul>
</div>
<div class="question">
<p>Question 3: What is the capital of France?</p>
<ul class="choices">
<li><input type="radio" name="q3" value="A">A. Madrid</li>
<li><input type="radio" name="q3" value="B">B. Berlin</li>
<li><input type="radio" name="q3" value="C">C. Paris</li>
</ul>
</div>
<div class="question">
<p>Question 4: Which gas do plants absorb from the atmosphere?</p>
<ul class="choices">
<li><input type="radio" name="q4" value="A">A. Oxygen</li>
<li><input type="radio" name="q4" value="B">B. Carbon Dioxide</li>
<li><input type="radio" name="q4" value="C">C. Nitrogen</li>
</ul>
</div>
<div class="question">
<p>Question 5: What is the largest mammal in the world?</p>
<ul class="choices">
<li><input type="radio" name="q5" value="A">A. Elephant</li>
<li><input type="radio" name="q5" value="B">B. Giraffe</li>
<li><input type="radio" name="q5" value="C">C. Blue Whale</li>
</ul>
</div>
<div class="question">
<p>Question 6: Which gas makes up the majority of Earth's atmosphere?</p>
<ul class="choices">
<li><input type="radio" name="q6" value="A">A. Oxygen</li>
<li><input type="radio" name="q6" value="B">B. Carbon Dioxide</li>
<li><input type="radio" name="q6" value="C">C. Nitrogen</li>
</ul>
</div>
<div class="question">
<p>Question 7: What is the chemical symbol for gold?</p>
<ul class="choices">
<li><input type="radio" name="q7" value="A">A. Au</li>
<li><input type="radio" name="q7" value="B">B. Ag</li>
<li><input type="radio" name="q7" value="C">C. Fe</li>
</ul>
</div>
<div class="question">
<p>Question 8: How many continents are there in the world?</p>
<ul class="choices">
<li><input type="radio" name="q8" value="A">A. 5</li>
<li><input type="radio" name="q8" value="B">B. 6</li>
<li><input type="radio" name="q8" value="C">C. 7</li>
</ul>
</div>
<div class="question">
<p>Question 9: What is the largest planet in our solar system?</p>
<ul class="choices">
<li><input type="radio" name="q9" value="A">A. Earth</li>
<li><input type="radio" name="q9" value="B">B. Mars</li>
<li><input type="radio" name="q9" value="C">C. Jupiter</li>
</ul>
</div>
<div class="question">
<p>Question 10: What is the tallest mountain in the world?</p>
<ul class="choices">
<li><input type="radio" name="q10" value="A">A. Mount Everest</li>
<li><input type="radio" name="q10" value="B">B. Mount Kilimanjaro</li>
<li><input type="radio" name="q10" value="C">C. Mount McKinley</li>
</ul>
</div>
<div class="question">
<p>Question 11: Who painted the Mona Lisa?</p>
<ul class="choices">
<li><input type="radio" name="q11" value="A">A. Vincent van Gogh</li>
<li><input type="radio" name="q11" value="B">B. Pablo Picasso</li>
<li><input type="radio" name="q11" value="C">C. Leonardo da Vinci</li>
</ul>
</div>
<div class="question">
<p>Question 12: What is the symbol for the element oxygen?</p>
<ul class="choices">
<li><input type="radio" name="q12" value="A">A. O</li>
<li><input type="radio" name="q12" value="B">B. Ox</li>
<li><input type="radio" name="q12" value="C">C. O2</li>
</ul>
</div>
<div class="question">
<p>Question 13: Which country is known as the Land of the Rising Sun?</p>
<ul class="choices">
<li><input type="radio" name="q13" value="A">A. China</li>
<li><input type="radio" name="q13" value="B">B. Japan</li>
<li><input type="radio" name="q13" value="C">C. Korea</li>
</ul>
</div>
<div class="question">
<p>Question 14: What is the largest organ in the human body?</p>
<ul class="choices">
<li><input type="radio" name="q14" value="A">A. Heart</li>
<li><input type="radio" name="q14" value="B">B. Liver</li>
<li><input type="radio" name="q14" value="C">C. Skin</li>
</ul>
</div>
<div class="question">
<p>Question 15: In which year did Christopher Columbus discover America?</p>
<ul class="choices">
<li><input type="radio" name="q15" value="A">A. 1492</li>
<li><input type="radio" name="q15" value="B">B. 1620</li>
<li><input type="radio" name="q15" value="C">C. 1776</li>
</ul>
</div>
<div class="question">
<p>Question 16: What is the chemical symbol for silver?</p>
<ul class= "choices">
<li><input type="radio" name="q16" value="A">A. Si</li>
<li><input type="radio" name="q16" value="B">B. Ag</li>
<li><input type="radio" name="q16" value="C">C. Au</li>
</ul>
</div>
<div class="question">
<p>Question 17: Which gas is responsible for the Earth's ozone layer?</p>
<ul class="choices">
<li><input type="radio" name="q17" value="A">A. Oxygen</li>
<li><input type="radio" name="q17" value="B">B. Carbon Dioxide</li>
<li><input type="radio" name="q17" value="C">C. Ozone</li>
</ul>
</div>
<div class="question">
<p>Question 18: Who wrote the play 'Romeo and Juliet'?</p>
<ul class="choices">
<li><input type="radio" name="q18" value="A">A. William Shakespeare</li>
<li><input type="radio" name="q18" value="B">B. Jane Austen</li>
<li><input type="radio" name="q18" value="C">C. Charles Dickens</li>
</ul>
</div>
<div class="question">
<p>Question 19: What is the largest desert in the world?</p>
<ul class="choices">
<li><input type="radio" name="q19" value="A">A. Gobi Desert</li>
<li><input type="radio" name="q19" value="B">B. Sahara Desert</li>
<li><input type="radio" name="q19" value="C">C. Atacama Desert</li>
</ul>
</div>
<div class="question">
<p>Question 20: What is the chemical symbol for iron?</p>
<ul class="choices">
<li><input type="radio" name="q20" value="A">A. I</li>
<li><input type="radio" name="q20" value="B">B. Ir</li>
<li><input type="radio" name="q20" value="C">C. Fe</li>
</ul>
</div>
<button id="submit">Submit</button>
<div id="results"></div>
</div>
<script src="script.js"></script>
</body>

</html>
167 changes: 167 additions & 0 deletions script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,167 @@
const questions = [
{
question: "What is 2 + 2?",
choices: ["3", "4", "5"],
correctAnswer: "4",
},
{
question: "Which planet is known as the Red Planet?",
choices: ["Mars", "Venus", "Jupiter"],
correctAnswer: "Mars",
},
{
question: "What is the capital of France?",
choices: ["Madrid", "Berlin", "Paris"],
correctAnswer: "Paris",
},
{
question: "Which gas do plants absorb from the atmosphere?",
choices: ["Oxygen", "Carbon Dioxide", "Nitrogen"],
correctAnswer: "Carbon Dioxide",
},
{
question: "What is the largest mammal in the world?",
choices: ["Elephant", "Giraffe", "Blue Whale"],
correctAnswer: "Blue Whale",
},
{
question: "Which gas makes up the majority of Earth's atmosphere?",
choices: ["Oxygen", "Carbon Dioxide", "Nitrogen"],
correctAnswer: "Nitrogen",
},
{
question: "What is the chemical symbol for gold?",
choices: ["Au", "Ag", "Fe"],
correctAnswer: "Au",
},
{
question: "How many continents are there in the world?",
choices: ["5", "6", "7"],
correctAnswer: "7",
},
{
question: "What is the largest planet in our solar system?",
choices: ["Earth", "Mars", "Jupiter"],
correctAnswer: "Jupiter",
},
{
question: "What is the tallest mountain in the world?",
choices: ["Mount Everest", "Mount Kilimanjaro", "Mount McKinley"],
correctAnswer: "Mount Everest",
},
{
question: "Who painted the Mona Lisa?",
choices: ["Vincent van Gogh", "Pablo Picasso", "Leonardo da Vinci"],
correctAnswer: "Leonardo da Vinci",
},
{
question: "What is the symbol for the element oxygen?",
choices: ["O", "Ox", "O2"],
correctAnswer: "O",
},
{
question: "Which country is known as the Land of the Rising Sun?",
choices: ["China", "Japan", "Korea"],
correctAnswer: "Japan",
},
{
question: "What is the largest organ in the human body?",
choices: ["Heart", "Liver", "Skin"],
correctAnswer: "Skin",
},
{
question: "In which year did Christopher Columbus discover America?",
choices: ["1492", "1620", "1776"],
correctAnswer: "1492",
},
{
question: "What is the chemical symbol for silver?",
choices: ["Si", "Ag", "Au"],
correctAnswer: "Ag",
},
{
question: "Which gas is responsible for the Earth's ozone layer?",
choices: ["Oxygen", "Carbon Dioxide", "Ozone"],
correctAnswer: "Ozone",
},
{
question: "Who wrote the play 'Romeo and Juliet'?",
choices: ["William Shakespeare", "Jane Austen", "Charles Dickens"],
correctAnswer: "William Shakespeare",
},
{
question: "What is the largest desert in the world?",
choices: ["Gobi Desert", "Sahara Desert", "Atacama Desert"],
correctAnswer: "Sahara Desert",
},
{
question: "What is the chemical symbol for iron?",
choices: ["I", "Ir", "Fe"],
correctAnswer: "Fe",
}
];

function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}

shuffleArray(questions);

const quizContainer = document.querySelector('.quiz-container');
const resultsContainer = document.getElementById('results');

let currentQuestion = 0;
let score = 0;

function displayQuestion() {
if (currentQuestion < questions.length) {
const questionData = questions[currentQuestion];
const choices = questionData.choices.map((choice, index) => {
return `<li><input type="radio" name="q${currentQuestion + 1}" value="${choice}">${String.fromCharCode(65 + index)}. ${choice}</li>`;
});
quizContainer.innerHTML = `
<h1>Quiz Title</h1>
<div class="question">
<p>${questionData.question}</p>
<ul class="choices">${choices.join('')}</ul>
</div>
<button id="submit">Next</button>
<div id="results">${currentQuestion + 1}/${questions.length} Questions</div>
`;
const nextButton = document.getElementById('submit');
nextButton.addEventListener('click', () => {
checkAnswer();
});
} else {
quizContainer.innerHTML = `<h1>Quiz Completed!</h1><div id="results">Your Score: ${score}/${questions.length}</div>`;
submitButton.style.display = 'none';
}
}

function checkAnswer() {
const selectedAnswer = document.querySelector(`input[name="q${currentQuestion + 1}"]:checked`);
if (selectedAnswer) {
if (selectedAnswer.value === questions[currentQuestion].correctAnswer) {
score++;
displayFeedback(true);
} else {
displayFeedback(false);
}
currentQuestion++;
setTimeout(() => {
displayQuestion();
}, 1000); //Delay the next question by 1 second
}
}

function displayFeedback(isCorrect) {
const feedback = document.createElement('div');
feedback.className = isCorrect ? 'correct' : 'incorrect';
feedback.textContent = isCorrect ? 'Correct!' : 'Incorrect';
quizContainer.appendChild(feedback);
}

displayQuestion();
Loading

0 comments on commit 67ecb79

Please sign in to comment.