|
|
<!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> |
