Spaces:

pranit144
/

page2

Running

App Files Files Community

page2 / index.html

pranit144

Update index.html

40c512f verified 8 months ago

raw

history blame contribute delete

9.76 kB

	<!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">
	<!-- Top Section: Answers -->
	<div class="answers-section">
	<div class="section-title"> ANSWERS - Drag These Cards</div>
	<div id="answers"></div>
	</div>

	<!-- Bold Separator -->
	<div class="separator"></div>

	<!-- Bottom Section: Questions -->
	<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;

	// Shuffle function
	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");

	// Clear existing content
	document.getElementById("answers").innerHTML = "";
	document.getElementById("questions").innerHTML = "";

	score = 0;
	matchedPairs = 0;
	updateScore();
	document.getElementById("completion").style.display = "none";

	// Render questions
	pairs.forEach((pair, index) => {
	let qDiv = document.createElement("div");
	qDiv.className = "card question-card";
	qDiv.innerText = pair.q;
	qDiv.dataset.index = index;

	// Add drop event listeners
	qDiv.addEventListener('dragover', handleDragOver);
	qDiv.addEventListener('drop', handleDrop);
	qDiv.addEventListener('dragleave', handleDragLeave);

	questionsDiv.appendChild(qDiv);
	});

	// Render shuffled answers
	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;

	// Add drag event listeners
	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; // Can't drop on already matched questions
	}

	if (answerIndex === questionIndex) {
	// Correct match
	e.target.classList.add('matched');
	const answerCard = document.querySelector(`.answer-card[data-index="${answerIndex}"]`);
	answerCard.classList.add('matched');
	answerCard.draggable = false;

	score += 10;
	matchedPairs++;

	// Check if game is complete
	if (matchedPairs === pairs.length) {
	setTimeout(() => {
	document.getElementById("completion").style.display = "block";
	}, 500);
	}
	} else {
	// Wrong match
	e.target.classList.add('wrong-match');
	setTimeout(() => {
	e.target.classList.remove('wrong-match');
	}, 500);

	score = Math.max(0, score - 2); // Don't let score go negative
	}

	updateScore();
	}

	function updateScore() {
	document.getElementById("score").innerText = "Score: " + score;
	}

	function resetGame() {
	initGame();
	}

	// Initialize the game when page loads
	initGame();
	</script>
	</body>
	</html>