แก้ไขบทเรียน

Back

รูปสินค้า (850 x 600 / .jpg , .png) *

ประเภทบทเรียน

ประเภทบทเรียนย่อย

Title

Description

Keyword

Detail

<div class="lesson-container" style="font-family: 'Sarabun', 'Prompt', sans-serif; line-height: 1.6; color: #333; max-width: 900px; margin: auto; background: #ffffff; padding: 20px; border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.08);">
    
    <div style="background: linear-gradient(135deg, #E65100 0%, #FF5252 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px; border-bottom: 5px solid #FFC107;">
        <h2 style="margin: 0; font-size: 26px; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.3); color: #FFEB3B;">🐱 หน่วยที่ 4: โครงงานแอนิเมชันและเกมด้วย Scratch</h2>
        <p style="margin: 10px 0 0 0; font-size: 22px; color: #FFFFFF; font-weight: bold;">EP.1 แอนิเมชันพิกัด X-Y และท่าทาง</p>
    </div>

<div style="margin-bottom: 40px;">
        
        <p style="font-size: 18px;">ยินดีต้อนรับสู่โลกของ Scratch! โปรแกรมที่เปลี่ยนการเขียนโค้ดให้สนุกเหมือนการต่อเลโก้ ในบทนี้เราจะมาเสกให้ตัวละคร (Sprite) เดินเล่นบนหน้าจอได้อย่างเป็นธรรมชาติราวกับมีชีวิตกันครับ!</p>

<h3 style="color: #D32F2F; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 30px;">🗺️ 1. รู้จักแผนที่พิกัด X และ Y</h3>
        <p>หน้าจอของ Scratch (Stage) เปรียบเสมือนแผนที่ที่ถูกตีเส้นตารางเอาไว้ โดยมีเส้นหลัก 2 เส้น คือ:</p>
        <div style="background: #FFF3E0; padding: 20px; border-radius: 10px; border-left: 5px solid #FF9800; margin-bottom: 20px;">
            <ul style="margin: 0; padding-left: 20px; line-height: 1.8; font-size: 16px;">
                <li><strong>แกน X (แนวนอน):</strong> ควบคุมการเดิน <strong>ซ้าย-ขวา</strong> (ขวาค่าเป็นบวก, ซ้ายค่าเป็นลบ)</li>
                <li><strong>แกน Y (แนวตั้ง):</strong> ควบคุมการเดิน <strong>ขึ้น-ลง</strong> (ขึ้นค่าเป็นบวก, ลงค่าเป็นลบ)</li>
            </ul>
        </div>
        <p style="margin: 0; color: #E65100; font-style: italic;">💡 <strong>ทริค:</strong> ตัวละครแต่ละตัวมีธรรมชาติการเคลื่อนที่ต่างกัน เช่น นกมักจะบินขึ้นลง (เปลี่ยนค่า Y) ส่วนรถยนต์มักจะวิ่งซ้ายขวา (เปลี่ยนค่า X)</p>

<h3 style="color: #D32F2F; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 30px;">🏃‍♂️ 2. เคล็ดวิชาแอนิเมชัน: ขยับ + เปลี่ยนชุด + ทำซ้ำ</h3>
        <p>ถ้าเราสั่งให้ตัวละครขยับทีเดียว 100 ก้าว มันจะวาร์ปไปทันทีซึ่งดูไม่เนียน! การทำแอนิเมชันที่สวยงามคือการให้ตัวละคร <strong>ขยับทีละนิดสลับกับเปลี่ยนท่าทาง (ชุด) ไปเรื่อยๆ</strong></p>
        
        <div style="background-color: #f4f4f4; padding: 20px; border-radius: 10px; border-left: 5px solid #FF5252; margin: 20px 0; line-height: 2.2;">
            <strong style="color: #D32F2F; font-size: 16px;">ลองต่อบล็อกแบบนี้ดูสิ!</strong><br><br>
            <span style="background-color: #ffbf00; color: white; padding: 6px 12px; border-radius: 5px; font-weight: bold; font-family: 'Arial', sans-serif; box-shadow: 0 2px 4px rgba(0,0,0,0.2);">when 🚩 clicked</span><br>
            <span style="background-color: #4c97ff; color: white; padding: 6px 12px; border-radius: 5px; font-weight: bold; font-family: 'Arial', sans-serif; box-shadow: 0 2px 4px rgba(0,0,0,0.2);">go to x: -200 y: 0</span> <em style="color: #666; font-size: 14px;">(ตั้งจุดเริ่มต้น)</em><br>
            <span style="background-color: #ffab19; color: white; padding: 6px 12px; border-radius: 5px; font-weight: bold; font-family: 'Arial', sans-serif; box-shadow: 0 2px 4px rgba(0,0,0,0.2);">repeat 50</span><br>
                <span style="background-color: #9966ff; color: white; padding: 6px 12px; border-radius: 5px; font-weight: bold; font-family: 'Arial', sans-serif; box-shadow: 0 2px 4px rgba(0,0,0,0.2);">next costume</span> <em style="color: #666; font-size: 14px;">(เปลี่ยนท่าทางให้เหมือนก้าวขา)</em><br>
                <span style="background-color: #4c97ff; color: white; padding: 6px 12px; border-radius: 5px; font-weight: bold; font-family: 'Arial', sans-serif; box-shadow: 0 2px 4px rgba(0,0,0,0.2);">change x by 5</span> <em style="color: #666; font-size: 14px;">(ขยับไปทางขวาทีละ 5 ก้าว)</em>
        </div>
        <p>บล็อก <span style="background-color: #9966ff; color: white; padding: 4px 8px; border-radius: 4px; font-weight: bold; font-size: 14px;">next costume</span> จะสั่งให้ตัวละครเปลี่ยนภาพไปเป็นชุดถัดไป เมื่อทำซ้ำอย่างรวดเร็ว ตาเราจะมองเห็นเป็นภาพเคลื่อนไหว (Animation) ครับ!</p>

