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

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, #FF661A 0%, #FFB74D 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: 30px; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.2);">🐱 หน่วยที่ 2: ก้าวแรกสู่โลก Scratch</h2>
        <p style="margin: 10px 0 0 0; font-size: 18px; color: #FFF3E0;">ลากบล็อกมาต่อกัน สร้างสรรค์แอนิเมชันสุดเจ๋ง!</p>
    </div>

<div style="margin-bottom: 40px;">
        <h3 style="color: #E65100; border-left: 5px solid #FF661A; padding-left: 15px; font-size: 22px;">1. ทำความรู้จักโปรแกรม Scratch</h3>
        <p><b>Scratch (สแครตช์)</b> คือภาษาคอมพิวเตอร์ที่ถูกออกแบบมาให้เด็กๆ เรียนรู้ได้ง่ายสุดๆ! แทนที่เราจะต้องมานั่งพิมพ์โค้ดยาวๆ ภาษาอังกฤษ (ที่พิมพ์ผิดตัวเดียวก็พัง) Scratch จะเปลี่ยนโค้ดเหล่านั้นให้กลายเป็น <b>"บล็อกคำสั่ง (Blocks)"</b> รูปร่างเหมือนตัวต่อเลโก้ เราแค่ลากมันมาต่อกัน ตัวละครบนหน้าจอก็จะขยับตามที่เราสั่งเลยครับ! โดยเราสามารถใช้งานได้ 2 แบบ คือ:</p>
        <ul style="padding-left: 20px; line-height: 1.8; color: #444;">
            <li>🌐 <b>แบบ Online:</b> เข้าผ่านเว็บไซต์ <i>scratch.mit.edu</i> (ต้องใช้อินเทอร์เน็ต และบันทึกงานเก็บไว้บนระบบของเว็บได้เลย)</li>
            <li>💻 <b>แบบ Offline:</b> ดาวน์โหลดโปรแกรมมาติดตั้งในเครื่อง (ไม่ต้องใช้อินเทอร์เน็ต แต่ต้องเซฟงานลงแฟลชไดรฟ์หรือคอมพิวเตอร์ของเราเอง)</li>
        </ul>
        
        <h3 style="color: #E65100; border-left: 5px solid #FF661A; padding-left: 15px; margin-top:30px; font-size: 22px;">2. พื้นที่ทำงาน (Workspace) มีอะไรบ้าง?</h3>
        <p>เมื่อเปิดโปรแกรมขึ้นมา หน้าจอจะแบ่งออกเป็น 3 ส่วนหลักๆ ที่เราต้องใช้เป็นประจำครับ:</p>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-top: 15px;">
            <div style="background: #E3F2FD; padding: 15px; border-radius: 10px; border: 1px solid #90CAF9;">
                <strong style="color: #1565C0;">🎭 1. เวทีแสดง (Stage & Sprite)</strong>
                <p style="font-size: 14px; margin-top: 5px;">พื้นที่มุมขวาบน คือเวทีที่ตัวละคร (เรียกว่า Sprite) จะแสดงท่าทางตามที่เราสั่ง</p>
            </div>
            <div style="background: #F3E5F5; padding: 15px; border-radius: 10px; border: 1px solid #CE93D8;">
                <strong style="color: #6A1B9A;">🧩 2. คลังบล็อกคำสั่ง (Block Palette)</strong>
                <p style="font-size: 14px; margin-top: 5px;">พื้นที่ด้านซ้ายสุด เป็นที่เก็บชิ้นส่วนบล็อกคำสั่งทั้งหมด ถูกแยกเป็นหมวดหมู่ตามสีชัดเจน</p>
            </div>
            <div style="background: #FFF3E0; padding: 15px; border-radius: 10px; border: 1px solid #FFCC80;">
                <strong style="color: #E65100;">📝 3. พื้นที่เขียนโค้ด (Script Area)</strong>
                <p style="font-size: 14px; margin-top: 5px;">พื้นที่ว่างตรงกลางขนาดใหญ่ เอาไว้สำหรับลากบล็อกคำสั่งจากคลังมาต่อกันเป็นชุดคำสั่ง</p>
            </div>
        </div>

<h3 style="color: #E65100; border-left: 5px solid #FF661A; padding-left: 15px; margin-top:30px; font-size: 22px;">3. สัญลักษณ์ 3 สี ที่นักสืบโค้ดดิ้งต้องจำ!</h3>
        <p>บล็อกคำสั่งใน Scratch มีหลายสีมาก แต่สำหรับก้าวแรก ให้เราจำ 3 สีหลักนี้ให้ได้ก่อนครับ:</p>
        <ul style="list-style-type: none; padding: 0;">
            <li style="margin-bottom: 10px; display: flex; align-items: center;"><span style="display: inline-block; width: 20px; height: 20px; background-color: #4C97FF; border-radius: 50%; margin-right: 10px;"></span> <b>สีฟ้า (Motion)</b> = การเคลื่อนที่ เช่น เดินหน้า หมุนตัว ไปที่พิกัด X, Y</li>
            <li style="margin-bottom: 10px; display: flex; align-items: center;"><span style="display: inline-block; width: 20px; height: 20px; background-color: #9966FF; border-radius: 50%; margin-right: 10px;"></span> <b>สีม่วง (Looks)</b> = รูปลักษณ์ เช่น พูดคำว่าสวัสดี, เปลี่ยนชุด, เปลี่ยนฉากหลัง</li>
            <li style="margin-bottom: 10px; display: flex; align-items: center;"><span style="display: inline-block; width: 20px; height: 20px; background-color: #D65CD6; border-radius: 50%; margin-right: 10px;"></span> <b>สีชมพู (Sound)</b> = เสียง เช่น เล่นเสียงแมวร้อง (Meow), เล่นเสียงเพลงประกอบ</li>
        </ul>
    </div>

