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

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, #1976D2 0%, #1565C0 50%, #0D47A1 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px; border-bottom: 5px solid #002171;">
        <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: เจาะระบบ & นักล่าบั๊ก</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;">ยินดีต้อนรับสู่โลกของโปรแกรมเมอร์ครับ! ก่อนที่เราจะไปสั่งงานคอมพิวเตอร์ เราต้องรู้ก่อนว่า "สมอง" ของคอมพิวเตอร์ทำงานยังไง มันมีวงจรจำง่ายๆ แค่ 3 สเต็ปเท่านั้นครับ!</p>

<h3 style="color: #1565C0; border-left: 5px solid #00BFA5; padding-left: 15px; font-size: 22px; margin-top: 30px;">⚙️ 1. วงจรการทำงานของคอมพิวเตอร์ (IPO)</h3>
        <p>คอมพิวเตอร์ทุกเครื่องบนโลก ไม่ว่าจะเป็นมือถือหรือซูเปอร์คอมพิวเตอร์ ต่างก็ทำงานผ่าน 3 ส่วนหลักนี้ครับ:</p>
        
        <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 15px; text-align: center;">
            <div style="background: #E8F5E9; padding: 15px; border-radius: 12px; border: 2px solid #81C784;">
                <div style="font-size: 35px;">⌨️</div>
                <strong style="color: #2E7D32; font-size: 16px;">1. รับเข้า (Input)</strong>
                <p style="margin: 5px 0 0 0; font-size: 13px; color: #555;">รับข้อมูลจากเรา เช่น การพิมพ์คีย์บอร์ด หรือคลิกเมาส์</p>
            </div>
            <div style="background: #FFF3E0; padding: 15px; border-radius: 12px; border: 2px solid #FFB74D;">
                <div style="font-size: 35px;">🧠</div>
                <strong style="color: #E65100; font-size: 16px;">2. ประมวลผล (Process)</strong>
                <p style="margin: 5px 0 0 0; font-size: 13px; color: #555;">สมองคอมพิวเตอร์ (CPU) นำข้อมูลมาคิดคำนวณตามคำสั่ง</p>
            </div>
            <div style="background: #E3F2FD; padding: 15px; border-radius: 12px; border: 2px solid #64B5F6;">
                <div style="font-size: 35px;">🖥️</div>
                <strong style="color: #1565C0; font-size: 16px;">3. ส่งออก (Output)</strong>
                <p style="margin: 5px 0 0 0; font-size: 13px; color: #555;">แสดงผลลัพธ์ให้เราเห็น เช่น ภาพบนหน้าจอ หรือเสียงทางลำโพง</p>
            </div>
        </div>

<h3 style="color: #1565C0; border-left: 5px solid #00BFA5; padding-left: 15px; font-size: 22px; margin-top: 40px;">🧩 2. เขียนโปรแกรมด้วย "บล็อกคำสั่ง"</h3>
        <p>การเขียนโปรแกรม คือการเอาคำสั่งมาเรียงต่อกันให้คอมพิวเตอร์ทำตาม (เหมือนการสอนให้ทำตามขั้นตอน) เดี๋ยวนี้เราไม่ต้องพิมพ์โค้ดภาษาอังกฤษยาวๆ แล้วครับ เราสามารถใช้ <strong>"บล็อกคำสั่ง (Block-based Programming)"</strong> ลากมาวางต่อกันเหมือนตัวต่อเลโก้ได้เลย เช่น ในเว็บไซต์ <strong>Code.org</strong> หรือโปรแกรม <strong>Scratch</strong> ครับ</p>
        
        <div style="background: #FAFAFA; padding: 15px; border-radius: 12px; margin-top: 15px; border-left: 5px solid #00BFA5; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
            <strong style="color: #00897B; font-size: 16px;">ตัวอย่างการต่อบล็อกคำสั่ง:</strong>
            <p style="margin: 5px 0 0 0; font-size: 15px; color: #333;">[เมื่อคลิกเริ่ม] ➡️ [เดินไปข้างหน้า] ➡️ [เดินไปข้างหน้า] ➡️ [เลี้ยวขวา]</p>
        </div>

