<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Verb Fill-in Exercise</title>
<style>
  body {
    font-family: Arial, sans-serif;
    width: 620px;
    margin: 20px auto;
    font-size: 14px;
    line-height: 1.5;
  }

  p {
    margin-bottom: 15px;
  }
  .sentence {
    margin-bottom: 15px;
  }
  input {
    width: 100px;
    font-size: 16px;
    margin-left: 10px;
  }
  button {
    margin-top: 10px;
    padding: 10px 10px;
    font-size: 14px;
  }
  #result {
    margin-top: 20px;
    font-weight: bold;
  }
</style>
</head>
<body>

<h2>Back to school</h2>
<div class="sentence">
  Last Monday, I <span>(wake)</span> <input type="text" data-answer="woke" /> up early. I <span>(be)</span> <input type="text" data-answer="was" /> excited because it was the first day of a new school year. I <span>(dress)</span> <input type="text" data-answer="dressed" /> quickly and <span>(eat)</span> <input type="text" data-answer="ate" /> a big breakfast. When I <span>(arrive)</span> <input type="text" data-answer="arrived" /> at school, I <span>(see)</span> <input type="text" data-answer="saw" /> my friends waiting at the entrance. We <span>(hug)</span> <input type="text" data-answer="hugged" /> and <span>(talk)</span> <input type="text" data-answer="talked" /> about our holidays.
</div>
<div class="sentence">
  During the first lesson, our English teacher <span>(explain)</span> <input type="text" data-answer="explained" /> the new topics we would learn this year. I <span>(listen)</span> <input type="text" data-answer="listened" /> carefully and <span>(take)</span> <input type="text" data-answer="took" /> notes.
  At lunch, my classmates and I <span>(share)</span> <input type="text" data-answer="shared" /> sandwiches and <span>(laugh)</span> <input type="text" data-answer="laughed" /> about funny things that <span>(happen)</span> <input type="text" data-answer="happened" /> over the summer.
</div>
<div class="sentence">
  At the end of the day, I <span>(feel)</span> <input type="text" data-answer="felt" /> tired but happy. I <span>(say)</span> <input type="text" data-answer="said" /> goodbye to my friends and <span>(walk)</span> <input type="text" data-answer="walked" /> home, thinking about all the new things I <span>(learn)</span> <input type="text" data-answer="learned" /> today and looking forward to tomorrow.
</div>

<button onclick="checkAnswers()">Check Answers</button>
<div id="result"></div>

<script>
function checkAnswers() {
  const inputs = document.querySelectorAll('input');
  let score = 0;
  inputs.forEach(input => {
    const answer = input.getAttribute('data-answer').toLowerCase();
    const userAnswer = input.value.trim().toLowerCase();
    if (answer === userAnswer) {
      score++;
      input.style.borderColor = 'green';
    } else {
      input.style.borderColor = 'red';
    }
  });
  document.getElementById('result').textContent = `You got ${score} out of ${inputs.length} correct.`;
}
</script>

</body>
</html>