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

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, #1E88E5 0%, #1976D2 50%, #1565C0 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: สมองคอมพิวเตอร์ & ผังงาน</h2>
        <p style="margin: 10px 0 0 0; font-size: 22px; color: #BBDEFB; font-weight: bold;">โปรแกรมเมอร์จิ๋ว เริ่มต้นออกแบบคำสั่ง!</p>
    </div>

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

<h3 style="color: #1565C0; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 30px;">⚙️ 1. ทบทวนหลักการทำงาน 3 ขั้นตอน</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 #4CAF50; box-shadow: 0 2px 4px rgba(0,0,0,0.05); display: flex; align-items: center;">
                <div style="font-size: 35px; margin-right: 15px;">⌨️</div>
                <div>
                    <strong style="color: #2E7D32; font-size: 16px;">1. หน่วยรับเข้า (Input Unit)</strong>
                    <p style="margin-top: 5px; margin-bottom: 0; font-size: 15px;">รับข้อมูลหรือคำสั่งจากเราเข้าไป เช่น <strong>คีย์บอร์ด (พิมพ์ข้อความ), เมาส์ (คลิก)</strong> เปรียบเหมือน <em>"ตาและหู"</em> ของมนุษย์</p>
                </div>
            </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); display: flex; align-items: center;">
                <div style="font-size: 35px; margin-right: 15px;">🧠</div>
                <div>
                    <strong style="color: #E65100; font-size: 16px;">2. หน่วยประมวลผลกลาง (CPU)</strong>
                    <p style="margin-top: 5px; margin-bottom: 0; font-size: 15px;">ทำหน้าที่คิด คำนวณ และตัดสินใจ (Process) เปรียบเหมือน <em>"สมอง"</em> ของคอมพิวเตอร์</p>
                </div>
            </div>

<div style="background: #FAFAFA; padding: 15px; border-radius: 12px; border-left: 5px solid #9C27B0; box-shadow: 0 2px 4px rgba(0,0,0,0.05); display: flex; align-items: center;">
                <div style="font-size: 35px; margin-right: 15px;">🖥️</div>
                <div>
                    <strong style="color: #7B1FA2; font-size: 16px;">3. หน่วยส่งออก (Output Unit)</strong>
                    <p style="margin-top: 5px; margin-bottom: 0; font-size: 15px;">ส่งผลลัพธ์ที่คิดเสร็จแล้วออกมาให้เราเห็นหรือได้ยิน เช่น <strong>จอภาพ, ลำโพง</strong> เปรียบเหมือน <em>"ปากและการพูด"</em></p>
                </div>
            </div>
        </div>

<h3 style="color: #1565C0; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 40px;">🔀 2. การออกแบบผังงาน "แบบมีเงื่อนไข"</h3>
        <p>ที่ผ่านมาเราเคยเขียนผังงานแบบเส้นตรงไปแล้ว แต่วันนี้เราจะเพิ่มความฉลาดให้โปรแกรม โดยการใช้สัญลักษณ์ <strong>"ข้าวหลามตัด (Decision)"</strong> เพื่อให้คอมพิวเตอร์ <strong>ตัดสินใจเลือกทางเดินได้เอง!</strong></p>

<div style="background: #E3F2FD; padding: 20px; border-radius: 12px; margin-top: 15px; border: 1px solid #90CAF9;">
            <strong style="color: #0D47A1; font-size: 18px;">📝 ตัวอย่าง: โปรแกรมตรวจคะแนนสอบ</strong>
            <p style="margin-top: 10px; font-size: 15px; color: #333;">สมมติว่าวิชานี้มีคะแนนเต็ม 100 คะแนน กติกาคือ: <em>"ถ้าได้คะแนนตั้งแต่ 50 ขึ้นไป ถือว่า สอบผ่าน แต่ถ้าได้น้อยกว่า 50 ถือว่า สอบไม่ผ่าน"</em> เราจะเขียนเป็นอัลกอริทึมได้ดังนี้ครับ:</p>
            
            <ol style="margin-top: 10px; font-size: 15px; line-height: 1.8; color: #0D47A1; font-weight: bold;">
                <li><span style="color: #333; font-weight: normal;">(เริ่มต้นโปรแกรม)</span></li>
                <li><span style="color: #333; font-weight: normal;">รับค่าคะแนนของนักเรียนเข้ามาเก็บไว้ (เช่น รับค่าตัวเลข 65)</span></li>
                <li><span style="color: #E65100; font-weight: bold;">ตรวจสอบเงื่อนไข: "คะแนน มากกว่าหรือเท่ากับ 50 (>= 50) ใช่หรือไม่?"</span>
                    <ul style="margin-top: 5px; color: #333; font-weight: normal;">
                        <li>✅ ถ้า <strong>จริง</strong> ➡️ ให้แสดงผลว่า <strong>"สอบผ่าน"</strong></li>
                        <li>❌ ถ้า <strong>เท็จ</strong> ➡️ ให้แสดงผลว่า <strong>"สอบไม่ผ่าน"</strong></li>
                    </ul>
                </li>
                <li><span style="color: #333; font-weight: normal;">(จบการทำงาน)</span></li>
            </ol>
        </div>