<div style="background: #FFF8E1; border: 2px dashed #FFCA28; padding: 25px; border-radius: 15px; margin-bottom: 40px;">
        <h3 style="color: #FF8F00; margin-top: 0; display: flex; align-items: center;">
            <span style="font-size: 30px; margin-right: 10px;">🚩</span> ภารกิจ: ปลุกแมวเหมียวให้ตื่น
        </h3>
        <p>มาเขียนสคริปต์แรก เพื่อสั่งให้เจ้าแมวส้ม (Sprite1) เดินไปข้างหน้า ร้องเมี้ยว และกล่าวทักทายกันเถอะ!</p>

<div style="background: white; padding: 20px; border-radius: 10px; margin-top: 15px; border: 1px solid #FFE082;">
            <h4 style="margin-top: 0; color: #333;">🛠 สเต็ปการทำงาน:</h4>
            <ol style="padding-left: 20px; margin-bottom: 0;">
                <li style="margin-bottom: 10px;">เข้าไปที่เว็บไซต์ <b>scratch.mit.edu</b> แล้วคลิกปุ่ม <b>"สร้าง (Create)"</b></li>
                <li style="margin-bottom: 10px;">ไปที่หมวดสีเหลือง (Events) ลากบล็อก <b>"เมื่อคลิก 🟢 (ธงเขียว)"</b> มาวางในพื้นที่ว่าง</li>
                <li style="margin-bottom: 10px;">ไปที่หมวดสีฟ้า (Motion) ลากบล็อก <b>"เคลื่อนที่ 10 ก้าว"</b> มาต่อด้านล่าง (เปลี่ยนเลข 10 เป็น 50)</li>
                <li style="margin-bottom: 10px;">ไปที่หมวดสีชมพู (Sound) ลากบล็อก <b>"เล่นเสียง Meow จนจบ"</b> มาต่อด้านล่าง</li>
                <li style="margin-bottom: 10px;">ไปที่หมวดสีม่วง (Looks) ลากบล็อก <b>"พูดว่า สวัสดี เป็นเวลา 2 วินาที"</b> มาต่อล่างสุด</li>
                <li style="margin-bottom: 0;">กดปุ่ม <b>ธงเขียว 🟢</b> บนเวที แล้วดูผลลัพธ์ที่เจ้าแมวทำได้เลย!</li>
            </ol>
        </div>
    </div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background-color: #FF661A; color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px;">✍️ มินิควิซ ทบทวนความรู้ (หน่วยที่ 2)</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; opacity: 0.9;">ลองทดสอบดูสิว่า จำสีของบล็อกคำสั่งได้ไหม?</p>
        </div>
        
        <div style="border: 2px solid #FF661A; 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, 'Scratch ทำงานบนหน้าจอคอมพิวเตอร์ครับ ไม่ใช่โปรแกรมวาดรูปแบบสมุดนะ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. เป็นโปรแกรมที่ใช้ปากกาวาดรูปบนหน้าจอโดยตรง</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้องครับ! จุดเด่นของ Scratch คือการนำบล็อกคำสั่ง (Block-based) มาต่อกันเหมือนเลโก้ ทำให้เข้าใจง่ายมาก')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. เป็นการเขียนโปรแกรมด้วยการลากบล็อกคำสั่งมาต่อกัน (เหมือนเลโก้)</button>
                    <button onclick="checkAnswer(this, false, 'การพิมพ์โค้ดยาวๆ เป็นภาษาอังกฤษจะเป็นของภาษาอื่นๆ เช่น Python หรือ C ครับ')" 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: #E65100;">ข้อที่ 2: หากนักเรียนต้องการสั่งให้ตัวละคร "เดินหน้า 10 ก้าว" ต้องเข้าไปหาที่หมวดหมู่สีอะไร?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, true, 'เก่งมากครับ! บล็อกสีฟ้า (Motion) มีหน้าที่ควบคุมการเคลื่อนที่ ตำแหน่ง และทิศทางของตัวละครครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. สีฟ้า (Motion - การเคลื่อนที่)</button>
                    <button onclick="checkAnswer(this, false, 'บล็อกสีม่วง เอาไว้ใช้เปลี่ยนรูปลักษณ์ หรือสั่งให้ตัวละครแสดงข้อความคำพูดครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. สีม่วง (Looks - รูปลักษณ์)</button>
                    <button onclick="checkAnswer(this, false, 'บล็อกสีชมพู เอาไว้สั่งให้ตัวละครเล่นเสียงต่างๆ ครับผม')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. สีชมพู (Sound - เสียง)</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: "เวที (Stage)" ในโปรแกรม Scratch มีไว้ทำอะไร?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'พื้นที่ตรงกลางที่ว่างๆ เรียกว่า พื้นที่เขียนโค้ด (Script Area) ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. เป็นพื้นที่สำหรับลากบล็อกคำสั่งมาต่อกัน</button>
                    <button onclick="checkAnswer(this, false, 'ที่เก็บรูปแบบตัวละครเราเรียกว่า คลังตัวละคร (Sprite Library) ครับ')" 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;">ค. เป็นพื้นที่แสดงผลลัพธ์การทำงานของตัวละคร (Sprite) บนหน้าจอ</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 = '#F44336';
        btn.style.color = '#D32F2F';
        btn.style.opacity = '1';
        feedback.style.background = '#FFEBEE';
        feedback.style.color = '#D32F2F';
        feedback.innerHTML = "❌ ยังไม่ใช่นะครับ: " + msg;
    }
}
</script>