<h3 style="color: #1565C0; border-left: 5px solid #00BFA5; padding-left: 15px; font-size: 22px; margin-top: 40px;">🐞 3. สุดยอดวิชา "นักล่าบั๊ก (Debugging)"</h3>
        <p>บางครั้งเราลากบล็อกคำสั่งมาเรียงกันแล้ว แต่พอกดรัน (Run) ตัวละครกลับเดินชนกำแพงซะงั้น! ข้อผิดพลาดในโปรแกรมนี้เราเรียกว่า <strong>"บั๊ก (Bug)"</strong> ครับ</p>

<div style="background: #FFEBEE; padding: 20px; border-radius: 12px; border: 1px dashed #E53935; margin-top: 15px;">
            <p style="margin: 0; font-size: 16px; color: #B71C1C; font-weight: bold;">🛠️ วิธีการแก้บั๊ก (Debugging):</p>
            <ul style="margin-top: 10px; padding-left: 20px; color: #333; line-height: 1.8; font-size: 15px;">
                <li>อย่าเพิ่งลบทิ้งทั้งหมด! ให้เรา <strong>"ตรวจสอบทีละคำสั่ง"</strong> ตั้งแต่บรรทัดแรกไล่ลงมา</li>
                <li>เมื่อเจอคำสั่งที่ผิด (เช่น สั่งให้เลี้ยวซ้าย แต่จริงๆ ต้องเลี้ยวขวา) ให้ <strong>ดึงบล็อกเก่าออก แล้วเอาบล็อกใหม่ไปใส่แทน</strong></li>
                <li>จากนั้นกดทดสอบโปรแกรม (Run) ใหม่อีกครั้ง ถ้าตัวละครเดินถึงเป้าหมาย แสดงว่าเราปราบข้อผิดพลาดสำเร็จแล้วครับ!</li>
            </ul>
        </div>

</div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background: linear-gradient(135deg, #00BFA5 0%, #00897B 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: #E0F2F1;">ทดสอบความเป๊ะก่อนลงสนามจริง!</p>
        </div>
        
        <div style="border: 2px solid #00897B; 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: #00695C;">ข้อที่ 1: ขั้นตอนใดในวงจรการทำงานของคอมพิวเตอร์ ที่มีหน้าที่ "แสดงผลลัพธ์" ออกมาทางหน้าจอ?</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;">ก. หน่วยรับเข้า (Input Unit)</button>
                    <button onclick="checkAnswer(this, false, 'หน่วยประมวลผลคือ CPU ทำหน้าที่คิดคำนวณครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. หน่วยประมวลผล (Processing Unit)</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้องครับ! หน่วยส่งออก (Output Unit) เช่น หน้าจอ (แสดงภาพ) หรือลำโพง (แสดงเสียง) มีหน้าที่ส่งผลลัพธ์ออกมาให้เราเห็นครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. หน่วยส่งออก (Output Unit)</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: #00695C;">ข้อที่ 2: ข้อใดคือความหมายของคำว่า "Debugging" ในการเขียนโปรแกรม?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, true, 'ยอดเยี่ยมครับ! Debugging คือกระบวนการค้นหาข้อผิดพลาดที่ซ่อนอยู่ในโปรแกรม แล้วทำการแก้ไขให้โปรแกรมทำงานได้ถูกต้องครับ')" 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, 'การทำให้คอมพิวเตอร์ทำงานเร็วขึ้นขึ้นอยู่กับอุปกรณ์ (Hardware) เช่น CPU หรือ RAM ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. การสั่งให้คอมพิวเตอร์ทำงานเร็วขึ้น 2 เท่า</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: #00695C;">ข้อที่ 3: หากเราเขียนโปรแกรมสั่งให้หุ่นยนต์เดินไปหยิบของ แต่หุ่นยนต์เดินชนกำแพง วิธีแก้ไขที่ดีที่สุดคือข้อใด?</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, 'การทุบกำแพงทิ้งอาจจะทำในโปรแกรมได้ แต่ไม่ใช่การแก้โค้ดที่ถูกต้องครับ ^^')" 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 = '#E0F2F1';
        btn.style.borderColor = '#00BFA5';
        btn.style.color = '#00695C';
        btn.style.opacity = '1';
        feedback.style.background = '#E0F2F1';
        feedback.style.color = '#00695C';
        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>