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

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, #0D47A1 0%, #1976D2 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px; border-bottom: 5px solid #FFC107;">
        <h2 style="margin: 0; font-size: 26px; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.3); color: #FFC107;">🧩 หน่วยที่ 2: การออกแบบอัลกอริทึมเพื่อแก้ปัญหา</h2>
        <p style="margin: 10px 0 0 0; font-size: 22px; color: #FFFFFF; font-weight: bold;">EP.2 ถอดรหัสความคิดผ่าน "ภาษาบรรยาย" และ "รหัสลำลอง"</p>
    </div>

<div style="margin-bottom: 40px;">
        <p style="font-size: 18px;">เมื่อเราเข้าใจแล้วว่าอัลกอริทึมคืออะไร ขั้นตอนต่อไปคือ <strong>"เราจะเขียนมันออกมาอย่างไรให้คนอื่นหรือคอมพิวเตอร์เข้าใจ?"</strong> วันนี้เราจะมาทำความรู้จัก 2 วิธีแรกกันครับ!</p>
        
        <h3 style="color: #0D47A1; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 30px;">📝 1. การเขียนอัลกอริทึมแบบบรรยาย (Narrative Description)</h3>
        <div style="background: #E3F2FD; padding: 20px; border-radius: 10px; border-left: 5px solid #1565C0; margin-bottom: 20px;">
            <p style="margin-top: 0;">เป็นการแสดงขั้นตอนการทำงานในลักษณะการบรรยายเป็นข้อความด้วยภาษาใดๆ ก็ได้ เช่น ภาษาไทย ภาษาอังกฤษ ขึ้นอยู่กับความถนัดของผู้เขียน ส่วนใหญ่จะเขียนบรรยายเป็นข้อๆ สั้นๆ และกระชับ</p>
            <p style="margin-bottom: 0;"><strong>ตัวอย่าง: ขั้นตอนการสมัครเข้าเรียน</strong><br>
            1) ซื้อใบสมัครโต๊ะหมายเลข 1<br>
            2) เขียนใบสมัคร<br>
            3) ติดภาพถ่าย เย็บเอกสารหลักฐานที่โต๊ะหมายเลข 2<br>
            4) กดเครื่องเพื่อรับบัตรคิว... เป็นต้น</p>
        </div>
        
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px; margin-bottom: 30px;">
            <div style="background: #E8F5E9; padding: 15px; border-radius: 10px; border: 1px solid #A5D6A7;">
                <strong style="color: #2E7D32; font-size: 16px;">✅ ข้อดี:</strong> <span style="font-size: 15px;">ผู้เขียนสามารถใช้ภาษาของตนเอง ทำให้ถ่ายทอดรายละเอียดความคิดได้ง่ายและครอบคลุม</span>
            </div>
            <div style="background: #FFEBEE; padding: 15px; border-radius: 10px; border: 1px solid #EF9A9A;">
                <strong style="color: #C62828; font-size: 16px;">❌ ข้อเสีย:</strong> <span style="font-size: 15px;">อาจมีการใช้ข้อความที่ทำให้ความหมายกว้างเกินไป ตีความยาก และเมื่อต้องแปลเป็นภาษาอื่นอาจเกิดการคลาดเคลื่อน สื่อสารไม่ตรงกัน</span>
            </div>
        </div>

<h3 style="color: #0D47A1; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 30px;">💻 2. การเขียนอัลกอริทึมแบบรหัสลำลอง (Pseudo Code)</h3>
        <div style="background: #FFF8E1; padding: 20px; border-radius: 10px; border-left: 5px solid #F57F17; margin-bottom: 20px;">
            <p style="margin-top: 0;"><strong>รหัสลำลอง (Pseudo Code)</strong> เป็นการเขียนขั้นตอนโดยใช้ข้อความสั้นๆ ที่เป็นวลี นิยมใช้ <strong>ภาษาอังกฤษ</strong> ในการสื่อสาร มีรูปแบบคล้ายภาษาคอมพิวเตอร์ แต่ไม่มีกฎไวยากรณ์ตายตัว เป็นการปูพื้นฐานก่อนนำไปเขียนโปรแกรมจริง</p>
            <h4 style="color: #F57F17; margin-bottom: 10px;">📌 กฎการเขียนรหัสลำลองเบื้องต้น:</h4>
            <ul style="margin-bottom: 0;">
                <li>นิยมใช้ภาษาอังกฤษ เพื่อความสากล</li>
                <li>ใช้คำสั่งเริ่มต้น <strong>(Start)</strong> และสิ้นสุด <strong>(End)</strong> เสมอ</li>
                <li>ใช้การย่อหน้าเพื่อแสดงลำดับขั้นตอนย่อยที่อยู่ภายใน</li>
                <li>ไม่กำหนดอุปกรณ์รับส่งข้อมูลตายตัว เพื่อให้ยืดหยุ่น (เช่น ใช้คำว่า Read แทนการบอกว่ารับค่าจากคีย์บอร์ด)</li>
                <li>ข้อมูลที่จัดเก็บและประมวลผล จะถูกกำหนดเป็น <strong>"ตัวแปร"</strong> (Variable)</li>
            </ul>
        </div>

