เกมทดสอบความรู้ด้านไฟฟ้า(The Engineer’s Challenge)

คณะวิศวกรรมศาสตร์ / สาขาวิศวกรรมไฟฟ้า / โครงงานวิชาเรียน
ตุลาคม 14, 2024
0

ผู้เขียนบทความ : นายสุวัฒน์ชัย ภูมิภมร 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

เกมทดสอบความรู้ด้านไฟฟ้า(The Engineer’s Challenge)

ผู้เขียนบทความ : นายสุวัฒน์ชัย ภูมิภมร 167404130073

ความเป็นมา

ขอบเขตประโยชน์ที่คาดว่าจะได้รับ

วัตถุประสงค์

ความรู้ที่เกี่ยวข้อง

การดำเนินงาน

วิธีใช้งานโปรแกรม

HTML

css

Javascrip

การประยุกต์เพื่อเพิ่มประสิทธิภาพ

สรุปผล

You may also like...

ใส่ความเห็น ยกเลิกการตอบ

เกมทดสอบความรู้ด้านไฟฟ้า(The Engineer’s Challenge)

ผู้เขียนบทความ : นายสุวัฒน์ชัย ภูมิภมร 167404130073

ความเป็นมา

ขอบเขตประโยชน์ที่คาดว่าจะได้รับ

วัตถุประสงค์

ความรู้ที่เกี่ยวข้อง

การดำเนินงาน

วิธีใช้งานโปรแกรม

HTML

css

Javascrip

การประยุกต์เพื่อเพิ่มประสิทธิภาพ

สรุปผล

You may also like...

โครงงานเกม Whack a Prairie

เกมหลบวัตถุ(Object dodge game)

Game Save Your Worlds.

ใส่ความเห็น ยกเลิกการตอบ