|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<title>Rainwater Harvesting Match Game</title> |
|
|
<style> |
|
|
body { |
|
|
font-family: Arial, sans-serif; |
|
|
text-align: center; |
|
|
background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 100%); |
|
|
margin: 0; |
|
|
|
|
|
} |
|
|
|
|
|
h1 { |
|
|
|
|
|
color: #0277bd; |
|
|
text-shadow: 2px 2px 4px rgba(0,0,0,0.1); |
|
|
} |
|
|
|
|
|
.instructions { |
|
|
background: rgba(255,255,255,0.9); |
|
|
padding: 15px; |
|
|
border-radius: 10px; |
|
|
margin: 20px auto; |
|
|
max-width: 900px; |
|
|
color: #0277bd; |
|
|
font-weight: bold; |
|
|
} |
|
|
|
|
|
.container { |
|
|
max-width: 1200px; |
|
|
margin: 0 auto; |
|
|
} |
|
|
|
|
|
.answers-section { |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
|
|
|
border-radius: 15px; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.separator { |
|
|
height: 6px; |
|
|
background: linear-gradient(90deg, #0288d1, #ff7043, #0288d1); |
|
|
border-radius: 3px; |
|
|
|
|
|
max-width: 1200px; |
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.2); |
|
|
} |
|
|
|
|
|
.questions-section { |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
|
|
|
border-radius: 15px; |
|
|
margin-top: 20px; |
|
|
} |
|
|
|
|
|
.section-title { |
|
|
font-size: 24px; |
|
|
font-weight: bold; |
|
|
color: #0277bd; |
|
|
text-align: center; |
|
|
text-shadow: 2px 2px 4px rgba(0,0,0,0.1); |
|
|
} |
|
|
|
|
|
#answers { |
|
|
display: flex; |
|
|
flex-wrap: wrap; |
|
|
justify-content: center; |
|
|
gap: 15px; |
|
|
} |
|
|
|
|
|
#questions { |
|
|
display: flex; |
|
|
flex-wrap: wrap; |
|
|
justify-content: center; |
|
|
gap: 15px; |
|
|
} |
|
|
|
|
|
.column h3 { |
|
|
color: #0277bd; |
|
|
margin-bottom: 20px; |
|
|
font-size: 18px; |
|
|
} |
|
|
|
|
|
.card { |
|
|
width: 250px; |
|
|
padding: 15px; |
|
|
margin: 12px 0; |
|
|
background: #0288d1; |
|
|
color: white; |
|
|
border-radius: 12px; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.2); |
|
|
border: 3px solid transparent; |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
.card:hover { |
|
|
background: #0277bd; |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 6px 12px rgba(0,0,0,0.3); |
|
|
} |
|
|
|
|
|
.answer-card { |
|
|
cursor: grab; |
|
|
background: #ff7043; |
|
|
} |
|
|
|
|
|
.answer-card:hover { |
|
|
background: #f4511e; |
|
|
} |
|
|
|
|
|
.answer-card:active { |
|
|
cursor: grabbing; |
|
|
} |
|
|
|
|
|
.question-card { |
|
|
background: #0288d1; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.question-card.drag-over { |
|
|
border-color: #4caf50; |
|
|
background: #43a047; |
|
|
transform: scale(1.02); |
|
|
} |
|
|
|
|
|
.matched { |
|
|
background: #388e3c !important; |
|
|
pointer-events: none; |
|
|
animation: matchPulse 0.6s ease; |
|
|
} |
|
|
|
|
|
@keyframes matchPulse { |
|
|
0% { transform: scale(1); } |
|
|
50% { transform: scale(1.05); } |
|
|
100% { transform: scale(1); } |
|
|
} |
|
|
|
|
|
.dragging { |
|
|
opacity: 0.7; |
|
|
transform: rotate(5deg); |
|
|
z-index: 1000; |
|
|
} |
|
|
|
|
|
.wrong-match { |
|
|
animation: shake 0.5s ease; |
|
|
border-color: #f44336; |
|
|
} |
|
|
|
|
|
@keyframes shake { |
|
|
0%, 100% { transform: translateX(0); } |
|
|
25% { transform: translateX(-5px); } |
|
|
75% { transform: translateX(5px); } |
|
|
} |
|
|
|
|
|
#score { |
|
|
font-size: 24px; |
|
|
margin-top: 30px; |
|
|
font-weight: bold; |
|
|
color: #0277bd; |
|
|
background: rgba(255,255,255,0.9); |
|
|
padding: 15px; |
|
|
border-radius: 10px; |
|
|
display: inline-block; |
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.1); |
|
|
} |
|
|
|
|
|
.reset-btn { |
|
|
background: #ff7043; |
|
|
color: white; |
|
|
border: none; |
|
|
padding: 12px 24px; |
|
|
font-size: 16px; |
|
|
border-radius: 8px; |
|
|
cursor: pointer; |
|
|
margin-top: 20px; |
|
|
transition: background 0.3s ease; |
|
|
} |
|
|
|
|
|
.reset-btn:hover { |
|
|
background: #f4511e; |
|
|
} |
|
|
|
|
|
.completion-message { |
|
|
background: #4caf50; |
|
|
color: white; |
|
|
padding: 20px; |
|
|
border-radius: 10px; |
|
|
margin: 20px auto; |
|
|
max-width: 400px; |
|
|
font-size: 18px; |
|
|
font-weight: bold; |
|
|
display: none; |
|
|
animation: slideIn 0.5s ease; |
|
|
} |
|
|
|
|
|
@keyframes slideIn { |
|
|
from { opacity: 0; transform: translateY(-20px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<h1>Rainwater Harvesting Drag & Drop Match-Up</h1> |
|
|
|
|
|
<div class="container"> |
|
|
|
|
|
<div class="answers-section"> |
|
|
<div class="section-title"> ANSWERS - Drag These Cards</div> |
|
|
<div id="answers"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="separator"></div> |
|
|
|
|
|
|
|
|
<div class="questions-section"> |
|
|
<div class="section-title"> QUESTIONS - Drop Answers Here</div> |
|
|
<div id="questions"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="score">Score: 0</div> |
|
|
<div class="completion-message" id="completion">🎉 Congratulations! You matched all pairs!</div> |
|
|
<button class="reset-btn" onclick="resetGame()">🔄 Play Again</button> |
|
|
|
|
|
<script> |
|
|
const pairs = [ |
|
|
{q:"What is Rainwater Harvesting?", a:"Collection & storage of rainwater"}, |
|
|
{q:"What reduces the impact of flooding?", a:"Rainwater Harvesting"}, |
|
|
{q:"Can we harvest Rainwater through irrigation?", a:"Yes"}, |
|
|
{q:"In how many categories is Agriculture split into?", a:"Three"}, |
|
|
{q:"What is the primary benefit of rainwater harvesting?", a:"Groundwater recharge"}, |
|
|
{q:"Which roofing material is best for rainwater collection?", a:"Metal or concrete"}, |
|
|
{q:"What should be the first step in rainwater harvesting?", a:"Catchment area calculation"}, |
|
|
{q:"What removes debris from collected rainwater?", a:"First flush diverter"}, |
|
|
{q:"What is the ideal pH range for stored rainwater?", a:"6.5 to 8.5"}, |
|
|
{q:"Which storage method prevents mosquito breeding?", a:"Covered tanks"}, |
|
|
{q:"What percentage of roof runoff is typically harvestable?", a:"80-90%"}, |
|
|
{q:"Which season requires the most rainwater storage planning?", a:"Dry season"} |
|
|
]; |
|
|
|
|
|
let score = 0; |
|
|
let matchedPairs = 0; |
|
|
|
|
|
|
|
|
function shuffle(array) { |
|
|
const shuffled = [...array]; |
|
|
for (let i = shuffled.length - 1; i > 0; i--) { |
|
|
const j = Math.floor(Math.random() * (i + 1)); |
|
|
[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]; |
|
|
} |
|
|
return shuffled; |
|
|
} |
|
|
|
|
|
function initGame() { |
|
|
const questionsDiv = document.getElementById("questions"); |
|
|
const answersDiv = document.getElementById("answers"); |
|
|
|
|
|
|
|
|
document.getElementById("answers").innerHTML = ""; |
|
|
document.getElementById("questions").innerHTML = ""; |
|
|
|
|
|
score = 0; |
|
|
matchedPairs = 0; |
|
|
updateScore(); |
|
|
document.getElementById("completion").style.display = "none"; |
|
|
|
|
|
|
|
|
pairs.forEach((pair, index) => { |
|
|
let qDiv = document.createElement("div"); |
|
|
qDiv.className = "card question-card"; |
|
|
qDiv.innerText = pair.q; |
|
|
qDiv.dataset.index = index; |
|
|
|
|
|
|
|
|
qDiv.addEventListener('dragover', handleDragOver); |
|
|
qDiv.addEventListener('drop', handleDrop); |
|
|
qDiv.addEventListener('dragleave', handleDragLeave); |
|
|
|
|
|
questionsDiv.appendChild(qDiv); |
|
|
}); |
|
|
|
|
|
|
|
|
const shuffledPairs = shuffle(pairs); |
|
|
shuffledPairs.forEach((pair, index) => { |
|
|
let aDiv = document.createElement("div"); |
|
|
aDiv.className = "card answer-card"; |
|
|
aDiv.innerText = pair.a; |
|
|
aDiv.dataset.index = pairs.findIndex(p => p.a === pair.a); |
|
|
aDiv.draggable = true; |
|
|
|
|
|
|
|
|
aDiv.addEventListener('dragstart', handleDragStart); |
|
|
aDiv.addEventListener('dragend', handleDragEnd); |
|
|
|
|
|
answersDiv.appendChild(aDiv); |
|
|
}); |
|
|
} |
|
|
|
|
|
function handleDragStart(e) { |
|
|
e.target.classList.add('dragging'); |
|
|
e.dataTransfer.setData('text/plain', e.target.dataset.index); |
|
|
} |
|
|
|
|
|
function handleDragEnd(e) { |
|
|
e.target.classList.remove('dragging'); |
|
|
} |
|
|
|
|
|
function handleDragOver(e) { |
|
|
e.preventDefault(); |
|
|
e.target.classList.add('drag-over'); |
|
|
} |
|
|
|
|
|
function handleDragLeave(e) { |
|
|
e.target.classList.remove('drag-over'); |
|
|
} |
|
|
|
|
|
function handleDrop(e) { |
|
|
e.preventDefault(); |
|
|
e.target.classList.remove('drag-over'); |
|
|
|
|
|
const answerIndex = e.dataTransfer.getData('text/plain'); |
|
|
const questionIndex = e.target.dataset.index; |
|
|
|
|
|
if (e.target.classList.contains('matched')) { |
|
|
return; |
|
|
} |
|
|
|
|
|
if (answerIndex === questionIndex) { |
|
|
|
|
|
e.target.classList.add('matched'); |
|
|
const answerCard = document.querySelector(`.answer-card[data-index="${answerIndex}"]`); |
|
|
answerCard.classList.add('matched'); |
|
|
answerCard.draggable = false; |
|
|
|
|
|
score += 10; |
|
|
matchedPairs++; |
|
|
|
|
|
|
|
|
if (matchedPairs === pairs.length) { |
|
|
setTimeout(() => { |
|
|
document.getElementById("completion").style.display = "block"; |
|
|
}, 500); |
|
|
} |
|
|
} else { |
|
|
|
|
|
e.target.classList.add('wrong-match'); |
|
|
setTimeout(() => { |
|
|
e.target.classList.remove('wrong-match'); |
|
|
}, 500); |
|
|
|
|
|
score = Math.max(0, score - 2); |
|
|
} |
|
|
|
|
|
updateScore(); |
|
|
} |
|
|
|
|
|
function updateScore() { |
|
|
document.getElementById("score").innerText = "Score: " + score; |
|
|
} |
|
|
|
|
|
function resetGame() { |
|
|
initGame(); |
|
|
} |
|
|
|
|
|
|
|
|
initGame(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
