Skip to content

Commit

Permalink
solved anuragverma108#4965 anuragverma108#4966 anuragverma108#4967
Browse files Browse the repository at this point in the history
  • Loading branch information
@KapuluruBhuvaneswariVspdbct
KapuluruBhuvaneswariVspdbct committed Nov 10, 2024
1 parent f8dec9d commit e454b46
Show file tree
Hide file tree
Showing 3 changed files with 307 additions and 0 deletions.
26 changes: 26 additions & 0 deletions assets/html/historical-fiction.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1219,6 +1219,32 @@ <h1 class="heading">Historical Fiction 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="historyq.html" onclick="lenis.scrollTo('#classicq')" data-nav-link>
<button class="butt">Quiz</button>
</a>
<a href="historya.html" onclick="lenis.scrollTo('#classica')" data-nav-link>
<button class="buttt">Approach</button>
</a>
<div class="card-container" style="margin-top: -20px;">

<div class="card" onclick="this.classList.toggle('flip')">
Expand Down
94 changes: 94 additions & 0 deletions assets/html/historya.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
<!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 Historical Fiction Books</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #e9afaf;
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: #006400;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
}

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

<div class="content-container">
<h2>How to Approach Reading Historical Fiction Books</h2>
<p>Historical fiction books blend real history with fictional narratives. Here are some tips to get the most out of this genre:</p>
<ul>
<li><strong>Understand the Historical Context:</strong> Research the period and events depicted in the book to enhance your understanding of the story.</li>
<li><strong>Pay Attention to Character Development:</strong> Historical fiction often focuses on complex characters set against historical backdrops. Observe how they evolve through the challenges of their time.</li>
<li><strong>Reflect on the Historical Themes:</strong> Many historical fiction books explore significant historical events, social issues, and cultural changes. Consider how these themes resonate with today's world.</li>
<li><strong>Embrace the Setting:</strong> The setting is often an integral part of historical fiction. Let the details of the time and place transport you into the world of the story.</li>
<li><strong>Read Multiple Perspectives:</strong> Historical fiction often gives voice to characters from diverse backgrounds. Understanding different viewpoints adds depth to your experience.</li>
</ul>

<h3>Popular Historical Fiction Books</h3>
<ul>
<li><strong>The Nightingale</strong> by Kristin Hannah – A powerful story about two sisters during World War II in Nazi-occupied France.</li>
<li><strong>All the Light We Cannot See</strong> by Anthony Doerr – A haunting novel set during World War II, following a blind French girl and a German soldier.</li>
<li><strong>The Book Thief</strong> by Markus Zusak – A moving tale set in Nazi Germany, narrated by Death, about a young girl's love for books and the people she meets.</li>
<li><strong>Alief Network</strong> by Jasmine Saeed – A gripping story set in a dystopian world, intertwining history and technology.</li>
<li><strong>Homegoing</strong> by Yaa Gyasi – A multi-generational epic following the diverging paths of two half-sisters and their descendants, from slavery in Ghana to America.</li>
<li><strong>The Tattooist of Auschwitz</strong> by Heather Morris – A tale of survival, love, and hope, set in the Auschwitz-Birkenau concentration camp during World War II.</li>
</ul>

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

</body>
</html>
187 changes: 187 additions & 0 deletions assets/html/historyq.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,187 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Historical Fiction Books Quiz</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f69ca1;
color: #090909;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.quiz-container {
background: #ffe3e3;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
width: 300px;
text-align: center;
}

button {
padding: 10px 20px;
margin-top: 20px;
cursor: pointer;
background-color: #e73d3d;
color: white;
border: none;
border-radius: 5px;
display: block;
width: 100%;
}

button:hover {
background-color: #4d2b47;
}

h4 {
margin: 10px 0;
}

.option {
margin: 5px 0;
}

.solution {
margin-top: 10px;
text-align: left;
}
</style>
</head>
<body>

<div class="quiz-container">
<h1>Historical Fiction 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 'The Nightingale'?",
options: ["Kristin Hannah", "J.K. Rowling", "John Green", "Paulo Coelho"],
answer: "Kristin Hannah"
},
{
question: "In 'All the Light We Cannot See', what is the main setting?",
options: ["Paris", "Berlin", "New York", "Saint-Malo"],
answer: "Saint-Malo"
},
{
question: "Which novel features the story of a young girl named Liesel in Nazi Germany?",
options: ["The Book Thief", "The Tattooist of Auschwitz", "The Nightingale", "The Help"],
answer: "The Book Thief"
},
{
question: "In 'Homegoing', what is the main theme?",
options: ["The impact of slavery on generations", "War and peace", "The French Revolution", "The American Dream"],
answer: "The impact of slavery on generations"
},
{
question: "Who is the author of 'The Tattooist of Auschwitz'?",
options: ["Cheryl Strayed", "Heather Morris", "Margaret Atwood", "Sara Gruen"],
answer: "Heather Morris"
}
];

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>

0 comments on commit e454b46

Please sign in to comment.