<h3 style="color: #D32F2F; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 30px;">❤️ 3. ปลอดภัยไว้ก่อน (Safety First)</h3>
        <div style="background-color: #e8f5e9; border: 1px solid #4caf50; padding: 20px; border-radius: 10px; margin-top: 20px; display: flex; align-items: flex-start; gap: 15px;">
            <span style="font-size: 28px; line-height: 1;">👁️</span>
            <div>
                <strong style="color: #2E7D32; font-size: 16px;">ระวังโรค CVS (Computer Vision Syndrome)!</strong><br>
                <p style="margin: 5px 0 0 0; font-size: 15px; color: #333;">การเพลิดเพลินกับการเขียนโปรแกรมหน้าจอนานๆ อาจทำให้เกิดอาการตาแห้ง ปวดตา ปวดหัว และแสบตาได้ อย่าลืมพักสายตาทุกๆ 20 นาที มองไปไกลๆ 20 ฟุต เป็นเวลา 20 วินาที (กฎ 20-20-20) นะครับ</p>
            </div>
        </div>
        
    </div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background-color: #E65100; color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px; color: #FFC107;">✍️ มินิควิซ ประเมินตนเอง</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; color: #FFF8E1;">ทดสอบความเข้าใจพื้นฐาน Scratch! (ไม่เก็บคะแนน)</p>
        </div>
        
        <div style="border: 2px solid #E65100; border-top: none; padding: 25px; border-radius: 0 0 12px 12px; background: #fafafa;">
            
            <div class="question-item" style="margin-bottom: 25px; background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
                <p style="font-weight: bold; font-size: 18px; color: #E65100;">ข้อที่ 1: หากนักเรียนต้องการให้ตัวละคร "จรวด" บินทะยาน "ขึ้นไปด้านบน" ของหน้าจอ ต้องใช้บล็อกคำสั่งใด?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'แกน X เป็นการเคลื่อนที่แนวนอน (ซ้าย-ขวา) จ้า')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. change x by 10</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้อง! แกน Y คือแนวตั้ง และค่าบวกจะทำให้ตัวละครเคลื่อนที่ขึ้นด้านบน')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. change y by 10</button>
                    <button onclick="checkAnswer(this, false, 'แกน Y แนวตั้งถูกต้อง แต่ค่าติดลบจะทำให้ตัวละครตกลงมาด้านล่างจ้า')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. change y by -10</button>
                    <button onclick="checkAnswer(this, false, 'next costume ใช้เปลี่ยนท่าทาง ไม่ได้ทำให้เคลื่อนที่น้า')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. next costume</button>
                </div>
                <div class="feedback" style="margin-top: 15px; font-weight: bold; display: none;"></div>
            </div>

<div class="question-item" style="margin-bottom: 25px; background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
                <p style="font-weight: bold; font-size: 18px; color: #E65100;">ข้อที่ 2: บล็อกคำสั่งใดที่ทำหน้าที่เปลี่ยน "ท่าทาง" หรือภาพของตัวละครให้ดูเหมือนกำลังเดิน?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'นี่คือบล็อกสำหรับขยับตำแหน่งจ้า')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. move 10 steps</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้อง! next costume จะสลับไปใช้ภาพชุดถัดไปของตัวละคร ทำให้เกิดภาพเคลื่อนไหว')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. next costume</button>
                    <button onclick="checkAnswer(this, false, 'บล็อกนี้ใช้ซ่อนตัวละครจ้า')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. hide</button>
                    <button onclick="checkAnswer(this, false, 'บล็อกนี้ให้ตัวละครพูดข้อความออกมาจ้า')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. say Hello!</button>
                </div>
                <div class="feedback" style="margin-top: 15px; font-weight: bold; display: none;"></div>
            </div>

