| <!DOCTYPE html> |
| <html lang="th"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>ระบบสื่อการสอนออนไลน์</title> |
| <style> |
| :root { |
| --primary-color: #4a6fa5; |
| --secondary-color: #166088; |
| --accent-color: #4fc3f7; |
| --text-color: #333; |
| --light-bg: #f5f9fc; |
| } |
| |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| font-family: 'Kanit', 'TH Sarabun New', sans-serif; |
| } |
| |
| body { |
| background-color: var(--light-bg); |
| color: var(--text-color); |
| line-height: 1.6; |
| } |
| |
| |
| .header { |
| background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); |
| color: white; |
| padding: 1.5rem 0; |
| box-shadow: 0 4px 12px rgba(0,0,0,0.1); |
| } |
| |
| .header-container { |
| max-width: 1200px; |
| margin: 0 auto; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding: 0 2rem; |
| } |
| |
| .logo { |
| display: flex; |
| align-items: center; |
| gap: 1rem; |
| } |
| |
| .logo img { |
| height: 60px; |
| } |
| |
| |
| .nav-menu { |
| display: flex; |
| list-style: none; |
| gap: 1.5rem; |
| } |
| |
| .nav-menu a { |
| color: white; |
| text-decoration: none; |
| font-weight: 500; |
| padding: 0.5rem 1rem; |
| border-radius: 4px; |
| transition: all 0.3s ease; |
| } |
| |
| .nav-menu a:hover { |
| background-color: rgba(255,255,255,0.2); |
| } |
| |
| |
| .main-container { |
| max-width: 1200px; |
| margin: 2rem auto; |
| padding: 0 2rem; |
| } |
| |
| .course-section { |
| background: white; |
| border-radius: 8px; |
| box-shadow: 0 2px 10px rgba(0,0,0,0.05); |
| padding: 2rem; |
| margin-bottom: 2rem; |
| } |
| |
| .section-title { |
| color: var(--secondary-color); |
| margin-bottom: 1.5rem; |
| padding-bottom: 0.5rem; |
| border-bottom: 2px solid var(--accent-color); |
| } |
| |
| |
| .video-container { |
| position: relative; |
| padding-bottom: 56.25%; |
| height: 0; |
| overflow: hidden; |
| margin: 1.5rem 0; |
| border-radius: 8px; |
| box-shadow: 0 4px 8px rgba(0,0,0,0.1); |
| } |
| |
| .video-container iframe { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| border: none; |
| } |
| |
| |
| .document-card { |
| background: var(--light-bg); |
| border-left: 4px solid var(--accent-color); |
| padding: 1.5rem; |
| margin: 1rem 0; |
| border-radius: 0 8px 8px 0; |
| transition: transform 0.3s ease; |
| } |
| |
| .document-card:hover { |
| transform: translateX(5px); |
| } |
| |
| .document-card h3 { |
| color: var(--secondary-color); |
| margin-bottom: 0.5rem; |
| } |
| |
| .document-card a { |
| display: inline-block; |
| margin-top: 0.5rem; |
| padding: 0.5rem 1rem; |
| background-color: var(--accent-color); |
| color: white; |
| text-decoration: none; |
| border-radius: 4px; |
| font-weight: 500; |
| } |
| |
| |
| .quiz-container { |
| background: white; |
| border-radius: 8px; |
| padding: 2rem; |
| box-shadow: 0 2px 10px rgba(0,0,0,0.05); |
| } |
| |
| .question { |
| margin-bottom: 1.5rem; |
| padding-bottom: 1rem; |
| border-bottom: 1px solid #eee; |
| } |
| |
| .options { |
| margin-top: 1rem; |
| } |
| |
| .option { |
| margin: 0.5rem 0; |
| } |
| |
| .submit-btn { |
| background-color: var(--primary-color); |
| color: white; |
| border: none; |
| padding: 0.8rem 1.5rem; |
| border-radius: 4px; |
| cursor: pointer; |
| font-size: 1rem; |
| font-weight: 500; |
| transition: background 0.3s; |
| } |
| |
| .submit-btn:hover { |
| background-color: var(--secondary-color); |
| } |
| |
| |
| @media (max-width: 768px) { |
| .header-container { |
| flex-direction: column; |
| text-align: center; |
| gap: 1rem; |
| } |
| |
| .nav-menu { |
| flex-wrap: wrap; |
| justify-content: center; |
| } |
| } |
| </style> |
| </head> |
| <body> |
| |
| <header class="header"> |
| <div class="header-container"> |
| <div class="logo"> |
| <img src="https://via.placeholder.com/60x60?text=LOGO" alt="โลโก้สื่อการสอน"> |
| <h1>ระบบสื่อการสอนออนไลน์</h1> |
| </div> |
| |
| <ul class="nav-menu"> |
| <li><a href="#">หน้าหลัก</a></li> |
| <li><a href="#">บทเรียนทั้งหมด</a></li> |
| <li><a href="#">แบบฝึกหัด</a></li> |
| <li><a href="#">แบบทดสอบ</a></li> |
| <li><a href="#">ติดต่อครู</a></li> |
| </ul> |
| </div> |
| </header> |
| |
| |
| <main class="main-container"> |
| |
| <section class="course-section"> |
| <h2 class="section-title">บทเรียนวิดีโอ</h2> |
| <p>เรียนรู้เนื้อหาผ่านวิดีโอการสอนที่เข้าใจง่าย</p> |
| |
| <div class="video-container"> |
| |
| <iframe src="https://www.youtube.com/embed/VIDEO_ID" |
| frameborder="0" |
| allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" |
| allowfullscreen></iframe> |
| </div> |
| |
| <div class="video-info"> |
| <h3>การสร้างเว็บไซต์เบื้องต้น</h3> |
| <p>ความยาว: 15:30 นาที | ระดับความยาก: ปานกลาง</p> |
| </div> |
| </section> |
| |
| |
| <section class="course-section"> |
| <h2 class="section-title">เอกสารประกอบการเรียน</h2> |
| <p>ดาวน์โหลดใบงานและเอกสารประกอบการเรียนรู้</p> |
| |
| <div class="document-card"> |
| <h3>ใบงานที่ 1: แบบฝึกหัด HTML</h3> |
| <p>แบบฝึกหัดการเขียนโครงสร้าง HTML เบื้องต้น</p> |
| <a href="https://drive.google.com/file/d/YOUR_FILE_ID/view" target="_blank">ดาวน์โหลด PDF</a> |
| </div> |
| |
| <div class="document-card"> |
| <h3>ใบงานที่ 2: การใช้ CSS</h3> |
| <p>แบบฝึกหัดการตกแต่งเว็บไซต์ด้วย CSS</p> |
| <a href="https://drive.google.com/file/d/YOUR_FILE_ID/view" target="_blank">ดาวน์โหลด PDF</a> |
| </div> |
| </section> |
| |
| |
| <section class="course-section"> |
| <h2 class="section-title">แบบทดสอบหลังเรียน</h2> |
| <p>ทดสอบความเข้าใจหลังจากเรียนจบบทเรียน</p> |
| |
| <div class="quiz-container"> |
| <form id="quiz-form"> |
| <div class="question"> |
| <h3>1. คำถามที่ 1: HTML ย่อมาจากอะไร?</h3> |
| <div class="options"> |
| <div class="option"> |
| <input type="radio" id="q1-1" name="q1" value="1"> |
| <label for="q1-1">Hyper Text Markup Language</label> |
| </div> |
| <div class="option"> |
| <input type="radio" id="q1-2" name="q1" value="2"> |
| <label for="q1-2">Hyperlinks and Text Markup Language</label> |
| </div> |
| <div class="option"> |
| <input type="radio" id="q1-3" name="q1" value="3"> |
| <label for="q1-3">Home Tool Markup Language</label> |
| </div> |
| </div> |
| </div> |
| |
| <div class="question"> |
| <h3>2. คำถามที่ 2: ข้อใดคือ Selector ใน CSS?</h3> |
| <div class="options"> |
| <div class="option"> |
| <input type="radio" id="q2-1" name="q2" value="1"> |
| <label for="q2-1">body</label> |
| </div> |
| <div class="option"> |
| <input type="radio" id="q2-2" name="q2" value="2"> |
| <label for="q2-2">font-size</label> |
| </div> |
| <div class="option"> |
| <input type="radio" id="q2-3" name="q2" value="3"> |
| <label for="q2-3">#header</label> |
| </div> |
| </div> |
| </div> |
| |
| <button type="submit" class="submit-btn">ส่งคำตอบ</button> |
| </form> |
| </div> |
| </section> |
| </main> |
| |
| <script> |
| |
| document.getElementById('quiz-form').addEventListener('submit', function(e) { |
| e.preventDefault(); |
| |
| |
| let score = 0; |
| const q1 = document.querySelector('input[name="q1"]:checked')?.value; |
| const q2 = document.querySelector('input[name="q2"]:checked')?.value; |
| |
| if (q1 === "1") score += 50; |
| if (q2 === "3") score += 50; |
| |
| |
| alert(`คุณได้คะแนน ${score} คะแนน จาก 100 คะแนน`); |
| |
| |
| |
| }); |
| |
| |
| </script> |
| </body> |
| </html> |
