Заголовок тест

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: Arial, sans-serif;
    }

    #crossword {
      width: 400px;
      height: 400px;
      background-color: white;
    }

    #questions {
      margin-left: 20px;
    }

    .question {
      margin-bottom: 10px;
    }

    .question label {
      font-weight: bold;
    }

    .question input[type="text"] {
      width: 100px;
    }

    .check-button {
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <div id="crossword"></div>
  <div id="questions">
    <div class="question">
      <label>1. Вертикальный, 1. Главный город Японии</label>
      <input type="text" id="q1" />
    </div>
    <div class="question">
      <label>2. Горизонтальный, 3. Столица России</label>
      <input type="text" id="q2" />
    </div>
    <div class="question">
      <label>3. Горизонтальный, 4. Правительство, состоящее из одной партии</label>
      <input type="text" id="q3" />
    </div>
    <div class="question">
      <label>4. Вертикальный, 2. Язык программирования, часто используемый для веб-разработки</label>
      <input type="text" id="q4" />
    </div>
    <div class="question">
      <label>5. Горизонтальный, 1. Столица Франции</label>
      <input type="text" id="q5" />
    </div>
    <button class="check-button" onclick="checkAnswers()">Проверить</button>
  </div>

  <script>
    function checkAnswers() {
      var answers = {
        q1: "токио",
        q2: "москва",
        q3: "однопартийное",
        q4: "javascript",
        q5: "париж"
      };

      var correctColor = "green";
      var wrongColor = "red";

      for (var key in answers) {
        var input = document.getElementById(key);
        if (input.value.toLowerCase() === answers[key]) {
          input.style.backgroundColor = correctColor;
        } else {
          input.style.backgroundColor = wrongColor;
        }
      }
    }
  </script>
</body>
</html>
текст