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

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, #1565C0 0%, #1976D2 50%, #2196F3 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px; border-bottom: 5px solid #0D47A1;">
        <h2 style="margin: 0; font-size: 26px; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.5); color: #FFF;">💻 หน่วยที่ 2 EP.1: การทำงานของคอมพิวเตอร์และการ Coding</h2>
        <p style="margin: 10px 0 0 0; font-size: 22px; color: #E3F2FD; font-weight: bold;">มาสั่งงานหุ่นยนต์กันเถอะ!</p>
    </div>

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

<h3 style="color: #1565C0; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 30px;">🤖 1. คอมพิวเตอร์ทำงานอย่างไร?</h3>
        <p>หลักการทำงานพื้นฐานของคอมพิวเตอร์มีแค่ 3 ขั้นตอนง่ายๆ ครับ:</p>
        
        <div style="display: flex; justify-content: center; gap: 15px; margin-top: 15px; text-align: center; flex-wrap: wrap;">
            <div style="background: #E3F2FD; border: 1px solid #90CAF9; padding: 15px; border-radius: 8px; flex: 1; min-width: 150px;">
                <span style="font-size: 30px;">📥</span><br>
                <strong style="color: #1565C0;">รับข้อมูล (Input)</strong>
            </div>
            <div style="display: flex; align-items: center; color: #1565C0; font-size: 24px;">➡️</div>
            <div style="background: #FFF3E0; border: 1px solid #FFCC80; padding: 15px; border-radius: 8px; flex: 1; min-width: 150px;">
                <span style="font-size: 30px;">⚙️</span><br>
                <strong style="color: #E65100;">ประมวลผล (Process)</strong>
            </div>
            <div style="display: flex; align-items: center; color: #1565C0; font-size: 24px;">➡️</div>
            <div style="background: #E8F5E9; border: 1px solid #A5D6A7; padding: 15px; border-radius: 8px; flex: 1; min-width: 150px;">
                <span style="font-size: 30px;">📤</span><br>
                <strong style="color: #2E7D32;">ส่งค่าออกไป (Output)</strong>
            </div>
        </div>

<p style="margin-top: 20px;">การที่คอมพิวเตอร์จะ <strong>"ประมวลผล"</strong> ได้นั้น มันต้องทำตาม <strong>"โปรแกรม (Program)"</strong> หรือลำดับคำสั่งที่เราเขียนขึ้นมาครับ</p>

<h3 style="color: #1565C0; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 35px;">⌨️ 2. การเขียนโค้ด (Coding) คืออะไร?</h3>
        <p>สมมติว่าเรามีหุ่นยนต์ตัวหนึ่งรู้จักคำสั่ง 4 คำสั่ง คือ <em>เดินหน้า, ถอยหลัง, นั่งลง, และยืนขึ้น</em> หากเราต้องการให้หุ่นยนต์ทำงาน เราก็ต้องเอาคำสั่งเหล่านี้มา <strong>"เรียงต่อกัน"</strong></p>
        
        <div style="background: #FAFAFA; padding: 20px; border-radius: 12px; border-left: 5px solid #2196F3; margin-top: 15px;">
            <p style="margin-top: 0;">การสร้างหุ่นยนต์ขึ้นมา แล้วนำคำสั่งมาเปลี่ยนเป็น "รหัส (Code)" ที่อุปกรณ์อิเล็กทรอนิกส์เข้าใจ นำไปบันทึกไว้ในหน่วยความจำ เพื่อให้หุ่นยนต์ทำงานตามที่เราต้องการ เราเรียกกระบวนการนี้ว่า <strong>"การเขียนโค้ด หรือ โค้ดดิ้ง (Coding)"</strong> ครับ</p>
        </div>

