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

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, #E91E63 0%, #9C27B0 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px; border-bottom: 5px solid #C2185B;">
        <h2 style="margin: 0; font-size: 26px; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.3); color: #FFF;">🗺️ หน่วยที่ 1 EP.6 พิมพ์เขียวผังงาน (Flowchart)</h2>
        <p style="margin: 10px 0 0 0; font-size: 22px; color: #F8BBD0; font-weight: bold;">วาดภาพความคิด ให้ระบบทำงานไม่สะดุด!</p>
    </div>

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

<h3 style="color: #AD1457; border-left: 5px solid #FF4081; padding-left: 15px; font-size: 22px; margin-top: 30px;">🗺️ 1. Flowchart คืออะไร?</h3>
        <p> <strong>ผังงาน (Flowchart)</strong> คือ การใช้ "สัญลักษณ์รูปเรขาคณิต" มาเขียนเรียงต่อกันเพื่ออธิบายขั้นตอนการทำงานของโปรแกรม (Algorithm) โดยมี "ลูกศร" เป็นตัวบอกทิศทางว่าต้องทำอะไรก่อน-หลังครับ</p>
        
        <div style="background: #FCE4EC; padding: 15px; border-radius: 10px; border-left: 5px solid #E91E63; font-size: 16px; color: #880E4F; margin-bottom: 25px;">
            <p style="margin: 0;"><strong>💡 ทำไมต้องใช้ Flowchart:</strong> ช่วยให้เห็นภาพรวมของโปรแกรมได้ชัดเจน หาจุดผิดพลาด (Bug) ได้ง่าย และสามารถอธิบายให้คนอื่นเข้าใจได้รวดเร็วโดยไม่ต้องอ่านโค้ดยาวๆ ครับ</p>
        </div>

