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

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, #1A1A1D 0%, #4E4E50 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px; border-bottom: 5px solid #00E676;">
        <h2 style="margin: 0; font-size: 30px; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.5); color: #00E676;">🆙 หน่วยที่ 4: อัปสกิลโค้ดดิ้ง</h2>
        <p style="margin: 10px 0 0 0; font-size: 18px; color: #E0E0E0;">ทะลวงขีดจำกัด! สั่งงานให้ฉลาดขึ้นด้วย Loop และ If-Else</p>
    </div>

<div style="margin-bottom: 40px;">
        <h3 style="color: #1A1A1D; border-left: 5px solid #00E676; padding-left: 15px; font-size: 22px;">1. เหนื่อยไหมที่ต้องสั่งงานซ้ำๆ? ใช้ "ลูป (Loop)" สิ!</h3>
        <p>สมมติว่าเราอยากสั่งให้ตัวละครเดิน 100 ก้าว ถ้าเราต้องลากบล็อก "เดินหน้า" มาต่อกัน 100 อัน คงเมื่อยมือแย่เลยใช่ไหมครับ? โปรแกรมเมอร์จึงคิดค้น <b>"การทำซ้ำ (Loop)"</b> ขึ้นมา ซึ่งอยู่ในหมวดคำสั่ง <b>สีส้ม (Control)</b> ครับ</p>
        
        <ul style="padding-left: 20px; line-height: 1.8; color: #444;">
            <li>🔁 <b>ทำซ้ำ ... รอบ (Repeat):</b> สั่งให้บล็อกที่อยู่ข้างในทำงานวนไปตามจำนวนรอบที่เรากำหนด พอครบแล้วก็จะหยุด</li>
            <li>♾️ <b>วนซ้ำตลอด (Forever):</b> สั่งให้ทำงานวนไปเรื่อยๆ ไม่มีวันหยุด! (จนกว่าเราจะกดปุ่ม Stop 🛑)</li>
        </ul>
        
        <h3 style="color: #1A1A1D; border-left: 5px solid #00E676; padding-left: 15px; margin-top:30px; font-size: 22px;">2. ทางแยกของการตัดสินใจ "เงื่อนไข (If-Else)"</h3>
        <p>เวลาเราเล่นเกม ถ้าเราเดินชนศัตรู เลือดเราจะลด แต่ถ้าเราเก็บเหรียญ คะแนนเราจะเพิ่ม... นี่คือการทำงานของ <b>"เงื่อนไข (Condition)"</b> ครับ ใน Scratch เราจะใช้บล็อกที่มีรูปร่างเหมือนปากจระเข้ อ้าปากรอรับคำสั่ง:</p>
        
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-top: 15px;">
            <div style="background: #E8F5E9; padding: 15px; border-radius: 10px; border: 1px solid #A5D6A7;">
                <strong style="color: #2E7D32;">🤔 ถ้า...แล้ว (If...then)</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;">🔀 ถ้า...แล้ว...มิฉะนั้น (If...then...else)</strong>
                <p style="font-size: 14px; margin-top: 5px;">แบบมีทางเลือก 2 ทาง! เช่น ถ้าสอบผ่าน ให้แสดงคำว่า "ดีใจด้วย" มิฉะนั้น (สอบตก) ให้แสดงคำว่า "พยายามใหม่นะ"</p>
            </div>
        </div>

<h3 style="color: #1A1A1D; border-left: 5px solid #00E676; padding-left: 15px; margin-top:30px; font-size: 22px;">3. วิถีนักล่าบั๊ก (Debugging)</h3>
        <p>เขียนโค้ดแล้วตัวละครไม่ยอมเดิน? หรือเดินทะลุกำแพง? อาการเหล่านี้เราเรียกว่าเกิด <b>"บั๊ก (Bug)"</b> หรือข้อผิดพลาดในโปรแกรมครับ หน้าที่ของเราคือต้องทำ <b>Debugging</b> (การไล่หาและแก้ไขข้อผิดพลาด) โดยค่อยๆ อ่านโค้ดที่เราต่อไว้ทีละบรรทัดว่าเราเรียงลำดับผิด หรือใส่เงื่อนไขผิดตรงไหน การแก้บั๊กได้ด้วยตัวเองคือสกิลขั้นเทพของโปรแกรมเมอร์เลยนะ!</p>
    </div>

<div style="background: #E0F2F1; border: 2px dashed #00BFA5; padding: 25px; border-radius: 15px; margin-bottom: 40px;">
        <h3 style="color: #00796B; margin-top: 0; display: flex; align-items: center;">
            <span style="font-size: 30px; margin-right: 10px;">🕹️</span> ภารกิจ: แมวซิ่งวิ่งไม่หยุด!
        </h3>
        <p>เรามาใช้ "Loop" และ "เงื่อนไข" ทำให้เจ้าแมวเดินไปมาบนเวที พอชนขอบจอแล้วให้เด้งกลับกันเถอะ!</p>

