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 #4938 #4939 #4940 #4943

Merged
merged 2 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
2 changes: 2 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -191,6 +191,8 @@
│ │ ├── experimental-fiction.html
│ │ ├── fairytale.html
│ │ ├── fantasy.html
│ │ ├── fantasya.html
│ │ ├── fantasyq.html
│ │ ├── fine.html
│ │ ├── forgot-pass.html
│ │ ├── freeBooks.html
Expand Down
36 changes: 31 additions & 5 deletions assets/html/fantasy.html
Original file line number Diff line number Diff line change
Expand Up @@ -1192,16 +1192,42 @@ <h3>XYZ<br /><span>Book Lover</span></h3>

</div>
</header>



<!-- Changes here -->

<h1 class="heading">Fantasy Books</h1>

<!-- Card Container -->
<h3>Explore each book further by clicking on the covers!</h3></div>
<div class="card-container" style="margin-top: -20px;">


<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="fantasyq.html" onclick="lenis.scrollTo('#classicq')" data-nav-link>
<button class="butt">Quiz</button>
</a>
<a href="fantasya.html" onclick="lenis.scrollTo('#classica')" data-nav-link>
<button class="buttt">Approach</button>
</a>

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

<div class="card" onclick="this.classList.toggle('flip')">
<div class="card-inner">
Expand Down
95 changes: 95 additions & 0 deletions assets/html/fantasya.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Approach to Reading Fantasy Literature</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #e0c3ff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.content-container {
background: white;
padding: 15px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 70%;
max-width: 800px;
text-align: center;
margin-top: 150px;
}

h2 {
margin-bottom: 15px;
}

h3 {
text-align: left;
margin-top: 20px;
}

p, ul {
text-align: left;
}

ul {
margin: 10px 0;
padding-left: 20px;
}

ul li {
margin: 8px 0;
}

button {
padding: 10px 20px;
margin-top: 20px;
cursor: pointer;
background-color: #6b2d5c;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
}

button:hover {
background-color: #512144;
}
</style>
</head>
<body>

<div class="content-container">
<h2>How to Approach Reading Fantasy Literature</h2>
<p>Fantasy literature opens doors to magical worlds and grand adventures. Here are some tips to enhance your journey into these enchanting realms:</p>
<ul>
<li><strong>Begin with a Classic:</strong> Starting with well-known fantasy books can help you get a feel for the genre. <em>The Hobbit</em> or <em>The Chronicles of Narnia</em> are excellent options.</li>
<li><strong>Embrace World-Building:</strong> Fantasy often involves intricate worlds with unique rules. Take time to absorb details about the setting, magic systems, and cultures.</li>
<li><strong>Follow the Characters’ Growth:</strong> Many fantasy novels are character-driven. Pay attention to their journey, development, and relationships.</li>
<li><strong>Note Recurring Themes:</strong> Fantasy literature often explores themes of courage, friendship, and the battle between good and evil. Recognizing these can deepen your experience.</li>
<li><strong>Use Maps and Glossaries:</strong> Many fantasy books come with maps or glossaries—refer to these for a better understanding of locations and terms.</li>
<li><strong>Join a Book Community:</strong> Discussing fantasy books with others can add to your enjoyment and help you discover new series.</li>
</ul>

<h3>Popular Fantasy Books</h3>
<ul>
<li><strong>Harry Potter and the Sorcerer’s Stone</strong> by J.K. Rowling – The start of a magical journey at Hogwarts School of Witchcraft and Wizardry.</li>
<li><strong>The Hobbit</strong> by J.R.R. Tolkien – A classic tale of adventure, courage, and the discovery of unexpected strength.</li>
<li><strong>The Name of the Wind</strong> by Patrick Rothfuss – A captivating story of a young prodigy navigating magic, mystery, and personal quests.</li>
<li><strong>A Game of Thrones</strong> by George R.R. Martin – A complex tale of power, politics, and survival in a richly detailed world.</li>
<li><strong>The Chronicles of Narnia</strong> by C.S. Lewis – An epic series exploring magic, bravery, and friendship through a world beyond the wardrobe.</li>
<li><strong>The Wheel of Time</strong> by Robert Jordan – A vast and immersive series following the battle between light and dark across generations.</li>
</ul>

<button onclick="window.location.href='fantasy.html';">Return to Home</button>
</div>

</body>
</html>
186 changes: 186 additions & 0 deletions assets/html/fantasyq.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>Fantasy 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>Fantasy 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 is the author of 'The Hobbit'?",
options: ["J.K. Rowling", "George R.R. Martin", "J.R.R. Tolkien", "Patrick Rothfuss"],
answer: "J.R.R. Tolkien"
},
{
question: "What is the first book in the 'Harry Potter' series?",
options: ["Harry Potter and the Chamber of Secrets", "Harry Potter and the Sorcerer's Stone", "Harry Potter and the Goblet of Fire", "Harry Potter and the Order of the Phoenix"],
answer: "Harry Potter and the Sorcerer's Stone"
},
{
question: "In 'A Game of Thrones', what is the motto of House Stark?",
options: ["Hear Me Roar!", "Winter is Coming", "Fire and Blood", "We Do Not Sow"],
answer: "Winter is Coming"
},
{
question: "Who is the protagonist of 'The Name of the Wind'?",
options: ["Kvothe", "Rand al'Thor", "Harry Potter", "Frodo Baggins"],
answer: "Kvothe"
},
{
question: "Which magical land is accessed through a wardrobe in 'The Chronicles of Narnia'?",
options: ["Middle-earth", "Narnia", "Westeros", "Hogwarts"],
answer: "Narnia"
}
];

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 = 'quizzes.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>
2 changes: 2 additions & 0 deletions repo_structure.txt
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,8 @@
│ │ ├── experimental-fiction.html
│ │ ├── fairytale.html
│ │ ├── fantasy.html
│ │ ├── fantasya.html
│ │ ├── fantasyq.html
│ │ ├── fine.html
│ │ ├── forgot-pass.html
│ │ ├── freeBooks.html
Expand Down
Loading