<div style="background: #FFF8E1; padding: 15px; border-radius: 8px; margin-top: 25px; font-size: 15px; color: #E65100; text-align: center; border: 1px dashed #FFC107;">
            <em>💡 <strong>ข้อสังเกต:</strong> จากผังงานนี้ ถ้ามีเพื่อนได้คะแนน <strong>49 คะแนน</strong> เมื่อมาเจอด่านเงื่อนไข (49 >= 50?) โปรแกรมจะตอบว่า "เท็จ" และวิ่งไปออกผลลัพธ์ว่า "สอบไม่ผ่าน" ทันทีครับ!</em>
        </div>

</div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background: linear-gradient(135deg, #1976D2 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;">ทดสอบความเข้าใจเรื่องเงื่อนไข!</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: อุปกรณ์คอมพิวเตอร์ชิ้นใด ทำหน้าที่เปรียบเสมือน "สมอง" เพื่อประมวลผลข้อมูล?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'คีย์บอร์ดคือหน่วยรับเข้า (Input) ครับ เอาไว้รับคำสั่งพิมพ์')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. คีย์บอร์ด (Keyboard)</button>
                    <button onclick="checkAnswer(this, false, 'จอภาพคือหน่วยส่งออก (Output) ครับ เอาไว้แสดงผลให้เราดู')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. จอภาพ (Monitor)</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้องครับ! CPU (Central Processing Unit) ทำหน้าที่คิด คำนวณ และตัดสินใจ เปรียบเสมือนสมองของคอมพิวเตอร์เลยครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. ซีพียู (CPU)</button>
                    <button onclick="checkAnswer(this, false, 'เมาส์คือหน่วยรับเข้า (Input) ครับ เอาไว้คลิกสั่งงาน')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. เมาส์ (Mouse)</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: หากต้องการออกแบบโปรแกรมที่มี "การตัดสินใจ" เลือกทางใดทางหนึ่ง ควรใช้สัญลักษณ์ผังงานรูปใด?</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;">ก. รูปแคปซูล (Terminator)</button>
                    <button onclick="checkAnswer(this, false, 'สี่เหลี่ยมผืนผ้า ใช้สำหรับขั้นตอนการปฏิบัติงานทั่วไปที่ไม่มีเงื่อนไขครับ')" 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;">ค. รูปลูกศร (Arrow)</button>
                    <button onclick="checkAnswer(this, true, 'เยี่ยมมากครับ! รูปข้าวหลามตัด (Decision) ใช้เมื่อมีเงื่อนไขให้ตัดสินใจ ซึ่งจะมีลูกศรแยกออกไป 2 ทางเสมอ (เช่น จริง กับ เท็จ) ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. รูปข้าวหลามตัด (Decision)</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: โปรแกรมกำหนดเงื่อนไขว่า "ถ้าคะแนน >= 50 คือสอบผ่าน" ถ้านักเรียนคนหนึ่งสอบได้คะแนน 50 คะแนนพอดี ผลลัพธ์จะเป็นอย่างไร?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, true, 'สุดยอดครับ! เครื่องหมาย >= หมายถึง มากกว่า หรือ เท่ากับ ดังนั้นถ้าได้ 50 คะแนนพอดี ก็ถือว่าเป็น จริง จึงได้ผลลัพธ์ สอบผ่าน ครับ!')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. คอมพิวเตอร์จะประมวลผลเป็น "จริง" และแสดงผลว่า สอบผ่าน</button>
                    <button onclick="checkAnswer(this, false, 'ไม่ใช่นะครับ เพราะเครื่องหมายมีคำว่า " เท่ากับ"="" ด้วย="" ดังนั้น="" 50="" จึงสอบผ่านครับ')"="" 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>
    </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 = '#0D47A1';
        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>
<div style="background-color: #f8f9fa; border: 1px solid #e9ecef; border-left: 5px solid #0d6efd; padding: 20px; margin-top: 50px; margin-bottom: 20px; border-radius: 8px; font-family: 'Sarabun', sans-serif; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
    <div style="display: flex; align-items: center; margin-bottom: 10px;">
        <span style="font-size: 1.5em; margin-right: 10px;">💡</span>
        <strong style="color: #0d6efd; font-size: 1.2em;">พบข้อผิดพลาดหรือมีข้อเสนอแนะ?</strong>
    </div>
    <p style="color: #495057; font-size: 1em; margin-bottom: 15px; line-height: 1.6;">
        หากนักเรียนหรือคุณครูพบจุดที่ควรแก้ไขในบทเรียน/แบบทดสอบนี้ หรือมีข้อเสนอแนะเพิ่มเติม สามารถแจ้งครูพิสิฐเพื่อนำไปปรับปรุงเนื้อหาให้สมบูรณ์ยิ่งขึ้นได้เลยครับ <br>
        <span style="font-size: 0.9em; color: #6c757d;">(ขอบคุณที่ร่วมเป็นส่วนหนึ่งในการพัฒนาการเรียนรู้ไปด้วยกันครับ)</span>
    </p>
    <a href="mailto:tpisit@wsst.ac.th?subject=แจ้งข้อเสนอแนะ/ข้อผิดพลาด บทเรียน SmartyQuizKids" style="display: inline-block; background-color: #0d6efd; color: #ffffff; padding: 10px 20px; text-decoration: none; border-radius: 5px; font-size: 1em; font-weight: bold;">
        ✉️ ส่งอีเมลแจ้งครูพิสิฐ
    </a>
</div>