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

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, #5E35B1 0%, #7E57C2 50%, #9575CD 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px; border-bottom: 5px solid #4527A0;">
        <h2 style="margin: 0; font-size: 26px; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.5); color: #FFF;">🐱 หน่วยที่ 4 EP.3: ท่องโลก Scratch</h2>
        <p style="margin: 10px 0 0 0; font-size: 22px; color: #EDE7F6; font-weight: bold;">เนรมิตฉากหลัง สั่งเสียงร้องเหมียว!</p>
    </div>

<div style="margin-bottom: 40px;">
        
        <p style="font-size: 18px;">หลังจากที่เราฝึกเขียนโปรแกรมกับ Code.org ไปแล้ว วันนี้เราจะมาอัปเลเวลด้วยโปรแกรม <strong>Scratch (สแครตช์)</strong> ครับ! นี่คือโปรแกรมที่เด็กๆ ทั่วโลกใช้สร้างเกมและการ์ตูนแอนิเมชันของตัวเอง นักเรียนสามารถเข้าใช้งานได้ฟรีผ่านเว็บไซต์ <span style="background: #EDE7F6; padding: 2px 6px; border-radius: 4px; font-family: monospace; color: #5E35B1;">https://scratch.mit.edu</span> เลยครับ</p>

<h3 style="color: #5E35B1; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 30px;">🖥️ 1. แผนที่หน้าต่างโปรแกรม Scratch</h3>
        <p>เมื่อเปิดโปรแกรมขึ้นมา เราจะเจอกับหน้าต่างที่มี 3 ส่วนหลักๆ ที่ต้องจำให้แม่นครับ:</p>
        
        <div style="display: flex; flex-direction: column; gap: 15px; margin-top: 15px;">
            <div style="background: #FAFAFA; padding: 15px; border-radius: 12px; border-left: 5px solid #2196F3; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                <strong style="color: #1565C0; font-size: 16px;">🧩 ส่วนที่ 1: แถบกลุ่มคำสั่ง (Code Blocks Palette) - ฝั่งซ้ายสุด</strong>
                <p style="margin-top: 5px; margin-bottom: 0; font-size: 15px;">เป็นเหมือนตู้เก็บเครื่องมือครับ บล็อกคำสั่งจะถูกแบ่งเป็นสีๆ เช่น สีน้ำเงิน(เคลื่อนไหว), สีม่วง(รูปลักษณ์), สีชมพูเข้ม(เสียง)</p>
            </div>
            
            <div style="background: #FAFAFA; padding: 15px; border-radius: 12px; border-left: 5px solid #FF9800; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                <strong style="color: #E65100; font-size: 16px;">📝 ส่วนที่ 2: พื้นที่ทำงาน (Script Area) - ตรงกลาง</strong>
                <p style="margin-top: 5px; margin-bottom: 0; font-size: 15px;">พื้นที่ว่างๆ กว้างๆ ที่เราต้องใช้ <strong>"เมาส์ลากบล็อกคำสั่งมาวางต่อกัน"</strong> เพื่อเขียนโปรแกรมสั่งงานตัวละครครับ</p>
            </div>

<div style="background: #FAFAFA; padding: 15px; border-radius: 12px; border-left: 5px solid #4CAF50; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                <strong style="color: #2E7D32; font-size: 16px;">🎭 ส่วนที่ 3: เวทีแสดงผล (Stage) - ฝั่งขวาบน</strong>
                <p style="margin-top: 5px; margin-bottom: 0; font-size: 15px;">เป็นหน้าจอทีวีให้เราดูผลลัพธ์ครับ จะมี <strong>ตัวละครแมวสีส้ม (Sprite)</strong> ยืนอยู่ และมีปุ่ม ธงสีเขียว (เริ่มเล่น) กับ ปุ่มสีแดง (หยุด)</p>
            </div>
        </div>

<h3 style="color: #5E35B1; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 35px;">🎵 2. สั่งเจ้าเหมียวให้ร้องเสียงดัง!</h3>
        <p>เรามาลองสั่งให้แมวร้อง "เหมียว" กันดีกว่าครับ ทำตามสเต็ปง่ายๆ นี้เลย:</p>
        <ul style="margin-top: 0; font-size: 15px; line-height: 1.8;">
            <li>1️⃣ คลิกที่กลุ่มคำสั่ง <strong>เสียง (Sound)</strong> สีชมพูเข้มด้านซ้าย</li>
            <li>2️⃣ ใช้เมาส์ลากบล็อกคำสั่ง <span style="background: #D81B60; color: white; padding: 2px 8px; border-radius: 15px;">เล่นเสียง Meow จนจบ</span> มาวางไว้ตรงกลาง (พื้นที่ทำงาน)</li>
            <li>3️⃣ ใช้เมาส์ <strong>คลิกที่ตัวบล็อกนั้น 1 ครั้ง</strong> เพื่อทดสอบคำสั่ง... <em>"เหมียวววว~"</em> เสียงมาแล้ว!</li>
        </ul>