<h3 style="color: #AD1457; border-left: 5px solid #FF4081; padding-left: 15px; font-size: 22px; margin-top: 35px;">🔶 2. สัญลักษณ์สากลที่ต้องจำให้แม่น!</h3>
        <p>สัญลักษณ์เหล่านี้เป็นมาตรฐานสากลเลยนะครับ โปรแกรมเมอร์ทั่วโลกใช้เหมือนกันหมด:</p>
        
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-top: 15px; text-align: center;">
            <div style="background: white; border: 1px solid #ddd; padding: 15px; border-radius: 8px;">
                <div style="width: 80px; height: 35px; background: #FFCDD2; border: 2px solid #E53935; border-radius: 20px; margin: 0 auto 10px auto;"></div>
                <strong style="color: #D32F2F;">Terminator (แคปซูล)</strong><br>
                <span style="font-size: 14px;">จุด <strong>เริ่มต้น (Start)</strong> และ <strong>สิ้นสุด (Stop)</strong> ของโปรแกรมเสมอ</span>
            </div>
            <div style="background: white; border: 1px solid #ddd; padding: 15px; border-radius: 8px;">
                <div style="width: 70px; height: 40px; background: #C8E6C9; border: 2px solid #43A047; margin: 0 auto 10px auto; transform: skew(-20deg);"></div>
                <strong style="color: #2E7D32;">Data (สี่เหลี่ยมด้านขนาน)</strong><br>
                <span style="font-size: 14px;">การ <strong>รับข้อมูล (Input)</strong> หรือ <strong>แสดงผล (Output)</strong> แบบทั่วไป</span>
            </div>
            <div style="background: white; border: 1px solid #ddd; padding: 15px; border-radius: 8px;">
                <div style="width: 80px; height: 40px; background: #BBDEFB; border: 2px solid #1E88E5; margin: 0 auto 10px auto;"></div>
                <strong style="color: #1565C0;">Process (สี่เหลี่ยมผืนผ้า)</strong><br>
                <span style="font-size: 14px;">การ <strong>ประมวลผล</strong> หรือ <strong>คำนวณคณิตศาสตร์</strong> (เช่น area = w * l)</span>
            </div>
            <div style="background: white; border: 1px solid #ddd; padding: 15px; border-radius: 8px;">
                <div style="width: 50px; height: 50px; background: #FFF9C4; border: 2px solid #FBC02D; margin: 0 auto 10px auto; transform: rotate(45deg);"></div>
                <strong style="color: #F57C00;">Decision (สี่เหลี่ยมขนมเปียกปูน)</strong><br>
                <span style="font-size: 14px;">การ <strong>ตัดสินใจ</strong> หรือมีเงื่อนไข (ต้องมีลูกศรแยก ใช่/ไม่ใช่)</span>
            </div>
            <div style="background: white; border: 1px solid #ddd; padding: 15px; border-radius: 8px; grid-column: 1 / -1;">
                <span style="font-size: 30px;">⬇️ ➡️ ⬅️ ⬆️</span><br>
                <strong style="color: #616161;">Flowline (ลูกศร)</strong><br>
                <span style="font-size: 14px;">เส้นแสดง <strong>ทิศทางการไหล</strong> ของข้อมูลและลำดับการทำงาน</span>
            </div>
        </div>
        
        <h3 style="color: #AD1457; border-left: 5px solid #FF4081; padding-left: 15px; font-size: 22px; margin-top: 30px;">🔄 3. กฎเหล็กของการวาด Flowchart</h3>
        <ul style="font-size: 16px; color: #444; line-height: 1.8;">
            <li>ต้องมีจุด <strong>เริ่มต้น</strong> และ <strong>สิ้นสุด</strong> เพียงจุดเดียวเสมอ</li>
            <li>ทิศทางของลูกศรนิยมเขียนจาก <strong>บนลงล่าง (Top to Bottom)</strong> หรือ <strong>ซ้ายไปขวา (Left to Right)</strong></li>
            <li>เส้นลูกศรห้ามตัดกันเด็ดขาด (ถ้าจำเป็นต้องใช้สัญลักษณ์ "จุดเชื่อมต่อ" แทน)</li>
            <li>ข้อความในสัญลักษณ์ต้องกระชับ เข้าใจง่าย</li>
        </ul>
    </div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background-color: #AD1457; color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px; color: #FF4081;">✍️ มินิควิซ ทบทวนความรู้ (EP.6)</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; color: #F8BBD0;">มาทดสอบความจำเรื่องสัญลักษณ์กันครับ!</p>
        </div>
        
        <div style="border: 2px solid #AD1457; 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: #AD1457;">ข้อที่ 1: หากนักเรียนต้องการเขียนว่า "เริ่มต้น (Start)" ในผังงาน ต้องใช้สัญลักษณ์รูปเรขาคณิตใด?</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;">ก. สี่เหลี่ยมผืนผ้า (Rectangle)</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้องครับ! สัญลักษณ์รูปแคปซูล (Terminator) ใช้สำหรับจุด เริ่มต้น และ สิ้นสุด เสมอครับ')" 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;">ค. สี่เหลี่ยมขนมเปียกปูน (Diamond)</button>
                    <button onclick="checkAnswer(this, false, 'สี่เหลี่ยมด้านขนานใช้สำหรับ การรับข้อมูลและแสดงผล (Input/Output) ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. สี่เหลี่ยมด้านขนาน (Parallelogram)</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: #AD1457;">ข้อที่ 2: ขั้นตอนการคำนวณ "พื้นที่ = กว้าง x ยาว" ควรใส่ไว้ในสัญลักษณ์ใด?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, true, 'เยี่ยมมาก! การคำนวณคณิตศาสตร์ ถือเป็นการประมวลผล (Process) ต้องใช้สี่เหลี่ยมผืนผ้าครับ')" 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;">ข. แคปซูล (Terminator)</button>
                    <button onclick="checkAnswer(this, false, 'สี่เหลี่ยมด้านขนาน เอาไว้ใช้ตอน รับค่า (Input) หรือ แสดงผล (Output) เท่านั้นครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. สี่เหลี่ยมด้านขนาน (Data)</button>
                    <button onclick="checkAnswer(this, false, 'สี่เหลี่ยมขนมเปียกปูนใช้ตอนที่ต้องเลือกทางเดิน เช่น คะแนน > 50 ใช่หรือไม่? ครับ')" 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: #AD1457;">ข้อที่ 3: ข้อใดคือความสำคัญของการใช้ลูกศร (Flowline) ในผังงาน?</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, 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, true, 'ถูกต้องที่สุด! ลูกศรคือตัวนำทางให้เรารู้ว่า หลังจากทำขั้นตอนนี้เสร็จแล้ว ต้องไปทำอะไรต่อเป็นลำดับถัดไปครับ')" 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 = '#FCE4EC';
        btn.style.borderColor = '#AD1457';
        btn.style.color = '#880E4F';
        btn.style.opacity = '1';
        feedback.style.background = '#FCE4EC';
        feedback.style.color = '#AD1457';
        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>