<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ข้อสอบหลังเรียน</title>
    <style>
        /* เพิ่มสไตล์ CSS ตามความต้องการของคุณ */
    </style>
</head>
<body>
    <h1>ข้อสอบหลังเรียน</h1>

    <!-- คำถามปรนัย 1 -->
    <div class="question">
        <p>คำถามปรนัย 1: ระบบลงทะเบียนนักเรียนเกี่ยวข้องกับใคร?</p>
        <input type="radio" name="question1" value="ขาว"> ผู้อำนวยการ<br>
        <input type="radio" name="question1" value="เขียว"> นักเรียน<br>
        <input type="radio" name="question1" value="แดง"> คุณครู<br>
    </div>

    <!-- คำถามปรนัย 2 -->
    <div class="question">
        <p>คำถามปรนัย 2: ระบบลงทะเบียนนักเรียนต้องมีหน้าเพิ่มทะเบียนหรือไม่?</p>
        <input type="radio" name="question2" value="เอเชีย"> มี<br>
        <input type="radio" name="question2" value="ยุโรป"> ไม่มี<br>
        <input type="radio" name="question2" value="อเมริกา"> มีและไม่มีก็ได้<br>
    </div>

    <!-- คำถามปรนัย 3 -->
    <div class="question">
        <p>คำถามปรนัย 3: ระบบลงทะเบียนนักเรียนต้องมีอะไรเป็นสำคัญ?</p>
        <input type="radio" name="question3" value=""> หน้าลงทะเบียน<br>
        <input type="radio" name="question3" value=""> หน้าเพิ่มทะเบียน<br>
        <input type="radio" name="question3" value=""> หน้าดูข้อมูลนักเรียน<br>
    </div>

    <!-- คำถามอัตนัย -->
    <div class="question">
        <p>คำถามอัตนัย: ให้นักเรียนอธิบายเกี่ยวกับระบบลงทะเบียนนักเรียนว่าจำเป็นมากน้อยแค่ไหน?</p>
        <textarea name="essay" rows="4" cols="50"></textarea>
    </div>

    <button onclick="submitAnswers()">ส่งคำตอบ</button>

    <script>
      function submitAnswers() {
          // ดึงคำตอบของคำถามทุกข้อ
          var answers = {
              question1: document.querySelector('input[name="question1"]:checked').value,
              question2: document.querySelector('input[name="question2"]:checked').value,
              question3: document.querySelector('input[name="question3"]:checked').value,
              essay: document.querySelector('textarea[name="essay"]').value
          };

          // ส่งคำตอบไปยังเซิร์ฟเวอร์หรือทำการประมวลผลตามความต้องการ
          console.log(answers); // แสดงคำตอบในคอนโซล
          // สามารถส่งคำตอบไปยังเซิร์ฟเวอร์และประมวลผลต่อไปตามความต้องการ
      }
  </script>
</body>
</html>