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

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 20px rgba(0,0,0,0.1);">
    
    <div style="background: linear-gradient(135deg, #F57C00 0%, #FF9800 50%, #FFB300 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px; border-bottom: 5px solid #E65100;">
        <h2 style="margin: 0; font-size: 26px; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.4); color: #FFF;">🐱 หน่วยที่ 2 EP.4: เริ่มต้นสนุกกับ Scratch!</h2>
        <p style="margin: 10px 0 0 0; font-size: 22px; color: #FFF3E0; font-weight: bold;">สร้างภาพเคลื่อนไหวด้วยตัวเองง่ายๆ</p>
    </div>

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

<h3 style="color: #E65100; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 30px;">🌟 1. ยินดีต้อนรับสู่โลกของ Scratch</h3>
        <p><strong>Scratch</strong> เป็นโปรแกรมที่ให้เราเอา <strong>"บล็อกคำสั่ง (Block)"</strong> สีสันสดใสมาต่อกันเพื่อสร้างนิทาน เกม หรือภาพเคลื่อนไหว โดยที่เราสามารถเข้าใช้งานฟรีได้ผ่านเว็บไซต์ <code>scratch.mit.edu</code> ครับ</p>
        
        <div style="background: #FFF8E1; padding: 20px; border-radius: 12px; border-left: 6px solid #FFC107; margin-top: 15px;">
            <strong style="color: #F57F17; font-size: 18px;">🎭 ทำความรู้จัก "Sprite (สไปรต์)"</strong>
            <p style="margin-top: 5px; margin-bottom: 0; color: #E65100; font-size: 15px;">ตัวละครทุกตัวที่เราใช้เล่นในโปรแกรมนี้ ไม่ว่าจะเป็นคน สัตว์ หรือสิ่งของ เราจะเรียกมันว่า <strong>"Sprite (สไปรต์)"</strong> ครับ โดยสไปรต์เริ่มต้นที่โปรแกรมเตรียมไว้ให้ทุกคนก็คือ <em>"น้องแมวสีส้ม"</em> สุดน่ารักนั่นเอง!</p>
        </div>

<h3 style="color: #E65100; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 35px;">🖥️ 2. สำรวจหน้าต่างโปรแกรม</h3>
        <p>เพื่อให้เราสร้างแอนิเมชันได้คล่องแคล่ว เราต้องรู้ก่อนว่าหน้าจอของ Scratch แบ่งเป็น 3 ส่วนหลักๆ ดังนี้ครับ:</p>
        
        <div style="display: flex; flex-direction: column; gap: 15px; margin-top: 15px;">
            <div style="background: #FAFAFA; padding: 15px; border-radius: 8px; border: 1px solid #ddd; border-left: 5px solid #4CAF50;">
                <strong style="color: #2E7D32; font-size: 16px;">1. หมวดหมู่บล็อกคำสั่ง (Code Palette)</strong><br>
                <span style="font-size: 15px;">อยู่ทางซ้ายมือสุด เป็นที่เก็บเครื่องมือทั้งหมด โดยจะแบ่งสีชัดเจน เช่น <span style="color: #1565C0; font-weight: bold;">สีฟ้า = การเคลื่อนที่</span>, <span style="color: #9C27B0; font-weight: bold;">สีม่วง = รูปลักษณ์</span>, <span style="color: #FF9800; font-weight: bold;">สีเหลือง = เหตุการณ์</span></span>
            </div>
            
            <div style="background: #FAFAFA; padding: 15px; border-radius: 8px; border: 1px solid #ddd; border-left: 5px solid #2196F3;">
                <strong style="color: #1565C0; font-size: 16px;">2. พื้นที่ทำงาน (Workspace)</strong><br>
                <span style="font-size: 15px;">ลานกว้างๆ ตรงกลาง เอาไว้ให้เราลากบล็อกคำสั่งจากทางซ้าย มาต่อกันให้เป็นสคริปต์ (Script) ยาวๆ ครับ</span>
            </div>

<div style="background: #FAFAFA; padding: 15px; border-radius: 8px; border: 1px solid #ddd; border-left: 5px solid #E91E63;">
                <strong style="color: #C2185B; font-size: 16px;">3. เวทีแสดงผล (Stage)</strong><br>
                <span style="font-size: 15px;">กรอบสี่เหลี่ยมด้านขวาบน เป็นที่ที่น้องแมว (Sprite) ของเราจะแสดงท่าทางต่างๆ ตามคำสั่งที่เราเขียนไว้ในพื้นที่ทำงานครับ</span>
            </div>
        </div>