<div style="background: white; padding: 20px; border-radius: 10px; margin-top: 15px; border: 1px solid #80CBC4;">
            <h4 style="margin-top: 0; color: #004D40;">🛠 สเต็ปการต่อบล็อก:</h4>
            <ol style="padding-left: 20px; margin-bottom: 0;">
                <li style="margin-bottom: 10px;">เริ่มจากบล็อกสีเหลือง <b>"เมื่อคลิก 🟢 (ธงเขียว)"</b></li>
                <li style="margin-bottom: 10px;">ลากบล็อกสีส้ม <b>"วนซ้ำตลอด (Forever)"</b> มาต่อด้านล่าง</li>
                <li style="margin-bottom: 10px;">เอาบล็อกสีฟ้า <b>"เคลื่อนที่ 10 ก้าว"</b> ไปใส่ไว้ <u>ข้างใน</u> ปากของบล็อกวนซ้ำตลอด</li>
                <li style="margin-bottom: 10px;">หาบล็อกสีฟ้าที่ชื่อว่า <b>"ถ้าชนขอบให้สะท้อนกลับ (If on edge, bounce)"</b> เอาไปต่อใต้บล็อกเดิน 10 ก้าว (ยังอยู่ข้างในวนซ้ำตลอดนะ)</li>
                <li style="margin-bottom: 0;">กด 🟢 ธงเขียวดูสิ! แมววิ่งชนขอบแล้วเด้งกลับไปมาไม่หยุดเลยใช่ไหม! (ถ้าแมวเดินกลับหัว ให้ไปตั้งค่า Direction ของแมวเป็น Left/Right นะครับ)</li>
            </ol>
        </div>
    </div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background-color: #1A1A1D; color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px; color: #00E676;">✍️ มินิควิซ ทบทวนความรู้ (หน่วยที่ 4)</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; opacity: 0.9;">วัดระดับความเข้าใจเรื่องเงื่อนไขและลูป!</p>
        </div>
        
        <div style="border: 2px solid #1A1A1D; 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: #1A1A1D;">ข้อที่ 1: บล็อกคำสั่งใดที่ช่วยให้เรา "ไม่ต้อง" ลากบล็อกเดิมๆ มาต่อซ้ำกันหลายๆ รอบ?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, true, 'เยี่ยมมาก! บล็อกทำซ้ำ (Repeat) ช่วยย่อโค้ดของเราให้สั้นลง และทำงานซ้ำได้ตามจำนวนรอบที่ต้องการเลย')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. ทำซ้ำ (Repeat)</button>
                    <button onclick="checkAnswer(this, false, 'บล็อกนี้เอาไว้ตรวจสอบเงื่อนไขครับ ไม่ได้เอาไว้ทำซ้ำนะ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. ถ้า...แล้ว (If...then)</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 วินาที (Wait 1 seconds)</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: #1A1A1D;">ข้อที่ 2: หากต้องการสร้างเกมทายรหัสผ่าน "ถ้ารหัสถูกให้เปิดประตู ถ้ารหัสผิดให้ส่งเสียงเตือน" ควรใช้บล็อกคำสั่งใด?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'ถ้ามีแค่ If...then โปรแกรมจะทำงานเฉพาะตอนที่รหัสถูกครับ แต่ถ้าผิดมันจะไม่เตือนอะไรเลย')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. ถ้า...แล้ว (If...then)</button>
                    <button onclick="checkAnswer(this, false, 'บล็อกนี้เอาไว้สั่งให้คำสั่งข้างในทำงานวนไปเรื่อยๆ ไม่มีวันจบครับ ไม่ได้เอาไว้เช็คเงื่อนไขนะ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. วนซ้ำตลอด (Forever)</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้องครับ! หากมีทางเลือก 2 ทาง (ถูก/ผิด) เราต้องใช้ If...then...else เพื่อกำหนดว่าจะให้ทำอะไรในแต่ละกรณีครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. ถ้า...แล้ว...มิฉะนั้น (If...then...else)</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: #1A1A1D;">ข้อที่ 3: คำว่า "Debugging (ดีบักกิ้ง)" ในการเขียนโปรแกรมหมายถึงอะไร?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'การใส่ไวรัสเรียกว่า Hacking ครับ เป็นสิ่งที่ไม่ดีนะเอ้อ!')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. การนำไวรัสคอมพิวเตอร์ (แมลง) ไปใส่ในเครื่องของเพื่อน</button>
                    <button onclick="checkAnswer(this, true, 'เก่งมาก! Bug แปลว่าแมลง (ข้อผิดพลาด) Debugging จึงแปลว่าการกำจัดแมลง หรือการหาและแก้ไขข้อผิดพลาดในโค้ดนั่นเองครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. การค้นหาข้อผิดพลาดของโปรแกรมและทำการแก้ไขให้ถูกต้อง</button>
                    <button onclick="checkAnswer(this, false, 'การเซฟงานลงแฟลชไดรฟ์ เราเรียกว่าการบันทึกข้อมูล (Save) ครับ')" 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 = '#E8F5E9';
        btn.style.borderColor = '#4CAF50';
        btn.style.color = '#2E7D32';
        btn.style.opacity = '1';
        feedback.style.background = '#E8F5E9';
        feedback.style.color = '#2E7D32';
        feedback.innerHTML = "✅ ถูกต้องครับ! " + msg;
    } else {
        btn.style.background = '#FFEBEE';
        btn.style.borderColor = '#F44336';
        btn.style.color = '#C62828';
        btn.style.opacity = '1';
        feedback.style.background = '#FFEBEE';
        feedback.style.color = '#C62828';
        feedback.innerHTML = "❌ ยังไม่ใช่นะครับ: " + msg;
    }
}
</script>