<h3 style="color: #0D47A1; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 30px;">🔍 ตัวอย่าง: การคำนวณหาพื้นที่สามเหลี่ยม</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-bottom: 20px;">
            <div style="background: white; padding: 20px; border-radius: 10px; border-top: 4px solid #1976D2; box-shadow: 0 3px 10px rgba(0,0,0,0.08);">
                <h4 style="text-align: center; color: #1976D2; margin-top: 0; padding-bottom: 10px; border-bottom: 1px dashed #ccc;">ภาษาบรรยาย (Narrative)</h4>
                <p style="margin-bottom: 0; line-height: 1.8;">1. รับค่าความยาวของฐานมาเก็บในตัวแปร X<br>
                2. รับค่าความยาวของสูงมาเก็บในตัวแปร Y<br>
                3. คำนวณหาพื้นที่ area = (X*Y)/2<br>
                4. แสดงผลพื้นที่</p>
            </div>
            <div style="background: white; padding: 20px; border-radius: 10px; border-top: 4px solid #F57F17; box-shadow: 0 3px 10px rgba(0,0,0,0.08);">
                <h4 style="text-align: center; color: #F57F17; margin-top: 0; padding-bottom: 10px; border-bottom: 1px dashed #ccc;">รหัสลำลอง (Pseudo Code)</h4>
                <p style="margin-bottom: 0; line-height: 1.8;"><strong>Start</strong><br>
                  1. read X<br>
                  2. read Y<br>
                  3. compute area = (X*Y)/2<br>
                  4. print area<br>
                <strong>End</strong></p>
            </div>
        </div>

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px; margin-bottom: 30px;">
            <div style="background: #E8F5E9; padding: 15px; border-radius: 10px; border: 1px solid #A5D6A7;">
                <strong style="color: #2E7D32; font-size: 16px;">✅ ข้อดีของรหัสลำลอง:</strong><br>
                <span style="font-size: 15px; line-height: 1.8;">
                1. เขียนง่าย แก้ไขง่าย (แทรกบรรทัดได้ทันที)<br>
                2. แสดงอธิบายลำดับความคิดได้ดีกว่าผังงาน<br>
                3. ตรวจสอบลำดับการทำงานได้ชัดเจน<br>
                4. แปลงเป็นภาษาคอมพิวเตอร์ได้รวดเร็ว</span>
            </div>
            <div style="background: #FFEBEE; padding: 15px; border-radius: 10px; border: 1px solid #EF9A9A;">
                <strong style="color: #C62828; font-size: 16px;">❌ ข้อเสียของรหัสลำลอง:</strong><br>
                <span style="font-size: 15px; line-height: 1.8;">
                1. รหัสลำลองยังใช้ภาษาท้องถิ่น อาจทำให้ต่างชาติไม่เข้าใจ<br>
                2. ไม่ได้ถูกคัดกรองไวยากรณ์ อาจเกิดข้อผิดพลาดตอนเขียนโปรแกรม<br>
                3. ไม่มีมาตรฐานตายตัว ทำให้ข้อความหรือวิธีใช้ไม่ตรงกัน<br>
                4. ไม่เห็นภาพรวมหรือทิศทางการไหลของข้อมูลชัดเจน (ไม่เหมือนผังงาน)</span>
            </div>
        </div>
    </div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background-color: #0D47A1; color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px; color: #FFC107;">✍️ มินิควิซ ทบทวนความรู้ (EP.2)</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; opacity: 0.9;">ทำควิซ 4 ข้อนี้เพื่อเช็กความเข้าใจกันเถอะ! (ไม่เก็บคะแนน)</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: #0D47A1;">ข้อที่ 1: การเขียนอัลกอริทึมแบบบรรยาย (Narrative Description) มีข้อเสียหลักคืออะไร?</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>
                    <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: #0D47A1;">ข้อที่ 2: ข้อใดคือลักษณะสำคัญของการเขียน "รหัสลำลอง (Pseudo Code)"?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'ถ้าเขียนเป็นเรียงความยาวๆ จะเป็นแบบ Narrative จ้า')" 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>
                    <button onclick="checkAnswer(this, true, 'ถูกต้อง! มีโครงสร้างคล้ายการเขียนโปรแกรม และมี Start/End กำกับเสมอ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. มีรูปแบบคล้ายภาษาคอมพิวเตอร์ นิยมใช้ภาษาอังกฤษ มีคำสั่ง Start และ End</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: #0D47A1;">ข้อที่ 3: จากตัวอย่างการหาพื้นที่สามเหลี่ยม คำสั่งใดในรหัสลำลองที่ทำหน้าที่ "รับข้อมูลเข้า (Input)"?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'Start คือคำสั่งเริ่มต้นการทำงานจ้า')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. Start</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้อง! คำว่า read หมายถึงการรับค่าข้อมูลเข้ามาเก็บไว้ในตัวแปร')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. read X, read Y</button>
                    <button onclick="checkAnswer(this, false, 'compute คือขั้นตอนการประมวลผล (Process) คำนวณค่าจ้า')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. compute area</button>
                    <button onclick="checkAnswer(this, false, 'print คือขั้นตอนการแสดงผลลัพธ์ (Output) จ้า')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. print area</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: #0D47A1;">ข้อที่ 4: จุดเด่นที่สุดของการใช้ รหัสลำลอง (Pseudo Code) เพื่อเตรียมตัวก่อนเขียนโปรแกรมคืออะไร?</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, 'ยังเอาไปรันบนคอมพิวเตอร์โดยตรงไม่ได้ ต้องแปลงเป็นภาษาคอมก่อน (เช่น Python, C)')" 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 = '#E3F2FD';
        btn.style.borderColor = '#1565C0';
        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>