Spaces:

pranit144
/

page2

Running

File size: 9,759 Bytes

<!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>