<h3 style="color: #E65100; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 35px;">🎬 3. สร้างภาพเคลื่อนไหว (Animation) สเต็ปแรก!</h3>
        <p>น้องแมวสามารถเปลี่ยนท่าทางได้เหมือนการวาดการ์ตูนช่อง (Flipbook) ครับ มาลองเขียนคำสั่งง่ายๆ ให้แมวขยับขากันดู:</p>
        
        <div style="background: #FFF3E0; padding: 20px; border-radius: 12px; border: 1px solid #FFCC80; margin-top: 15px; font-size: 15px; line-height: 1.8;">
            <ol style="margin-top: 0; padding-left: 20px; color: #E65100; margin-bottom: 0;">
                <li>ลากบล็อก <strong>[เมื่อคลิก 🚩]</strong> (สีเหลือง) มาวาง เพื่อเป็นจุดเริ่มต้น</li>
                <li>ลากบล็อก <strong>[เคลื่อนที่ 10 ก้าว]</strong> (สีฟ้า) มาต่อด้านล่าง ให้น้องแมวเดินหน้า</li>
                <li>ลากบล็อก <strong>[ชุดถัดไป]</strong> (สีม่วง) มาต่อ เพื่อสั่งให้น้องแมวสลับไปทำท่าทางถัดไป</li>
                <li>ลากบล็อก <strong>[รอ 1 วินาที]</strong> (สีส้ม) มาคั่นไว้ เพื่อไม่ให้น้องแมวขยับเร็วเกินไปจนเรามองไม่ทัน</li>
                <li>เมื่อเขียนเสร็จ ให้กด <strong>ปุ่มธงสีเขียว (🚩)</strong> ด้านบนเวที แล้วดูผลลัพธ์เลย!</li>
            </ol>
        </div>

</div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background: linear-gradient(135deg, #E65100 0%, #F57F17 100%); color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px; color: #FFF;">🧩 มินิควิซ ทบทวนความรู้ EP.4</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; color: #FFF8E1;">มาทดสอบความจำเรื่องหน้าต่าง Scratch กัน!</p>
        </div>
        
        <div style="border: 2px solid #F57F17; 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: ตัวละครหลักในโปรแกรม Scratch (เช่น น้องแมวสีส้ม) มีชื่อเรียกเฉพาะในโปรแกรมว่าอะไร?</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;">ก. สไปเดอร์ (Spider)</button>
                    <button onclick="checkAnswer(this, true, 'เก่งมากครับ! เราเรียกตัวละครทุกตัวในโปรแกรมนี้ว่า สไปรต์ (Sprite) ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. สไปรต์ (Sprite)</button>
                    <button onclick="checkAnswer(this, false, 'สคริปต์ (Script) คือชุดคำสั่งที่เราเอาบล็อกมาต่อกันครับ ไม่ใช่ชื่อตัวละคร')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. สคริปต์ (Script)</button>
                    <button onclick="checkAnswer(this, false, 'สเตจ (Stage) คือเวทีสำหรับแสดงผลครับผม')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. สเตจ (Stage)</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, 'ปุ่มสี่เหลี่ยมสีแดง (Stop) เอาไว้หยุดโปรแกรมที่กำลังเล่นอยู่ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. รูปปุ่มหยุดสีแดง (Stop)</button>
                    <button onclick="checkAnswer(this, false, 'รูปแว่นขยายเอาไว้สำหรับซูมเข้าซูมออกพื้นที่ทำงานครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. รูปแว่นขยาย (Zoom)</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้องครับ! การกดปุ่มธงสีเขียวเปรียบเสมือนการกดปุ่ม Play เพื่อให้สคริปต์ที่ขึ้นต้นด้วยคำว่า เมื่อคลิกธงเขียว เริ่มทำงานพร้อมกันครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. รูปธงสีเขียว (Green Flag)</button>
                    <button onclick="checkAnswer(this, false, 'รูปโลกเอาไว้สำหรับเปลี่ยนภาษาของโปรแกรมครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. รูปโลก (Language)</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;">ข้อที่ 3: บล็อกคำสั่งใด ที่ทำหน้าที่เปลี่ยนภาพของน้องแมวสลับไปมา เพื่อให้ดูเหมือนว่าน้องแมวกำลังขยับแขนขยับขาได้จริงๆ?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'เคลื่อนที่ 10 ก้าว จะทำให้แมวเลื่อนตำแหน่งไปข้างหน้า แต่ขาจะไม่ขยับครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. เคลื่อนที่ 10 ก้าว</button>
                    <button onclick="checkAnswer(this, false, 'รอ 1 วินาที เป็นการหน่วงเวลาไม่ให้โปรแกรมทำงานเร็วเกินไปครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. รอ 1 วินาที</button>
                    <button onclick="checkAnswer(this, true, 'ยอดเยี่ยมครับ! บล็อก " ชุดถัดไป="" (next="" costume)"="" จะทำการเปลี่ยนภาพตัวละครให้เป็นภาพถัดไปที่มีท่าทางต่างกัน="" เมื่อสลับไปมาอย่างรวดเร็วก็จะเกิดเป็นภาพเคลื่อนไหว="" (animation)="" ครับ')"="" 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, 'ซ่อน (Hide) จะทำให้ตัวละครหายไปจากเวทีเลยครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. ซ่อน (Hide)</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 = '#FF9800';
        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>