ผู้เขียนบทความ : นายสุวัฒน์ชัย ภูมิภมร 167404130073
คณะวิศวกรรมศาสตร์ : สาขาวิศวกรรมไฟฟ้า
วิชา : 04-00-104 การโปรแกรมคอมพิวเตอร์ ภาคดารศึกษาที่1/2567
ความเป็นมา
การศึกษาเกี่ยวกับไฟฟ้าและแม่เหล็กเป็นหัวข้อที่สำคัญในวิทยาศาสตร์ โดยเฉพาะในด้านฟิสิกส์ เนื่องจากมีบทบาทสำคัญในการอธิบายปรากฏการณ์ทางธรรมชาติและการทำงานของอุปกรณ์เทคโนโลยีในชีวิตประจำวัน เช่น โทรศัพท์มือถือ คอมพิวเตอร์ และเครื่องใช้ไฟฟ้าอื่น ๆ การทำความเข้าใจหลักการต่าง ๆ เช่น การเหนี่ยวนำไฟฟ้าแม่เหล็ก เป็นสิ่งจำเป็นสำหรับการพัฒนาเทคโนโลยีใหม่ ๆ เช่น ไดนาโมและหม้อแปลง ซึ่งเป็นอุปกรณ์หลักในการผลิตและส่งกระแสไฟฟ้า นอกจากนี้ ความรู้เกี่ยวกับไฟฟ้าและแม่เหล็กยังสามารถนำไปใช้ในการศึกษาในสาขาอื่น ๆ เช่น เคมี วิศวกรรม และการแพทย์
การเรียนรู้ผ่านเกม: เกมสามารถเป็นเครื่องมือที่ช่วยให้การเรียนรู้มีความสนุกและน่าสนใจ การออกแบบเกมเพื่อการศึกษาเป็นวิธีการหนึ่งในการเพิ่มความรู้และทักษะของผู้เรียนด้านต่างๆ
ขอบเขตประโยชน์ที่คาดว่าจะได้รับ
- การพัฒนาองค์ความรู้: ผู้เล่นจะมีโอกาสเรียนรู้และทำความเข้าใจเกี่ยวกับไฟฟ้าผ่านการเล่นเกม
- การส่งเสริมการเรียนรู้ที่มีส่วนร่วม: ผู้เรียนจะได้มีส่วนร่วมและกระตือรือร้นในการเรียนรู้
- การใช้เทคโนโลยีเพื่อการศึกษา: การเรียนรู้การเขียนโปรแกรมด้วย HTML, CSS, และ JavaScript เป็นการเตรียมความพร้อมสำหรับอนาคตที่เต็มไปด้วยเทคโนโลยี
- การสร้างสรรค์สังคมที่มีความรู้ด้านไฟฟ้า: เพิ่มความเข้าใจในหลักการทำงานของไฟฟ้าและแม่เหล็กและภาษาc
- ซึ่งคาดว่าจะช่วยให้นักศึกษาสามารถนำความรู้ที่ได้ไปประยุกต์ใช้ในอนาคต ทั้งในการศึกษาและการทำงานในสาขาที่เกี่ยวข้อง เช่น วิทยาศาสตร์การแพทย์ วิศวกรรมไฟฟ้า และการพัฒนาเทคโนโลยีใหม่ ๆ นอกจากนี้ยังช่วยเสริมสร้างทักษะในการวิเคราะห์และแก้ปัญหาที่เกิดขึ้นในทางวิทยาศาสตร์
วัตถุประสงค์
- เพื่อสร้างเกมที่มีการตอบคำถามเกี่ยวกับความรู้ด้านไฟฟ้า
- เพื่อพัฒนาทักษะการเขียนโปรแกรมในผู้เรียน
- เพื่อเสริมสร้างแรงจูงใจในการเรียนรู้ผ่านการเล่นเกม
- เพื่อสร้างแหล่งข้อมูลที่สามารถใช้ในการศึกษาได้
ความรู้ที่เกี่ยวข้อง
- พื้นฐานของไฟฟ้า:
- กฎของโอห์ม: ความสัมพันธ์ระหว่างแรงดัน, กระแส, และความต้านทาน
- วงจรไฟฟ้า: โครงสร้างพื้นฐานของวงจร, ประเภทของวงจร (อนุกรม, ขนาน)
- อุปกรณ์ไฟฟ้า: อุปกรณ์ที่ใช้ในวงจร เช่น หม้อแปลง, ตัวต้านทาน, ตัวเก็บประจุ
- ภาษา c : ภาษา C ใช้ฟังก์ชันเป็นหน่วยหลักในการจัดการลอจิกโปรแกรม โดยฟังก์ชันหลักคือ
main() - ตัวแปร: สามารถประกาศตัวแปรประเภทต่าง ๆ เช่น int, float, char ซึ่งช่วยในการเก็บข้อมูล
- การเขียนโปรแกรม:HTML (HyperText Markup Language)
คือ ภาษาเครื่องหมายที่ใช้ในการสร้างและออกแบบหน้าเว็บ เป็นมาตรฐานที่ใช้สำหรับการจัดโครงสร้างเนื้อหาบนเว็บ โดยสามารถกำหนดข้อความ รูปภาพ ลิงก์ และองค์ประกอบต่าง ๆ ที่แสดงผลในเว็บบราวเซอร์ได้
การจัดโครงสร้าง: HTML ใช้แท็กเพื่อสร้างโครงสร้างของหน้าเว็บ เช่น <h1> สำหรับหัวข้อใหญ่, <p> สำหรับย่อหน้า, และ <a> สำหรับลิงก์
การเชื่อมโยง: HTML สามารถสร้างลิงก์ไปยังหน้าเว็บอื่น ๆ หรือไฟล์อื่น ๆ ทำให้ผู้ใช้สามารถนำทางไปยังเนื้อหาที่ต้องการได้อย่างสะดวก
การจัดรูปแบบ: แม้ว่า HTML จะไม่ใช่ภาษาออกแบบกราฟิกโดยตรง แต่สามารถใช้ร่วมกับ CSS (Cascading Style Sheets) เพื่อปรับแต่งลักษณะของเนื้อหาได้
การทำงานร่วมกับสคริปต์: HTML สามารถรวม JavaScript เข้าไปเพื่อเพิ่มฟังก์ชันการทำงานให้กับหน้าเว็บ เช่น การสร้างการโต้ตอบกับผู้ใช้
<head>
เก็บข้อมูลเบื้องหลังของเว็บ เช่น ชื่อเว็บ ลิงก์ CSS, JavaScript
ไม่แสดงผลในหน้าเว็บโดยตรง
<body>
กำหนด เนื้อหาทั้งหมดที่จะแสดงผลบนหน้าเว็บ เช่น ข้อความ รูปภาพ และปุ่มต่างๆ
<div>
ใช้สำหรับ จัดกลุ่มเนื้อหาหรือส่วนต่างๆ ของเว็บ เพื่อจัดระเบียบการแสดงผล
class
คุณสมบัติ (Attribute) ใช้กำหนด กลุ่มของสไตล์ CSS หรือระบุว่าแท็กนั้นเป็นส่วนหนึ่งของกลุ่มใด
<button>
ใช้สร้าง ปุ่ม บนหน้าเว็บที่ผู้ใช้สามารถกดเพื่อดำเนินการบางอย่าง
<label>
ใช้สำหรับ กำหนดป้ายกำกับของช่องกรอกข้อมูล (input) เพื่อบอกผู้ใช้ว่าควรกรอกข้อมูลอะไร
<form>
ใช้สร้าง ฟอร์มสำหรับการกรอกข้อมูล เช่น ชื่อ ที่อยู่อีเมล เพื่อนำไปประมวลผล
<strong>
ใช้เน้นข้อความให้เป็น ตัวหนา พร้อมสื่อความสำคัญของเนื้อหานั้น
<li>
ใช้สำหรับ สร้างรายการ (List Item) ภายในรายการลำดับ (<ol>) หรือลิสต์แบบไม่มีลำดับ (<ul>)
- CSS (Cascading Style Sheets)
คือ ภาษาใช้ในการกำหนดรูปแบบและการออกแบบให้กับเอกสาร HTML โดยช่วยให้คุณสามารถควบคุมลักษณะของเนื้อหา เช่น สี, ฟอนต์, ขนาด, และการจัดวาง โดยที่สามารถแยกการออกแบบออกจากโครงสร้างของเนื้อหาได้
- การควบคุมรูปแบบ: CSS ช่วยให้คุณสามารถกำหนดลักษณะต่าง ๆ ขององค์ประกอบ HTML ได้ เช่น สีพื้นหลัง ขนาดฟอนต์ และระยะห่างระหว่างองค์ประกอบ
- การจัดรูปแบบแบบสากล: คุณสามารถสร้างกฎ CSS ที่ใช้ได้กับหลายหน้าเว็บ ซึ่งช่วยลดเวลาในการเขียนโค้ดและทำให้การบำรุงรักษาง่ายขึ้น
- การออกแบบที่ตอบสนอง: CSS สามารถใช้เทคนิคต่าง ๆ เช่น Media Queries เพื่อปรับการแสดงผลให้เหมาะสมกับอุปกรณ์ต่าง ๆ เช่น โทรศัพท์มือถือ แท็บเล็ต หรือคอมพิวเตอร์
- การจัดลำดับชั้น: CSS ใช้ระบบลำดับชั้นที่เรียกว่า “Cascading” ซึ่งหมายความว่า กฎที่ถูกประกาศล่าสุดจะมีความสำคัญมากกว่า
- JavaScript (JS)
ภาษาโปรแกรมที่ใช้ในการพัฒนาเว็บไซต์และเว็บแอปพลิเคชัน ซึ่งช่วยให้คุณสามารถเพิ่มฟังก์ชันการทำงานที่โต้ตอบได้ (interactive) ให้กับหน้าเว็บ เช่น การตอบสนองต่อการคลิกของผู้ใช้ การเปลี่ยนแปลงเนื้อหาภายในหน้าเว็บโดยไม่ต้องโหลดหน้าใหม่ และการจัดการข้อมูลจากผู้ใช้
- การโต้ตอบกับผู้ใช้: JavaScript ช่วยให้คุณสามารถสร้างฟังก์ชันที่ตอบสนองต่อการกระทำของผู้ใช้ เช่น การคลิก การเลื่อน หรือการกรอกข้อมูลในฟอร์ม
- การจัดการ DOM (Document Object Model): JavaScript สามารถเข้าถึงและแก้ไขเนื้อหาของ HTML โดยตรง ซึ่งช่วยให้คุณสามารถเปลี่ยนแปลงหน้าเว็บได้แบบเรียลไทม์
- การทำงานแบบอะซิงโครนัส: JavaScript รองรับการทำงานที่ไม่รบกวนการทำงานหลัก เช่น การโหลดข้อมูลจากเซิร์ฟเวอร์โดยไม่ต้องโหลดหน้าใหม่ (AJAX)
- ความเข้ากันได้: JavaScript เป็นภาษาที่ทำงานได้บนทุกเบราว์เซอร์ที่ทันสมัย ทำให้มันเป็นเครื่องมือที่เหมาะสำหรับการพัฒนาเว็บ
การดำเนินงาน
- วางแผนและออกแบบเกม:
- กำหนดประเภทคำถาม เช่น คำถามปรนัย, คำถามแบบเขียนตอบ
- สร้างแผนการเล่นเกม เช่น จำนวนคำถาม เวลาในการตอบ
- พัฒนาโปรแกรม:
- เขียนโค้ด HTML สำหรับโครงสร้าง
- ใช้ CSS เพื่อจัดรูปแบบและออกแบบหน้าเกม
- ใช้ JavaScript เพื่อเพิ่มฟังก์ชันการทำงาน
วิธีใช้งานโปรแกรม
1.ให้นำโค้ดhtmlบันทึกลงในnotepad++เซฟและตั้งเป็นภาษาhtml
2.ให้นำโค้ดcssบันทึกลงในnotepad++เซฟและตั้งเป็นภาษาcss
3.ให้นำโค้ดjavascripบันทึกลงในnotepad++เซฟและตั้งเป็นภาษาjavascrip
4.สร้างโฟลเดอร์เปล่าแล้วบันทึกทั้งสามโค้ดลงในโฟลเดอร์เดียวกันเพื่อที่โค้ดจะสามารถถูกเรียกใช้งานได้อย่างถูกต้อง
5.เปิดโค้ดhtmlด้วยบราวเวอร์แล้วสามารถเริ่มทำแบบทดสอบได้เลย
HTML
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8"> <!-- กำหนดการเข้ารหัสเป็น UTF-8 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- รองรับการแสดงผลบนอุปกรณ์เคลื่อนที่ -->
<title>เกมทดสอบความรู้ด้านไฟฟ้า</title> <!-- ชื่อของเอกสาร -->
<link rel="stylesheet" href="style.css"> <!-- เชื่อมโยงไปยังไฟล์ CSS -->
</head>
<body>
<div class="container">
<div id="startPage">
<h1>The Engineer's Challenge</h1> <!-- ชื่อของเกม -->
<div onclick="startGame()">Go!!</button> <!-- ปุ่มเริ่มเกม -->
<img src="https://media.tenor.com/58q9f7c0_ecAAAAi/anime-girl-anime.gif" alt="Current Diagram" width="300"/>
</div>
<div id="questionPage" class="hidden"> <!-- หน้าคำถามซึ่งจะถูกซ่อนในเริ่มต้น -->
<h2>คำถามทั่วไปด้านไฟฟ้า</h2> <!-- หัวข้อของหน้า -->
<form id="quizForm"> <!-- แบบฟอร์มสำหรับคำถาม -->
<div class="question-container"><!-- แบบฟอร์มสำหรับคำถาม ข้อ1-->
<p class="question">1. ในวงจรไฟฟ้านี้ ทิศทางการเคลื่อนที่ของอิเล็กตรอนเป็นอย่างไรเมื่อเทียบกับกระแสไฟฟ้า?</p>
<img src="https://icelectronic.com/beginner/study/ecurrent.gif" alt="Current Diagram" />
<div class="answer-option">
<input type="radio" id="q1a" name="q1" value="อิเล็กตรอนเคลื่อนที่ไปในทิศทางเดียวกับกระแสไฟฟ้า">
<label for="q1a">อิเล็กตรอนเคลื่อนที่ไปในทิศทางเดียวกับกระแสไฟฟ้า</label>
</div>
<div class="answer-option">
<input type="radio" id="q1b" name="q1" value="อิเล็กตรอนเคลื่อนที่ในทิศทางตรงกันข้ามกับกระแสไฟฟ้า">
<label for="q1b">อิเล็กตรอนเคลื่อนที่ในทิศทางตรงกันข้ามกับกระแสไฟฟ้า</label>
</div>
<div class="answer-option">
<input type="radio" id="q1c" name="q1" value="อิเล็กตรอนเคลื่อนที่ไปรอบ ๆ วงจรตามทิศทางของแม่เหล็กไฟฟ้า">
<label for="q1c">อิเล็กตรอนเคลื่อนที่ไปรอบ ๆ วงจรตามทิศทางของแม่เหล็กไฟฟ้า</label>
</div>
</div>
<div class="question-container"><!-- แบบฟอร์มสำหรับคำถาม ข้อ2-->
<p class="question">2. ในภาพ อิเล็กตรอนมีการเคลื่อนที่ในทิศทางใดเมื่อเชื่อมต่อกับแบตเตอรี่?</p>
<img src="https://f.ptcdn.info/868/077/000/rf3s0th79IbQVkUJmrE-o.gif" alt="GIF Animation" width="550" />
<script type="text/javascript" async src="https://tenor.com/embed.js"></script>
<div class="answer-option">
<input type="radio" id="q2a" name="q2" value="จากขั้วบวกของแบตเตอรี่ไปยังขั้วลบ">
<label for="q2a">จากขั้วบวกของแบตเตอรี่ไปยังขั้วลบ</label>
</div>
<div class="answer-option">
<input type="radio" id="q2b" name="q2" value="จากขั้วลบของแบตเตอรี่ไปยังขั้วบวก">
<label for="q2b">จากขั้วลบของแบตเตอรี่ไปยังขั้วบวก</label>
</div>
<div class="answer-option">
<input type="radio" id="q2c" name="q2" value="ไม่มีการเคลื่อนที่ของอิเล็กตรอน">
<label for="q2c">ไม่มีการเคลื่อนที่ของอิเล็กตรอน</label>
</div>
</div>
<div class="question-container"><!-- แบบฟอร์มสำหรับคำถาม ข้อ3-->
<p class="question">3. ในวงจรไฟฟ้าที่แสดงนี้ กระแสไฟฟ้าจะไหลอย่างไร?</p>
<img src="https://icelectronic.com/beginner/study/ccurrent.gif" alt="Current Diagram" />
<div class="answer-option">
<input type="radio" id="q3a" name="q3" value="กระแสไฟฟ้าไหลจากขั้วบวกของแบตเตอรี่ไปยังขั้วลบผ่านหลอดไฟ">
<label for="q3a">กระแสไฟฟ้าไหลจากขั้วบวกของแบตเตอรี่ไปยังขั้วลบผ่านหลอดไฟ
</label>
</div>
<div class="answer-option">
<input type="radio" id="q3b" name="q3" value="กระแสไฟฟ้าไหลจากขั้วลบของแบตเตอรี่ไปยังขั้วบวกผ่านหลอดไฟ">
<label for="q3b">กระแสไฟฟ้าไหลจากขั้วลบของแบตเตอรี่ไปยังขั้วบวกผ่านหลอดไฟ
</label>
</div>
<div class="answer-option">
<input type="radio" id="q3c" name="q3" value="กระแสไฟฟ้าไหลจากขั้วบวกของแบตเตอรี่ไปยังขั้วบวกผ่านหลอดไฟ">
<label for="q3c">กระแสไฟฟ้าไหลจากขั้วบวกของแบตเตอรี่ไปยังขั้วบวกผ่านหลอดไฟ
</label>
</div>
</div>
<div class="question-container"><!-- แบบฟอร์มสำหรับคำถาม ข้อ4-->
<p class="question">4. การเกิดกระแสไฟฟ้าเหนี่ยวนำเกิดขึ้นเมื่อใด?</p>
<img src="http://118.174.134.188/sciencelab/senior/item03/lab52/more/image/elec.gif" alt="Electricity Image" width="550"/>
<div class="answer-option">
<input type="radio" id="q4a" name="q4" value="เมื่อขดลวดเคลื่อนที่">
<label for="q4a">เมื่อขดลวดเคลื่อนที่</label>
</div>
<div class="answer-option">
<input type="radio" id="q4b" name="q4" value="เมื่อแม่เหล็กเคลื่อนที่เข้าและออกจากขดลวด">
<label for="q4b">เมื่อแม่เหล็กเคลื่อนที่เข้าและออกจากขดลวด</label>
</div>
<div class="answer-option">
<input type="radio" id="q4c" name="q4" value="เมื่อขดลวดไม่เคลื่อนที่และแม่เหล็กอยู่กับที่">
<label for="q4c">เมื่อขดลวดไม่เคลื่อนที่และแม่เหล็กอยู่กับที่</label>
</div>
</div>
<div class="question-container"><!-- แบบฟอร์มสำหรับคำถาม ข้อ5-->
<p class="question">5. ถ้าต้องการเพิ่มกระแสไฟฟ้าเหนี่ยวนำในขดลวด ควรทำอย่างไร??</p>
<div class="answer-option">
<input type="radio" id="q5a" name="q5" value="ลดจำนวนรอบของขดลวด">
<label for="q5a">ลดจำนวนรอบของขดลวด</label>
</div>
<div class="answer-option">
<input type="radio" id="q5b" name="q5" value="ลดความเร็วของการเคลื่อนที่แม่เหล็ก">
<label for="q5b">ลดความเร็วของการเคลื่อนที่แม่เหล็ก</label>
</div>
<div class="answer-option">
<input type="radio" id="q5c" name="q5" value="เพิ่มความเข้มของสนามแม่เหล็กหรือเพิ่มจำนวนรอบของขดลวด">
<label for="q5c">เพิ่มความเข้มของสนามแม่เหล็กหรือเพิ่มจำนวนรอบของขดลวด</label>
</div>
</div>
<div class="question-container"><!-- แบบฟอร์มสำหรับคำถาม ข้อ6-->
<p class="question">6. อะไรจะเกิดขึ้นกับกระแสไฟฟ้าเหนี่ยวนำในไดนาโมเมื่อหมุนขดลวดเร็วขึ้น?</p>
<img src="http://118.174.134.188/sciencelab/senior/item03/lab52/more/image/dynamo.gif" alt="Dynamo Image" />
<div class="answer-option">
<input type="radio" id="q6a" name="q6" value="กระแสไฟฟ้าจะลดลง">
<label for="q6a">กระแสไฟฟ้าจะลดลง</label>
</div>
<div class="answer-option">
<input type="radio" id="q6b" name="q6" value="กระแสไฟฟ้าจะคงที่">
<label for="q6b">กระแสไฟฟ้าจะคงที่</label>
</div>
<div class="answer-option">
<input type="radio" id="q6c" name="q6" value="กระแสไฟฟ้าจะเพิ่มขึ้น">
<label for="q6c">กระแสไฟฟ้าจะเพิ่มขึ้น</label>
</div>
</div>
<div class="question-container"><!-- แบบฟอร์มสำหรับคำถาม ข้อ7-->
<p class="question">7. ไดนาโมในภาพทำงานโดยใช้หลักการใด?</p>
<div class="answer-option">
<input type="radio" id="q7a" name="q7" value="หลักการเหนี่ยวนำไฟฟ้าแม่เหล็ก">
<label for="q7a">หลักการเหนี่ยวนำไฟฟ้าแม่เหล็ก</label>
</div>
<div class="answer-option">
<input type="radio" id="q7b" name="q7" value="หลักการใช้พลังงานความร้อน">
<label for="q7b">หลักการใช้พลังงานความร้อน</label>
</div>
<div class="answer-option">
<input type="radio" id="q7c" name="q7" value="หลักการสะสมพลังงานศักย์ไฟฟ้า">
<label for="q7c">หลักการสะสมพลังงานศักย์ไฟฟ้า</label>
</div>
</div>
<div class="question-container"><!-- แบบฟอร์มสำหรับคำถาม ข้อ8-->
<p class="question">8. การรวมตัวกันของ Na (โซเดียม) และ Cl (คลอรีน) ทำให้เกิดสารใด?</p>
<img src="http://nakhamwit.ac.th/pingpong_web/ChenBond/nacl.gif" alt="NaCl Image" />
<div class="answer-option">
<input type="radio" id="q8a" name="q8" value="NaCl">
<label for="q8a">NaCl</label>
</div>
<div class="answer-option">
<input type="radio" id="q8b" name="q8" value="CO2">
<label for="q8b">CO2</label>
</div>
<div class="answer-option">
<input type="radio" id="q8c" name="q8" value="O2">
<label for="q8c">O2</label>
</div>
</div>
<div class="question-container"><!-- แบบฟอร์มสำหรับคำถาม ข้อ9-->
<p class="question">9. พันธะไอออนิกเกิดขึ้นได้อย่างไรระหว่าง Na และ Cl?</p>
<div class="answer-option">
<input type="radio" id="q9a" name="q9" value="Na และ Cl แบ่งปันอิเล็กตรอน">
<label for="q9a">Na และ Cl แบ่งปันอิเล็กตรอน</label>
</div>
<div class="answer-option">
<input type="radio" id="q9b" name="q9" value="Na สูญเสียอิเล็กตรอนและ Cl รับอิเล็กตรอน">
<label for="q9b">Na สูญเสียอิเล็กตรอนและ Cl รับอิเล็กตรอน</label>
</div>
<div class="answer-option">
<input type="radio" id="q9c" name="q9" value="Na และ Cl ใช้พลังงานจากแสงในการสร้างพันธะ">
<label for="q9c">Na และ Cl ใช้พลังงานจากแสงในการสร้างพันธะ</label>
</div>
</div>
<div class="question-container"><!-- แบบฟอร์มสำหรับคำถาม ข้อ10-->
<p class="question">10. พันธะโคเวเลนต์เกิดขึ้นได้อย่างไร?</p>
<img src="http://nakhamwit.ac.th/pingpong_web/ChenBond/covalent.gif" alt="Covalent Bond Image" />
<div class="answer-option">
<input type="radio" id="q10a" name="q10" value="การรับและการให้ของอิเล็กตรอนระหว่างอะตอม">
<label for="q10a">การรับและการให้ของอิเล็กตรอนระหว่างอะตอม</label>
</div>
<div class="answer-option">
<input type="radio" id="q10b" name="q10" value="การรวมตัวของอะตอมผ่านแรงดึงดูดแม่เหล็กไฟฟ้า">
<label for="q10b">การรวมตัวของอะตอมผ่านแรงดึงดูดแม่เหล็กไฟฟ้า</label>
</div>
<div class="answer-option">
<input type="radio" id="q10c" name="q10" value="การแบ่งปันอิเล็กตรอนระหว่างอะตอม">
<label for="q10c">การแบ่งปันอิเล็กตรอนระหว่างอะตอม</label>
</div>
</div>
<div class="question-container"><!-- แบบฟอร์มสำหรับคำถาม ข้อ11-->
<p class="question">11.การรวมตัวของอะตอมไฮโดรเจนเป็นโมเลกุลไฮโดรเจน (H2) ใช้พันธะชนิดใด?</p>
<div class="answer-option">
<input type="radio" id="q11a" name="q11" value="พันธะไอออนิก">
<label for="q11a">พันธะไอออนิก</label>
</div>
<div class="answer-option">
<input type="radio" id="q11b" name="q11" value="พันธะโลหะ">
<label for="q11b">พันธะโลหะ</label>
</div>
<div class="answer-option">
<input type="radio" id="q11c" name="q11" value="พันธะโคเวเลนต์">
<label for="q11c">พันธะโคเวเลนต์</label>
</div>
</div>
<div class="question-container"><!-- แบบฟอร์มสำหรับคำถาม ข้อ12-->
<p class="question">12. โครงสร้างที่แสดงในภาพเป็นการเกิดพันธะชนิดใด?</p>
<img src="http://nakhamwit.ac.th/pingpong_web/ChenBond/metallicblue.gif" alt="Metallic Bond Image" />
<div class="answer-option">
<input type="radio" id="q12a" name="q12" value="พันธะโคเวเลนต์">
<label for="q12a">พันธะโคเวเลนต์</label>
</div>
<div class="answer-option">
<input type="radio" id="q12b" name="q12" value="พันธะไอออนิก">
<label for="q12b">พันธะไอออนิก</label>
</div>
<div class="answer-option">
<input type="radio" id="q12c" name="q12" value="พันธะโลหะ">
<label for="q12c">พันธะโลหะ</label>
</div>
</div>
<div class="question-container"><!-- แบบฟอร์มสำหรับคำถาม ข้อ13-->
<p class="question">13. กฎของฟาราเดย์เกี่ยวกับการเหนี่ยวนำแม่เหล็กไฟฟ้าระบุว่าอะไรเกิดขึ้นเมื่อแม่เหล็กเคลื่อนที่ผ่านขดลวด? </p>
<img src="https://www.thaigoodview.com/library/dlcep2/03/html/content-html/electricalGenerator-images/induction.gif" alt="Induction Image" />
<div class="answer-option">
<input type="radio" id="q13a" name="q13" value="เกิดความร้อนในขดลวด">
<label for="q13a">เกิดความร้อนในขดลวด
</label>
</div>
<div class="answer-option">
<input type="radio" id="q13b" name="q13" value="เกิดแรงดันไฟฟ้าภายในขดลวด">
<label for="q13b">เกิดแรงดันไฟฟ้าภายในขดลวด
</label>
</div>
<div class="answer-option">
<input type="radio" id="q13c" name="q13" value="กระแสไฟฟ้าถูกเปลี่ยนเป็นพลังงานกล">
<label for="q13c">กระแสไฟฟ้าถูกเปลี่ยนเป็นพลังงานกล</label>
</div>
</div>
<div class="question-container"><!-- แบบฟอร์มสำหรับคำถาม ข้อ14-->
<p class="question">14. ถ้าแม่เหล็กเคลื่อนที่ผ่านขดลวดเร็วขึ้น จะเกิดอะไรขึ้นกับแรงดันไฟฟ้าเหนี่ยวนำ? </p>
<div class="answer-option">
<input type="radio" id="q14a" name="q14" value="แรงดันไฟฟ้าจะลดลง">
<label for="q14a">แรงดันไฟฟ้าจะลดลง</label>
</div>
<div class="answer-option">
<input type="radio" id="q14b" name="q14" value="แรงดันไฟฟ้าจะเพิ่มขึ้น">
<label for="q14b">แรงดันไฟฟ้าจะเพิ่มขึ้น</label>
</div>
<div class="answer-option">
<input type="radio" id="q14c" name="q14" value="แรงดันไฟฟ้าจะคงที่">
<label for="q14c">แรงดันไฟฟ้าจะคงที่</label>
</div>
</div>
<div class="question-container"><!-- แบบฟอร์มสำหรับคำถาม ข้อ15-->
<p class="question">15. การทดลองนี้แสดงถึงปรากฏการณ์ใดในทางฟิสิกส์?</p>
<img src="https://i.makeagif.com/media/11-23-2016/do3-Uw.gif" alt="GIF Image" width="400" />
<div class="answer-option">
<input type="radio" id="q15a" name="q15" value="การเหนี่ยวนำแม่เหล็กไฟฟ้า">
<label for="q15a">การเหนี่ยวนำแม่เหล็กไฟฟ้า</label>
</div>
<div class="answer-option">
<input type="radio" id="q15b" name="q15" value="การเลื่อนไหลของสนามไฟฟ้า">
<label for="q15b">การเลื่อนไหลของสนามไฟฟ้า</label>
</div>
<div class="answer-option">
<input type="radio" id="q15c" name="q15" value="การสั่นสะเทือนของคลื่นเสียง">
<label for="q15c">การสั่นสะเทือนของคลื่นเสียง</label>
</div>
</div>
<div class="question-container"><!-- แบบฟอร์มสำหรับคำถาม ข้อ16-->
<p class="question">16. เหตุใดหม้อแปลงที่มีแกนลามิเนต (Laminated Sheets) จึงมีประสิทธิภาพดีกว่าหม้อแปลงที่ใช้แกนที่ไม่ได้ลามิเนต?</p>
<img src="https://i.makeagif.com/media/6-10-2023/FKSuU7.gif" alt="GIF Image" />
<div class="answer-option">
<input type="radio" id="q16a" name="q16" value="ลดการสูญเสียจากกระแสไหลวน">
<label for="q16a">ลดการสูญเสียจากกระแสไหลวน</label>
</div>
<div class="answer-option">
<input type="radio" id="q16b" name="q16" value="เพิ่มความต้านทานต่อการเหนี่ยวนำแม่เหล็ก">
<label for="q16b">เพิ่มความต้านทานต่อการเหนี่ยวนำแม่เหล็ก</label>
</div>
<div class="answer-option">
<input type="radio" id="q16c" name="q16" value="เพิ่มการเกิดกระแสไฟฟ้าในขดลวด">
<label for="q16c">เพิ่มการเกิดกระแสไฟฟ้าในขดลวด</label>
</div>
</div>
<div class="question-container"><!-- แบบฟอร์มสำหรับคำถาม ข้อ17-->
<p class="question">17. จากการทดลองนี้ ถ้าต้องการเพิ่มแรงเคลื่อนไฟฟ้าเหนี่ยวนำ ควรทำอย่างไร?</p>
<img src="https://i.makeagif.com/media/6-23-2022/SboRsK.gif" alt="GIF Image" />
<div class="answer-option">
<input type="radio" id="q17a" name="q17" value="ลดความเข้มของสนามแม่เหล็ก">
<label for="q17a">ลดความเข้มของสนามแม่เหล็ก</label>
</div>
<div class="answer-option">
<input type="radio" id="q17b" name="q17" value="ใช้ตัวนำที่มีความต้านทานสูงขึ้น">
<label for="q17b">ใช้ตัวนำที่มีความต้านทานสูงขึ้น</label>
</div>
<div class="answer-option">
<input type="radio" id="q17c" name="q17" value="เพิ่มความเร็วในการเคลื่อนที่ของแม่เหล็ก">
<label for="q17c">เพิ่มความเร็วในการเคลื่อนที่ของแม่เหล็ก</label>
</div>
</div>
<div class="question-container"><!-- แบบฟอร์มสำหรับคำถาม ข้อ18-->
<p class="question">18. แรงเคลื่อนไฟฟ้าที่เกิดจากการเหนี่ยวนำแม่เหล็กไฟฟ้าตามกฎของฟาราเดย์ ขึ้นอยู่กับปัจจัยใดบ้าง?</p>
<div class="answer-option">
<input type="radio" id="q18a" name="q18" value="การเปลี่ยนแปลงของสนามแม่เหล็กและความเร็วของการเคลื่อนที่">
<label for="q18a">การเปลี่ยนแปลงของสนามแม่เหล็กและความเร็วของการเคลื่อนที่</label>
</div>
<div class="answer-option">
<input type="radio" id="q18b" name="q18" value="ขนาดของขดลวดและอุณหภูมิของตัวนำ">
<label for="q18b">ขนาดของขดลวดและอุณหภูมิของตัวนำ</label>
</div>
<div class="answer-option">
<input type="radio" id="q18c" name="q18" value="ความต้านทานของขดลวดและขนาดของตัวนำ">
<label for="q18c">ความต้านทานของขดลวดและขนาดของตัวนำ</label>
</div>
</div>
<div class="question-container"><!-- แบบฟอร์มสำหรับคำถาม ข้อ19-->
<p class="question">19. กระบวนการทำงานของไฟฉายตามรูปด้านบน เริ่มต้นเมื่อมีการทำงานของส่วนใด?</p>
<img src="https://kru-it.com/wp-content/uploads/2023/10/flashlight.gif" alt="Flashlight GIF" width="400" />
<div class="answer-option">
<input type="radio" id="q19a" name="q19" value="แบตเตอรี่ (Battery)">
<label for="q19a">แบตเตอรี่ (Battery)</label>
</div>
<div class="answer-option">
<input type="radio" id="q19b" name="q19" value="สวิตช์เลื่อน (slide switch)">
<label for="q19b">สวิตช์เลื่อน (slide switch)</label>
</div>
<div class="answer-option">
<input type="radio" id="q19c" name="q19" value="สปริงโลหะ (Metal Spring)">
<label for="q19c">สปริงโลหะ (Metal Spring)</label>
</div>
</div>
<div class="question-container"><!-- แบบฟอร์มสำหรับคำถาม ข้อ20-->
<p class="question">20.แบตเตอรี่ในรูปภาพด้านบนเชื่อมต่อกันในลักษณะใด?</p>
<div class="answer-option">
<input type="radio" id="q20a" name="q20" value="ขนานกัน (Parallel)">
<label for="q20a">ขนานกัน (Parallel)</label>
</div>
<div class="answer-option">
<input type="radio" id="q20b" name="q20" value="อนุกรม (Series)">
<label for="q20b">อนุกรม (Series)</label>
</div>
<div class="answer-option">
<input type="radio" id="q20c" name="q20" value="ต่อตรง (Direct Connection)">
<label for="q20c">ต่อตรง (Direct Connection)</label>
</div>
</div>
<button type="button" class="submit-button" onclick="submitQuiz()">ไปกันต่อ!</button> <!-- ปุ่มส่งคำตอบ -->
</form>
</div>
<div id="fillInPage" class="hidden"> <!-- หน้าบทความเติมคำซึ่งจะถูกซ่อนในเริ่มต้น -->
<h2>ทายสิ่งที่หายไป...</h2> <!-- หัวข้อของหน้า -->
<p>#include <stdio.h></p><!-- ข้อความบทความ -->
<p>int <strong class="highlight">1______</strong>() {</p>
<p> float height, weight, D;</p>
<p> printf("กรุณากรอกส่วนสูง (cm): ");</p>
<p> <strong class="highlight">2______</strong>("%f", &height);</p>
<p> printf("กรุณากรอกน้ำหนัก (kg): ");</p>
<p> scanf("%f", &weight);</p>
<p> D = height - weight;</p>
<p> if (D > 115) {</p>
<p> <strong class="highlight">3______</strong>("คุณผอมเกินไป\\n");</p>
<p> } else if (D >= 105 && D <= 115) {</p>
<p> <strong class="highlight">3______</strong>("คุณรูปร่างดี\\n");</p>
<p> } else {</p>
<p> <strong class="highlight">3______</strong>("คุณอ้วนเกินไป\\n");</p>
<p> }</p>
<p> return 0;</p>
<p>}</p>
<h4>1.จากโค้ดเบื้องต้นให้พิจารณาว่า<strong class="highlight">โค้ดที่หายไป</strong>คืออะไร</h4>
<form id="fillInForm"> <!-- แบบฟอร์มสำหรับการเติมคำ -->
<input type="text" id="word1" class="input-answer" placeholder="คำสั่งที่หลักหายไป 1"> <!-- ช่องกรอกคำที่ 1 -->
<input type="text" id="word2" class="input-answer" placeholder="คำสั่งที่เก็บค่าหายไป 2"> <!-- ช่องกรอกคำที่ 2 -->
<input type="text" id="word3" class="input-answer" placeholder="คำสั่งที่แสดงผลหายไป 3"> <!-- ช่องกรอกคำที่ 3 -->
<button type="button" class="submit-button" onclick="submitFillIn()">มาดูคะแนนกัน</button> <!-- ปุ่มส่งคำตอบ -->
</form>
</div>
<div id="resultPage" class="hidden"> <!-- หน้าสรุปคะแนนซึ่งจะถูกซ่อนในเริ่มต้น -->
<h2>สรุปคะแนน</h2> <!-- หัวข้อของหน้า -->
<p id="result"></p> <!-- ช่องสำหรับแสดงคะแนน -->
<img src="https://media.tenor.com/SgHXpt3rKfYAAAAi/grant-yapping.gif" alt="Calculation GIF">
<h3>เฉลยคำถาม</h3> <!-- หัวข้อเฉลยคำถาม -->
<ul> <!-- รายการเฉลยคำถาม -->
<li>1.ในวงจรไฟฟ้านี้ ทิศทางการเคลื่อนที่ของอิเล็กตรอนเป็นอย่างไรเมื่อเทียบกับกระแสไฟฟ้า?
<strong class="highlight">อิเล็กตรอนเคลื่อนที่ในทิศทางตรงกันข้ามกับกระแสไฟฟ้า</strong></li> <!-- เฉลยข้อ 1 -->
<li>2. ในภาพ อิเล็กตรอนมีการเคลื่อนที่ในทิศทางใดเมื่อเชื่อมต่อกับแบตเตอรี่?
<strong class="highlight">จากขั้วลบของแบตเตอรี่ไปยังขั้วบวก</strong></li> <!-- เฉลยข้อ 2 -->
<li>3. ในวงจรไฟฟ้าที่แสดงนี้ กระแสไฟฟ้าจะไหลอย่างไร?
<strong class="highlight">กระแสไฟฟ้าไหลจากขั้วบวกของแบตเตอรี่ไปยังขั้วลบผ่านหลอดไฟ</strong></li> <!-- เฉลยข้อ 3 -->
<li>4. การเกิดกระแสไฟฟ้าเหนี่ยวนำเกิดขึ้นเมื่อใด?
<strong class="highlight">เมื่อแม่เหล็กเคลื่อนที่เข้าและออกจากขดลวด</strong></li> <!-- เฉลยข้อ 4 -->
<li>5. ถ้าต้องการเพิ่มกระแสไฟฟ้าเหนี่ยวนำในขดลวด ควรทำอย่างไร?
<strong class="highlight">เพิ่มความเข้มของสนามแม่เหล็กหรือเพิ่มจำนวนรอบของขดลวด</strong></li> <!-- เฉลยข้อ 5 -->
<li>6. อะไรจะเกิดขึ้นกับกระแสไฟฟ้าเหนี่ยวนำในไดนาโมเมื่อหมุนขดลวดเร็วขึ้น?
<strong class="highlight">กระแสไฟฟ้าจะเพิ่มขึ้น</strong></li> <!-- เฉลยข้อ 1 -->
<li>7. ไดนาโมในภาพทำงานโดยใช้หลักการใด?
<strong class="highlight">หลักการเหนี่ยวนำไฟฟ้าแม่เหล็ก</strong></li> <!-- เฉลยข้อ 1 -->
<li>8. การรวมตัวกันของ Na (โซเดียม) และ Cl (คลอรีน) ทำให้เกิดสารใด?
<strong class="highlight">NaCl</strong></li> <!-- เฉลยข้อ 1 -->
<li>9. พันธะไอออนิกเกิดขึ้นได้อย่างไรระหว่าง Na และ Cl?
<strong class="highlight">Na สูญเสียอิเล็กตรอนและ Cl รับอิเล็กตรอน</strong></li> <!-- เฉลยข้อ 1 -->
<li>10. พันธะโคเวเลนต์เกิดขึ้นได้อย่างไร?
<strong class="highlight">การแบ่งปันอิเล็กตรอนระหว่างอะตอม</strong></li> <!-- เฉลยข้อ 1 -->
<li>11. การรวมตัวของอะตอมไฮโดรเจนเป็นโมเลกุลไฮโดรเจน (H2) ใช้พันธะชนิดใด?
<strong class="highlight">พันธะโคเวเลนต์</strong></li> <!-- เฉลยข้อ 1 -->
<li>12. โครงสร้างที่แสดงในภาพเป็นการเกิดพันธะชนิดใด?
<strong class="highlight">พันธะโลหะ</strong></li> <!-- เฉลยข้อ 1 -->
<li>13. กฎของฟาราเดย์เกี่ยวกับการเหนี่ยวนำแม่เหล็กไฟฟ้าระบุว่าอะไรเกิดขึ้นเมื่อแม่เหล็กเคลื่อนที่ผ่านขดลวด?
<strong class="highlight">เกิดแรงดันไฟฟ้าภายในขดลวด</strong></li> <!-- เฉลยข้อ 1 -->
<li>14. ถ้าแม่เหล็กเคลื่อนที่ผ่านขดลวดเร็วขึ้น จะเกิดอะไรขึ้นกับแรงดันไฟฟ้าเหนี่ยวนำ?
<strong class="highlight">แรงดันไฟฟ้าจะเพิ่มขึ้น</strong></li> <!-- เฉลยข้อ 1 -->
<li>15. การทดลองนี้แสดงถึงปรากฏการณ์ใดในทางฟิสิกส์?
<strong class="highlight">การเหนี่ยวนำแม่เหล็กไฟฟ้า</strong></li> <!-- เฉลยข้อ 1 -->
<li>16. เหตุใดหม้อแปลงที่มีแกนลามิเนต (Laminated Sheets) จึงมีประสิทธิภาพดีกว่าหม้อแปลงที่ใช้แกนที่ไม่ได้ลามิเนต?
<strong class="highlight">ลดการสูญเสียจากกระแสไหลวน</strong></li> <!-- เฉลยข้อ 1 -->
<li>17. จากการทดลองนี้ ถ้าต้องการเพิ่มแรงเคลื่อนไฟฟ้าเหนี่ยวนำ ควรทำอย่างไร?
<strong class="highlight">เพิ่มความเร็วในการเคลื่อนที่ของแม่เหล็ก</strong></li> <!-- เฉลยข้อ 1 -->
<li>18. แรงเคลื่อนไฟฟ้าที่เกิดจากการเหนี่ยวนำแม่เหล็กไฟฟ้าตามกฎของฟาราเดย์ ขึ้นอยู่กับปัจจัยใดบ้าง?
<strong class="highlight">การเปลี่ยนแปลงของสนามแม่เหล็กและความเร็วของการเคลื่อนที่</strong></li> <!-- เฉลยข้อ 1 -->
<li>19. กระบวนการทำงานของไฟฉายตามรูปด้านบน เริ่มต้นเมื่อมีการทำงานของส่วนใด?
<strong class="highlight">สวิตช์เลื่อน (slide switch)</strong></li> <!-- เฉลยข้อ 1 -->
<li>20. แบตเตอรี่ในรูปภาพด้านบนเชื่อมต่อกันในลักษณะใด?
<strong class="highlight">อนุกรม (Series)</strong></li> <!-- เฉลยข้อ 1 -->
</ul>
<h3>เฉลยบทความ</h3> <!-- หัวข้อเฉลยบทความ -->
<p>#include <stdio.h></p><!-- ข้อความบทความ -->
<p>int <strong class="highlight">main</strong>() {</p>
<p> float height, weight, D;</p>
<p> printf("กรุณากรอกส่วนสูง (cm): ");</p>
<p> <strong class="highlight">scanf</strong>("%f", &height);</p>
<p> printf("กรุณากรอกน้ำหนัก (kg): ");</p>
<p> scanf("%f", &weight);</p>
<p> D = height - weight;</p>
<p> if (D > 115) {</p>
<p> <strong class="highlight">printf</strong>("คุณผอมเกินไป\\n");</p>
<p> } else if (D >= 105 && D <= 115) {</p>
<p> <strong class="highlight">printf</strong>("คุณรูปร่างดี\\n");</p>
<p> } else {</p>
<p> <strong class="highlight">printf</strong>("คุณอ้วนเกินไป\\n");</p>
<p> }</p>
<p> return 0;</p>
<p>}</p>
<button class="submit-button" onclick="resetGame()">เริ่มเกมใหม่</button> <!-- ปุ่มเริ่มเกมใหม่ -->
</div>
</div>
<script src="script.js"></script> <!-- เชื่อมโยงไปยังไฟล์ JavaScript -->
</body>
</html>
css
* {
box-sizing: border-box; /* กำหนดให้การคำนวณขนาดใช้ border-box */
}
body {
font-family: 'Arial', sans-serif; /* ตั้งค่าฟอนต์สำหรับเนื้อหา */
background: linear-gradient(to right, #74ebd5, #acb6e5); /* ตั้งค่าพื้นหลังแบบเกรเดียนต์ */
color: #333; /* สีตัวอักษร */
margin: 0; /* ตั้งค่าระยะขอบเป็น 0 */
padding: 20px; /* ตั้งค่าภายในหน้าเว็บ */
}
body {
font-family: 'Arial', sans-serif;
background: url('https://animesher.com/orig/1/182/1826/18263/animesher.com_nature-gif-clouds-1826386.gif') no-repeat center center fixed; /* ใช้ภาพ GIF เป็นพื้นหลัง */
background-size: cover; /* ทำให้ภาพครอบคลุมทั้งพื้นหลัง */
color: #333;
margin: 0;
padding: 20px;
}
.container {
background-color: rgba(255, 255, 255, 0.9); /* ทำให้พื้นหลังของ container โปร่งใสเล็กน้อย */
/* ค่าที่เหลือเหมือนเดิม */
}
.container {
max-width: 600px; /* กำหนดความกว้างสูงสุดของ container */
margin: 0 auto; /* จัดกึ่งกลาง container */
padding: 20px; /* ตั้งค่าภายในของ container */
background-color: #fff; /* ตั้งค่าพื้นหลังของ container */
border-radius: 15px; /* ทำให้มุมของ container มีความโค้งมากขึ้น */
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* เพิ่มเงาที่นุ่มนวลให้กับ container */
transition: transform 0.3s; /* เพิ่มการเปลี่ยนแปลงเมื่อชี้ */
}
.container:hover {
transform: scale(1.02); /* เพิ่มขนาดเล็กน้อยเมื่อชี้ที่ container */
}
.hidden {
display: none; /* ซ่อน element ที่มี class เป็น hidden */
}
h1, h2, h3 {
text-align: center; /* จัดกลางข้อความในหัวข้อ */
color: #007BFF; /* เปลี่ยนสีหัวข้อเป็นสีน้ำเงิน */
}
.question-container {
margin: 15px 0; /* ตั้งค่าระยะห่างด้านบนและล่าง */
}
.answer-option {
margin: 5px 0; /* ตั้งค่าระยะห่างระหว่างตัวเลือก */
padding: 10px; /* เพิ่ม padding สำหรับตัวเลือก */
background: #f9f9f9; /* ตั้งค่าพื้นหลังของตัวเลือก */
border-radius: 5px; /* ทำให้มุมของตัวเลือกมีความโค้ง */
transition: background-color 0.3s; /* เพิ่มการเปลี่ยนสีพื้นหลัง */
}
.answer-option:hover {
background: #e7f1ff; /* เปลี่ยนพื้นหลังเมื่อชี้ไปที่ตัวเลือก */
}
input[type="text"], input[type="radio"] {
margin-right: 10px; /* ระยะห่างระหว่างป้ายกำกับกับช่องกรอกข้อมูล */
}
.input-answer {
width: calc(100% - 20px); /* ตั้งค่าความกว้างของช่องกรอกข้อมูล */
padding: 10px; /* ตั้งค่าภายในของช่องกรอกข้อมูล */
border: 1px solid #ccc; /* กำหนดกรอบของช่องกรอกข้อมูล */
border-radius: 5px; /* ทำให้มุมของกรอบมีความโค้ง */
margin-bottom: 15px; /* ระยะห่างด้านล่างของช่องกรอกข้อมูล */
transition: border-color 0.3s; /* เพิ่มการเปลี่ยนแปลงของสีกรอบ */
}
.input-answer:focus {
border-color: #007BFF; /* เปลี่ยนสีกรอบเมื่อช่องกรอกข้อมูลถูกเลือก */
outline: none; /* ลบเส้นขอบเมื่อมีการเลือก */
}
button {
background-color: #007BFF; /* ตั้งค่าพื้นหลังของปุ่ม */
color: white; /* กำหนดสีของข้อความในปุ่ม */
border: none; /* ลบกรอบของปุ่ม */
padding: 10px 15px; /* ตั้งค่าภายในของปุ่ม */
border-radius: 5px; /* ทำให้มุมของปุ่มมีความโค้ง */
cursor: pointer; /* เปลี่ยนเคอร์เซอร์เมื่อชี้ไปที่ปุ่ม */
width: 100%; /* ตั้งค่าความกว้างของปุ่ม */
transition: background-color 0.3s, transform 0.2s; /* เพิ่มการเปลี่ยนสีพื้นหลังและขนาด */
}
button:hover {
background-color: #0056b3; /* เปลี่ยนสีพื้นหลังของปุ่มเมื่อชี้ไปที่ปุ่ม */
transform: translateY(-2px); /* ยกปุ่มขึ้นเมื่อชี้ */
}
.highlight {
color: #007BFF; /* เปลี่ยนสีข้อความที่มี class เป็น highlight */
font-weight: bold; /* ทำให้ข้อความหนาขึ้น */
}
ul {
list-style-type: none; /* ลบจุดหน้ารายการ */
padding: 0; /* ตั้งค่าการ padding เป็น 0 */
}
ul li {
margin: 10px 0; /* ตั้งค่าระยะห่างระหว่างรายการ */
background: #f8f9fa; /* ตั้งค่าพื้นหลังของรายการ */
padding: 10px; /* ตั้งค่าภายในของรายการ */
border-radius: 5px; /* ทำให้มุมของรายการมีความโค้ง */
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* เพิ่มเงาให้กับรายการ */
transition: background-color 0.3s; /* เพิ่มการเปลี่ยนสีพื้นหลัง */
}
ul li:hover {
background: #e9ecef; /* เปลี่ยนพื้นหลังเมื่อชี้ไปที่รายการ */
}
/* Media Queries สำหรับอุปกรณ์ขนาดเล็ก */
@media (max-width: 768px) {
body {
padding: 10px; /* ลด padding สำหรับมือถือ */
}
.container {
padding: 15px; /* ลด padding ใน container */
border-radius: 10px; /* ทำให้มุมโค้งน้อยลง */
}
h1, h2, h3 {
font-size: 1.5em; /* ลดขนาดฟอนต์หัวข้อ */
}
.input-answer {
padding: 8px; /* ลด padding ในช่องกรอกข้อมูล */
}
button {
padding: 8px; /* ลด padding ในปุ่ม */
}
}
Javascrip
let score = 0; // ตัวแปรเก็บคะแนน
// ฟังก์ชันเริ่มเกม
function startGame() {
document.getElementById('startPage').classList.add('hidden'); // ซ่อนหน้าจอเริ่มเกม
document.getElementById('questionPage').classList.remove('hidden'); // แสดงหน้าคำถาม
}
// ฟังก์ชันส่งคำตอบ
function submitQuiz() {
const form = document.getElementById('quizForm'); // ดึง element แบบฟอร์ม
const answers = ['อิเล็กตรอนเคลื่อนที่ในทิศทางตรงกันข้ามกับกระแสไฟฟ้า',//1
'จากขั้วลบของแบตเตอรี่ไปยังขั้วบวก',//2
'กระแสไฟฟ้าไหลจากขั้วบวกของแบตเตอรี่ไปยังขั้วลบผ่านหลอดไฟ',//3
'เมื่อแม่เหล็กเคลื่อนที่เข้าและออกจากขดลวด',//4
'เพิ่มความเข้มของสนามแม่เหล็กหรือเพิ่มจำนวนรอบของขดลวด',//5
'กระแสไฟฟ้าจะเพิ่มขึ้น',//6
'หลักการเหนี่ยวนำไฟฟ้าแม่เหล็ก',//7
'NaCl',//8
'Na สูญเสียอิเล็กตรอนและ Cl รับอิเล็กตรอน',//9
'การแบ่งปันอิเล็กตรอนระหว่างอะตอม',//10
'พันธะโคเวเลนต์',//11
'พันธะโลหะ',//12
'กระแสไฟฟ้าถูกเปลี่ยนเป็นพลังงานกล',//13
'แรงดันไฟฟ้าจะเพิ่มขึ้น',//14
'การเหนี่ยวนำแม่เหล็กไฟฟ้า',//15
'ลดการสูญเสียจากกระแสไหลวน',//16
'เพิ่มความเร็วในการเคลื่อนที่ของแม่เหล็ก',//17
'การเปลี่ยนแปลงของสนามแม่เหล็กและความเร็วของการเคลื่อนที่',//18
'สวิตช์เลื่อน (slide switch)',//19
'อนุกรม (Series)']; // 20
for (let i = 1; i <= answers.length; i++) {
const userAnswer = form['q' + i].value; // คำตอบของผู้ใช้
if (userAnswer === answers[i - 1]) {
score++; // เพิ่มคะแนนเมื่อคำตอบถูกต้อง
}
}
document.getElementById('questionPage').classList.add('hidden'); // ซ่อนหน้าคำถาม
document.getElementById('fillInPage').classList.remove('hidden'); // แสดงหน้าบทความเติมคำ
}
// ฟังก์ชันส่งคำตอบบทความ
function submitFillIn() {
const word1 = document.getElementById('word1').value.trim(); // คำตอบที่ 1
const word2 = document.getElementById('word2').value.trim(); // คำตอบที่ 2
const word3 = document.getElementById('word3').value.trim(); // คำตอบที่ 3
if (word1.toLowerCase() === "main")
score++;// เพิ่มคะแนนเมื่อคำตอบถูกต้อง
if (word2.toLowerCase() === "scanf")
score++;
if (word3.toLowerCase() === "printf")
score++;
// แสดงหน้าผลลัพธ์
document.getElementById('fillInPage').classList.add('hidden');
document.getElementById('resultPage').classList.remove('hidden');
//document.getElementById('result').innerText = `คะแนนของคุณคือ: ${score} จาก 23`; // แสดงคะแนน
let feedback;
if (score > 12) {
feedback = "ได้ขนาดนี้เก่งสุดๆเลย!!";
} else {
feedback = "อย่าเสียใจไปเลยเอาใหม่ได้นะ";
}
document.getElementById('result').innerText = ` คะแนนของคุณได้ตั้ง: ${score} เลยนะจาก 20. ${feedback}`; // แสดงคะแนนและข้อความ
}
// ฟังก์ชันรีเซ็ตเกม
function resetGame() {
score = 0; // รีเซ็ตคะแนน
document.getElementById('resultPage').classList.add('hidden'); // ซ่อนหน้าสรุปคะแนน
document.getElementById('startPage').classList.remove('hidden'); // แสดงหน้าจอเริ่มเกม
document.getElementById('quizForm').reset(); // รีเซ็ตแบบฟอร์ม
document.getElementById('fillInForm').reset(); // รีเซ็ตแบบฟอร์มเติมคำ
}
การประยุกต์เพื่อเพิ่มประสิทธิภาพ
- เพิ่มคำถามและประเภทคำถาม:
- สร้างคำถามที่หลากหลายและน่าสนใจ
- เพิ่มคำถามที่มีระดับความยากแตกต่างกัน
- คำถามแบบปรนัย (Multiple Choice)
- คำถามเติมคำ (Fill in the Blanks)
- คำถามอธิบาย (Short Answer)
- คำถามจับคู่ (Matching)
- ฟีเจอร์ใหม่:
- ระบบแข่งขันระหว่างผู้เล่น (Leaderboards)
- ระบบเสียงต่างๆ
- เพิ่มระบบล็อกอินและบันทึกคะแนน
- การแสดงคะแนน: สร้างหน้า Leaderboard ที่แสดงคะแนนสูงสุดของผู้เล่น
- การจัดอันดับ: เพิ่มระบบการจัดอันดับตามคะแนนรวม และคะแนนที่ได้จากการเล่น
- ปรับปรุง UI/UX:
- ใช้กราฟิกและภาพเคลื่อนไหวที่น่าสนใจ
- ทำให้การใช้งานสะดวกและใช้ง่ายยิ่งขึ้น
- กราฟิกและภาพเคลื่อนไหว: ใช้ภาพเคลื่อนไหวที่น่าสนใจสำหรับคำถามและการตอบคำถาม เช่น การเคลื่อนไหวเมื่อเลือกคำตอบการออกแบบที่ใช้งานง่าย:
- ปรับเลย์เอาต์ให้เรียบง่าย
- ใช้ปุ่มที่ชัดเจนและมีขนาดที่เหมาะสม
- ทำให้หน้าต่างที่แสดงผลมีความสวยงามและใช้งานง่าย
สรุปผล
- วิเคราะห์ผลการเล่น:
- ตรวจสอบคะแนนเฉลี่ยของผู้เล่น
- วิเคราะห์ข้อมูลเพื่อหาจุดแข็งและจุดอ่อน
- ประเมินผลการเรียนรู้:
- สัมภาษณ์ผู้เล่นเกี่ยวกับความเข้าใจในเนื้อหาไฟฟ้าหลังเล่นเกม
- ข้อเสนอแนะ
- เพิ่มแหล่งข้อมูลสำหรับการศึกษาเพิ่มเติม:
- เชื่อมโยงไปยังเว็บไซต์ที่เกี่ยวข้องกับไฟฟ้า
- แนะนำหนังสือหรือเอกสารวิจัยที่เกี่ยวข้อง
- การพัฒนาแอปพลิเคชันมือถือ:
- พิจารณาการสร้างแอปพลิเคชันสำหรับสมาร์ทโฟนเพื่อเข้าถึงกลุ่มผู้เรียนมากขึ้น
- จัดกิจกรรมแข่งขัน:
- จัดการแข่งขันตอบคำถามเพื่อสร้างแรงจูงใจในการเรียนรู้
อ้างอิง
https://pantip.com/topic/41887284
https://icelectronic.com/beginner/study/electron.htm
http://118.174.134.188/sciencelab/senior/item03/lab52/more/page1.php
http://118.174.134.188/sciencelab/senior/item03/lab52/more/page1.php
http://nakhamwit.ac.th/pingpong_web/ChenBond.htm
https://gifer.com/de/1f2J
https://www.thaigoodview.com/library/dlcep2/03/html/content-html/electricalGenerator-html/dynamo.html
http://prepaenlineaaliciaaine.blogspot.com/2018/05/electricidad.html
https://makeagif.com/i/FKSuU7
https://makeagif.com/gif/testing-with-eddy-current-explained-simply-SboRsK
https://kru-it.com/dt-m1/electrical-and-electronics/
https://animesher.com/entry/nature-gif-clouds-1826386/
https://chatgpt.com/
https://tenor.com/view/grant-yapping-lucky-star-speech-bubble-gif-5332780545471097334