<h3 style="color: #1565C0; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 35px;">🍇 3. ภารกิจพาแรคคูนไปเก็บองุ่น!</h3>
        <p>มาลองดูตัวอย่างการเขียนโปรแกรมสั่งงานแบบง่ายๆ กันครับ สมมติว่าเรามีตารางช่องๆ และต้องการพาแรคคูนไปเก็บองุ่น 2 พวงที่อยู่ข้างหน้า</p>
        
        <div style="display: flex; flex-direction: column; gap: 15px; margin-top: 15px;">
            
            <div style="background: #FFF8E1; padding: 15px; border-radius: 8px; border: 1px solid #FFE082;">
                <strong style="color: #F57F17; font-size: 16px;">วิธีที่ 1: การทำงานตามลำดับ (Sequential)</strong><br>
                <span style="font-size: 15px;">เราต้องเขียนคำสั่งทีละบรรทัดเรียงลงมา: <code>เดินหน้า ➡️ เดินหน้า ➡️ เก็บองุ่น ➡️ เดินหน้า ➡️ เดินหน้า ➡️ เก็บองุ่น</code> (ใช้คำสั่งทั้งหมด 6 บรรทัด)</span>
            </div>
            
            <div style="background: #E8F5E9; padding: 15px; border-radius: 8px; border: 1px solid #A5D6A7;">
                <strong style="color: #2E7D32; font-size: 16px;">วิธีที่ 2: การทำงานแบบวนซ้ำ (Loop) ⭐️ วิธีของคนเก่ง!</strong><br>
                <span style="font-size: 15px;">ถ้าสังเกตดีๆ จะเห็นว่ามีรูปแบบการทำซ้ำคือ (เดินหน้า 2 ครั้ง แล้วเก็บองุ่น) จำนวน 2 รอบ เราจึงเขียนโปรแกรมใหม่ให้สั้นลงได้ว่า:<br>
                <code>ทำซ้ำ 2 ครั้ง [ เดินหน้า ➡️ เดินหน้า ➡️ เก็บองุ่น ]</code></span>
            </div>
            
        </div>

<div style="background: #FFF3E0; padding: 15px; border-radius: 8px; margin-top: 20px; font-size: 15px; color: #E65100; text-align: center; border: 1px dashed #FF9800;">
            <em>💡 <strong>ข้อคิด:</strong> การทำงานแบบวนซ้ำ (Loop) จะทำให้โปรแกรมของเรา <strong>"สั้นลง"</strong> ใช้เวลาน้อยลง และเป็นมืออาชีพมากขึ้นครับ!</em>
        </div>

</div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%); color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px; color: #FFF;">🧩 มินิควิซ ทบทวนความรู้ EP.1</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; color: #BBDEFB;">ทดสอบความเข้าใจเรื่อง Coding และ Loop ครับ!</p>
        </div>
        
        <div style="border: 2px solid #0D47A1; 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: #1565C0;">ข้อที่ 1: "การเขียนโค้ด หรือ โค้ดดิ้ง (Coding)" มีความหมายตรงกับข้อใด?</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, true, 'ถูกต้องครับ! โค้ดดิ้งคือการเปลี่ยนคำสั่งเป็นรหัสที่เครื่องจักรเข้าใจ เพื่อสั่งให้มันทำงานตามที่เราออกแบบไว้ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. การเปลี่ยนคำสั่งให้เป็นรหัสที่หุ่นยนต์หรืออุปกรณ์อิเล็กทรอนิกส์เข้าใจ</button>
                    <button onclick="checkAnswer(this, false, 'การเข้ารหัสเพื่อซ่อนข้อความเรียกว่า Cryptography ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. การเขียนข้อความลับส่งให้เพื่อนโดยไม่ให้ครูรู้</button>
                    <button onclick="checkAnswer(this, false, 'การวาดรูปโครงสร้างเป็นผังงาน (Flowchart) เป็นขั้นตอนก่อนเขียนโค้ดครับ')" 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: #1565C0;">ข้อที่ 2: ข้อใดคือข้อดีที่สำคัญที่สุดของการเขียนโปรแกรมแบบ "ทำงานวนซ้ำ (Loop)"?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, true, 'เยี่ยมมากครับ! การใช้คำสั่งทำซ้ำ (Loop) จะช่วยลดจำนวนบรรทัดของคำสั่ง ทำให้โปรแกรมสั้นลง อ่านง่าย และประหยัดเวลาครับ')" 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>
                    <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, 'การทำงานวนซ้ำเป็นการทำงานอัตโนมัติ ไม่ได้รอให้ผู้ใช้กดปุ่มเองทุกรอบครับ')" 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: #1565C0;">ข้อที่ 3: คอมพิวเตอร์จะทำกระบวนการใด หลังจากได้รับข้อมูล (Input) เข้ามาแล้ว?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'การแสดงผล (Output) คือขั้นตอนสุดท้ายครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. ส่งค่าออกไป (Output) ทันที</button>
                    <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, true, 'ถูกต้องครับ! ขั้นตอนคือ รับข้อมูล (Input) ➡️ ประมวลผล (Process) ➡️ ส่งค่าออกไป (Output)')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. ประมวลผล (Process) ตามคำสั่งหรือโปรแกรม</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 = '#E3F2FD';
        btn.style.borderColor = '#1976D2';
        btn.style.color = '#0D47A1';
        btn.style.opacity = '1';
        feedback.style.background = '#E3F2FD';
        feedback.style.color = '#1565C0';
        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>