-
Notifications
You must be signed in to change notification settings - Fork 739
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #4997 from KapuluruBhuvaneswariVspdbct/main
solved #4996
- Loading branch information
Showing
4 changed files
with
212 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,186 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>Adventure Books Quiz</title> | ||
<style> | ||
body { | ||
font-family: Arial, sans-serif; | ||
background-color: #ffd2d3; | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
height: 100vh; | ||
margin: 0; | ||
} | ||
|
||
.quiz-container { | ||
background: white; | ||
padding: 20px; | ||
border-radius: 10px; | ||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); | ||
width: 300px; | ||
text-align: center; | ||
} | ||
|
||
button { | ||
padding: 10px 20px; | ||
margin-top: 20px; | ||
cursor: pointer; | ||
background-color: #b00000; | ||
color: white; | ||
border: none; | ||
border-radius: 5px; | ||
display: block; | ||
width: 100%; | ||
} | ||
|
||
button:hover { | ||
background-color: #870000; | ||
} | ||
|
||
h4 { | ||
margin: 10px 0; | ||
} | ||
|
||
.option { | ||
margin: 5px 0; | ||
} | ||
|
||
.solution { | ||
margin-top: 10px; | ||
text-align: left; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
|
||
<div class="quiz-container"> | ||
<h1>Adventure Books Quiz</h1> | ||
<div id="quiz-questions"> | ||
<!-- Questions will be inserted here --> | ||
</div> | ||
<button id="submit-button" onclick="submitQuiz()">Submit</button> | ||
<div id="quiz-result" style="display: none;"></div> | ||
<button id="home-button" style="display: none;" onclick="window.location.href='index.html';">Return to Home</button> | ||
<button id="solutions-button" style="display: none;" onclick="showSolutions()">See Solutions</button> | ||
</div> | ||
|
||
<script> | ||
const quizData = [ | ||
{ | ||
question: "Who wrote 'Treasure Island'?", | ||
options: ["Robert Louis Stevenson", "Jules Verne", "Herman Melville", "Daniel Defoe"], | ||
answer: "Robert Louis Stevenson" | ||
}, | ||
{ | ||
question: "Which adventure novel features the character Phileas Fogg's journey around the world?", | ||
options: ["Twenty Thousand Leagues Under the Sea", "Around the World in Eighty Days", "Robinson Crusoe", "Moby-Dick"], | ||
answer: "Around the World in Eighty Days" | ||
}, | ||
{ | ||
question: "Who is the author of 'The Call of the Wild'?", | ||
options: ["Jack London", "Mark Twain", "H.G. Wells", "Joseph Conrad"], | ||
answer: "Jack London" | ||
}, | ||
{ | ||
question: "In which book does Captain Ahab obsessively hunt a white whale?", | ||
options: ["Treasure Island", "Heart of Darkness", "Moby-Dick", "Twenty Thousand Leagues Under the Sea"], | ||
answer: "Moby-Dick" | ||
}, | ||
{ | ||
question: "Which author wrote 'The Adventures of Huckleberry Finn'?", | ||
options: ["Robert Louis Stevenson", "Mark Twain", "Jules Verne", "Rudyard Kipling"], | ||
answer: "Mark Twain" | ||
} | ||
]; | ||
|
||
let currentQuestionIndex = 0; | ||
let score = 0; | ||
|
||
function loadQuestion() { | ||
const questionElement = document.getElementById('quiz-questions'); | ||
questionElement.innerHTML = ''; | ||
|
||
const currentQuestion = quizData[currentQuestionIndex]; | ||
const questionText = document.createElement('h4'); | ||
questionText.innerText = currentQuestion.question; | ||
questionElement.appendChild(questionText); | ||
|
||
currentQuestion.options.forEach(option => { | ||
const optionButton = document.createElement('button'); | ||
optionButton.classList.add('option'); | ||
optionButton.innerText = option; | ||
optionButton.onclick = () => selectAnswer(option); | ||
questionElement.appendChild(optionButton); | ||
}); | ||
} | ||
|
||
function selectAnswer(selectedOption) { | ||
const currentQuestion = quizData[currentQuestionIndex]; | ||
if (selectedOption === currentQuestion.answer) { | ||
score++; | ||
} | ||
currentQuestionIndex++; | ||
|
||
if (currentQuestionIndex < quizData.length) { | ||
loadQuestion(); | ||
} else { | ||
showResult(); | ||
} | ||
} | ||
|
||
function showResult() { | ||
const quizContainer = document.querySelector('.quiz-container'); | ||
quizContainer.innerHTML = `<h2>Your Score: ${score}/${quizData.length}</h2>`; | ||
|
||
const homeButton = document.createElement('button'); | ||
homeButton.onclick = () => window.location.href = 'index.html'; | ||
homeButton.innerText = 'Return to Home'; | ||
quizContainer.appendChild(homeButton); | ||
|
||
const solutionsButton = document.createElement('button'); | ||
solutionsButton.onclick = showSolutions; | ||
solutionsButton.innerText = 'See Solutions'; | ||
quizContainer.appendChild(solutionsButton); | ||
} | ||
|
||
function showSolutions() { | ||
const quizContainer = document.querySelector('.quiz-container'); | ||
quizContainer.innerHTML = '<h2>Quiz Solutions</h2>'; | ||
|
||
quizData.forEach((question, index) => { | ||
const solutionElement = document.createElement('div'); | ||
solutionElement.classList.add('solution'); | ||
|
||
const questionText = document.createElement('h4'); | ||
questionText.innerText = `${index + 1}. ${question.question}`; | ||
solutionElement.appendChild(questionText); | ||
|
||
const correctAnswer = document.createElement('p'); | ||
correctAnswer.innerText = `Correct Answer: ${question.answer}`; | ||
solutionElement.appendChild(correctAnswer); | ||
|
||
quizContainer.appendChild(solutionElement); | ||
}); | ||
|
||
const homeButton = document.createElement('button'); | ||
homeButton.onclick = () => window.location.href = 'index.html'; | ||
homeButton.innerText = 'Return to Home'; | ||
quizContainer.appendChild(homeButton); | ||
} | ||
|
||
function submitQuiz() { | ||
if (currentQuestionIndex < quizData.length) { | ||
alert("Please answer all questions before submitting!"); | ||
} else { | ||
showResult(); | ||
} | ||
} | ||
|
||
document.addEventListener('DOMContentLoaded', loadQuestion); | ||
</script> | ||
|
||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters