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

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, #1976D2 0%, #00BCD4 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.3); color: #FFF;">🔀 หน่วยที่ 2 EP.4 ทางแยกตัดสินใจ</h2>
        <p style="margin: 10px 0 0 0; font-size: 22px; color: #E0F7FA; font-weight: bold;">โครงสร้างแบบทางเลือก (If, If-Else, If-Elif-Else)</p>
    </div>

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

<h3 style="color: #1565C0; border-left: 5px solid #00BCD4; padding-left: 15px; font-size: 22px; margin-top: 30px;">⚖️ 1. เครื่องมือสำหรับสร้าง "เงื่อนไข"</h3>
        <p>เราจะใช้ <strong>ตัวดำเนินการเปรียบเทียบ (Relational Operators)</strong> เพื่อสร้างเงื่อนไขให้คอมพิวเตอร์ตรวจสอบ ซึ่งผลลัพธ์ที่ได้จะมีแค่ 2 อย่างคือ <strong>จริง (True)</strong> หรือ <strong>เท็จ (False)</strong> เท่านั้นครับ:</p>
        
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; margin-top: 15px; font-size: 16px;">
            <div style="background: #E3F2FD; padding: 10px 15px; border-radius: 6px;"><code>==</code> หมายถึง <strong>เท่ากับ</strong> (สังเกตว่ามี = สองตัวนะครับ!)</div>
            <div style="background: #E3F2FD; padding: 10px 15px; border-radius: 6px;"><code>!=</code> หมายถึง <strong>ไม่เท่ากับ</strong></div>
            <div style="background: #E3F2FD; padding: 10px 15px; border-radius: 6px;"><code>></code> หมายถึง <strong>มากกว่า</strong></div>
            <div style="background: #E3F2FD; padding: 10px 15px; border-radius: 6px;"><code><</code> หมายถึง <strong>น้อยกว่า</strong></div>
            <div style="background: #E3F2FD; padding: 10px 15px; border-radius: 6px;"><code>>=</code> หมายถึง <strong>มากกว่าหรือเท่ากับ</strong></div>
            <div style="background: #E3F2FD; padding: 10px 15px; border-radius: 6px;"><code><=</code> หมายถึง <strong>น้อยกว่าหรือเท่ากับ</strong></div>
        </div>

<h3 style="color: #1565C0; border-left: 5px solid #00BCD4; padding-left: 15px; font-size: 22px; margin-top: 35px;">🚦 2. โครงสร้างคำสั่งตัดสินใจ 3 รูปแบบ</h3>
        <p>เมื่อเราสร้างเงื่อนไขเป็นแล้ว เราก็จะเอามาใส่ในคำสั่ง <code>if</code> (แปลว่า "ถ้า") ซึ่งมีให้เลือกใช้ 3 ระดับความซับซ้อนครับ:</p>

<div style="margin-top: 20px;">
            <h4 style="color: #0288D1; margin-bottom: 10px;">🟢 แบบที่ 1: ทางเลือกเดียว (If)</h4>
            <p>ถ้าเงื่อนไขเป็นจริง (True) ให้ทำตามคำสั่ง แต่ถ้าเป็นเท็จ (False) ก็แค่ข้ามไปเลย ไม่ทำอะไร</p>
            <div style="background: #263238; color: #82AAFF; padding: 15px; border-radius: 8px; font-family: 'Courier New', monospace; font-size: 16px;">
                <span style="color: #C792EA;">if</span> score >= <span style="color: #F78C6C;">50</span>:<br>
                    <span style="color: #C792EA;">print</span>(<span style="color: #C3E88D;">"คุณสอบผ่าน!"</span>)
            </div>
            <p style="font-size: 14px; color: #D32F2F; margin-top: 5px;"><strong>🚨 ข้อควรระวัง:</strong> หลังเงื่อนไขต้องมีเครื่องหมาย <code>:</code> (Colon) เสมอ และคำสั่งที่อยู่ข้างในต้อง <strong>"ย่อหน้า (Indentation)"</strong> เข้าไป 1 Tab (ประมาณ 4 เคาะ) เพื่อบอกว่าคำสั่งนี้เป็นของ if ตัวนี้นะ!</p>
        </div>

<div style="margin-top: 25px;">
            <h4 style="color: #0288D1; margin-bottom: 10px;">🟡 แบบที่ 2: สองทางเลือก (If-Else)</h4>
            <p>ถ้าเงื่อนไขเป็นจริงทำอย่างหนึ่ง แต่ถ้าไม่ใช่ (Else) ให้ไปทำอีกอย่างหนึ่งแทน</p>
            <div style="background: #263238; color: #82AAFF; padding: 15px; border-radius: 8px; font-family: 'Courier New', monospace; font-size: 16px;">
                <span style="color: #C792EA;">if</span> score >= <span style="color: #F78C6C;">50</span>:<br>
                    <span style="color: #C792EA;">print</span>(<span style="color: #C3E88D;">"คุณสอบผ่าน!"</span>)<br>
                <span style="color: #C792EA;">else</span>:<br>
                    <span style="color: #C792EA;">print</span>(<span style="color: #C3E88D;">"คุณสอบตก!"</span>)
            </div>
        </div>

<div style="margin-top: 25px;">
            <h4 style="color: #0288D1; margin-bottom: 10px;">🔴 แบบที่ 3: หลายทางเลือก (If-Elif-Else)</h4>
            <p>ใช้เมื่อมีเงื่อนไขให้ต้องตัดสินใจมากกว่า 2 อย่าง เช่น การตัดเกรด A, B, C, D, F (<code>elif</code> ย่อมาจาก else if)</p>
            <div style="background: #263238; color: #82AAFF; padding: 15px; border-radius: 8px; font-family: 'Courier New', monospace; font-size: 16px;">
                <span style="color: #C792EA;">if</span> score >= <span style="color: #F78C6C;">80</span>:<br>
                    <span style="color: #C792EA;">print</span>(<span style="color: #C3E88D;">"ได้เกรด A"</span>)<br>
                <span style="color: #C792EA;">elif</span> score >= <span style="color: #F78C6C;">70</span>:<br>
                    <span style="color: #C792EA;">print</span>(<span style="color: #C3E88D;">"ได้เกรด B"</span>)<br>
                <span style="color: #C792EA;">else</span>:<br>
                    <span style="color: #C792EA;">print</span>(<span style="color: #C3E88D;">"ต้องพยายามใหม่นะ"</span>)
            </div>
        </div>

</div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background-color: #1565C0; color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px; color: #81D4FA;">✍️ มินิควิซ ทบทวนความรู้ (EP.4)</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; color: #E3F2FD;">มาทดสอบการตัดสินใจของโปรแกรมเมอร์กัน!</p>
        </div>
        
        <div style="border: 2px solid #1565C0; 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, '== หมายถึง เท่ากับ ครับ (ไว้ใช้เปรียบเทียบความเท่ากัน)')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. ==</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้องครับ! != คือเครื่องหมาย ไม่เท่ากับ ในภาษา Python และอีกหลายภาษาครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. !=</button>
                    <button onclick="checkAnswer(this, false, '>< ไม่ใช่เครื่องหมายที่มีใน Python ครับ (เป็นแค่อีโมจิหน้าตาตกใจ ><)')" 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: 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: กฎข้อใดสำคัญที่สุดเมื่อต้องการเขียนคำสั่งที่อยู่ภายใต้เงื่อนไข if หรือ else ?</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, 'เยี่ยมมาก! การย่อหน้า (Indentation) เป็นเรื่องคอขาดบาดตายใน Python ครับ ถ้าไม่ย่อหน้าโปรแกรมจะพังทันที (Error)')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. ต้องเว้นวรรคย่อหน้า (Indentation) เข้าไปด้านใน</button>
                    <button onclick="checkAnswer(this, false, 'ใน Python เราไม่ใช้วงเล็บปีกกา {} คลุมโค้ดเหมือนภาษาอื่นครับ เราใช้การย่อหน้าแทน')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. ต้องใส่วงเล็บปีกกา { } ครอบคำสั่งเสมอ</button>
                    <button onclick="checkAnswer(this, false, 'คำสั่งไม่จำเป็นต้องจบด้วยคำว่า stop ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. ต้องจบคำสั่งด้วยคำว่า stop เสมอ</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: หากนักเรียนต้องการเขียนโปรแกรมตัดเกรด A, B, C, D และ F ควรใช้โครงสร้างเงื่อนไขแบบใดจึงจะเหมาะสมที่สุด?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'if เฉยๆ เป็นเงื่อนไขทางเลือกเดียวครับ ไม่พอตัดเกรดหลายๆ อัน')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. โครงสร้างแบบ if (ทางเลือกเดียว)</button>
                    <button onclick="checkAnswer(this, false, 'if-else ใช้สำหรับ 2 ทางเลือกครับ เช่น ผ่าน กับ ตก เท่านั้น')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. โครงสร้างแบบ if-else (สองทางเลือก)</button>
                    <button onclick="checkAnswer(this, true, 'ยอดเยี่ยม! เมื่อมีมากกว่า 2 เงื่อนไข (เช่นเกรด 5 ระดับ) ต้องใช้ if-elif-else เพื่อสร้างทางเลือกย่อยๆ ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. โครงสร้างแบบ if-elif-else (หลายทางเลือก)</button>
                    <button onclick="checkAnswer(this, false, 'ไม่มีโครงสร้าง while-else สำหรับการตัดสินใจเลือกทางเดินแบบนี้นะครับ (while คือลูป)')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. โครงสร้างแบบ while-else (ทางเลือกวนซ้ำ)</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 = '#E1F5FE';
        btn.style.borderColor = '#0288D1';
        btn.style.color = '#01579B';
        btn.style.opacity = '1';
        feedback.style.background = '#E1F5FE';
        feedback.style.color = '#0288D1';
        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>