Equator teaching
Prompt
Create an interactive resource to teach the equator to grade 3 students and the equators relationship to the climate.
A system prompt was added to support web rendering
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Let’s Explore the Equator!</title>
<!-- Simple styling -->
<style>
body{
font-family: "Comic Sans MS", "Arial Rounded MT", cursive;
background:#f0fdfb;
color:#033;
text-align:center;
margin:0;
padding:0 10px;
}
h1{
background:#00bcd4;
color:white;
margin:0 -10px 20px -10px;
padding:20px 10px;
font-size:2.2em;
}
section{max-width:900px;margin:0 auto 40px auto;}
canvas{background:#007acc;border-radius:50%;box-shadow:0 0 10px rgba(0,0,0,.3);}
#controls{margin:15px 0;}
#latValue{font-weight:bold;}
/* thermometer */
#thermoWrapper{
display:inline-block;
height:170px;
width:60px;
background:#ddd;
border-radius:30px;
position:relative;
margin-left:30px;
}
#mercury{
position:absolute;
bottom:10px;
left:50%;
transform:translateX(-50%);
width:30px;
background:#ff5252;
border-radius:15px 15px 5px 5px;
}
#climateText{
font-size:1.3em;
margin-top:8px;
}
/* quiz */
#quiz input[type=radio]{margin-right:5px;}
#result{font-weight:bold;font-size:1.2em;margin-top:10px;}
button{
background:#ff9800;
border:none;
color:white;
padding:10px 20px;
font-size:1em;
border-radius:8px;
cursor:pointer;
}
button:hover{background:#fb8c00;}
</style>
</head>
<body>
<h1>Welcome, Young Explorers!</h1>
<!-- 1. Meet the Equator -->
<section>
<h2>1. Meet the Equator</h2>
<p>The equator is an imaginary line that wraps around the middle of the Earth like a belt.
Places near the equator get lots of direct sunshine, so they are usually hot and rainy.
Let’s see it on our mini-Earth below:</p>
<canvas id="earthCanvas" width="500" height="300" aria-label="Interactive Earth"></canvas>
</section>
<!-- 2. Play with Sunlight -->
<section>
<h2>2. Play with Sunlight</h2>
<p>Slide the button to move from the North Pole (90° N) through the Equator (0°) to the South Pole (90° S)
and watch how the sunshine and temperature change!</p>
<div id="controls">
Latitude: <span id="latValue">0</span>°
<br>
<input type="range" id="latSlider" min="-90" max="90" value="0" step="1" style="width:70%;">
</div>
<!-- thermometer & climate label -->
<div style="display:flex;justify-content:center;align-items:center;">
<div id="thermoWrapper">
<div id="mercury" style="height:90%;"></div>
</div>
<div id="climateText">Hot (Tropical)</div>
</div>
</section>
<!-- 3. Quick Quiz -->
<section>
<h2>3. Quick Quiz</h2>
<form id="quiz">
<p>1) The equator is closest to: <br>
<label><input type="radio" name="q1" value="a"> The North Pole</label><br>
<label><input type="radio" name="q1" value="b"> The Middle of Earth</label><br>
<label><input type="radio" name="q1" value="c"> The South Pole</label>
</p>
<p>2) The climate near the equator is usually: <br>
<label><input type="radio" name="q2" value="a"> Very Cold</label><br>
<label><input type="radio" name="q2" value="b"> Hot and Rainy</label><br>
<label><input type="radio" name="q2" value="c"> Snowy All Year</label>
</p>
<p>3) Which animal might live near the equator? <br>
<label><input type="radio" name="q3" value="a"> Polar Bear</label><br>
<label><input type="radio" name="q3" value="b"> Penguin</label><br>
<label><input type="radio" name="q3" value="c"> Toucan</label>
</p>
<button type="button" onclick="checkQuiz()">Check Answers</button>
<div id="result"></div>
</form>
</section>
<!-- JavaScript -->
<script>
/* ------------ DRAW EARTH & SUN ------------ */
const canvas = document.getElementById('earthCanvas');
const ctx = canvas.getContext('2d');
const earth = {
cx: 330, // center x of Earth circle
cy: 150, // center y
r : 110 // radius
};
const sun = { x: 90, y: 150, r: 40 };
function drawScene(lat){ // lat in degrees, north positive
ctx.clearRect(0,0,canvas.width,canvas.height);
/* Sun */
ctx.fillStyle = '#ffeb3b';
ctx.beginPath();
ctx.arc(sun.x, sun.y, sun.r, 0, Math.PI*2);
ctx.fill();
// sun rays
ctx.strokeStyle='#ffe082';
ctx.lineWidth=4;
for(let i=-1;i<=1;i++){
ctx.beginPath();
ctx.moveTo(sun.x+sun.r, sun.y+i*20);
ctx.lineTo(earth.cx-earth.r, sun.y+i*20);
ctx.stroke();
}
/* Earth */
// ocean
ctx.fillStyle = '#0066cc';
ctx.beginPath();
ctx.arc(earth.cx, earth.cy, earth.r, 0, Math.PI*2);
ctx.fill();
// Equator
ctx.strokeStyle = '#ff0000';
ctx.lineWidth = 3;
const eqY = earth.cy;
ctx.beginPath();
ctx.moveTo(earth.cx-earth.r, eqY);
ctx.lineTo(earth.cx+earth.r, eqY);
ctx.stroke();
// other latitude lines (every 30°)
ctx.strokeStyle = 'rgba(255,255,255,0.6)';
ctx.lineWidth = 1;
[30,60,-30,-60].forEach(function(l){
const y = earth.cy - earth.r*(l/90);
ctx.beginPath();
ctx.moveTo(earth.cx-earth.r*Math.cos(Math.asin((l)/90)), y);
ctx.lineTo(earth.cx+earth.r*Math.cos(Math.asin((l)/90)), y);
ctx.stroke();
});
// Position dot for current latitude
const yPos = earth.cy - earth.r*(lat/90);
const xPos = earth.cx + Math.sqrt(Math.max(0, earth.r**2 - (earth.r*(lat/90))**2)); // right edge
ctx.fillStyle = '#ffffff';
ctx.beginPath();
ctx.arc(xPos, yPos, 6, 0, Math.PI*2);
ctx.fill();
// Draw a line (sun-ray) from sun to the dot
ctx.strokeStyle='#ffe082';
ctx.lineWidth=2;
ctx.beginPath();
ctx.moveTo(sun.x+sun.r, sun.y);
ctx.lineTo(xPos-2, yPos);
ctx.stroke();
}
/* ------------ SLIDER INTERACTION ------------ */
const slider = document.getElementById('latSlider');
const latLabel = document.getElementById('latValue');
const mercury = document.getElementById('mercury');
const climateT = document.getElementById('climateText');
function updateDisplay(){
const lat = parseInt(slider.value);
latLabel.textContent = lat;
// update Earth drawing
drawScene(lat);
// update climate text and thermometer
const absLat = Math.abs(lat);
let climate, perc, color;
if(absLat<=15){climate="Hot (Tropical)";perc=90;color='#ff5252';}
else if(absLat<=45){climate="Warm (Temperate)";perc=65;color='#ff7043';}
else if(absLat<=75){climate="Cool (Cool)";perc=40;color='#29b6f6';}
else {climate="Cold (Polar)";perc=20;color='#1565c0';}
climateT.textContent = climate;
mercury.style.height = perc + "%";
mercury.style.background = color;
}
slider.addEventListener('input', updateDisplay);
updateDisplay(); // initial draw
/* ------------ QUIZ ------------ */
function checkQuiz(){
const answers = {q1:'b', q2:'b', q3:'c'};
let score=0;
for(let q in answers){
const choice = document.querySelector('input[name="'+q+'"]:checked');
if(choice && choice.value===answers[q]) score++;
}
const result = document.getElementById('result');
if(score===3) result.textContent="Great job! You got all "+score+" right!";
else result.textContent="You got "+score+" out of 3. Try again!";
}
</script>
</body>
</html>
```Drag to resize
This interactive lesson will take you on a journey to the middle of the world to learn about the equator and why it's so warm and sunny there! Click, explore, and take the quiz at the end to become an equator expert.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Explore the Equator!</title>
<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=Baloo+2:wght@400;700&display=swap" rel="stylesheet">
<style>
:root {
--primary-blue: #3498db;
--primary-green: #2ecc71;
--primary-yellow: #f1c40f;
--primary-orange: #e67e22;
--text-dark: #34495e;
--bg-light: #ecf0f1;
--white: #ffffff;
--polar-blue: #aed6f1;
--tropical-green: #a9dfbf;
}
body {
font-family: 'Baloo 2', cursive;
background-color: var(--bg-light);
color: var(--text-dark);
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.container {
max-width: 900px;
width: 100%;
background: var(--white);
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
padding: 20px 40px;
}
header {
text-align: center;
border-bottom: 3px dashed var(--primary-blue);
margin-bottom: 20px;
padding-bottom: 10px;
}
header h1 {
font-size: 3em;
color: var(--primary-blue);
margin: 0;
}
header p {
font-size: 1.2em;
margin-top: 5px;
}
section {
margin-bottom: 40px;
}
h2 {
font-size: 2.2em;
color: var(--primary-orange);
text-align: center;
margin-bottom: 20px;
}
p {
font-size: 1.1em;
line-height: 1.6;
}
/* --- Section 1: What is the Equator --- */
.earth-container {
position: relative;
width: 300px;
height: 300px;
margin: 20px auto;
cursor: pointer;
}
.earth-svg {
width: 100%;
height: 100%;
}
.equator-line {
position: absolute;
left: -10%;
right: -10%;
top: 50%;
height: 4px;
background: repeating-linear-gradient(-45deg, red, red 10px, yellow 10px, yellow 20px);
transform: translateY(-50%);
z-index: 2;
}
.equator-label {
position: absolute;
top: 50%;
left: 105%;
transform: translateY(-50%);
background: red;
color: white;
padding: 5px 10px;
border-radius: 5px;
font-weight: bold;
z-index: 3;
}
/* --- Section 2: Sun's Rays --- */
.sun-diagram {
display: flex;
align-items: center;
justify-content: space-around;
height: 300px;
position: relative;
}
.sun-svg, .earth-tilt-svg {
width: 150px;
height: 150px;
}
.sun-svg {
width: 200px;
height: 200px;
}
#sun-button {
display: block;
margin: 20px auto 0;
padding: 15px 30px;
font-size: 1.2em;
font-family: 'Baloo 2', cursive;
font-weight: bold;
color: var(--white);
background-color: var(--primary-yellow);
border: none;
border-radius: 30px;
cursor: pointer;
transition: transform 0.2s, background-color 0.2s;
box-shadow: 0 4px 10px rgba(241, 196, 15, 0.5);
}
#sun-button:hover {
transform: scale(1.05);
background-color: #f39c12;
}
.sunbeam {
position: absolute;
background: linear-gradient(to right, rgba(251, 197, 49, 0.8), rgba(251, 197, 49, 0));
height: 8px;
width: 0;
left: 200px;
border-radius: 4px;
opacity: 0;
transition: width 1.5s ease-out, opacity 1s ease-out;
}
.sunbeam.animate{
width: 380px;
opacity: 1;
}
#beam1 { top: 146px; } /* Equator */
#beam2 { top: 90px; transform: rotate(20deg); transform-origin: left center; } /* North */
#beam3 { top: 202px; transform: rotate(-20deg); transform-origin: left center; } /* South */
#beam1.direct { height: 12px; }
.explanation-box {
text-align: center;
background: #fffbe6;
border: 2px dashed #f1c40f;
padding: 15px;
border-radius: 10px;
margin-top:20px;
}
/* --- Section 3: Climate Zones --- */
.climate-map-container {
position: relative;
width: 400px;
height: 400px;
margin: auto;
}
.climate-earth-svg {
width: 100%;
height: 100%;
}
.zone {
position: absolute;
width: 100%;
cursor: pointer;
transition: background-color 0.3s;
}
.zone:hover {
background-color: rgba(255, 255, 255, 0.3);
}
#zone-polar-north { top: 0; height: 25%; border-radius: 200px 200px 0 0; }
#zone-temperate-north { top: 25%; height: 25%; }
#zone-tropical { top: 40%; height: 20%; background-color: rgba(255, 255, 255, 0.1); }
#zone-temperate-south { bottom: 25%; height: 25%; }
#zone-polar-south { bottom: 0; height: 25%; border-radius: 0 0 200px 200px; }
/* Modal Popup Styling */
.modal {
display: none;
position: fixed;
z-index: 100;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.5);
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
-webkit-animation-duration: 0.4s;
animation-duration: 0.4s
}
@-webkit-keyframes fadeIn { from {opacity: 0} to {opacity: 1} }
@keyframes fadeIn { from {opacity: 0} to {opacity: 1} }
.modal-content {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fefefe;
padding: 30px;
border: 1px solid #888;
width: 80%;
max-width: 500px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
border-radius: 15px;
text-align: center;
-webkit-animation-name: slideIn;
animation-name: slideIn;
-webkit-animation-duration: 0.4s;
animation-duration: 0.4s
}
@-webkit-keyframes slideIn { from {top: -300px; opacity: 0} to {top: 50%; opacity: 1} }
@keyframes slideIn { from {top: -300px; opacity: 0} to {top: 50%; opacity: 1} }
.close-button {
color: #aaa;
position: absolute;
top: 10px;
right: 20px;
font-size: 35px;
font-weight: bold;
}
.close-button:hover, .close-button:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.modal-content h3 { font-size: 2em; margin-top: 0; }
.modal-content p { font-size: 1.2em; }
.modal-content .animal-svg { width: 100px; height: 100px; margin-top: 10px; }
/* --- Section 4: Quiz --- */
.quiz-question {
background: #f9f9f9;
border-left: 5px solid var(--primary-green);
padding: 20px;
margin-bottom: 20px;
border-radius: 8px;
}
.quiz-question p {
font-weight: bold;
font-size: 1.3em;
margin-top: 0;
}
.quiz-options button {
display: inline-block;
background: var(--primary-blue);
color: var(--white);
border: none;
padding: 10px 20px;
margin: 5px;
border-radius: 20px;
cursor: pointer;
font-family: 'Baloo 2', cursive;
font-size: 1em;
transition: background-color 0.2s;
}
.quiz-options button:hover { background-color: #2980b9; }
.feedback {
margin-top: 15px;
font-weight: bold;
font-size: 1.2em;
}
.correct { color: var(--primary-green); }
.incorrect { color: red; }
</style>
</head>
<body>
<div class="container">
<header>
<h1>🌍 All About the Equator! ☀️</h1>
<p>Let's go on an adventure to the very middle of the Earth!</p>
</header>
<section id="intro">
<h2>What is the Equator?</h2>
<p>Imagine the Earth is a giant spinning ball. The <strong>Equator</strong> is an imaginary line drawn right around its tummy! It divides our world into two halves: the <strong>Northern Hemisphere</strong> (the top half) and the <strong>Southern Hemisphere</strong> (the bottom half).</p>
<div class="earth-container">
<!-- SVG of the Earth -->
<svg class="earth-svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="48" fill="#3498db" stroke="#2980b9" stroke-width="2"/>
<path d="M50 10 C 20 25, 20 75, 50 90 C 80 75, 80 25, 50 10 M30 50 A 20 20 0 0 1 70 50" fill="#2ecc71" opacity="0.8"/>
<path d="M25 30 Q 35 20 45 30 T 60 25 M35 70 Q 50 85 65 70" fill="#27ae60" opacity="0.8"/>
</svg>
<div class="equator-line"></div>
<div class="equator-label">Equator</div>
</div>
</section>
<section id="sunlight">
<h2>Why is it Hot at the Equator?</h2>
<p>It's all about how the sun shines on us! At the equator, the sun's rays shine straight down. Think of it like a flashlight shining directly on a spot – it's very bright and warm! Far from the equator, the rays are spread out, which makes it cooler. Click the button to see!</p>
<div class="sun-diagram">
<!-- Sun SVG -->
<svg class="sun-svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="30" fill="#f1c40f"/>
<g stroke="#f1c40f" stroke-width="5" stroke-linecap="round">
<line x1="50" y1="10" x2="50" y2="0" />
<line x1="90" y1="50" x2="100" y2="50" />
<line x1="50" y1="90" x2="50" y2="100" />
<line x1="10" y1="50" x2="0" y2="50" />
<line x1="78.28" y1="21.72" x2="85.35" y2="14.65" />
<line x1="21.72" y1="78.28" x2="14.65" y2="85.35" />
<line x1="21.72" y1="21.72" x2="14.65" y2="14.65" />
<line x1="78.28" y1="78.28" x2="85.35" y2="85.35" />
</g>
</svg>
<div class="sunbeam direct" id="beam1"></div>
<div class="sunbeam" id="beam2"></div>
<div class="sunbeam" id="beam3"></div>
<!-- Earth tilt SVG -->
<svg class="earth-tilt-svg" viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg">
<g transform="rotate(23.5, 50, 50)">
<circle cx="50" cy="50" r="48" fill="#3498db" stroke="#2980b9" stroke-width="2"/>
<path d="M50 10 C 20 25, 20 75, 50 90 C 80 75, 80 25, 50 10 M30 50 A 20 20 0 0 1 70 50" fill="#2ecc71" opacity="0.8"/>
<line x1="5" y1="50" x2="95" y2="50" stroke="red" stroke-width="1.5" stroke-dasharray="4"/>
</g>
</svg>
</div>
<button id="sun-button">☀️ Shine the Sun!</button>
<div class="explanation-box" id="sun-explanation" style="display:none;">
<p>See? The middle beam is <strong>direct and strong</strong>, making the equator hot. The other beams are <strong>angled and weaker</strong>, which is why the top and bottom of the Earth (the poles) are cold!</p>
</div>
</section>
<section id="climate-zones">
<h2>Climate Explorers! 🗺️</h2>
<p>Because the equator is so warm, it creates a special type of weather called a <strong>tropical climate</strong>. It's usually hot, rainy, and humid. Click on the different zones on the Earth below to see what the climate is like!</p>
<div class="climate-map-container">
<svg class="climate-earth-svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="polarGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#ffffff;stop-opacity:1" />
<stop offset="100%" style="stop-color:var(--polar-blue);stop-opacity:1" />
</linearGradient>
<linearGradient id="polarGradientSouth" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:var(--polar-blue);stop-opacity:1" />
<stop offset="100%" style="stop-color:#ffffff;stop-opacity:1" />
</linearGradient>
</defs>
<circle cx="50" cy="50" r="49" fill="#87CEEB"/>
<rect x="0" y="0" width="100" height="25" fill="url(#polarGradient)" />
<rect x="0" y="75" width="100" height="25" fill="url(#polarGradientSouth)" />
<rect x="0" y="40" width="100" height="20" fill="var(--tropical-green)" />
<circle cx="50" cy="50" r="49" fill="none" stroke="black" stroke-width="1"/>
</svg>
<div class="zone" id="zone-polar-north" data-zone="polar"></div>
<div class="zone" id="zone-temperate-north" data-zone="temperate"></div>
<div class="zone" id="zone-tropical" data-zone="tropical"></div>
<div class="zone" id="zone-temperate-south" data-zone="temperate"></div>
<div class="zone" id="zone-polar-south" data-zone="polar"></div>
</div>
</section>
<!-- The Modal -->
<div id="climateModal" class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<h3 id="modal-title">Climate Zone</h3>
<p id="modal-text">Information about the climate.</p>
<div id="modal-animal"></div>
</div>
</div>
<section id="quiz">
<h2>Test Your Knowledge! 🤔</h2>
<div class="quiz-question">
<p>1. What is the imaginary line around the middle of the Earth called?</p>
<div class="quiz-options">
<button onclick="checkAnswer(1, false)">The North Pole</button>
<button onclick="checkAnswer(1, true)">The Equator</button>
<button onclick="checkAnswer(1, false)">The Tummy Line</button>
</div>
<div class="feedback" id="feedback-1"></div>
</div>
<div class="quiz-question">
<p>2. What is the weather usually like near the equator?</p>
<div class="quiz-options">
<button onclick="checkAnswer(2, true)">Hot and sunny</button>
<button onclick="checkAnswer(2, false)">Cold and snowy</button>
<button onclick="checkAnswer(2, false)">Windy and dry</button>
</div>
<div class="feedback" id="feedback-2"></div>
</div>
<div class="quiz-question">
<p>3. Where does the sun's light shine most directly?</p>
<div class="quiz-options">
<button onclick="checkAnswer(3, false)">At the Poles</button>
<button onclick="checkAnswer(3, false)">Everywhere equally</button>
<button onclick="checkAnswer(3, true)">At the Equator</button>
</div>
<div class="feedback" id="feedback-3"></div>
</div>
</section>
</div>
<script>
// --- Sunbeam Animation ---
const sunButton = document.getElementById('sun-button');
const sunbeams = document.querySelectorAll('.sunbeam');
const sunExplanation = document.getElementById('sun-explanation');
sunButton.addEventListener('click', () => {
// Reset animation by removing class
sunbeams.forEach(beam => beam.classList.remove('animate'));
sunExplanation.style.display = 'none';
// Use a timeout to allow the browser to apply the "removed" state before re-adding
setTimeout(() => {
sunbeams.forEach(beam => beam.classList.add('animate'));
sunExplanation.style.display = 'block';
}, 100);
});
// --- Climate Zone Modal ---
const modal = document.getElementById('climateModal');
const closeButton = document.querySelector('.close-button');
const zones = document.querySelectorAll('.zone');
const zoneInfo = {
tropical: {
title: "🌴 Tropical Zone 🌴",
text: "It's hot, humid, and gets lots of rain all year! This is where you find amazing rainforests.",
animal: `<svg class="animal-svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M62.3,64.2c-3.2,0-10.6-2.4-10.6-2.4c-2.8-1.4-11-5.5-12.7-6.5c-2.3-1.3-4.8,0.7-4.8,0.7c-4.1,2.5-10.3,1.9-10.3,1.9 s-3.5-0.1-5.8-2.6c-1.8-1.9-2.2-4.8-1.2-6.9c0.7-1.4,1.8-2.6,3.1-3.4c0,0-2.3-11.2,6-18.4c0,0,7.9-6.3,13.8-1.8 c0,0,3.5-6.6,10.6-4.5c0,0,5.7,0.7,7.1,7.2c-1.2,0.5-2.2,1.2-3.1,2c-0.9,0.9-1.6,2-2,3.1c1.3-0.3,2.7-0.4,4.1-0.4 c3,0,5.8,0.7,8.2,2.1c0,0,3.3,12,0.9,18.4c-0.2,0.5-0.5,1-0.9,1.4c-0.2,0.2-0.5,0.5-0.7,0.7c1.3,4.2,0.4,8-0.2,9.1 C71.5,63.1,66.1,64.2,62.3,64.2z M50,31.2c0,0-5,4.7-1,8.3s9.3,0.9,9.3,0.9S62,38,50,31.2z" fill="#A0522D"/></svg><span>Monkey</span>`
},
temperate: {
title: "🍂 Temperate Zone 🌸",
text: "These areas have four seasons: Spring, Summer, Fall, and Winter. The weather changes a lot!",
animal: `<svg class="animal-svg" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><path d="M38,20c0-2.209-1.791-4-4-4h-8c-2.209,0-4,1.791-4,4v16h16V20z" fill="#CFD8DC"/><path d="M14,20c0-2.209-1.791-4-4-4H8c-2.209,0-4,1.791-4,4v16h16V20z" fill="#CFD8DC"/><path d="M30,12c0-3.314-2.686-6-6-6s-6,2.686-6,6v8h12V12z" fill="#90A4AE"/><path d="M30,16H18v-4c0-1.238,0.508-2.359,1.326-3.174C20.141,8.01,21.262,7.5,22.5,7.5S24.859,8.01,25.674,8.826 C26.492,9.641,27,10.762,27,12V16z" fill="#B0BEC5"/><path d="M26,36v6c0,1.105-0.895,2-2,2s-2-0.895-2-2v-6H26z" fill="#90A4AE"/><circle cx="21" cy="27" r="1.5" fill="#455A64"/><circle cx="27" cy="27" r="1.5" fill="#455A64"/><path d="M24,29c-1.657,0-3,1.343-3,3s1.343,3,3,3s3-1.343,3-3S25.657,29,24,29z" fill="#455A64"/></svg><span>Bear (not a polar bear!)</span>`
},
polar: {
title: "❄️ Polar Zone ❄️",
text: "Brrrr! These are the coldest places on Earth, covered in ice and snow. The sun's rays are very weak here.",
animal: `<svg class="animal-svg" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><path fill="#FFF" d="M36,19c0,5-3,8-3,8H15c0,0-3-3-3-8s3-8,3-8h18C33,11,36,14,36,19z"/><path fill="#CFD8DC" d="M18,17h-4c-0.552,0-1-0.448-1-1s0.448-1,1-1h4c0.552,0,1,0.448,1,1S18.552,17,18,17z"/><path fill="#CFD8DC" d="M34,17h-4c-0.552,0-1-0.448-1-1s0.448-1,1-1h4c0.552,0,1,0.448,1,1S34.552,17,34,17z"/><path fill="#455A64" d="M25.5,21.5c-0.828,0-1.5,0.672-1.5,1.5s0.672,1.5,1.5,1.5s1.5-0.672,1.5-1.5S26.328,21.5,25.5,21.5z"/><path fill="#455A64" d="M22.5,21.5c-0.828,0-1.5,0.672-1.5,1.5s0.672,1.5,1.5,1.5s1.5-0.672,1.5-1.5S23.328,21.5,22.5,21.5z"/><path fill="#FFF" d="M42,37H6l-3-10h42L42,37z"/><path fill="#455A64" d="M24,25c-1.105,0-2,0.895-2,2c0,0.738,0.403,1.372,1,1.723V31h2v-2.277c0.597-0.351,1-0.985,1-1.723 C26,25.895,25.105,25,24,25z"/></svg><span>Polar Bear</span>`
}
};
zones.forEach(zone => {
zone.addEventListener('click', (e) => {
const zoneType = e.target.dataset.zone;
const info = zoneInfo[zoneType];
document.getElementById('modal-title').innerHTML = info.title;
document.getElementById('modal-text').textContent = info.text;
document.getElementById('modal-animal').innerHTML = info.animal;
modal.style.display = "block";
});
});
closeButton.addEventListener('click', () => {
modal.style.display = "none";
});
window.addEventListener('click', (event) => {
if (event.target == modal) {
modal.style.display = "none";
}
});
// --- Quiz Logic ---
function checkAnswer(questionNum, isCorrect) {
const feedbackEl = document.getElementById(`feedback-${questionNum}`);
const questionContainer = feedbackEl.parentElement;
const buttons = questionContainer.querySelectorAll('.quiz-options button');
// Disable buttons after answering
buttons.forEach(button => button.disabled = true);
if (isCorrect) {
feedbackEl.textContent = "🥳 Correct! Great job!";
feedbackEl.className = "feedback correct";
} else {
feedbackEl.textContent = "😕 Not quite. Give it another thought next time!";
feedbackEl.className = "feedback incorrect";
}
}
</script>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The Equator and Climate - Interactive Learning</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: 'Comic Sans MS', 'Comic Sans', cursive, sans-serif;
background: #e0f7fa;
margin: 0;
padding: 0;
}
.container {
max-width: 750px;
margin: 20px auto;
background: #fff;
border-radius: 18px;
box-shadow: 0 4px 24px rgba(30, 136, 229, 0.16);
padding: 32px;
}
h1 {
color: #1976d2;
}
.globe-container {
display: flex;
justify-content: center;
margin: 24px 0;
}
.btn {
background: #29b6f6;
color: #fff;
border: none;
border-radius: 8px;
padding: 10px 16px;
font-size: 1em;
margin: 8px 0;
cursor: pointer;
transition: background 0.2s;
}
.btn:hover {
background: #0277bd;
}
.info-box {
background: #b3e5fc;
padding: 12px 18px;
border-radius: 10px;
margin-top: 15px;
margin-bottom: 12px;
color: #01579b;
}
.quiz {
margin-top: 30px;
background: #fffde7;
border-radius: 16px;
padding: 18px;
border: 1px solid #ffe082;
}
.quiz h2 {
margin-top: 0;
color: #fbc02d;
}
.quiz button {
margin-top: 10px;
}
#feedback {
font-weight: bold;
font-size: 1.1em;
margin-top: 15px;
}
@media (max-width: 500px) {
.container {
padding: 8px;
}
}
</style>
</head>
<body>
<div class="container">
<h1>🌍 The Equator & Our Climate</h1>
<div class="info-box" id="intro-text">
<b>Hi there!</b> Let's learn what the <span style="color:#d84315">equator</span> is, where to find it on Earth, and how it affects the weather.
</div>
<div class="globe-container">
<svg id="globe-svg" width="300" height="310" viewBox="0 0 300 310">
<ellipse cx="150" cy="145" rx="120" ry="120" fill="#64b5f6"/>
<ellipse cx="150" cy="145" rx="115" ry="100" fill="#81d4fa"/>
<!-- Equator -->
<rect id="equator-line" x="35" y="140" width="230" height="10" fill="#ff7043" rx="5" opacity="0.8"/>
<!-- North and South lines -->
<rect x="60" y="65" width="180" height="6" fill="#bdbdbd" rx="2" opacity="0.38"/>
<rect x="60" y="220" width="180" height="6" fill="#bdbdbd" rx="2" opacity="0.38"/>
<!-- Simple continents shapes for illustration -->
<path d="M120,100 Q110,130 145,120 Q140,90 120,100" fill="#4caf50"/>
<path d="M180,160 Q170,200 110,170 Q130,150 180,160" fill="#388e3c"/>
<path d="M210,120 Q215,140 190,135 Q205,125 210,120" fill="#388e3c"/>
<text x="150" y="138" text-anchor="middle" font-size="24" fill="#fff" font-weight="bold">🌞</text>
<text x="33" y="150" font-size="14" fill="#ff7043" font-weight="bold">EQUATOR</text>
</svg>
</div>
<button class="btn" onclick="showFact()">Show an Equator Fact!</button>
<div class="info-box" id="fact-box" style="display:none;"></div>
<button class="btn" onclick="showClimate()">How does the Equator affect the weather?</button>
<div class="info-box" id="climate-info" style="display:none;"></div>
<div class="quiz" id="quiz-section">
<h2>Quiz Time!</h2>
<form id="quiz-form" autocomplete="off">
<div>
<label>
1. What is the equator?
<select name="q1" required>
<option value="">Pick one</option>
<option value="a">A line of trees</option>
<option value="b">An invisible line around the middle of Earth</option>
<option value="c">A river in Africa</option>
</select>
</label>
</div>
<div>
<label style="margin-top:10px;display:block;">
2. The climate near the equator is usually:
<select name="q2" required>
<option value="">Pick one</option>
<option value="a">Very cold and snowy</option>
<option value="b">Hot and rainy</option>
<option value="c">Dry and icy</option>
</select>
</label>
</div>
<button class="btn" type="submit">Check Answers!</button>
</form>
<div id="feedback"></div>
</div>
</div>
<script>
const facts = [
"The equator is an imaginary line that circles the Earth right in the middle!",
"Countries near the equator, like Brazil and Kenya, are warm all year.",
"The equator is 40,075 kilometers (almost 25,000 miles) long – that's a huge circle!",
"When it's summer or winter far from the equator, it's usually just warm and sunny at the equator.",
"The equator gets direct sunlight every day, so it's almost always hot there."
];
function showFact() {
const box = document.getElementById('fact-box');
box.style.display = 'block';
const fact = facts[Math.floor(Math.random() * facts.length)];
box.textContent = "🌎 " + fact;
}
function showClimate() {
const info = document.getElementById('climate-info');
info.style.display = 'block';
info.innerHTML = `
<b>The equator is HOT and WET!</b><br>
🌞 <b>Why?</b> The sun shines directly on the equator all year. That makes the air warm and full of moisture!<br>
🌴 <b>So...</b> Places near the equator have tropical climates. They get a lot of rain. That's why you can find <u>rainforests</u> there!
`;
}
// Quiz logic
document.getElementById('quiz-form').onsubmit = function(e) {
e.preventDefault();
const answers = new FormData(this);
let correct = 0;
let feedback = "";
if (answers.get('q1') === 'b') correct++;
if (answers.get('q2') === 'b') correct++;
if (correct === 2) {
feedback = "🎉 Great job! You got both answers right.";
} else if (correct === 1) {
feedback = "👍 Not bad! You got 1 right. Try again and see if you can get both!";
} else {
feedback = "🙁 Oops! Try reading above and try again.";
}
document.getElementById('feedback').textContent = feedback;
};
</script>
</body>
</html>
```
Drag to resize
```html
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
}
#earth {
width: 400px;
height: 200px;
background: linear-gradient(to bottom, #FFD700 0% 30%, #00BFFF 30% 70%, #8FBC8F 70% 100%);
border: 2px solid #333;
position: relative;
margin: 20px auto;
border-radius: 50%;
cursor: pointer;
}
.region-label {
position: absolute;
font-weight: bold;
background: rgba(255,255,255,0.8);
padding: 5px 10px;
border-radius: 8px;
pointer-events: none;
}
#fact-box {
background: #f0f0f0;
border: 1px solid #ccc;
padding: 15px;
margin-top: 20px;
width: 300px;
margin-left: auto;
margin-right: auto;
font-size: 16px;
}
</style>
</head>
<body>
<h1>The Earth's Equator</h1>
<div id="earth">
<div class="region-label" style="top:10%; left:50%;">Rainforests</div>
<div class="region-label" style="top:45%; left:20%;">Deserts</div>
<div class="region-label" style="top:65%; left:80%;">Tundras</div>
</div>
<div id="fact-box">
Click on different regions of the Earth to discover how the equator affects our climate!
</div>
<script>
const regions = [
{
name: "Equator (Rainforest)",
fact: "Near the equator, it's always warm and wet! Places like the Amazon Rainforest get lots of rain and support countless plants and animals."
},
{
name: "Deserts",
fact: "A bit farther from the equator, places like the Sahara Desert are super dry. Here, you get very little rain but lots of sunshine!"
},
{
name: "Tundras",
fact: "Far from the equator, places like Alaska or Siberia are super cold! These regions have permafrost and long winters with little sunlight."
}
];
const earth = document.getElementById('earth');
const factBox = document.getElementById('fact-box');
// Simulate click zones on Earth div
earth.addEventListener('click', (event) => {
const rect = earth.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
// Specific click zones (approximate)
if (y < 40) { // Top = Tropical (Rainforest)
showFact(regions[0]);
} else if (y < 100) { // Middle = Desert
showFact(regions[1]);
} else { // Bottom = Polar (Tundra)
showFact(regions[2]);
}
});
function showFact(region) {
factBox.innerHTML = `<strong>${region.name}</strong><br>${region.fact}`;
}
</script>
<h2>Climate Connection</h2>
<p>
The equator divides Earth in half! Places <strong>near</strong> the equator get direct sunlight and stay warm with lots of rain. Places <strong>farther</strong> get less direct sun, making deserts dry or polar regions super cold.
</p>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The Equator & Our Climate Explorer – Grade 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300;500;700&display=swap" rel="stylesheet">
<!-- Tiny bit of custom CSS -->
<style>
:root {
--sun: #ffd93d;
--ice: #b3e5ff;
--cloud: #ffffff;
--green: #9eeb9e;
--water: #5bc5ff;
}
*{box-sizing:border-box}
body{
margin:0;
font-family:'Fredoka',sans-serif;
background:linear-gradient(to bottom, #a1e7ff 0%,#d3f0ff 100%);
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
}
#app{
background:white;
max-width:800px;
width:100%;
border-radius:18px;
box-shadow:0 10px 35px rgba(0,0,0,.2);
display:flex;
flex-direction:column;
overflow:hidden;
}
header{
background:var(--water);
color:white;
padding:15px 20px;
font-size:1.4rem;
font-weight:700;
}
#globeBox{
position:relative;
height:45vh;
background:linear-gradient(135deg, #caf0f8 0%, #8fd3ff 100%);
overflow:hidden;
user-select:none;
}
#globe{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:300px;
height:300px;
border-radius:50%;
background:url('https://i.imgur.com/wQsK7Ya.png') no-repeat center;
background-size:cover;
transition:transform .6s ease;
}
#equator{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:300px;
height:22px;
border-radius:22px;
background:gold;
opacity:.65;
pointer-events:none;
transition:all .4s ease;
}
.marker{
position:absolute;
width:32px;
height:32px;
background:white;
border:3px solid #0077b6;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:#0077b6;
font-weight:bold;
cursor:pointer;
transition:transform .2s;
}
.marker:hover{transform:scale(1.2)}
#cities{
position:absolute;
inset:0;
pointer-events:none;
}
.sun{
position:absolute;
width:60px;
height:60px;
background:var(--sun);
border-radius:50%;
top:20px;
left:20px;
box-shadow:0 0 30px var(--sun);
animation:float 6s ease-in-out infinite;
}
@keyframes float{0%{transform:translateY(0px)}50%{transform:translateY(10px)}100%{transform:translateY(0px)}}
#facts{
padding:20px;
flex:1;
display:flex;
gap:15px;
flex-direction:column;
}
h2{margin:0 0 10px;color:#023e8a}
.factBox{
padding:15px;
background:var(--ice);
border-radius:10px;
font-size:1.05rem;
line-height:1.4;
}
.factBox.hot{background:#ffeb99}
.factBox.cold{background:#c7f0ff}
/* small screen */
@media(max-width:600px){
#globe{width:200px;height:200px}
#equator{width:200px;height:15px}
}
</style>
</head>
<body>
<div id="app">
<header>Globe Explorer</header>
<div id="globeBox">
<div class="sun" title="Click me!"></div>
<div id="globe"></div>
<div id="equator"></div>
<!-- draggable little cities -->
<div id="cities">
<div class="marker" data-name="Quito" style="top:44%;left:23%">Q</div>
<div class="marker" data-name="Toronto" style="top:24%;left:22%">T</div>
<div class="marker" data-name="Sydney" style="top:67%;left:78%">S</div>
</div>
</div>
<div id="facts">
<h2>Move the colored cities around.</h2>
<div id="info" class="factBox">
Drag the letters to learn how their distance from the yellow <strong>equator</strong> changes their weather! <br>
Click the little sun to tilt our planet and see real seasons happen.
</div>
</div>
</div>
<!-- three small helpers -->
<script>
// MAKE CITIES DRAGGABLE
document.querySelectorAll('.marker').forEach(m=>{
m.addEventListener('mousedown',startDrag);
});
function startDrag(e){
let city = e.target;
let origin = city.parentNode.getBoundingClientRect();
city.style.pointerEvents = 'auto';
function move(ev){
let y = ev.clientY - origin.top;
city.style.top = Math.max(10, Math.min(290, y ))+'px';
city.style.left = (ev.clientX - origin.left)+'px';
checkPlace(city);
}
window.addEventListener('mousemove',move);
window.addEventListener('mouseup', ()=> {
window.removeEventListener('mousemove',move);
city.style.pointerEvents = 'none';
}, {once:true});
}
function checkPlace(el){
const name = el.dataset.name;
const top = parseInt(el.style.top);
// divide 300 pixels globe into 3 latitude sections
if(top<110){
showFact(name, "cold", `❄️ ${name} is far from the equator. It’s cooler here and can even snow in winter!`);
}else if(top>200){
showFact(name, "cold", `❄️ ${name} is far from the equator, that’s why people wear coats and hats in winter!`);
}else{
showFact(name, "hot", `🌞 ${name} is close to the yellow equator. It’s warm all year and plants love it!`);
}
}
function showFact(name, tempClass, text){
const info = document.getElementById('info');
info.className=`factBox ${tempClass}`;
info.textContent = text;
}
// SUN CLICK = GLOBE TILT + SEASONS
document.querySelector('.sun').addEventListener('click',tiltGlobe);
let tilted = false;
function tiltGlobe(){
const globe = document.getElementById('globe');
const equator = document.getElementById('equator');
tilted = !tilted;
if(tilted){
globe.style.transform = 'translate(-50%,-50%) rotate(-23.5deg)';
equator.style.transform = 'translate(-50%,-50%) rotate(-23.5deg)';
document.getElementById('info').textContent = "✨ The Earth is tilted 23.5° – that tilt causes our seasons!";
}else{
globe.style.transform = 'translate(-50%,-50%) rotate(0deg)';
equator.style.transform = 'translate(-50%,-50%) rotate(0deg)';
document.getElementById('info').textContent = "📏 The equator stays straight, offering steady warmth all year!";
}
}
</script>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Explore the Equator and Climate</title>
<style>
body { font-family: Arial, sans-serif; background-color: #f0f8ff; color: #333; margin: 0; padding: 20px; }
h1, h2 { text-align: center; color: #ff4500; }
.section { margin: 20px; padding: 15px; background-color: #fff; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
#earth { width: 300px; height: 300px; margin: 0 auto; position: relative; background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMDAgMzAwIj4KICA8Y2lyY2xlIGN4PSIxNTAiIGN5PSIxNTAiIHI9IjE0NSIgZmlsbD0iIzAwOTRGRiIgc3Ryb2tlPSIjMDA2QkZGIiBzdHJva2Utd2lkdGg9IjUiLz4KICA8bGluZSB4MT0iMCIgeTE9IjE1MCIgeDI9IjMwMCIgeTI9IjE1MCIgc3Ryb2tlPSIjRkYwMDAwIiBzdHJva2Utd2lkdGg9IjUiLz4KICA8dGV4dCB4PSIxNTAiIHk9IjE0MCIgZmlsbD0iI0ZGRkZGRiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1zaXplPSIxNXB4Ij5Ob3J0aGVybiBIZW1pc3BoZXJlPC90ZXh0PgogIDx0ZXh0IHg9IjE1MCIgeT0iMTcwIiBmaWxsPSIjRkZGRkZGIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LXNpemU9IjE1cHgiPlNvdXRoZXJuIEhlbWlzcGhlcmU8L3RleHQ+Cjwvc3ZnPg==') no-repeat center; }
#marker { position: absolute; top: 150px; left: 150px; width: 20px; height: 20px; background: #ffd700; border-radius: 50%; cursor: pointer; }
#climate-info { text-align: center; margin-top: 10px; font-size: 18px; color: #008000; }
.quiz-question { margin: 10px 0; }
button { background-color: #4CAF50; color: white; padding: 10px; border: none; border-radius: 5px; cursor: pointer; }
button:hover { background-color: #45a049; }
#quiz-result { text-align: center; font-weight: bold; margin-top: 10px; }
</style>
</head>
<body>
<h1>Let's Learn About the Equator and Climate!</h1>
<div class="section">
<h2>What is the Equator?</h2>
<p>The equator is an imaginary line that goes around the middle of the Earth, like a belt. It divides the Earth into two parts: the Northern Hemisphere and the Southern Hemisphere. Places near the equator are usually hot and have lots of rainforests and animals like monkeys and parrots!</p>
<div id="earth">
<div id="marker" draggable="true"></div>
</div>
<p id="climate-info">Drag the yellow marker up or down to see how climate changes!</p>
</div>
<div class="section">
<h2>How Does the Equator Affect Climate?</h2>
<p>The Earth gets heat from the Sun. Near the equator, the Sun's rays hit straight on, so it's very warm all year. As you move away from the equator towards the poles, the Sun's rays are slanted, so it's cooler. That's why it's hot at the equator and cold at the poles!</p>
</div>
<div class="section">
<h2>Fun Quiz Time!</h2>
<div class="quiz-question">
<p>1. What does the equator divide the Earth into?</p>
<button onclick="checkAnswer(1, 'Hemisphere')">Northern and Southern Hemispheres</button>
<button onclick="checkAnswer(1, 'wrong')">East and West</button>
<button onclick="checkAnswer(1, 'wrong')">Top and Bottom</button>
</div>
<div class="quiz-question">
<p>2. Why is it warmer near the equator?</p>
<button onclick="checkAnswer(2, 'wrong')">Because of more clouds</button>
<button onclick="checkAnswer(2, 'Sun')">The Sun's rays hit straight on</button>
<button onclick="checkAnswer(2, 'wrong')">Because of mountains</button>
</div>
<div class="quiz-question">
<p>3. What kind of places are near the equator?</p>
<button onclick="checkAnswer(3, 'wrong')">Ice and snow</button>
<button onclick="checkAnswer(3, 'wrong')">Deserts only</button>
<button onclick="checkAnswer(3, 'Rainforests')">Hot rainforests</button>
</div>
<p id="quiz-result"></p>
<button onclick="resetQuiz()">Reset Quiz</button>
</div>
<script>
const marker = document.getElementById('marker');
const climateInfo = document.getElementById('climate-info');
const earth = document.getElementById('earth');
let score = 0;
const answers = {1: 'Hemisphere', 2: 'Sun', 3: 'Rainforests'};
marker.addEventListener('dragstart', (e) => {
e.dataTransfer.setDragImage(new Image(), 0, 0); // Hide ghost image
});
earth.addEventListener('dragover', (e) => {
e.preventDefault();
});
earth.addEventListener('drop', (e) => {
e.preventDefault();
const rect = earth.getBoundingClientRect();
const y = e.clientY - rect.top;
if (y < 0) y = 0;
if (y > 300) y = 300;
marker.style.top = `${y - 10}px`; // Center marker
updateClimate(y);
});
function updateClimate(y) {
const distanceFromEquator = Math.abs(y - 150);
if (distanceFromEquator < 30) {
climateInfo.textContent = 'Hot and rainy! Like a jungle 🌴🐒';
} else if (distanceFromEquator < 100) {
climateInfo.textContent = 'Warm, with seasons changing 🍂';
} else {
climateInfo.textContent = 'Cold and snowy! Brrr ❄️🐧';
}
}
function checkAnswer(question, answer) {
const buttons = document.querySelectorAll(`.quiz-question:nth-child(${question}) button`);
buttons.forEach(btn => btn.disabled = true);
if (answers[question] === answer) {
score++;
document.getElementById('quiz-result').textContent = `Great job! Your score: ${score}/3`;
} else {
document.getElementById('quiz-result').textContent = `Oops! Try again. Your score: ${score}/3`;
}
}
function resetQuiz() {
score = 0;
document.getElementById('quiz-result').textContent = '';
const buttons = document.querySelectorAll('.quiz-question button');
buttons.forEach(btn => btn.disabled = false);
}
</script>
</body>
</html>
```Drag to resize
### Teaching the Equator to Grade 3 Students
#### Overview
The following HTML code creates an interactive resource to teach the equator to grade 3 students and its relationship to the climate.
```html
<!DOCTYPE html>
<html>
<head>
<title>Exploring the Equator</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<style>
body {
font-family: Arial, sans-serif;
}
#map {
height: 400px;
width: 100%;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container mt-5">
<h1>Exploring the Equator</h1>
<p>The equator is an imaginary line that runs around the middle of the Earth. It divides the Earth into two hemispheres: the Northern Hemisphere and the Southern Hemisphere.</p>
<!-- Interactive Map -->
<div id="map"></div>
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.8.0/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.8.0/dist/leaflet.css">
<script>
var map = L.map('map').setView([0, 0], 2);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/">OpenStreetMap</a>',
subdomains: ['a', 'b', 'c']
}).addTo(map);
L.polyline([[0, -180], [0, 180]], {color: 'red', weight: 2}).addTo(map);
</script>
<!-- Climate Zones -->
<h2>Climate Zones</h2>
<p>The equator receives direct sunlight throughout the year, making the climate near the equator warm and sunny.</p>
<div class="row">
<div class="col-md-4">
<h3>Tropical Climate</h3>
<p>Near the equator, the climate is tropical. The temperature is warm, and there is high humidity.</p>
</div>
<div class="col-md-4">
<h3>Temperate Climate</h3>
<p>As you move away from the equator, the climate becomes temperate. The temperature is mild, and there are distinct seasons.</p>
</div>
<div class="col-md-4">
<h3>Polar Climate</h3>
<p>At the poles, the climate is cold and icy. The temperature is low, and there is limited sunlight.</p>
</div>
</div>
<!-- Interactive Quiz -->
<h2>Test Your Knowledge</h2>
<form id="quiz-form">
<div class="mb-3">
<label for="question1" class="form-label">What is the equator?</label>
<select id="question1" class="form-select">
<option value="">Select an answer</option>
<option value="correct">An imaginary line that runs around the middle of the Earth</option>
<option value="incorrect">A real line that runs around the middle of the Earth</option>
<option value="incorrect">A line that runs from the North Pole to the South Pole</option>
</select>
</div>
<div class="mb-3">
<label for="question2" class="form-label">What is the climate like near the equator?</label>
<select id="question2" class="form-select">
<option value="">Select an answer</option>
<option value="correct">Warm and sunny</option>
<option value="incorrect">Cold and icy</option>
<option value="incorrect">Mild and rainy</option>
</select>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<div id="quiz-result"></div>
<script>
document.getElementById('quiz-form').addEventListener('submit', function(event) {
event.preventDefault();
var score = 0;
var question1 = document.getElementById('question1').value;
var question2 = document.getElementById('question2').value;
if (question1 === 'correct') {
score++;
}
if (question2 === 'correct') {
score++;
}
document.getElementById('quiz-result').innerHTML = 'You scored ' + score + ' out of 2';
});
</script>
</div>
</body>
</html>
```
### Features
1. **Interactive Map**: The code includes an interactive map that displays the equator. The map is created using the Leaflet library and OpenStreetMap tiles.
2. **Climate Zones**: The resource explains the different climate zones and how they relate to the equator.
3. **Interactive Quiz**: The code includes an interactive quiz that tests the student's knowledge about the equator and climate zones.
### Usage
To use this resource, simply open the HTML code in a web browser. The interactive map and quiz will be displayed, allowing students to explore and learn about the equator and climate zones.
### Customization
To customize the resource, you can modify the HTML code to suit your needs. You can add or remove content, change the layout, or update the quiz questions. Additionally, you can use different libraries or APIs to create a more advanced interactive map.Drag to resize
# Interactive Equator and Climate Learning Resource
Below is an interactive educational resource designed to teach Grade 3 students about the equator and its relationship to climate patterns:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Equator and Climate</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Comic Sans MS', cursive, sans-serif;
}
body {
background: linear-gradient(#1a5f8e, #1c92d2, #83e3ff);
color: #333;
padding: 20px;
min-height: 100vh;
overflow-x: hidden;
}
.container {
max-width: 1000px;
margin: 0 auto;
text-align: center;
}
h1 {
color: #ffdb5e;
font-size: 2.8rem;
text-shadow: 3px 3px 0px #d35400;
margin: 20px 0;
animation: pulse 3s infinite;
}
.intro {
background: rgba(255, 255, 255, 0.9);
border-radius: 20px;
padding: 25px;
margin: 20px auto;
max-width: 800px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
border: 5px solid #ff9900;
}
.instructions {
display: flex;
justify-content: center;
gap: 30px;
padding: 20px;
margin: 20px auto;
background: rgba(255, 255, 255, 0.85);
border-radius: 15px;
max-width: 800px;
border: 4px dashed #ff9900;
}
.instruction-item {
align-items: center;
display: flex;
flex-direction: column;
gap: 10px;
}
.instruction-item i {
font-size: 2rem;
color: #3498db;
background: #ffffff;
border-radius: 50%;
padding: 15px;
border: 3px solid #3498db;
}
.visualization {
position: relative;
height: 500px;
margin: 40px auto;
max-width: 750px;
display: flex;
justify-content: space-between;
align-items: center;
}
.earth-container {
position: relative;
width: 400px;
height: 400px;
}
.earth-globe {
width: 100%;
height: 100%;
background: radial-gradient(circle at 30% 30%, #3498db, #2980b9);
border-radius: 50%;
position: relative;
overflow: hidden;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
animation: spin 30s linear infinite;
}
.equator {
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 6px;
background: repeating-linear-gradient(to right, #ffdb5e 0px, #ffdb5e 20px, #d35400 20px, #d35400 40px);
transform: translateY(-50%);
z-index: 2;
}
.tropical {
position: absolute;
top: calc(50% - 80px);
height: 160px;
width: 100%;
background: rgba(243, 156, 18, 0.5);
box-shadow: 0 0 30px rgba(243, 156, 18, 0.8);
}
.temperature-info {
background: rgba(255, 255, 255, 0.95);
border-radius: 15px;
padding: 20px;
width: 320px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
border: 4px solid #3498db;
position: relative;
min-height: 300px;
}
.climate-zones {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
margin-top: 30px;
max-width: 900px;
margin: 30px auto;
}
.zone {
background: linear-gradient(145deg, #f9f9f9, #fff);
border-radius: 15px;
padding: 20px 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
border: 3px solid;
position: relative;
overflow: hidden;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.zone:hover {
transform: translateY(-10px);
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.2);
}
.zone-icon {
font-size: 3rem;
margin-bottom: 15px;
}
.tropical-zone {
border-color: #e67e22;
}
.temperate-zone {
border-color: #27ae60;
}
.polar-zone {
border-color: #3498db;
}
h2 {
color: #2980b9;
margin-bottom: 20px;
font-size: 1.8rem;
}
h3 {
font-size: 1.5rem;
margin-bottom: 15px;
}
p {
line-height: 1.6;
margin-bottom: 15px;
font-size: 1.15rem;
}
.highlight {
background: #fff3e0;
padding: 3px 6px;
border-radius: 5px;
font-weight: bold;
color: #e67e22;
}
.fun-fact {
background: rgba(255, 241, 118, 0.9);
border-left: 5px solid #f39c12;
padding: 15px;
margin: 20px auto;
max-width: 800px;
border-radius: 10px 0 0 10px;
font-weight: bold;
font-size: 1.1rem;
}
.controls {
display: flex;
justify-content: center;
gap: 20px;
margin: 30px 0;
}
.btn {
padding: 15px 30px;
background: #ff9900;
color: white;
border: none;
border-radius: 50px;
font-size: 1.2rem;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.btn:hover {
background: #ffb536;
transform: scale(1.05);
}
.btn:active {
transform: scale(0.95);
}
.slider-container {
margin: 20px auto;
background: rgba(255, 255, 255, 0.85);
padding: 20px;
border-radius: 15px;
max-width: 800px;
border: 3px solid #3498db;
}
.slider {
width: 100%;
height: 40px;
-webkit-appearance: none;
background: linear-gradient(to right, #3498db, #27ae60, #e67e22, #f39c12, #d35400);
outline: none;
border-radius: 20px;
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.2);
margin: 30px 0 15px;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 50px;
height: 50px;
border-radius: 50%;
background: #ffdb5e;
border: 4px solid #d35400;
cursor: pointer;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.temperature-display {
font-size: 1.8rem;
font-weight: bold;
color: #e74c3c;
margin-bottom: 15px;
}
.location-info {
font-size: 1.2rem;
margin-bottom: 10px;
}
.sun {
position: absolute;
top: 40px;
right: 40px;
width: 80px;
height: 80px;
background: radial-gradient(#ffdb5e, #d35400);
border-radius: 50%;
box-shadow: 0 0 40px rgba(255, 213, 70, 0.8);
z-index: 3;
}
.sun-rays {
position: absolute;
width: 140px;
height: 140px;
border-radius: 50%;
border: 8px solid rgba(255, 213, 70, 0.3);
top: -30px;
left: -30px;
animation: pulseRay 3s infinite;
}
#heatAnimation {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.temperature-label {
position: absolute;
top: 50%;
transform: translateY(-50%);
padding: 5px 10px;
background: white;
border-radius: 10px;
font-weight: bold;
z-index: 3;
}
.anim-pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
@keyframes pulseRay {
0% { transform: scale(0.8); opacity: 0.7; }
50% { transform: scale(1); opacity: 0.4; }
100% { transform: scale(0.8); opacity: 0.7; }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
footer {
margin-top: 40px;
padding: 20px;
background: rgba(0, 0, 0, 0.2);
border-radius: 15px;
color: white;
font-weight: bold;
font-size: 1.1rem;
}
</style>
</head>
<body>
<div class="container">
<h1><i class="fas fa-globe-americas"></i> Discovering the Equator</h1>
<div class="intro">
<h2>What is the Equator?</h2>
<p>The equator is an imaginary line that runs around the middle of the Earth like a belt. It divides our planet into the <span class="highlight">Northern Hemisphere</span> and the <span class="highlight">Southern Hemisphere</span>.</p>
<p>This special line is very important because it affects the weather and climate all around the world!</p>
</div>
<div class="instructions">
<div class="instruction-item">
<i class="fas fa-mouse-pointer"></i>
<span>Try the controls</span>
</div>
<div class="instruction-item">
<i class="fas fa-sun"></i>
<span>See sun's warming effect</span>
</div>
<div class="instruction-item">
<i class="fas fa-temperature-high"></i>
<span>Discover temperature patterns</span>
</div>
</div>
<div class="visualization">
<div class="sun">
<div class="sun-rays"></div>
</div>
<div class="earth-container">
<div class="earth-globe">
<div class="tropical"></div>
<div class="equator"></div>
<canvas id="heatAnimation"></canvas>
<div class="temperature-label" style="left: 30px;">Hot</div>
<div class="temperature-label" style="right: 30px;">Cold</div>
</div>
</div>
<div class="temperature-info">
<h2>Temperature Patterns</h2>
<p>Places near the equator receive <span class="highlight">direct sunlight</span> all year.</p>
<p class="anim-pulse">These areas are always <span class="highlight">warm or hot</span> and have tropical climates.</p>
<p>As you move away from the equator, sunlight hits the Earth at an angle, making temperatures <span class="highlight">colder</span>.</p>
<p>The poles receive the <span class="highlight">least direct sun</span> and are the coldest places on Earth!</p>
</div>
</div>
<div class="fun-fact">
<i class="fas fa-lightbulb"></i> Fun Fact: Even though the equator is just an imaginary line, you can visit places along the equator in 13 different countries around the world!
</div>
<div class="controls">
<button class="btn" onclick="rotateEarth()">
<i class="fas fa-sync-alt"></i> Spin the Earth
</button>
<button class="btn" onclick="toggleSunEffect()">
<i class="fas fa-sun"></i> Sun's Warming Effect
</button>
</div>
<div class="slider-container">
<h2>Explore Climate Zones</h2>
<p>Move the slider to see how temperature changes from the poles to the equator:</p>
<input type="range" min="-90" max="90" value="0" class="slider" id="climateSlider" oninput="updateTemperature()">
<div class="temperature-display" id="temperatureDisplay">Temperature: 30°C (Sunny and Warm)</div>
<div class="location-info" id="locationInfo">Location: Equator</div>
</div>
<div class="climate-zones">
<div class="zone tropical-zone" onclick="showZoneInfo('tropical')">
<i class="fas fa-palm-tree zone-icon"></i>
<h3>Tropical Zone</h3>
<p>Warm all year, near the equator.</p>
<p>(Between 23.5°N and 23.5°S)</p>
</div>
<div class="zone temperate-zone" onclick="showZoneInfo('temperate')">
<i class="fas fa-tree zone-icon"></i>
<h3>Temperate Zone</h3>
<p>Distinct seasons, moderate temperatures.</p>
<p>(23.5° to 66.5° latitude)</p>
</div>
<div class="zone polar-zone" onclick="showZoneInfo('polar')">
<i class="fas fa-icicles zone-icon"></i>
<h3>Polar Zone</h3>
<p>Very cold, near the poles.</p>
<p>(Beyond 66.5° latitude)</p>
</div>
</div>
<footer>
<p>Interactive Learning Adventure • Designed for Grade 3 Students</p>
</footer>
</div>
<script>
// Get earth element and canvas context for heat animation
const earthGlobe = document.querySelector('.earth-globe');
const canvas = document.getElementById('heatAnimation');
const ctx = canvas.getContext('2d');
let animationPlaying = false;
let animationId;
// Set canvas dimensions to match the container
function setupCanvas() {
canvas.width = earthGlobe.clientWidth;
canvas.height = earthGlobe.clientHeight;
}
// Draw heat animation effect
function drawHeatAnimation() {
if (!animationPlaying) return;
ctx.clearRect(0, 0, canvas.width, canvas.height);
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = Math.min(canvas.width, canvas.height) / 2;
// Draw heat effect
const gradient = ctx.createRadialGradient(
centerX, centerY, 0,
centerX, centerY, radius * 0.7
);
gradient.addColorStop(0, "rgba(255, 165, 0, 0.8)");
gradient.addColorStop(1, "rgba(255, 255, 255, 0)");
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.arc(centerX, centerY, radius * 0.7, 0, Math.PI * 2);
ctx.fill();
animationId = requestAnimationFrame(drawHeatAnimation);
}
// Toggle the sun warming effect animation
function toggleSunEffect() {
animationPlaying = !animationPlaying;
if (animationPlaying) {
drawHeatAnimation();
} else {
cancelAnimationFrame(animationId);
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
}
// Spin the earth globe
function rotateEarth() {
earthGlobe.style.animation = "none";
setTimeout(() => {
earthGlobe.style.animation = "spin 30s linear infinite";
}, 10);
}
// Update temperature based on slider position
function updateTemperature() {
const slider = document.getElementById('climateSlider');
const tempDisplay = document.getElementById('temperatureDisplay');
const infoDisplay = document.getElementById('locationInfo');
const value = parseInt(slider.value);
let tempText;
let locationText;
if (value === 0) {
tempText = "30°C (Sunny and Warm)";
locationText = "Equator";
} else if (value > -10 && value < 10 && value !== 0) {
tempText = Math.floor(26 - Math.abs(value) * 0.4) + "°C (Warm)";
locationText = "Near Equator";
} else if (value >= 10 && value < 30) {
tempText = Math.floor(22 - Math.abs(value) * 0.4) + "°C (Pleasant)";
locationText = "Temperate Zone";
} else if (value >= 30 && value < 60) {
tempText = Math.floor(15 - Math.abs(value) * 0.3) + "°C (Cool)";
locationText = "Further from Equator";
} else if (value >= 60) {
tempText = Math.floor(5 - Math.abs(value) * 0.2) + "°C (Cold)";
locationText = `${Math.abs(value)}° Latitude`;
} else if (value <= -10 && value > -30) {
tempText = Math.floor(22 - Math.abs(value) * 0.4) + "°C (Pleasant)";
locationText = "Temperate Zone";
} else {
tempText = Math.floor(5 - Math.abs(value) * 0.2) + "°C (Very Cold)";
locationText = `${Math.abs(value)}° Latitude`;
}
tempDisplay.textContent = `Temperature: ${tempText}`;
infoDisplay.textContent = `Location: ${locationText}`;
}
// Show information about climate zones
function showZoneInfo(zone) {
let message;
switch (zone) {
case 'tropical':
message = "Tropical Zone:\n\n- Located around the equator\n- Warm temperatures year-round\n- Lots of rain and rainforests\n- Two main seasons: rainy and dry";
break;
case 'temperate':
message = "Temperate Zone:\n\n- Located between tropical and polar zones\n- Four distinct seasons: spring, summer, fall, winter\n- Moderate temperatures\n- Where most people live";
break;
case 'polar':
message = "Polar Zone:\n\n- Located near the North and South Poles\n- Very cold temperatures\n- Long dark winters and short summers\n- Covered by icy glaciers";
break;
}
alert(message);
}
// Initialize canvas and start effects
setupCanvas();
window.addEventListener('resize', setupCanvas);
// Start animation on page load
setTimeout(() => {
toggleSunEffect();
rotateEarth();
}, 1000);
</script>
</body>
</html>
```
This interactive resource teaches Grade 3 students about:
1. **What the equator is** - an imaginary line around Earth's middle
2. **How it affects climate** - by warming areas near the equator through direct sunlight
3. **Climate zones** - tropical near equator, temperate in mid-latitudes, polar at the poles
4. **Temperature patterns** - hottest at equator, coldest at poles
Students can interact with:
- A spinning Earth globe showing the equator and tropical zone
- Sun warming visualization demonstrating how sunlight hits Earth
- Temperature slider to explore climate changes across latitudes
- Clickable climate zones showing key information
- Spin and warm buttons for interactive discovery
The colorful, friendly design features educational content with animations to engage young learners. The resource works on any modern web browser without external dependencies.Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Equator Adventure</title>
<style>
body {
font-family: 'Comic Sans MS', cursive, sans-serif;
margin: 0;
padding: 20px;
background: linear-gradient(180deg, #87CEEB 0%, #98FB98 100%);
color: #333;
}
.container {
max-width: 900px;
margin: 0 auto;
background: white;
border-radius: 20px;
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
overflow: hidden;
}
.header {
background: linear-gradient(45deg, #FF6B6B, #4ECDC4);
color: white;
padding: 30px;
text-align: center;
}
.header h1 {
margin: 0;
font-size: 2.5em;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.content {
padding: 30px;
}
.earth-container {
position: relative;
width: 300px;
height: 300px;
margin: 20px auto;
cursor: pointer;
}
.earth {
width: 100%;
height: 100%;
border-radius: 50%;
background: linear-gradient(45deg, #4A90E2, #50C878);
position: relative;
animation: rotate 10s linear infinite;
box-shadow: 0 0 30px rgba(74, 144, 226, 0.5);
}
.equator-line {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 4px;
background: #FF4757;
transform: translateY(-50%);
box-shadow: 0 0 10px #FF4757;
}
.continent {
position: absolute;
background: #8B4513;
border-radius: 50%;
}
.continent1 { top: 60px; left: 80px; width: 40px; height: 30px; }
.continent2 { top: 100px; left: 180px; width: 60px; height: 40px; }
.continent3 { top: 180px; left: 50px; width: 50px; height: 35px; }
.continent4 { top: 200px; left: 200px; width: 45px; height: 25px; }
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.climate-zones {
display: flex;
justify-content: space-around;
margin: 30px 0;
flex-wrap: wrap;
}
.zone {
background: white;
border-radius: 15px;
padding: 20px;
margin: 10px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
cursor: pointer;
min-width: 150px;
text-align: center;
}
.zone:hover {
transform: translateY(-5px);
}
.hot-zone {
border: 3px solid #FF6B35;
background: linear-gradient(135deg, #FFE5B4, #FFCC99);
}
.cold-zone {
border: 3px solid #4A90E2;
background: linear-gradient(135deg, #E6F3FF, #CCE7FF);
}
.zone h3 {
margin-top: 0;
font-size: 1.3em;
}
.temperature {
font-size: 2em;
font-weight: bold;
margin: 10px 0;
}
.hot-temp { color: #FF6B35; }
.cold-temp { color: #4A90E2; }
.interactive-section {
background: #F8F9FF;
border-radius: 15px;
padding: 25px;
margin: 20px 0;
}
.quiz-button {
background: linear-gradient(45deg, #FF6B6B, #4ECDC4);
color: white;
border: none;
padding: 15px 30px;
border-radius: 25px;
font-size: 1.2em;
cursor: pointer;
transition: transform 0.3s ease;
margin: 10px;
}
.quiz-button:hover {
transform: scale(1.05);
}
.hidden {
display: none;
}
.quiz-result {
padding: 20px;
border-radius: 10px;
margin: 10px 0;
font-size: 1.2em;
font-weight: bold;
}
.correct {
background: #D4F8D4;
color: #2D5A2D;
}
.incorrect {
background: #FFE5E5;
color: #8B0000;
}
.fun-fact {
background: linear-gradient(135deg, #FFE066, #FF9A9E);
color: white;
padding: 20px;
border-radius: 15px;
margin: 20px 0;
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
.animals {
display: flex;
justify-content: space-around;
margin: 20px 0;
flex-wrap: wrap;
}
.animal {
text-align: center;
margin: 10px;
padding: 15px;
background: white;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.animal-emoji {
font-size: 3em;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>🌍 The Equator Adventure! 🌍</h1>
<p>Let's explore Earth's invisible line and discover how it affects our climate!</p>
</div>
<div class="content">
<div class="earth-container" onclick="earthClick()">
<div class="earth">
<div class="equator-line"></div>
<div class="continent continent1"></div>
<div class="continent continent2"></div>
<div class="continent continent3"></div>
<div class="continent continent4"></div>
</div>
</div>
<p style="text-align: center; font-size: 1.2em; color: #666;">
👆 Click on Earth to see the equator! 👆
</p>
<div class="interactive-section">
<h2>🌡️ What is the Equator? 🌡️</h2>
<p style="font-size: 1.3em; line-height: 1.6;">
The equator is an <strong>imaginary line</strong> that goes around the middle of Earth!
It's like a belt around Earth's waist. The equator divides our planet into two halves:
the <strong>Northern Hemisphere</strong> (top half) and the <strong>Southern Hemisphere</strong> (bottom half).
</p>
</div>
<div class="interactive-section">
<h2>☀️ How Does the Equator Affect Climate? ☀️</h2>
<p style="font-size: 1.2em;">
The Sun shines most directly on the equator, making it the hottest part of Earth!
</p>
<div class="climate-zones">
<div class="zone hot-zone" onclick="showClimateInfo('hot')">
<h3>🔥 Near the Equator</h3>
<div class="temperature hot-temp">HOT!</div>
<p>Always warm and sunny!</p>
<p>🌴 Tropical rainforests</p>
<p>🦜 Colorful birds</p>
</div>
<div class="zone cold-zone" onclick="showClimateInfo('cold')">
<h3>🧊 Far from Equator</h3>
<div class="temperature cold-temp">COLD!</div>
<p>Much cooler weather</p>
<p>🏔️ Snow and ice</p>
<p>🐧 Penguins</p>
</div>
</div>
</div>
<div class="fun-fact">
<h3>🌟 Amazing Equator Facts! 🌟</h3>
<ul style="font-size: 1.1em; line-height: 1.8;">
<li>🌍 The equator is 24,901 miles long!</li>
<li>🏃♂️ If you could walk on the equator, it would take about a year!</li>
<li>🌡️ Temperature stays around 80-90°F (27-32°C) all year!</li>
<li>🌧️ It rains almost every day near the equator!</li>
</ul>
</div>
<div class="interactive-section">
<h2>🐆 Animals Around the Equator 🐆</h2>
<div class="animals">
<div class="animal">
<div class="animal-emoji">🐅</div>
<p><strong>Tigers</strong><br>Love hot, humid weather!</p>
</div>
<div class="animal">
<div class="animal-emoji">🦜</div>
<p><strong>Parrots</strong><br>Colorful tropical birds!</p>
</div>
<div class="animal">
<div class="animal-emoji">🦍</div>
<p><strong>Gorillas</strong><br>Live in warm rainforests!</p>
</div>
<div class="animal">
<div class="animal-emoji">🐍</div>
<p><strong>Snakes</strong><br>Need warm weather to survive!</p>
</div>
</div>
</div>
<div class="interactive-section">
<h2>🧠 Test Your Knowledge! 🧠</h2>
<div id="quiz-container">
<button class="quiz-button" onclick="askQuestion(1)">Question 1: What is the equator?</button>
<button class="quiz-button" onclick="askQuestion(2)">Question 2: Where is it hottest?</button>
<button class="quiz-button" onclick="askQuestion(3)">Question 3: What animals live there?</button>
</div>
<div id="quiz-result" class="hidden"></div>
</div>
</div>
</div>
<script>
function earthClick() {
const earth = document.querySelector('.earth');
earth.style.animationDuration = '2s';
setTimeout(() => {
earth.style.animationDuration = '10s';
}, 2000);
// Show a fun message
alert("🌍 You clicked Earth! The red line you see is the equator - Earth's invisible belt! 🌍");
}
function showClimateInfo(type) {
if (type === 'hot') {
alert("🔥 Near the Equator: It's always hot because the Sun shines directly here! That's why we have tropical rainforests with lots of plants and animals! 🌴🦜");
} else {
alert("🧊 Far from the Equator: It gets much colder because the Sun's rays hit at an angle. That's why we have snow and ice at the North and South Poles! ❄️🐧");
}
}
function askQuestion(questionNum) {
const resultDiv = document.getElementById('quiz-result');
resultDiv.classList.remove('hidden');
let question, options, correctAnswer, explanation;
switch(questionNum) {
case 1:
question = "What is the equator?";
options = ["A line you can see on Earth", "An imaginary line around Earth's middle", "A river"];
correctAnswer = 1;
explanation = "The equator is an imaginary line that goes around the middle of Earth, like a belt!";
break;
case 2:
question = "Where is the weather hottest on Earth?";
options = ["At the North Pole", "Near the equator", "In space"];
correctAnswer = 1;
explanation = "Near the equator is hottest because the Sun shines most directly there!";
break;
case 3:
question = "Which animals love hot, tropical weather near the equator?";
options = ["Penguins", "Polar bears", "Parrots and tigers"];
correctAnswer = 2;
explanation = "Tropical animals like parrots and tigers love the hot weather near the equator!";
break;
}
const userAnswer = prompt(question + "\n\n0: " + options[0] + "\n1: " + options[1] + "\n2: " + options[2] + "\n\nEnter 0, 1, or 2:");
if (parseInt(userAnswer) === correctAnswer) {
resultDiv.innerHTML = "🎉 Correct! " + explanation;
resultDiv.className = "quiz-result correct";
} else {
resultDiv.innerHTML = "🤔 Not quite! " + explanation + " Try again!";
resultDiv.className = "quiz-result incorrect";
}
setTimeout(() => {
resultDiv.classList.add('hidden');
}, 4000);
}
// Add some interactive animations
document.addEventListener('DOMContentLoaded', function() {
const zones = document.querySelectorAll('.zone');
zones.forEach(zone => {
zone.addEventListener('mouseenter', function() {
this.style.transform = 'translateY(-5px) scale(1.02)';
});
zone.addEventListener('mouseleave', function() {
this.style.transform = 'translateY(0) scale(1)';
});
});
});
</script>
</body>
</html>
```Drag to resize