Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

solved #4996 #4997

Merged
merged 3 commits into from
Nov 10, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -160,6 +160,7 @@
│ │ ├── Error.html
│ │ ├── about.html
│ │ ├── addremovebook.html
│ │ ├── adv.html
│ │ ├── adventure.html
│ │ ├── assets/
│ │ │ └── css/
Expand Down
186 changes: 186 additions & 0 deletions assets/html/adv.html
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>
24 changes: 24 additions & 0 deletions assets/html/adventure.html
Original file line number Diff line number Diff line change
Expand Up @@ -1219,6 +1219,30 @@ <h1 class="heading">Adventure Books</h1>
<!-- Card Container -->

<h3>Explore each book further by clicking on the covers!</h3></div>
<style>
.butt{
margin-top:10px;
width:400px;
justify-content: center;
}
.buttt{
margin-top:10px;
width:400px;
justify-content: center;
}
a {
text-decoration: none; /* Default state */
}

a:hover {
text-decoration: none; /* Remove underline on hover */
}

</style>
<a href="adv.html" onclick="lenis.scrollTo('#classicq')" data-nav-link>
<button class="butt">Quiz</button>
</a>

<div class="card-container" style="margin-top: -20px;">

<div class="card" onclick="this.classList.toggle('flip')">
Expand Down
1 change: 1 addition & 0 deletions repo_structure.txt
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,7 @@
│ │ ├── Error.html
│ │ ├── about.html
│ │ ├── addremovebook.html
│ │ ├── adv.html
│ │ ├── adventure.html
│ │ ├── assets/
│ │ │ └── css/
Expand Down
Loading