如何实现答错谜题时点击按钮让计时器扣除5分钟？

Great question! To add a 5-minute penalty for wrong answers, we need to adjust your timer to track mutable remaining time instead of relying solely on the initial start timestamp. Here's how to modify your code step-by-step:

Key Changes Needed: #

• Track remaining time in a variable that can be updated when penalties are applied
• Create a dedicated function to apply the 5-minute (300 second) penalty
• Ensure the timer doesn't go negative (cap it at 0 seconds)

Modified Code #

// Initialize display element (replace with your actual display selector)
const display = document.getElementById('timer');
// Set initial duration to 45 minutes in seconds
let remainingTime = 45 * 60;
let timerInterval;

function startTimer() {
  function updateTimer() {
    // Calculate minutes and seconds from remaining time
    let minutes = Math.floor(remainingTime / 60);
    let seconds = remainingTime % 60;
    
    // Format numbers to 2 digits
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;
    
    // Update display
    display.textContent = `${minutes}:${seconds}`;
    
    // Check if time is up
    if (remainingTime <= 0) {
      clearInterval(timerInterval);
      display.textContent = "Time's Up!";
      // Add logic here for when the timer ends (e.g., lock puzzle)
      return;
    }
    
    // Decrement remaining time by 1 second
    remainingTime--;
  }
  
  // Run update immediately to avoid 1-second delay
  updateTimer();
  // Set interval to update every second
  timerInterval = setInterval(updateTimer, 1000);
}

// Function to apply 5-minute penalty (call this when a wrong answer is submitted)
function applyWrongAnswerPenalty() {
  const penaltySeconds = 5 * 60; // 5 minutes in seconds
  // Subtract penalty but don't let time go negative
  remainingTime = Math.max(remainingTime - penaltySeconds, 0);
  // Optional: Add visual feedback for the penalty
  display.style.color = "red";
  setTimeout(() => display.style.color = "black", 1000);
}

// Start the timer when your puzzle loads
startTimer();

How It Works: #

• Mutable Remaining Time: We use let remainingTime instead of a fixed duration, so we can easily subtract time when a wrong answer is given.
• Penalty Function: applyWrongAnswerPenalty() subtracts 300 seconds (5 minutes) from the remaining time, using Math.max() to ensure it never goes below 0.
• Timer Updates: The timer now counts down from the current remainingTime value, so any penalty changes are immediately reflected in the display.
• Visual Feedback: The optional color flash gives participants clear feedback that a penalty was applied.

Integration Tip: #

Call applyWrongAnswerPenalty() whenever you detect an incorrect answer (e.g., when a submit button is clicked and the answer doesn't match the correct solution).

内容的提问来源于stack exchange，提问作者Duncan Bart