<div class="question-item" style="margin-bottom: 25px; background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
                <p style="font-weight: bold; font-size: 18px; color: #E65100;">ข้อที่ 3: ทำไมเราจึงควรนำบล็อก "change x by 5" ไปใส่ไว้ในบล็อก "repeat (ทำซ้ำ)" แทนการเขียนบล็อกขยับรวดเดียว 50 ก้าว?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'ไม่เกี่ยวกับการประหยัดไฟจ้า')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. เพื่อประหยัดพลังงานคอมพิวเตอร์</button>
                    <button onclick="checkAnswer(this, false, 'repeat ไม่ได้มีหน้าที่เปลี่ยนสีน้า')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. เพื่อให้ตัวละครเปลี่ยนสีได้อัตโนมัติ</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้อง! การขยับทีละนิดแล้วทำซ้ำหลายๆ รอบ จะทำให้การเคลื่อนที่ดูนุ่มนวลและต่อเนื่อง (สมูท) เหมือนชีวิตจริง')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. เพื่อให้การเคลื่อนไหวดูนุ่มนวลและต่อเนื่อง ไม่วาร์ปกระโดดข้ามไปทันที</button>
                    <button onclick="checkAnswer(this, false, 'เพื่อให้ทำงานช้าลงไม่ได้เป็นเหตุผลหลักในการสร้างแอนิเมชันจ้า')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. เพื่อให้โปรแกรมทำงานช้าลง</button>
                </div>
                <div class="feedback" style="margin-top: 15px; font-weight: bold; display: none;"></div>
            </div>

<div class="question-item" style="margin-bottom: 0; background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
                <p style="font-weight: bold; font-size: 18px; color: #E65100;">ข้อที่ 4: อาการ "CVS" ที่เกิดจากการจ้องหน้าจอคอมพิวเตอร์นานเกินไป ส่งผลกระทบต่ออวัยวะใดมากที่สุด?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, true, 'ถูกต้อง! CVS (Computer Vision Syndrome) คือกลุ่มอาการทางสายตา เช่น ปวดตา ตาแห้ง แสบตา')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. ดวงตา</button>
                    <button onclick="checkAnswer(this, false, 'ไม่ใช่จ้า แม้จะนั่งนานแต่ CVS เน้นที่อาการทางสายตา')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. กระดูกสันหลัง</button>
                    <button onclick="checkAnswer(this, false, 'อันนั้นคือ Office Syndrome หรืออาการปวดข้อมือจ้า')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. ข้อมือ</button>
                    <button onclick="checkAnswer(this, false, 'ไม่ใช่น้าา')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. ระบบขับถ่าย</button>
                </div>
                <div class="feedback" style="margin-top: 15px; font-weight: bold; display: none;"></div>
            </div>

</div>
    </div>

</div>

buttons.forEach(b => {
        b.disabled = true;
        b.style.opacity = '0.6';
    });

feedback.style.display = 'block';
    feedback.style.padding = '12px';
    feedback.style.borderRadius = '8px';
    feedback.style.marginTop = '15px';

if(isCorrect) {
        btn.style.background = '#FFF3E0';
        btn.style.borderColor = '#E65100';
        btn.style.color = '#E65100';
        btn.style.opacity = '1';
        feedback.style.background = '#FFF3E0';
        feedback.style.color = '#E65100';
        feedback.innerHTML = "✅ ถูกต้องครับ! " + msg;
    } else {
        btn.style.background = '#FFEBEE';
        btn.style.borderColor = '#C62828';
        btn.style.color = '#B71C1C';
        btn.style.opacity = '1';
        feedback.style.background = '#FFEBEE';
        feedback.style.color = '#B71C1C';
        feedback.innerHTML = "❌ ยังไม่ใช่นะครับ: " + msg;
    }
}
</script>
<div style="background-color: #f8f9fa; border: 1px solid #e9ecef; border-left: 5px solid #0d6efd; padding: 20px; margin-top: 50px; margin-bottom: 20px; border-radius: 8px; font-family: 'Sarabun', sans-serif; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
    <div style="display: flex; align-items: center; margin-bottom: 10px;">
        <span style="font-size: 1.5em; margin-right: 10px;">💡</span>
        <strong style="color: #0d6efd; font-size: 1.2em;">พบข้อผิดพลาดหรือมีข้อเสนอแนะ?</strong>
    </div>
    <p style="color: #495057; font-size: 1em; margin-bottom: 15px; line-height: 1.6;">
        หากนักเรียนหรือคุณครูพบจุดที่ควรแก้ไขในบทเรียน/แบบทดสอบนี้ หรือมีข้อเสนอแนะเพิ่มเติม สามารถแจ้งครูพิสิฐเพื่อนำไปปรับปรุงเนื้อหาให้สมบูรณ์ยิ่งขึ้นได้เลยครับ <br>
        <span style="font-size: 0.9em; color: #6c757d;">(ขอบคุณที่ร่วมเป็นส่วนหนึ่งในการพัฒนาการเรียนรู้ไปด้วยกันครับ)</span>
    </p>
    <a href="mailto:tpisit@wsst.ac.th?subject=แจ้งข้อเสนอแนะ/ข้อผิดพลาด บทเรียน SmartyQuizKids" style="display: inline-block; background-color: #0d6efd; color: #ffffff; padding: 10px 20px; text-decoration: none; border-radius: 5px; font-size: 1em; font-weight: bold;">
        ✉️ ส่งอีเมลแจ้งครูพิสิฐ
    </a>
</div>