<h3 style="color: #5E35B1; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 35px;">🖼️ 3. เนรมิตฉากหลัง (Backdrop) ให้สวยงาม</h3>
        <p>เวทีสีขาวมันดูน่าเบื่อไปหน่อย เรามาพาเจ้าแมวไปอยู่ในห้องนอนกันเถอะ!</p>
        
        <div style="background: #E3F2FD; padding: 15px; border-radius: 8px; margin-top: 15px; font-size: 15px; color: #1565C0; border-left: 5px solid #2196F3;">
            <strong style="font-size: 16px;">สเต็ปการเปลี่ยนฉาก:</strong><br>
            ให้นักเรียนมองไปที่ <strong>มุมขวาล่างสุด</strong> ของหน้าจอ จะเห็นไอคอนรูปภูเขา (Choose a Backdrop) ให้คลิกเข้าไปเลยครับ! จากนั้นคลิกหมวดหมู่ "ในบ้าน (Indoors)" แล้วเลือกภาพ <strong>"Bedroom 2"</strong> ปิ๊ง! ฉากหลังจะเปลี่ยนเป็นห้องนอนสุดน่ารักทันที!
        </div>

</div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background: linear-gradient(135deg, #7E57C2 0%, #4527A0 100%); color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px; color: #FFF;">🧩 มินิควิซ ทบทวนความรู้ EP.3</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; color: #EDE7F6;">ทดสอบวิชาการใช้โปรแกรม Scratch!</p>
        </div>
        
        <div style="border: 2px solid #4527A0; 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: #5E35B1;">ข้อที่ 1: ในโปรแกรม Scratch "พื้นที่ทำงาน (Script Area)" บริเวณตรงกลางหน้าจอ มีไว้เพื่อทำอะไร?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'เวทีแสดงผล (Stage) จะอยู่ทางฝั่งขวาครับ ไม่ใช่พื้นที่ตรงกลาง')" 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, 'ไม่ได้เอาไว้พิมพ์รหัสลับยาวๆ ครับ Scratch ใช้ระบบบล็อกคำสั่งลากวางนะ')" 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: 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: #5E35B1;">ข้อที่ 2: หากต้องการให้แมวเหมียวมีเสียงร้อง "เหมียว" นักเรียนต้องลากบล็อกคำสั่งจากกลุ่มคำสั่งสีอะไร?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'สีน้ำเงินคือกลุ่มคำสั่ง เคลื่อนไหว (Motion) ครับ เอาไว้สั่งให้เดิน')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. สีน้ำเงิน (กลุ่มเคลื่อนไหว)</button>
                    <button onclick="checkAnswer(this, false, 'สีเหลืองคือกลุ่มคำสั่ง เหตุการณ์ (Events) ครับ เช่น เมื่อคลิกธงเขียว')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. สีเหลือง (กลุ่มเหตุการณ์)</button>
                    <button onclick="checkAnswer(this, false, 'สีส้มคือกลุ่มคำสั่ง ควบคุม (Control) ครับ เช่น คำสั่งวนซ้ำ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. สีส้ม (กลุ่มควบคุม)</button>
                    <button onclick="checkAnswer(this, true, 'เยี่ยมมากครับ! กลุ่มคำสั่ง เสียง (Sound) จะเป็นสีชมพูเข้ม ซึ่งมีบล็อกสำหรับเล่นเสียงต่างๆ ซ่อนอยู่ครับ')" 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: #5E35B1;">ข้อที่ 3: ปุ่มไอคอนใดที่มุมขวาล่างของหน้าจอ ใช้สำหรับเปลี่ยน "ฉากหลัง (Backdrop)" ของเวที?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'ไอคอนรูปหน้าแมว เอาไว้เลือกเพิ่ม ตัวละคร (Sprite) ครับ ไม่ใช่ฉากหลังนะ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. ไอคอนรูปหน้าแมว (Choose a Sprite)</button>
                    <button onclick="checkAnswer(this, true, 'สุดยอดครับ! ไอคอนรูปภูเขาหรือรูปภาพ (Choose a Backdrop) ใช้สำหรับเลือกฉากหลังใหม่ๆ ให้กับเวทีของเราครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. ไอคอนรูปภูเขา/รูปภาพ (Choose a Backdrop)</button>
                    <button onclick="checkAnswer(this, false, 'ธงสีเขียวเอาไว้กด เริ่มเล่น (Go) โปรแกรมครับผม')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. ไอคอนธงสีเขียว (Go)</button>
                    <button onclick="checkAnswer(this, false, 'ไม่ใช่นะครับ ไอคอนลำโพงเอาไว้ปรับระดับเสียงของคอมพิวเตอร์ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. ไอคอนรูปลำโพง (Volume)</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 = '#EDE7F6';
        btn.style.borderColor = '#5E35B1';
        btn.style.color = '#4527A0';
        btn.style.opacity = '1';
        feedback.style.background = '#EDE7F6';
        feedback.style.color = '#4527A0';
        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>