index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Name Quiz</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>

<body>
  <div class="quiz-container">
    <h2>Your name around the world!</h2>

    <form class="name-form" id="myForm">
      <label for="nameInput">Enter only letters for Name:</label>
      <input type="text" id="nameInput" name="nameInput" pattern="[A-Za-z]+" title="Please enter only letters" required
        class="name-input" />
      <button type="submit" class="submit-button">Submit</button>
    </form>

    <div class="number-of-people-box hidden">
      <h3>Average Number of People</h3>
      <p id="numberOfPeople">0</p>
    </div>
    <div class="showing-area hidden">
      <div class="region-chart hidden" id="regionChart">
        <h3>Select the country</h3>
        <canvas id="pieChart2" width="300" height="150"></canvas>
      </div>

      <div class="gender-chart hidden">
        <h3>Gender Graph</h3>
        <canvas id="pieChart1" width="300" height="150"></canvas>
      </div>

      <div class="age hidden">
        <h3>Average Age</h3>
        <p id="ageData">This is where age data will be displayed.</p>
      </div>
    </div>
  </div>

  <script src="FinishedScript.js"></script>
</body>

</html>