<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>English Lesson Slideshow: The Rainbow</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Baloo+Da+2:wght@400;500;600&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
}
.bengali {
font-family: 'Baloo Da 2', cursive;
}
.slide {
display: none; /* Hidden by default */
}
.slide.active {
display: block; /* Show active slide */
}
.quiz-option:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
transition: all 0.2s ease-in-out;
}
.step {
transition: background-color 0.3s ease;
}
</style>
</head>
<body class="bg-gray-100 text-gray-800 flex flex-col items-center justify-center min-h-screen p-4">
<div class="w-full max-w-4xl bg-white rounded-2xl shadow-2xl overflow-hidden">
<!-- Header -->
<header class="text-center p-6 bg-gradient-to-r from-blue-500 to-sky-600 text-white">
<h1 class="text-2xl md:text-4xl font-bold">The Rainbow</h1>
</header>
<!-- Slideshow Container -->
<div id="slideshow-container" class="p-6 md:p-8">
<!-- SLIDE 1: Let's Read -->
<div class="slide">
<h2 class="text-2xl font-bold text-center mb-4">1. Let's Read</h2>
<div id="story-passage" class="bg-blue-50 p-6 rounded-lg text-lg leading-relaxed text-gray-700 h-96 overflow-y-auto">
<p class="english-line">Boats sail on the rivers,<br>And ships sail on the seas;<br>But clouds that sail across the sky<br>Are prettier than these.</p>
<p class="bengali text-gray-600 mt-1">নদীতে নৌকা চলে,<br>আর সমুদ্রে চলে জাহাজ;<br>কিন্তু আকাশে ভেসে বেড়ানো মেঘ<br>এদের চেয়েও সুন্দর।</p>
<p class="english-line mt-4">There are bridges on the rivers,<br>As pretty as you please;<br>But the bow that bridges heaven,<br>And overtops the trees,<br>And builds a road from earth to sky,<br>Is prettier far than these.</p>
<p class="bengali text-gray-600 mt-1">নদীর উপর সেতু আছে,<br>যেমনটা তোমার মন চায় সুন্দর;<br>কিন্তু যে ধনুক স্বর্গকে সেতু করে,<br>আর গাছপালাকে ছাড়িয়ে যায়,<br>এবং পৃথিবী থেকে আকাশে একটি রাস্তা তৈরি করে,<br>তা এদের চেয়ে অনেক বেশি সুন্দর।</p>
<p class="mt-4 text-right italic">-Christina Georgina Rossetti</p>
</div>
<div class="text-center mt-6">
<button id="speak-button" class="bg-blue-600 text-white font-semibold py-2 px-6 rounded-lg hover:bg-blue-700 transition-colors flex items-center justify-center mx-auto">
<svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v3a2 2 0 01-2 2H4a2 2 0 01-2-2v-3z"></path></svg>
Listen to Narration
</button>
<p id="speech-error" class="text-red-500 text-sm mt-2 hidden">Sorry, your browser does not support text-to-speech.</p>
</div>
</div>
<!-- SLIDE 2: What We Learn -->
<div class="slide">
<h2 class="text-2xl font-bold text-center mb-4">2. What We Learn</h2>
<div class="bg-green-50 p-6 rounded-lg text-lg leading-relaxed text-gray-700 h-96 overflow-y-auto space-y-4">
<div>
<h3 class="font-bold text-green-800">Nature's Beauty is Supreme</h3>
<p class="english-line">The poem compares man-made things like boats, ships, and bridges with natural things like clouds and the rainbow. It teaches us that while man-made objects can be pretty, the beauty of nature is far superior and more wonderful.</p>
<p class="bengali text-gray-600 mt-1">কবিতাটি নৌকা, জাহাজ এবং সেতুর মতো মনুষ্যসৃষ্ট জিনিসের সাথে মেঘ এবং রামধনুর মতো প্রাকৃতিক জিনিসের তুলনা করে। এটি আমাদের শেখায় যে যদিও মনুষ্যসৃষ্ট বস্তু সুন্দর হতে পারে, প্রকৃতির সৌন্দর্য অনেক উন্নত এবং আরও চমৎকার।</p>
</div>
<div>
<h3 class="font-bold text-green-800">Finding Wonder in the Everyday</h3>
<p class="english-line">The poet finds beauty in common sights like clouds sailing in the sky and a rainbow after the rain. This encourages us to observe our surroundings and find joy and wonder in the simple, everyday beauty of the natural world.</p>
<p class="bengali text-gray-600 mt-1">কবি আকাশে মেঘের ভেসে যাওয়া এবং বৃষ্টির পরে রামধনুর মতো সাধারণ দৃশ্যের মধ্যে সৌন্দর্য খুঁজে পান। এটি আমাদের চারপাশ পর্যবেক্ষণ করতে এবং প্রাকৃতিক বিশ্বের সহজ, দৈনন্দিন সৌন্দর্যের মধ্যে আনন্দ এবং বিস্ময় খুঁজে পেতে উৎসাহিত করে।</p>
</div>
<div>
<h3 class="font-bold text-green-800">Imagination Connects Worlds</h3>
<p class="english-line">The rainbow is imagined as a "bow that bridges heaven" and a "road from earth to sky". This shows the power of imagination to connect our world with something magical and divine, making us see ordinary things in an extraordinary way.</p>
<p class="bengali text-gray-600 mt-1">রামধনুটিকে "স্বর্গকে সেতু করা ধনুক" এবং "পৃথিবী থেকে আকাশে একটি রাস্তা" হিসাবে কল্পনা করা হয়েছে। এটি দেখায় যে কল্পনা আমাদের বিশ্বকে যাদুকরী এবং ঐশ্বরিক কিছুর সাথে সংযুক্ত করার ক্ষমতা রাখে, যা আমাদের সাধারণ জিনিসগুলিকে অসাধারণ উপায়ে দেখতে বাধ্য করে।</p>
</div>
</div>
</div>
<!-- SLIDE 3: Vocabulary Table -->
<div class="slide">
<h2 class="text-2xl font-bold text-center mb-4">3. Vocabulary Table</h2>
<div class="overflow-x-auto h-96">
<table class="w-full bg-white shadow-md rounded-lg text-sm md:text-base">
<thead class="bg-blue-100">
<tr>
<th class="p-3 text-left font-semibold">Word <span class="bengali">(শব্দ)</span></th>
<th class="p-3 text-left font-semibold">Meaning <span class="bengali">(অর্থ)</span></th>
</tr>
</thead>
<tbody>
<tr class="border-b"><td class="p-3"><b>Sail</b> <span class="bengali">পাল তোলা</span></td><td class="p-3">To travel on water; to move smoothly.</td></tr>
<tr class="border-b"><td class="p-3"><b>Prettier</b> <span class="bengali">আরও সুন্দর</span></td><td class="p-3">More beautiful.</td></tr>
<tr class="border-b"><td class="p-3"><b>Bridges</b> <span class="bengali">সেতু তৈরি করা</span></td><td class="p-3">Connects two places.</td></tr>
<tr class="border-b"><td class="p-3"><b>Bow</b> <span class="bengali">ধনুক</span></td><td class="p-3">A curved shape, like a rainbow.</td></tr>
<tr class="border-b"><td class="p-3"><b>Heaven</b> <span class="bengali">স্বর্গ</span></td><td class="p-3">The sky.</td></tr>
<tr class="border-b"><td class="p-3"><b>Overtops</b> <span class="bengali">ছাড়িয়ে যাওয়া</span></td><td class="p-3">Lies above.</td></tr>
</tbody>
</table>
</div>
</div>
<!-- SLIDE 4: Activities 1 & 2 -->
<div class="slide">
<h2 class="text-2xl font-bold text-center mb-4">4. Reading Comprehension</h2>
<div class="h-96 overflow-y-auto pr-2" id="mcq-quiz-container-1">
<h3 class="font-bold text-lg mb-2">Activity 1: Tick the correct alternative</h3>
<div class="quiz-item space-y-2 mb-6"><p class="font-semibold">a. Ships sail on the ___.</p><div class="grid grid-cols-1 md:grid-cols-2 gap-2"><button class="quiz-option p-2 border rounded-md text-left correct">sea</button><button class="quiz-option p-2 border rounded-md text-left">rivers</button></div></div>
<div class="quiz-item space-y-2 mb-6"><p class="font-semibold">b. The poet talks about a bow that bridges ___.</p><div class="grid grid-cols-1 md:grid-cols-2 gap-2"><button class="quiz-option p-2 border rounded-md text-left">the rivers</button><button class="quiz-option p-2 border rounded-md text-left correct">heaven</button></div></div>
<h3 class="font-bold text-lg mt-8 mb-2">Activity 2: Complete the sentences</h3>
<div class="bg-gray-50 p-3 rounded-md mb-4"><p>a. Boats sail on ___.</p><button onclick="toggleAnswer(this)" class="text-sm text-blue-600 font-semibold mt-1">Show Answer</button><p class="hidden mt-1 text-green-600">the rivers</p></div>
<div class="bg-gray-50 p-3 rounded-md mb-4"><p>b. The bow builds ___.</p><button onclick="toggleAnswer(this)" class="text-sm text-blue-600 font-semibold mt-1">Show Answer</button><p class="hidden mt-1 text-green-600">a road from earth to sky</p></div>
</div>
</div>
<!-- SLIDE 5: Activities 4 & 5 -->
<div class="slide">
<h2 class="text-2xl font-bold text-center mb-4">5. More Comprehension</h2>
<div class="h-96 overflow-y-auto pr-2">
<h3 class="font-bold text-lg mb-2">Activity 4: Fill in the chart</h3>
<table class="w-full text-center mb-8">
<thead class="bg-gray-100"><tr><th class="p-2 border">What</th><th class="p-2 border">Where</th></tr></thead>
<tbody>
<tr><td class="p-2 border">Boats sail</td><td class="p-2 border">on the rivers</td></tr>
<tr><td class="p-2 border">Clouds sail</td><td class="p-2 border">across the sky</td></tr>
</tbody>
</table>
<h3 class="font-bold text-lg mt-8 mb-2">Activity 5: Answer the questions</h3>
<div class="bg-gray-50 p-3 rounded-md mb-4"><p>a. What is prettier than boats, ship and clouds?</p><button onclick="toggleAnswer(this)" class="text-sm text-blue-600 font-semibold mt-1">Show Answer</button><p class="hidden mt-1 text-green-600">The rainbow is prettier.</p></div>
<div class="bg-gray-50 p-3 rounded-md mb-4"><p>b. Which, according to the poet, is the prettiest of all objects?</p><button onclick="toggleAnswer(this)" class="text-sm text-blue-600 font-semibold mt-1">Show Answer</button><p class="hidden mt-1 text-green-600">The rainbow is the prettiest.</p></div>
</div>
</div>
<!-- SLIDE 6: Activity 6 (Grammar) -->
<div class="slide">
<h2 class="text-2xl font-bold text-center mb-4">6. Grammar Corner</h2>
<div class="h-96 overflow-y-auto pr-2" id="mcq-quiz-container-2">
<h3 class="font-bold text-lg mb-2">Activity 6(a): Countable and Uncountable Nouns</h3>
<div class="quiz-item space-y-2 mb-6"><p class="font-semibold">Which of these is a countable noun?</p><div class="grid grid-cols-1 md:grid-cols-2 gap-2"><button class="quiz-option p-2 border rounded-md text-left correct">stars</button><button class="quiz-option p-2 border rounded-md text-left">breeze</button></div></div>
<h3 class="font-bold text-lg mt-8 mb-2">Activity 6(b): Collective and Abstract Nouns</h3>
<div class="quiz-item space-y-2 mb-6"><p class="font-semibold">"A <u>troop</u> came marching on." - 'Troop' is a ___ noun.</p><div class="grid grid-cols-1 md:grid-cols-2 gap-2"><button class="quiz-option p-2 border rounded-md text-left correct">Collective</button><button class="quiz-option p-2 border rounded-md text-left">Abstract</button></div></div>
<div class="quiz-item space-y-2 mb-6"><p class="font-semibold">"The old man is known for his <u>wisdom</u>." - 'Wisdom' is a ___ noun.</p><div class="grid grid-cols-1 md:grid-cols-2 gap-2"><button class="quiz-option p-2 border rounded-md text-left">Collective</button><button class="quiz-option p-2 border rounded-md text-left correct">Abstract</button></div></div>
<h3 class="font-bold text-lg mt-8 mb-2">Activity 6(c): Verb Forms</h3>
<div class="quiz-item space-y-2 mb-6"><p class="font-semibold">She ___ singing a song.</p><div class="grid grid-cols-1 md:grid-cols-2 gap-2"><button class="quiz-option p-2 border rounded-md text-left correct">is</button><button class="quiz-option p-2 border rounded-md text-left">was</button></div></div>
</div>
</div>
<!-- SLIDE 7: Activities 7 & 8 -->
<div class="slide">
<h2 class="text-2xl font-bold text-center mb-4">7. Vocabulary & Writing</h2>
<div class="h-96 overflow-y-auto pr-2" id="mcq-quiz-container-3">
<h3 class="font-bold text-lg mb-2">Activity 7(a): Fill in the blanks</h3>
<div class="quiz-item space-y-2 mb-6"><p class="font-semibold">a. She has a ___ blue skirt.</p><div class="grid grid-cols-1 md:grid-cols-2 gap-2"><button class="quiz-option p-2 border rounded-md text-left">sail</button><button class="quiz-option p-2 border rounded-md text-left correct">pretty</button></div></div>
<h3 class="font-bold text-lg mt-8 mb-2">Activity 7(b): Make sentences</h3>
<div class="bg-gray-50 p-3 rounded-md mb-4"><p>Use 'bridge' in a sentence:</p><button onclick="toggleAnswer(this)" class="text-sm text-blue-600 font-semibold mt-1">Show Answer</button><p class="hidden mt-1 text-green-600">The old bridge was strong and sturdy.</p></div>
<h3 class="font-bold text-lg mt-8 mb-2">Activity 8(a): Describe a rainbow</h3>
<div class="bg-gray-50 p-4 rounded-lg text-base space-y-2">
<p>1. After a heavy shower, a magnificent rainbow appeared.</p>
<p>2. It displayed beautiful bands of violet, indigo, blue, green, yellow, orange, and red.</p>
<p>3. It looked like a bridge to heaven, filling me with wonder and joy.</p>
</div>
</div>
</div>
<!-- SLIDE 8: Online Test -->
<div class="slide">
<h2 class="text-2xl font-bold text-center mb-4">8. Online Test (30 Marks)</h2>
<div id="question-paper-form" class="space-y-6 max-w-2xl mx-auto h-96 overflow-y-auto pr-2 text-base">
<div>
<h3 class="font-bold text-lg mb-2">A. Fill in the blanks (5 Marks):</h3>
<ol class="list-decimal list-inside space-y-3">
<li>Boats sail on the <input type="text" id="fill-1" class="border rounded px-2 py-1 w-24">.</li>
<li>Clouds sail across the <input type="text" id="fill-2" class="border rounded px-2 py-1 w-24">.</li>
<li>Bridges are built on the <input type="text" id="fill-3" class="border rounded px-2 py-1 w-24">.</li>
<li>The rainbow overtops the <input type="text" id="fill-4" class="border rounded px-2 py-1 w-24">.</li>
<li>The bow builds a road from earth to <input type="text" id="fill-5" class="border rounded px-2 py-1 w-24">.</li>
</ol>
</div>
<div>
<h3 class="font-bold text-lg mb-2">B. Write 'T' for True and 'F' for False (5 Marks):</h3>
<ol class="list-decimal list-inside space-y-3">
<li>Ships are prettier than clouds. <input type="text" id="tf-1" class="border rounded px-2 py-1 w-12 text-center"></li>
<li>The poem is written by Christina Georgina Rossetti. <input type="text" id="tf-2" class="border rounded px-2 py-1 w-12 text-center"></li>
<li>The bow that bridges heaven is a bridge. <input type="text" id="tf-3" class="border rounded px-2 py-1 w-12 text-center"></li>
<li>The rainbow is prettier than the bridges on the rivers. <input type="text" id="tf-4" class="border rounded px-2 py-1 w-12 text-center"></li>
<li>The poet does not like boats and ships. <input type="text" id="tf-5" class="border rounded px-2 py-1 w-12 text-center"></li>
</ol>
</div>
<div>
<h3 class="font-bold text-lg mb-2">C. Match the columns (5 Marks):</h3>
<div class="space-y-2">
<p>1. Sail: <select id="match-1" class="border rounded px-2 py-1"><option value="">Select...</option><option value="a">a. More beautiful</option><option value="b">b. Travel on water</option><option value="c">c. Lies above</option></select></p>
<p>2. Prettier: <select id="match-2" class="border rounded px-2 py-1"><option value="">Select...</option><option value="a">a. More beautiful</option><option value="b">b. Travel on water</option><option value="c">c. Lies above</option></select></p>
<p>3. Overtops: <select id="match-3" class="border rounded px-2 py-1"><option value="">Select...</option><option value="a">a. More beautiful</option><option value="b">b. Travel on water</option><option value="c">c. Lies above</option></select></p>
<p>4. Honesty: <select id="match-4" class="border rounded px-2 py-1"><option value="">Select...</option><option value="a">a. Collective Noun</option><option value="b">b. Abstract Noun</option></select></p>
<p>5. Fleet: <select id="match-5" class="border rounded px-2 py-1"><option value="">Select...</option><option value="a">a. Collective Noun</option><option value="b">b. Abstract Noun</option></select></p>
</div>
</div>
<div>
<h3 class="font-bold text-lg mb-2">D. Answer the following questions (15 Marks):</h3>
<ol class="list-decimal list-inside space-y-3">
<li>Where do ships sail? (3 Marks)<br> <input type="text" id="ans-1" class="border rounded px-2 py-1 w-full mt-1"></li>
<li>What is prettier than boats and ships? (3 Marks)<br> <input type="text" id="ans-2" class="border rounded px-2 py-1 w-full mt-1"></li>
<li>What does the bow in the poem refer to? (3 Marks)<br> <input type="text" id="ans-3" class="border rounded px-2 py-1 w-full mt-1"></li>
<li>What does the bow do? (Name two things) (3 Marks)<br> <input type="text" id="ans-4" class="border rounded px-2 py-1 w-full mt-1"></li>
<li>What is the main idea of the poem? (3 Marks)<br> <input type="text" id="ans-5" class="border rounded px-2 py-1 w-full mt-1"></li>
</ol>
</div>
<button id="submit-test-button" class="bg-green-600 text-white font-semibold py-2 px-6 rounded-lg hover:bg-green-700 transition-colors">Submit Answers</button>
<div id="test-score-display" class="text-xl font-bold text-center mt-4"></div>
</div>
</div>
</div>
<!-- Navigation -->
<div class="p-6 bg-gray-50 border-t flex justify-between items-center">
<div id="step-indicators" class="flex items-center space-x-2 flex-wrap">
<!-- Steps will be generated by JS -->
</div>
<div>
<button id="prev-button" class="bg-gray-300 text-gray-800 font-semibold py-2 px-5 rounded-lg hover:bg-gray-400 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">Previous</button>
<button id="next-button" class="bg-blue-600 text-white font-semibold py-2 px-5 rounded-lg hover:bg-blue-700 transition-colors">Next</button>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
let currentSlide = 0;
const slides = document.querySelectorAll('.slide');
const stepContainer = document.getElementById('step-indicators');
for(let i = 0; i < slides.length; i++) {
const step = document.createElement('div');
step.className = 'step h-2 w-6 rounded-full';
stepContainer.appendChild(step);
}
const steps = document.querySelectorAll('.step');
const nextButton = document.getElementById('next-button');
const prevButton = document.getElementById('prev-button');
const speakButton = document.getElementById('speak-button');
const mcqContainers = [
document.getElementById('mcq-quiz-container-1'),
document.getElementById('mcq-quiz-container-2'),
document.getElementById('mcq-quiz-container-3')
];
const passageContainer = document.getElementById('story-passage');
let fullNarrationText = '';
if (passageContainer) {
const lines = passageContainer.querySelectorAll('.english-line, .bengali');
lines.forEach(line => {
fullNarrationText += line.textContent.trim() + ' ';
});
}
function showSlide(n) {
slides.forEach(slide => slide.classList.remove('active'));
slides[n].classList.add('active');
steps.forEach((step, index) => {
step.classList.toggle('bg-gray-300', index !== n);
step.classList.toggle('bg-blue-600', index === n);
});
prevButton.disabled = n === 0;
nextButton.disabled = n === slides.length - 1;
currentSlide = n;
}
nextButton.addEventListener('click', () => {
if (currentSlide < slides.length - 1) showSlide(currentSlide + 1);
});
prevButton.addEventListener('click', () => {
if (currentSlide > 0) showSlide(currentSlide - 1);
});
if (speakButton) {
if ('speechSynthesis' in window) {
speakButton.addEventListener('click', () => {
speechSynthesis.cancel();
const utterance = new SpeechSynthesisUtterance(fullNarrationText);
utterance.lang = 'en-US';
speechSynthesis.speak(utterance);
});
} else {
document.getElementById('speech-error').classList.remove('hidden');
speakButton.disabled = true;
}
}
const mcqQuizClickHandler = function(e) {
if (e.target.classList.contains('quiz-option') && !e.target.disabled) {
const parentItem = e.target.closest('.quiz-item');
parentItem.querySelectorAll('.quiz-option').forEach(opt => { opt.disabled = true; });
if (e.target.classList.contains('correct')) {
e.target.classList.add('bg-green-100', 'border-green-500');
} else {
e.target.classList.add('bg-red-100', 'border-red-500');
parentItem.querySelector('.correct').classList.add('bg-green-100', 'border-green-500');
}
}
};
mcqContainers.forEach(container => {
if (container) container.addEventListener('click', mcqQuizClickHandler);
});
const submitTestButton = document.getElementById('submit-test-button');
if (submitTestButton) {
submitTestButton.addEventListener('click', () => {
let score = 0;
const totalMarks = 30;
// Fill in the blanks (1 mark each)
if (document.getElementById('fill-1').value.trim().toLowerCase() === 'rivers') score += 1;
if (document.getElementById('fill-2').value.trim().toLowerCase() === 'sky') score += 1;
if (document.getElementById('fill-3').value.trim().toLowerCase() === 'rivers') score += 1;
if (document.getElementById('fill-4').value.trim().toLowerCase() === 'trees') score += 1;
if (document.getElementById('fill-5').value.trim().toLowerCase() === 'sky') score += 1;
// True/False (1 mark each)
if (document.getElementById('tf-1').value.trim().toUpperCase() === 'F') score += 1;
if (document.getElementById('tf-2').value.trim().toUpperCase() === 'T') score += 1;
if (document.getElementById('tf-3').value.trim().toUpperCase() === 'F') score += 1;
if (document.getElementById('tf-4').value.trim().toUpperCase() === 'T') score += 1;
if (document.getElementById('tf-5').value.trim().toUpperCase() === 'F') score += 1;
// Matching (1 mark each)
if (document.getElementById('match-1').value === 'b') score += 1;
if (document.getElementById('match-2').value === 'a') score += 1;
if (document.getElementById('match-3').value === 'c') score += 1;
if (document.getElementById('match-4').value === 'b') score += 1;
if (document.getElementById('match-5').value === 'a') score += 1;
// Short Answers (3 marks each)
const ans1 = document.getElementById('ans-1').value.trim().toLowerCase();
if (ans1.includes('seas')) score += 3;
const ans2 = document.getElementById('ans-2').value.trim().toLowerCase();
if (ans2.includes('clouds')) score += 3;
const ans3 = document.getElementById('ans-3').value.trim().toLowerCase();
if (ans3.includes('rainbow')) score += 3;
const ans4 = document.getElementById('ans-4').value.trim().toLowerCase();
if ((ans4.includes('bridges heaven') && ans4.includes('overtops the trees')) || ans4.includes('road')) score += 3;
const ans5 = document.getElementById('ans-5').value.trim().toLowerCase();
if (ans5.includes('nature') && ans5.includes('prettier') || ans5.includes('man-made')) score += 3;
const scoreDisplay = document.getElementById('test-score-display');
scoreDisplay.textContent = `Your Score: ${score} / ${totalMarks}`;
submitTestButton.disabled = true;
submitTestButton.textContent = 'Submitted';
submitTestButton.classList.remove('bg-green-600', 'hover:bg-green-700');
submitTestButton.classList.add('bg-gray-400', 'cursor-not-allowed');
});
}
showSlide(0);
});
function toggleAnswer(button) {
const answerEl = button.nextElementSibling;
answerEl.classList.toggle('hidden');
button.textContent = answerEl.classList.contains('hidden') ? 'Show Answer' : 'Hide Answer';
}
</script>
</body>
</html>
