<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>River Journey Adventure</title>
<style>
body {
font-family: 'Comic Sans MS', cursive, sans-serif;
background: linear-gradient(to bottom, #87CEEB, #E0F7FA);
margin: 0;
padding: 20px;
min-height: 100vh;
text-align: center;
color: #006400;
}
h1 {
color: #0066CC;
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
margin-bottom: 10px;
}
.container {
max-width: 800px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.9);
padding: 20px;
border-radius: 15px;
box-shadow: 0 0 15px rgba(0, 100, 0, 0.3);
}
.river-map {
position: relative;
height: 400px;
margin: 20px 0;
background: #E6F3FF;
border-radius: 10px;
overflow: hidden;
border: 3px solid #4CAF50;
}
.river-stage {
position: absolute;
width: 180px;
padding: 10px;
background: rgba(255, 255, 255, 0.95);
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
cursor: pointer;
transition: transform 0.3s;
border: 2px solid;
}
.river-stage:hover {
transform: scale(1.05);
}
.source {
top: 20px;
left: 50%;
transform: translateX(-50%);
border-color: #8B4513;
}
.upper {
top: 100px;
left: 30%;
border-color: #228B22;
}
.middle {
top: 180px;
left: 50%;
transform: translateX(-50%);
border-color: #1E90FF;
}
.lower {
top: 260px;
left: 30%;
border-color: #4169E1;
}
.mouth {
top: 340px;
left: 50%;
transform: translateX(-50%);
border-color: #000080;
}
.river-path {
position: absolute;
top: 0;
left: 50%;
width: 20px;
height: 100%;
background: linear-gradient(to bottom, #8B4513, #228B22, #1E90FF, #4169E1, #000080);
transform: translateX(-50%);
z-index: -1;
}
.info-panel {
display: none;
margin-top: 20px;
padding: 15px;
background: #F0F8FF;
border-radius: 10px;
border-left: 5px solid #4CAF50;
text-align: left;
}
.info-panel h3 {
margin-top: 0;
color: #0066CC;
}
.info-panel img {
max-width: 100%;
height: auto;
border-radius: 8px;
margin: 10px 0;
}
.close-btn {
float: right;
cursor: pointer;
font-weight: bold;
font-size: 1.2em;
}
.quiz-btn {
background: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
border-radius: 20px;
cursor: pointer;
font-size: 16px;
margin-top: 15px;
transition: background 0.3s;
}
.quiz-btn:hover {
background: #45a049;
}
.quiz-container {
display: none;
margin-top: 20px;
padding: 15px;
background: #FFF9C4;
border-radius: 10px;
border: 2px dashed #FFA500;
}
.option {
display: block;
width: 100%;
padding: 10px;
margin: 5px 0;
background: #E8F5E9;
border: 1px solid #4CAF50;
border-radius: 5px;
cursor: pointer;
text-align: left;
}
.option:hover {
background: #C8E6C9;
}
.feedback {
margin-top: 10px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h1>🌊 River Journey Adventure 🌊</h1>
<p>Click on each stage of the river to learn about its journey from source to mouth!</p>
<div class="river-map">
<div class="river-path"></div>
<div class="river-stage source" onclick="showInfo('source')">
<h3>Source</h3>
<p>Where the river begins</p>
</div>
<div class="river-stage upper" onclick="showInfo('upper')">
<h3>Upper Course</h3>
<p>Steep and fast-flowing</p>
</div>
<div class="river-stage middle" onclick="showInfo('middle')">
<h3>Middle Course</h3>
<p>Gently sloping valleys</p>
</div>
<div class="river-stage lower" onclick="showInfo('lower')">
<h3>Lower Course</h3>
<p>Wide and slow-moving</p>
</div>
<div class="river-stage mouth" onclick="showInfo('mouth')">
<h3>Mouth</h3>
<p>Where the river ends</p>
</div>
</div>
<div id="infoPanel" class="info-panel">
<span class="close-btn" onclick="closeInfo()">×</span>
<div id="infoContent"></div>
<button class="quiz-btn" onclick="showQuiz()">Take a Quick Quiz!</button>
</div>
<div id="quizContainer" class="quiz-container">
<h3 id="quizQuestion"></h3>
<div id="quizOptions"></div>
<div id="quizFeedback" class="feedback"></div>
</div>
</div>
<script>
const riverInfo = {
source: {
title: "River Source",
content: `<p>The source is where a river begins, usually in highland areas. This can be a spring, lake, melting snow, or glacier.</p>
<p>At this stage, the river is small, narrow, and flows quickly down steep slopes.</p>
<p><strong>Fun fact:</strong> The longest river in the world, the Nile, has its source in Lake Victoria in Africa!</p>`
},
upper: {
title: "Upper Course",
content: `<p>In the upper course, the river flows through steep mountains and hills. The water moves fast and has lots of energy.</p>
<p>This part of the river often has waterfalls, rapids, and V-shaped valleys.</p>
<p><strong>Fun fact:</strong> The powerful flow in the upper course can carve deep gorges like the Grand Canyon!</p>`
},
middle: {
title: "Middle Course",
content: `<p>In the middle course, the river flows through gentler slopes. The river gets wider and deeper as more water joins from tributaries.</p>
<p>This part often has meanders (bends) and the river begins to erode sideways more than downwards.</p>
<p><strong>Fun fact:</strong> Meanders can eventually become so curved that they cut off and form oxbow lakes!</p>`
},
lower: {
title: "Lower Course",
content: `<p>In the lower course, the river flows across flat plains. The river is wide, deep, and moves slowly.</p>
<p>This area often has floodplains where the river can overflow during heavy rain.</p>
<p><strong>Fun fact:</strong> The Amazon River in South America is so wide in its lower course that you can't see across it!</p>`
},
mouth: {
title: "River Mouth",
content: `<p>The mouth is where the river ends, usually flowing into a sea, ocean, or lake.</p>
<p>Many rivers form deltas at their mouths - fan-shaped areas of sediment that create new land.</p>
<p><strong>Fun fact:</strong> The Mississippi River Delta in the United States grows about 300 feet into the Gulf of Mexico each year!</p>`
}
};
const quizzes = {
source: {
question: "Where does a river typically begin?",
options: ["At the ocean", "At its source in highlands", "In a desert", "Underground"],
answer: 1
},
upper: {
question: "What features are common in the upper course of a river?",
options: ["Wide floodplains", "Waterfalls and rapids", "Deltas", "Oxbow lakes"],
answer: 1
},
middle: {
question: "What are the bends in a river called?",
options: ["Deltas", "Rapids", "Meanders", "Tributaries"],
answer: 2
},
lower: {
question: "How does the river flow in the lower course?",
options: ["Very fast", "Slow and wide", "Underground", "In waterfalls"],
answer: 1
},
mouth: {
question: "What landform might develop at a river's mouth?",
options: ["Mountain", "Delta", "Canyon", "Waterfall"],
answer: 1
}
};
let currentStage = '';
function showInfo(stage) {
currentStage = stage;
const info = riverInfo[stage];
document.getElementById('infoContent').innerHTML = `
<h3>${info.title}</h3>
${info.content}
`;
document.getElementById('infoPanel').style.display = 'block';
document.getElementById('quizContainer').style.display = 'none';
}
function closeInfo() {
document.getElementById('infoPanel').style.display = 'none';
}
function showQuiz() {
const quiz = quizzes[currentStage];
document.getElementById('quizQuestion').textContent = quiz.question;
let optionsHtml = '';
quiz.options.forEach((option, index) => {
optionsHtml += `<button class="option" onclick="checkAnswer(${index})">${option}</button>`;
});
document.getElementById('quizOptions').innerHTML = optionsHtml;
document.getElementById('quizFeedback').textContent = '';
document.getElementById('quizContainer').style.display = 'block';
}
function checkAnswer(selectedIndex) {
const correctIndex = quizzes[currentStage].answer;
const feedback = document.getElementById('quizFeedback');
if (selectedIndex === correctIndex) {
feedback.textContent = "Correct! Great job! 🌟";
feedback.style.color = "#4CAF50";
} else {
feedback.textContent = "Not quite. Try again! 💧";
feedback.style.color = "#F44336";
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Holiday Quiz</title>
<style>
body {
font-family: 'Comic Sans MS', cursive, sans-serif;
background-color: #f0f8ff;
text-align: center;
padding: 20px;
color: #333;
}
.container {
max-width: 600px;
margin: 0 auto;
background-color: white;
padding: 20px;
border-radius: 15px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h1 {
color: #4b0082;
}
.question {
margin-bottom: 20px;
display: none;
}
.active {
display: block;
}
button {
background-color: #4b0082;
color: white;
border: none;
padding: 10px 20px;
border-radius: 10px;
cursor: pointer;
margin: 10px;
font-size: 16px;
}
button:hover {
background-color: #6a0dad;
}
.option {
display: block;
margin: 10px auto;
width: 80%;
padding: 10px;
background-color: #e6e6fa;
border: 2px solid #4b0082;
border-radius: 10px;
cursor: pointer;
}
.option:hover {
background-color: #d8bfd8;
}
.result {
font-size: 24px;
font-weight: bold;
color: #4b0082;
margin-top: 20px;
}
.restart {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>Find Your Perfect Holiday!</h1>
<div id="intro">
<p>Answer 3 simple questions to discover your ideal holiday destination!</p>
<button id="start-btn">Start Quiz</button>
</div>
<div id="question1" class="question">
<h2>Question 1: What's your favorite weather?</h2>
<button class="option" data-value="beach">Sunny and hot! ☀️</button>
<button class="option" data-value="mountain">Cool and crisp! 🍂</button>
<button class="option" data-value="city">I don't mind, I just want to explore! 🌆</button>
</div>
<div id="question2" class="question">
<h2>Question 2: What's your ideal activity?</h2>
<button class="option" data-value="beach">Swimming and relaxing! 🏖️</button>
<button class="option" data-value="mountain">Hiking and adventure! ⛰️</button>
<button class="option" data-value="city">Shopping and sightseeing! 🏛️</button>
</div>
<div id="question3" class="question">
<h2>Question 3: What animals do you like?</h2>
<button class="option" data-value="beach">Dolphins and tropical fish! 🐬</button>
<button class="option" data-value="mountain">Bears and eagles! 🦅</button>
<button class="option" data-value="city">Pigeons and city pets! 🐕</button>
</div>
<div id="result" class="question">
<h2>Your Perfect Holiday Is...</h2>
<div class="result" id="holiday-result"></div>
<button class="restart" id="restart-btn">Try Again</button>
</div>
</div>
<script>
let scores = {beach: 0, mountain: 0, city: 0};
let currentQuestion = 0;
const questions = ['question1', 'question2', 'question3'];
document.getElementById('start-btn').addEventListener('click', startQuiz);
document.getElementById('restart-btn').addEventListener('click', restartQuiz);
function startQuiz() {
document.getElementById('intro').style.display = 'none';
showQuestion(0);
}
function showQuestion(index) {
questions.forEach(q => document.getElementById(q).classList.remove('active'));
document.getElementById(questions[index]).classList.add('active');
}
document.querySelectorAll('.option').forEach(option => {
option.addEventListener('click', function() {
scores[this.dataset.value]++;
currentQuestion++;
if (currentQuestion < questions.length) {
showQuestion(currentQuestion);
} else {
showResult();
}
});
});
function showResult() {
questions.forEach(q => document.getElementById(q).classList.remove('active'));
document.getElementById('result').classList.add('active');
let maxScore = Math.max(scores.beach, scores.mountain, scores.city);
let result = '';
if (scores.beach === maxScore) {
result = 'A Beach Vacation! 🏖️ Pack your swimsuit and sunscreen!';
} else if (scores.mountain === maxScore) {
result = 'A Mountain Adventure! ⛰️ Get ready for hiking and fresh air!';
} else {
result = 'A City Exploration! 🌆 Time to discover museums and shops!';
}
document.getElementById('holiday-result').textContent = result;
}
function restartQuiz() {
scores = {beach: 0, mountain: 0, city: 0};
currentQuestion = 0;
document.getElementById('result').classList.remove('active');
document.getElementById('intro').style.display = 'block';
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Emotion Memory Match</title>
<style>
body {
font-family: 'Comic Sans MS', cursive, sans-serif;
background-color: #f0f9ff;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
}
h1 {
color: #4a6fa5;
margin-bottom: 10px;
}
.game-info {
margin-bottom: 20px;
text-align: center;
}
.game-board {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
max-width: 500px;
}
.card {
width: 100px;
height: 100px;
background-color: #a2d2ff;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
cursor: pointer;
transition: transform 0.3s;
transform-style: preserve-3d;
}
.card.flipped {
transform: rotateY(180deg);
}
.card-front, .card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
}
.card-front {
background-color: #ffafcc;
transform: rotateY(180deg);
}
.card-back {
background-color: #a2d2ff;
font-size: 40px;
}
.matched {
visibility: hidden;
}
button {
background-color: #4a6fa5;
color: white;
border: none;
padding: 10px 20px;
border-radius: 20px;
font-family: 'Comic Sans MS', cursive;
font-size: 16px;
cursor: pointer;
margin-top: 20px;
}
button:hover {
background-color: #3a5a80;
}
</style>
</head>
<body>
<h1>Emotion Memory Match</h1>
<div class="game-info">
<p>Match the emotion emoji with its name!</p>
<p id="moves">Moves: 0</p>
</div>
<div class="game-board" id="gameBoard"></div>
<button id="resetButton">Play Again</button>
<script>
document.addEventListener('DOMContentLoaded', () => {
const emotions = [
{ emoji: '😨', name: 'Scared' },
{ emoji: '🤩', name: 'Excited' },
{ emoji: '😌', name: 'Calm' },
{ emoji: '😤', name: 'Frustrated' },
{ emoji: '😕', name: 'Confused' },
{ emoji: '🥱', name: 'Bored' },
{ emoji: '😳', name: 'Embarrassed' },
{ emoji: '😮💨', name: 'Relieved' }
];
const gameBoard = document.getElementById('gameBoard');
const movesDisplay = document.getElementById('moves');
const resetButton = document.getElementById('resetButton');
let cards = [];
let flippedCards = [];
let moves = 0;
let matchedPairs = 0;
function initializeGame() {
gameBoard.innerHTML = '';
moves = 0;
matchedPairs = 0;
flippedCards = [];
movesDisplay.textContent = 'Moves: 0';
// Create pairs of cards
let gameCards = [];
emotions.forEach(emotion => {
gameCards.push({ type: 'emoji', content: emotion.emoji, match: emotion.name });
gameCards.push({ type: 'name', content: emotion.name, match: emotion.emoji });
});
// Shuffle cards
cards = gameCards.sort(() => Math.random() - 0.5);
// Create card elements
cards.forEach((card, index) => {
const cardElement = document.createElement('div');
cardElement.classList.add('card');
cardElement.dataset.index = index;
const cardFront = document.createElement('div');
cardFront.classList.add('card-front');
cardFront.textContent = card.content;
const cardBack = document.createElement('div');
cardBack.classList.add('card-back');
cardBack.textContent = '?';
cardElement.appendChild(cardFront);
cardElement.appendChild(cardBack);
cardElement.addEventListener('click', () => flipCard(cardElement, index));
gameBoard.appendChild(cardElement);
});
}
function flipCard(cardElement, index) {
if (flippedCards.length < 2 && !flippedCards.includes(index) && !cardElement.classList.contains('matched')) {
cardElement.classList.add('flipped');
flippedCards.push(index);
if (flippedCards.length === 2) {
moves++;
movesDisplay.textContent = `Moves: ${moves}`;
const card1 = cards[flippedCards[0]];
const card2 = cards[flippedCards[1]];
if ((card1.type === 'emoji' && card2.type === 'name' && card1.match === card2.content) ||
(card1.type === 'name' && card2.type === 'emoji' && card1.content === card2.match)) {
// Match found
setTimeout(() => {
document.querySelectorAll(`.card[data-index="${flippedCards[0]}"]`).forEach(card => card.classList.add('matched'));
document.querySelectorAll(`.card[data-index="${flippedCards[1]}"]`).forEach(card => card.classList.add('matched'));
flippedCards = [];
matchedPairs++;
if (matchedPairs === emotions.length) {
setTimeout(() => {
alert(`Congratulations! You won in ${moves} moves!`);
}, 500);
}
}, 500);
} else {
// No match
setTimeout(() => {
document.querySelectorAll(`.card[data-index="${flippedCards[0]}"]`).forEach(card => card.classList.remove('flipped'));
document.querySelectorAll(`.card[data-index="${flippedCards[1]}"]`).forEach(card => card.classList.remove('flipped'));
flippedCards = [];
}, 1000);
}
}
}
}
resetButton.addEventListener('click', initializeGame);
initializeGame();
});
</script>
</body>
</html>