<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>อุปกรณ์ป้องกันลำตัว Archives - ครูชัชดอทคอม</title>
	<atom:link href="https://www.kroochut.com/tag/%e0%b8%ad%e0%b8%b8%e0%b8%9b%e0%b8%81%e0%b8%a3%e0%b8%93%e0%b9%8c%e0%b8%9b%e0%b9%89%e0%b8%ad%e0%b8%87%e0%b8%81%e0%b8%b1%e0%b8%99%e0%b8%a5%e0%b8%b3%e0%b8%95%e0%b8%b1%e0%b8%a7/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.kroochut.com/tag/อุปกรณ์ป้องกันลำตัว/</link>
	<description>เว็บไซต์เพื่อการเรียนรู้ของทุกคน</description>
	<lastBuildDate>Wed, 28 May 2025 12:37:50 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.8.2</generator>

<image>
	<url>https://www.kroochut.com/wp-content/uploads/2024/12/cropped-5dd646cee6656-32x32.png</url>
	<title>อุปกรณ์ป้องกันลำตัว Archives - ครูชัชดอทคอม</title>
	<link>https://www.kroochut.com/tag/อุปกรณ์ป้องกันลำตัว/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>🛡️ แบบฝึกหัดอุปกรณ์ป้องกันอันตราย ม.3 วิชาเทคโนโลยี (การออกแบบและเทคโนโลยี)</title>
		<link>https://www.kroochut.com/personal-protective-equipment/</link>
		
		<dc:creator><![CDATA[admin]]></dc:creator>
		<pubDate>Wed, 28 May 2025 12:34:59 +0000</pubDate>
				<category><![CDATA[การออกแบบและเทคโนโลยี]]></category>
		<category><![CDATA[assessment tool]]></category>
		<category><![CDATA[drag and drop]]></category>
		<category><![CDATA[e-learning]]></category>
		<category><![CDATA[educational game]]></category>
		<category><![CDATA[gamification]]></category>
		<category><![CDATA[interactive quiz]]></category>
		<category><![CDATA[personal protective equipment]]></category>
		<category><![CDATA[PPE equipment]]></category>
		<category><![CDATA[safety equipment]]></category>
		<category><![CDATA[workplace safety]]></category>
		<category><![CDATA[ครูเทคโนโลยี]]></category>
		<category><![CDATA[ความปลอดภัยในการทำงาน]]></category>
		<category><![CDATA[ตรวจคำตอบทันที]]></category>
		<category><![CDATA[ถุงมือนิรภัย]]></category>
		<category><![CDATA[ที่อุดหู]]></category>
		<category><![CDATA[นักเรียนมัธยมต้น]]></category>
		<category><![CDATA[บันทึกคะแนน]]></category>
		<category><![CDATA[ม.3]]></category>
		<category><![CDATA[มัธยมศึกษาปีที่ 3]]></category>
		<category><![CDATA[รองเท้านิรภัย]]></category>
		<category><![CDATA[ระบบสุ่มคำถาม]]></category>
		<category><![CDATA[ลากวาง]]></category>
		<category><![CDATA[วิชาเทคโนโลยี]]></category>
		<category><![CDATA[สื่อการเรียนการสอน]]></category>
		<category><![CDATA[สื่อดิจิทัล]]></category>
		<category><![CDATA[หน้ากากกันฝุ่น]]></category>
		<category><![CDATA[หมวกนิรภัย]]></category>
		<category><![CDATA[อุปกรณ์ป้องกันลำตัว]]></category>
		<category><![CDATA[อุปกรณ์ป้องกันอันตราย]]></category>
		<category><![CDATA[เกมการศึกษา]]></category>
		<category><![CDATA[เสื้อกั๊กสะท้อนแสง]]></category>
		<category><![CDATA[แบบทดสอบออนไลน์]]></category>
		<category><![CDATA[แบบฝึกหัดเทคโนโลยี]]></category>
		<category><![CDATA[แว่นตานิรภัย]]></category>
		<guid isPermaLink="false">https://www.kroochut.com/?p=659</guid>

					<description><![CDATA[<p>แบบฝึกหัดอุปกรณ์ป้องกันอันตราย &#8211; เทคโนโลยี ม.3 🛡️ แบบฝึกหัดอุปกรณ์ป้องกันอันตราย เทคโนโลยี (การออกแบบและเทคโนโลยี) &#8211; ชั้นมัธยมศึกษาปีที่ 3 📝 กรอกข้อมูลนักเรียน 👤 ชื่อ-นามสกุล: 🎓 ชั้น: 🔢 เลขที่: 🚀 เริ่มทำแบบฝึกหัด คะแนน: 0/8 คำถามที่ 1 จับคู่อุปกรณ์ป้องกันกับหน้าที่ที่ถูกต้อง 🔧 อุปกรณ์ป้องกัน 📋 หน้าที่ของอุปกรณ์ ✅ ตรวจคำตอบ ➡️ ข้อถัดไป 🎉 เสร็จสิ้นแบบฝึกหัด! 🔄 เริ่มใหม่</p>
<p>The post <a href="https://www.kroochut.com/personal-protective-equipment/">🛡️ แบบฝึกหัดอุปกรณ์ป้องกันอันตราย ม.3 วิชาเทคโนโลยี (การออกแบบและเทคโนโลยี)</a> appeared first on <a href="https://www.kroochut.com">ครูชัชดอทคอม</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<figure class="wp-block-image aligncenter size-full is-resized"><img fetchpriority="high" decoding="async" width="1015" height="1024" src="https://www.kroochut.com/wp-content/uploads/2025/05/1111-1015x1024-1.png" alt="" class="wp-image-660" style="width:auto;height:600px" srcset="https://www.kroochut.com/wp-content/uploads/2025/05/1111-1015x1024-1.png 1015w, https://www.kroochut.com/wp-content/uploads/2025/05/1111-1015x1024-1-297x300.png 297w, https://www.kroochut.com/wp-content/uploads/2025/05/1111-1015x1024-1-150x150.png 150w, https://www.kroochut.com/wp-content/uploads/2025/05/1111-1015x1024-1-768x775.png 768w" sizes="(max-width: 1015px) 100vw, 1015px" /></figure>



<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="แบบฝึกหัดลากวางอุปกรณ์ป้องกันอันตรายในการทำงาน สำหรับนักเรียน ม.3 วิชาเทคโนโลยี มีระบบสุ่มคำถาม ตรวจคำตอบทันที และบันทึกคะแนน เรียนรู้หมวกนิรภัย แว่นตา รองเท้า ถุงมือ และอุปกรณ์ป้องกันอื่นๆ">
    <meta name="keywords" content="อุปกรณ์ป้องกันอันตราย, แบบฝึกหัดเทคโนโลยี, ม.3, มัธยมศึกษาปีที่ 3, หมวกนิรภัย, แว่นตานิรภัย, รองเท้านิรภัย, ที่อุดหู, เสื้อกั๊กสะท้อนแสง, ถุงมือนิรภัย, หน้ากากกันฝุ่น, อุปกรณ์ป้องกันลำตัว, ลากวาง, drag and drop, เกมการศึกษา, แบบทดสอบออนไลน์, ความปลอดภัยในการทำงาน, การออกแบบและเทคโนโลยี, interactive quiz, educational game, safety equipment, วิชาเทคโนโลยี, ครูเทคโนโลยี, สื่อการเรียนการสอน, นักเรียนมัธยมต้น, workplace safety, PPE equipment, personal protective equipment, สื่อดิจิทัล, e-learning, gamification, ระบบสุ่มคำถาม, ตรวจคำตอบทันที, บันทึกคะแนน, แบบประเมิน, assessment tool">
    <meta name="author" content="ครูเทคโนโลยี">
    <title>แบบฝึกหัดอุปกรณ์ป้องกันอันตราย &#8211; เทคโนโลยี ม.3</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Sarabun', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #ff6b6b, #ee5a24);
            color: white;
            padding: 30px;
            text-align: center;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .header p {
            font-size: 1.2em;
            opacity: 0.9;
        }

        .student-form {
            padding: 30px;
            background: #f8f9fa;
            border-bottom: 3px solid #e9ecef;
        }

        .form-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }

        .form-group {
            display: flex;
            flex-direction: column;
        }

        .form-group label {
            font-weight: bold;
            color: #333;
            margin-bottom: 8px;
            font-size: 1.1em;
        }

        .form-group input {
            padding: 12px 15px;
            border: 2px solid #ddd;
            border-radius: 10px;
            font-size: 1em;
            transition: all 0.3s ease;
        }

        .form-group input:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 10px rgba(102, 126, 234, 0.3);
        }

        .start-btn {
            background: linear-gradient(135deg, #4CAF50, #45a049);
            color: white;
            border: none;
            padding: 15px 40px;
            font-size: 1.2em;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .start-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.3);
        }

        .start-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

        .game-area {
            padding: 40px;
            display: none;
        }

        .score-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding: 20px;
            background: linear-gradient(135deg, #74b9ff, #0984e3);
            color: white;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .student-info {
            font-size: 1.1em;
        }

        .score {
            font-size: 1.5em;
            font-weight: bold;
        }

        .question-container {
            background: #f8f9fa;
            padding: 30px;
            border-radius: 15px;
            margin-bottom: 30px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }

        .question-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .question-number {
            background: #667eea;
            color: white;
            padding: 10px 20px;
            border-radius: 25px;
            display: inline-block;
            font-weight: bold;
            margin-bottom: 15px;
        }

        .question-text {
            font-size: 1.4em;
            color: #333;
            font-weight: bold;
        }

        .drag-drop-area {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            margin-top: 30px;
        }

        .items-container, .targets-container {
            min-height: 400px;
        }

        .items-container h3, .targets-container h3 {
            text-align: center;
            color: #333;
            margin-bottom: 20px;
            font-size: 1.3em;
            padding: 15px;
            background: linear-gradient(135deg, #fdcb6e, #e17055);
            color: white;
            border-radius: 10px;
        }

        .draggable-item {
            background: linear-gradient(135deg, #74b9ff, #0984e3);
            color: white;
            padding: 15px 20px;
            margin: 10px 0;
            border-radius: 12px;
            cursor: grab;
            transition: all 0.3s ease;
            font-size: 1.1em;
            font-weight: 500;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .draggable-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.2);
        }

        .draggable-item:active {
            cursor: grabbing;
            transform: scale(0.95);
        }

        .drop-zone {
            border: 3px dashed #ddd;
            border-radius: 12px;
            padding: 20px;
            margin: 10px 0;
            min-height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            font-size: 1.1em;
            color: #666;
            position: relative;
        }

        .drop-zone.drag-over {
            border-color: #667eea;
            background-color: rgba(102, 126, 234, 0.1);
            transform: scale(1.02);
        }

        .drop-zone.filled {
            background: linear-gradient(135deg, #00b894, #00a085);
            color: white;
            border-color: #00b894;
        }

        .drop-zone.incorrect {
            background: linear-gradient(135deg, #e17055, #d63031);
            color: white;
            border-color: #d63031;
        }

        .check-btn, .next-btn, .restart-btn {
            background: linear-gradient(135deg, #fd79a8, #e84393);
            color: white;
            border: none;
            padding: 15px 30px;
            font-size: 1.2em;
            border-radius: 25px;
            cursor: pointer;
            margin: 10px;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .check-btn:hover, .next-btn:hover, .restart-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.3);
        }

        .controls {
            text-align: center;
            margin-top: 30px;
        }

        .result-summary {
            display: none;
            background: linear-gradient(135deg, #00b894, #00a085);
            color: white;
            padding: 40px;
            border-radius: 15px;
            text-align: center;
            margin-top: 30px;
        }

        .result-summary h2 {
            font-size: 2.5em;
            margin-bottom: 20px;
        }

        .final-score {
            font-size: 3em;
            font-weight: bold;
            margin: 20px 0;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .feedback {
            padding: 20px;
            margin: 20px 0;
            border-radius: 10px;
            font-size: 1.2em;
            text-align: center;
            animation: fadeIn 0.5s ease;
        }

        .feedback.correct {
            background: linear-gradient(135deg, #00b894, #00a085);
            color: white;
        }

        .feedback.incorrect {
            background: linear-gradient(135deg, #e17055, #d63031);
            color: white;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .progress-bar {
            width: 100%;
            height: 8px;
            background: #e9ecef;
            border-radius: 4px;
            margin: 20px 0;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(135deg, #74b9ff, #0984e3);
            transition: width 0.3s ease;
            border-radius: 4px;
        }

        @media (max-width: 768px) {
            .drag-drop-area {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .form-row {
                grid-template-columns: 1fr;
            }
            
            .header h1 {
                font-size: 2em;
            }
            
            .score-info {
                flex-direction: column;
                gap: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🛡️ แบบฝึกหัดอุปกรณ์ป้องกันอันตราย</h1>
            <p>เทคโนโลยี (การออกแบบและเทคโนโลยี) &#8211; ชั้นมัธยมศึกษาปีที่ 3</p>
        </div>

        <div class="student-form" id="studentForm">
            <h2 style="text-align: center; margin-bottom: 20px; color: #333;">📝 กรอกข้อมูลนักเรียน</h2>
            <div class="form-row">
                <div class="form-group">
                    <label>👤 ชื่อ-นามสกุล:</label>
                    <input type="text" id="studentName" placeholder="กรอกชื่อ-นามสกุล" required>
                </div>
                <div class="form-group">
                    <label>🎓 ชั้น:</label>
                    <input type="text" id="studentClass" placeholder="เช่น ม.3/1" required>
                </div>
                <div class="form-group">
                    <label>🔢 เลขที่:</label>
                    <input type="number" id="studentNumber" placeholder="เลขที่" min="1" required>
                </div>
            </div>
            <div style="text-align: center;">
                <button class="start-btn" onclick="startQuiz()">🚀 เริ่มทำแบบฝึกหัด</button>
            </div>
        </div>

        <div class="game-area" id="gameArea">
            <div class="score-info">
                <div class="student-info" id="studentInfo"></div>
                <div class="score">คะแนน: <span id="currentScore">0</span>/<span id="totalQuestions">8</span></div>
            </div>

            <div class="progress-bar">
                <div class="progress-fill" id="progressFill" style="width: 0%"></div>
            </div>

            <div class="question-container" id="questionContainer">
                <div class="question-header">
                    <div class="question-number" id="questionNumber">คำถามที่ 1</div>
                    <div class="question-text" id="questionText">จับคู่อุปกรณ์ป้องกันกับหน้าที่ที่ถูกต้อง</div>
                </div>

                <div class="drag-drop-area">
                    <div class="items-container">
                        <h3>🔧 อุปกรณ์ป้องกัน</h3>
                        <div id="draggableItems"></div>
                    </div>
                    <div class="targets-container">
                        <h3>📋 หน้าที่ของอุปกรณ์</h3>
                        <div id="dropTargets"></div>
                    </div>
                </div>

                <div class="controls">
                    <button class="check-btn" id="checkBtn" onclick="checkAnswer()">✅ ตรวจคำตอบ</button>
                    <button class="next-btn" id="nextBtn" onclick="nextQuestion()" style="display: none;">➡️ ข้อถัดไป</button>
                </div>

                <div id="feedback"></div>
            </div>

            <div class="result-summary" id="resultSummary">
                <h2>🎉 เสร็จสิ้นแบบฝึกหัด!</h2>
                <div class="final-score" id="finalScore"></div>
                <div id="finalStudentInfo"></div>
                <div id="finalFeedback"></div>
                <button class="restart-btn" onclick="restartQuiz()">🔄 เริ่มใหม่</button>
            </div>
        </div>
    </div>

    <script>
        const safetyEquipment = {
            '🪖 หมวกนิรภัย': 'ป้องกันศีรษะจากสิ่งของตกหล่น การกระแทก และไฟฟ้าช็อต',
            '🥽 แว่นตานิรภัย': 'ป้องกันดวงตาจากฝุ่น สารเคมี แสงจ้า และเศษวัสดุ',
            '👢 รองเท้านิรภัย': 'ป้องกันเท้าจากการทิ่มแทง สิ่งของหนัก และสารเคมี',
            '🔇 ที่อุดหู': 'ป้องกันหูจากเสียงดังเกินไป ลดการสูญเสียการได้ยิน',
            '🦺 เสื้อกั๊กสะท้อนแสง': 'เพิ่มการมองเห็นในที่มืด ป้องกันอุบัติเหตุ',
            '🧤 ถุงมือนิรภัย': 'ป้องกันมือจากสารเคมี ความร้อน และวัตถุมีคม',
            '😷 หน้ากากกันฝุ่น': 'ป้องกันระบบหายใจจากฝุ่น ควัน และอนุภาคอันตราย',
            '🛡️ อุปกรณ์ป้องกันลำตัว': 'ป้องกันลำตัวจากสารเคมี ความร้อน และการกระแทก'
        };

        let currentQuestion = 0;
        let score = 0;
        let questions = [];
        let studentData = {};
        let answeredQuestions = [];

        function shuffleArray(array) {
            const newArray = [...array];
            for (let i = newArray.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [newArray[i], newArray[j]] = [newArray[j], newArray[i]];
            }
            return newArray;
        }

        function generateQuestions() {
            const equipmentList = Object.keys(safetyEquipment);
            questions = shuffleArray(equipmentList).map(equipment => ({
                equipment: equipment,
                function: safetyEquipment[equipment],
                answered: false
            }));
        }

        function startQuiz() {
            const name = document.getElementById('studentName').value.trim();
            const studentClass = document.getElementById('studentClass').value.trim();
            const number = document.getElementById('studentNumber').value.trim();

            if (!name || !studentClass || !number) {
                alert('⚠️ กรุณากรอกข้อมูลให้ครบถ้วน');
                return;
            }

            studentData = { name, class: studentClass, number };
            
            document.getElementById('studentForm').style.display = 'none';
            document.getElementById('gameArea').style.display = 'block';
            
            document.getElementById('studentInfo').textContent = 
                `👤 ${studentData.name} | 🎓 ${studentData.class} | 🔢 เลขที่ ${studentData.number}`;
            
            generateQuestions();
            currentQuestion = 0;
            score = 0;
            answeredQuestions = [];
            
            document.getElementById('totalQuestions').textContent = questions.length;
            showQuestion();
        }

        function showQuestion() {
            if (currentQuestion >= questions.length) {
                showResult();
                return;
            }

            const question = questions[currentQuestion];
            document.getElementById('questionNumber').textContent = `คำถามที่ ${currentQuestion + 1}`;
            
            // Update progress
            const progress = ((currentQuestion) / questions.length) * 100;
            document.getElementById('progressFill').style.width = progress + '%';

            // Create draggable item
            const itemsContainer = document.getElementById('draggableItems');
            itemsContainer.innerHTML = `
                <div class="draggable-item" draggable="true" data-equipment="${question.equipment}">
                    ${question.equipment}
                </div>
            `;

            // Create drop targets with shuffled options
            const allFunctions = Object.values(safetyEquipment);
            const shuffledFunctions = shuffleArray(allFunctions);
            
            const targetsContainer = document.getElementById('dropTargets');
            targetsContainer.innerHTML = shuffledFunctions.map(func => `
                <div class="drop-zone" data-function="${func}">
                    ${func}
                </div>
            `).join('');

            // Add drag and drop event listeners
            addDragDropListeners();
            
            // Reset buttons and feedback
            document.getElementById('checkBtn').style.display = 'inline-block';
            document.getElementById('nextBtn').style.display = 'none';
            document.getElementById('feedback').innerHTML = '';
            
            // Clear any previous styling
            document.querySelectorAll('.drop-zone').forEach(zone => {
                zone.classList.remove('filled', 'incorrect');
            });
        }

        function addDragDropListeners() {
            const draggableItems = document.querySelectorAll('.draggable-item');
            const dropZones = document.querySelectorAll('.drop-zone');

            draggableItems.forEach(item => {
                item.addEventListener('dragstart', handleDragStart);
                item.addEventListener('dragend', handleDragEnd);
            });

            dropZones.forEach(zone => {
                zone.addEventListener('dragover', handleDragOver);
                zone.addEventListener('drop', handleDrop);
                zone.addEventListener('dragenter', handleDragEnter);
                zone.addEventListener('dragleave', handleDragLeave);
            });
        }

        function handleDragStart(e) {
            e.dataTransfer.setData('text/plain', e.target.dataset.equipment);
            e.target.style.opacity = '0.5';
        }

        function handleDragEnd(e) {
            e.target.style.opacity = '1';
        }

        function handleDragOver(e) {
            e.preventDefault();
        }

        function handleDragEnter(e) {
            e.preventDefault();
            e.target.classList.add('drag-over');
        }

        function handleDragLeave(e) {
            e.target.classList.remove('drag-over');
        }

        function handleDrop(e) {
            e.preventDefault();
            e.target.classList.remove('drag-over');
            
            const equipment = e.dataTransfer.getData('text/plain');
            const dropZone = e.target;
            
            // Clear previous drops
            document.querySelectorAll('.drop-zone').forEach(zone => {
                if (zone.classList.contains('filled')) {
                    zone.classList.remove('filled');
                    zone.innerHTML = zone.dataset.function;
                }
            });
            
            // Add item to drop zone
            dropZone.classList.add('filled');
            dropZone.innerHTML = `
                <div style="display: flex; align-items: center; gap: 10px;">
                    ${equipment} ➡️ ${dropZone.dataset.function}
                </div>
            `;
            
            // Hide draggable item
            document.querySelector(`[data-equipment="${equipment}"]`).style.display = 'none';
        }

        function checkAnswer() {
            const filledZone = document.querySelector('.drop-zone.filled');
            if (!filledZone) {
                alert('⚠️ กรุณาลากอุปกรณ์ไปวางในช่องที่เหมาะสม');
                return;
            }

            const question = questions[currentQuestion];
            const selectedFunction = filledZone.dataset.function;
            const correctFunction = question.function;
            
            const isCorrect = selectedFunction === correctFunction;
            
            if (isCorrect) {
                score++;
                filledZone.classList.add('filled');
                showFeedback('correct', '✅ ถูกต้อง! เยี่ยมมาก!');
            } else {
                filledZone.classList.remove('filled');
                filledZone.classList.add('incorrect');
                showFeedback('incorrect', `❌ ไม่ถูกต้อง คำตอบที่ถูกคือ: ${correctFunction}`);
            }
            
            // Update score display
            document.getElementById('currentScore').textContent = score;
            
            // Record answer
            answeredQuestions.push({
                question: question.equipment,
                correct: isCorrect,
                userAnswer: selectedFunction,
                correctAnswer: correctFunction
            });
            
            // Show next button
            document.getElementById('checkBtn').style.display = 'none';
            document.getElementById('nextBtn').style.display = 'inline-block';
        }

        function showFeedback(type, message) {
            const feedback = document.getElementById('feedback');
            feedback.innerHTML = `<div class="feedback ${type}">${message}</div>`;
        }

        function nextQuestion() {
            currentQuestion++;
            showQuestion();
        }

        function showResult() {
            document.getElementById('questionContainer').style.display = 'none';
            document.getElementById('resultSummary').style.display = 'block';
            
            const percentage = Math.round((score / questions.length) * 100);
            document.getElementById('finalScore').textContent = `${score}/${questions.length} (${percentage}%)`;
            
            document.getElementById('finalStudentInfo').innerHTML = `
                <div style="font-size: 1.3em; margin: 20px 0;">
                    <div>👤 ชื่อ: ${studentData.name}</div>
                    <div>🎓 ชั้น: ${studentData.class}</div>
                    <div>🔢 เลขที่: ${studentData.number}</div>
                </div>
            `;
            
            let feedbackMessage = '';
            if (percentage >= 80) {
                feedbackMessage = '🌟 ยอดเยี่ยม! คุณมีความรู้เรื่องอุปกรณ์ป้องกันอันตรายเป็นอย่างดี';
            } else if (percentage >= 60) {
                feedbackMessage = '👍 ดีมาก! แต่ควรศึกษาเพิ่มเติมในส่วนที่ยังไม่แน่ใจ';
            } else {
                feedbackMessage = '📚 ควรศึกษาเพิ่มเติมเรื่องอุปกรณ์ป้องกันอันตรายให้มากขึ้น';
            }
            
            document.getElementById('finalFeedback').innerHTML = `
                <div style="font-size: 1.2em; margin: 20px 0; padding: 20px; background: rgba(255,255,255,0.2); border-radius: 10px;">
                    ${feedbackMessage}
                </div>
            `;

            // Update progress to 100%
            document.getElementById('progressFill').style.width = '100%';
        }

        function restartQuiz() {
            document.getElementById('resultSummary').style.display = 'none';
            document.getElementById('questionContainer').style.display = 'block';
            document.getElementById('gameArea').style.display = 'none';
            document.getElementById('studentForm').style.display = 'block';
            
            // Reset form
            document.getElementById('studentName').value = '';
            document.getElementById('studentClass').value = '';
            document.getElementById('studentNumber').value = '';
            
            // Reset variables
            currentQuestion = 0;
            score = 0;
            questions = [];
            answeredQuestions = [];
            studentData = {};
        }

        // Initialize
        window.addEventListener('load', () => {
            // Add some initial animation
            document.querySelector('.container').style.animation = 'fadeIn 0.8s ease';
        });
    </script>
<div id="gsp_data_html" data-g_version="3.20.1" data-w_id="8ee335ae8ad86099f21d5aed437a1c00" data-s_enc="" data-h_enc="" data-hh_enc="" data-lazy_load="1" data-reload_session="0" data-gt-w="gsp_clgtranslate_wrapper" data-vv_index="15" data-ref="https://www.kroochut.com/tag/%e0%b8%ad%e0%b8%b8%e0%b8%9b%e0%b8%81%e0%b8%a3%e0%b8%93%e0%b9%8c%e0%b8%9b%e0%b9%89%e0%b8%ad%e0%b8%87%e0%b8%81%e0%b8%b1%e0%b8%99%e0%b8%a5%e0%b8%b3%e0%b8%95%e0%b8%b1%e0%b8%a7/"></div>
</body>
</html>
<div class="gsp_post_data" 
	            data-post_type="post" 
	            data-cat="%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b8%ad%e0%b8%ad%e0%b8%81%e0%b9%81%e0%b8%9a%e0%b8%9a%e0%b9%81%e0%b8%a5%e0%b8%b0%e0%b9%80%e0%b8%97%e0%b8%84%e0%b9%82%e0%b8%99%e0%b9%82%e0%b8%a5%e0%b8%a2%e0%b8%b5" 
	            data-modified="120"
	            data-created="1748435699"
	            data-title="🛡️ แบบฝึกหัดอุปกรณ์ป้องกันอันตราย ม.3 วิชาเทคโนโลยี (การออกแบบและเทคโนโลยี)" 
	            data-home="https://www.kroochut.com"></div><p>The post <a href="https://www.kroochut.com/personal-protective-equipment/">🛡️ แบบฝึกหัดอุปกรณ์ป้องกันอันตราย ม.3 วิชาเทคโนโลยี (การออกแบบและเทคโนโลยี)</a> appeared first on <a href="https://www.kroochut.com">ครูชัชดอทคอม</a>.</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
