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

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%, #00BCD4 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px; border-bottom: 5px solid #01579B;">
        <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.5 รหัสลับโปรแกรมเมอร์ (Pseudocode)</h2>
        <p style="margin: 10px 0 0 0; font-size: 22px; color: #E0F7FA; font-weight: bold;">จำลองภาษาคอมฯ ก้าวแรกสู่การเขียนโค้ด!</p>
    </div>

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

<h3 style="color: #0277BD; border-left: 5px solid #00E5FF; padding-left: 15px; font-size: 22px; margin-top: 30px;">🕵️‍♂️ 1. Pseudocode คืออะไร?</h3>
        <p><strong>รหัสลำลอง (Pseudocode อ่านว่า ซู-โด-โค้ด)</strong> คือ การเขียนเค้าโครงของโปรแกรมโดยใช้คำศัพท์ภาษาอังกฤษสั้นๆ ที่เข้าใจง่าย (คล้ายภาษาคอมพิวเตอร์) แต่ไม่ได้อิงตามไวยากรณ์ของภาษาโปรแกรมใดภาษาหนึ่งแบบเป๊ะๆ ครับ</p>
        
        <div style="background: #E1F5FE; padding: 15px; border-radius: 10px; border-left: 5px solid #03A9F4; font-size: 16px; color: #01579B; margin-bottom: 25px;">
            <p style="margin: 0;"><strong>💡 ข้อดีของ Pseudocode:</strong> ช่วยให้โปรแกรมเมอร์ทุกคนบนโลกเข้าใจโครงสร้างโปรแกรมตรงกัน และสามารถนำรหัสนี้ไปแปลงเป็นภาษาใดก็ได้ (เช่น Python, C++, Java) ได้อย่างง่ายดาย!</p>
        </div>

<h3 style="color: #0277BD; border-left: 5px solid #00E5FF; padding-left: 15px; font-size: 22px; margin-top: 35px;">🔑 2. คำศัพท์ยอดฮิตใน Pseudocode</h3>
        <p>เรามักจะใช้ <strong>"คำสงวน (Reserved words)"</strong> ภาษาอังกฤษตัวพิมพ์ใหญ่ เพื่อบอกให้รู้ว่านี่คือคำสั่งหลักครับ:</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;">
                <span style="font-size: 30px;">🏁</span><br>
                <strong style="color: #2E7D32;">START / STOP</strong><br>
                <span style="font-size: 14px;">เริ่มต้น / สิ้นสุดการทำงาน</span>
            </div>
            <div style="background: white; border: 1px solid #ddd; padding: 15px; border-radius: 8px;">
                <span style="font-size: 30px;">📥</span><br>
                <strong style="color: #D32F2F;">INPUT / READ</strong><br>
                <span style="font-size: 14px;">รับค่าข้อมูลจากผู้ใช้งาน</span>
            </div>
            <div style="background: white; border: 1px solid #ddd; padding: 15px; border-radius: 8px;">
                <span style="font-size: 30px;">🧮</span><br>
                <strong style="color: #F57C00;">COMPUTE</strong><br>
                <span style="font-size: 14px;">คำนวณ หรือประมวลผล</span>
            </div>
            <div style="background: white; border: 1px solid #ddd; padding: 15px; border-radius: 8px;">
                <span style="font-size: 30px;">📤</span><br>
                <strong style="color: #673AB7;">PRINT / OUTPUT</strong><br>
                <span style="font-size: 14px;">แสดงผลลัพธ์ออกทางหน้าจอ</span>
            </div>
        </div>
        
        <h3 style="color: #0277BD; border-left: 5px solid #00E5FF; padding-left: 15px; font-size: 22px; margin-top: 30px;">💻 3. ตัวอย่าง: โปรแกรมคำนวณพื้นที่สี่เหลี่ยมผืนผ้า</h3>
        <p>ลองมาดูความแตกต่างระหว่าง Algorithm แบบภาษาไทย กับ Pseudocode กันครับ (พื้นที่ = กว้าง x ยาว)</p>
        
        <div style="display: flex; flex-wrap: wrap; gap: 20px; margin-top: 15px;">
            <div style="flex: 1; min-width: 250px; background: #FAFAFA; border: 1px solid #CCC; padding: 15px; border-radius: 8px;">
                <h4 style="color: #444; margin-top: 0; border-bottom: 2px solid #ddd; padding-bottom: 10px;">🇹🇭 อัลกอริทึม (Algorithm)</h4>
                <ol style="margin-bottom: 0; padding-left: 20px; font-size: 15px;">
                    <li><strong>เริ่มต้น</strong></li>
                    <li>รับค่าความกว้าง</li>
                    <li>รับค่าความยาว</li>
                    <li>คำนวณ พื้นที่ = กว้าง * ยาว</li>
                    <li>แสดงผล พื้นที่</li>
                    <li><strong>สิ้นสุด</strong></li>
                </ol>
            </div>
            <div style="flex: 1; min-width: 250px; background: #263238; border: 1px solid #111; padding: 15px; border-radius: 8px; color: #00E5FF; font-family: monospace;">
                <h4 style="color: #FFF; margin-top: 0; border-bottom: 2px solid #546E7A; padding-bottom: 10px; font-family: 'Sarabun', sans-serif;">🤖 รหัสลำลอง (Pseudocode)</h4>
                <div style="font-size: 16px; line-height: 1.8;">
                    <span style="color: #69F0AE;">START</span><br>
                      <span style="color: #FF8A65;">INPUT</span> width<br>
                      <span style="color: #FF8A65;">INPUT</span> length<br>
                      <span style="color: #B388FF;">COMPUTE</span> area = width * length<br>
                      <span style="color: #FFD54F;">PRINT</span> area<br>
                    <span style="color: #69F0AE;">STOP</span>
                </div>
            </div>
        </div>
        <p style="margin-top: 15px;">เห็นไหมครับว่า Pseudocode จะดูเป็นสากลและมีความเป็นโปรแกรมคอมพิวเตอร์มากขึ้น แต่ก็ยังอ่านเข้าใจได้ง่ายกว่าโค้ดของจริงครับ!</p>
    </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: #00E5FF;">✍️ มินิควิซ ทบทวนความรู้ (EP.5)</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; color: #B3E5FC;">ทดสอบความเป็นโปรแกรมเมอร์ฝึกหัด!</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: รหัสลำลอง (Pseudocode) คืออะไร?</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, 'อันนี้คือรหัสผ่าน (Password) จ้า ไม่ใช่รหัสลำลอง')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. รหัสลับที่ใช้สำหรับล็อกอินเข้าสู่ระบบคอมพิวเตอร์</button>
                    <button onclick="checkAnswer(this, false, 'สัญลักษณ์รูปภาพคือการเขียน ผังงาน (Flowchart) ครับ ซึ่งเราจะได้เรียนใน EP ถัดไป!')" 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: หากต้องการ "รับค่า" อายุจากผู้ใช้งาน ควรใช้คำสั่งใดใน Pseudocode?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'PRINT ใช้สำหรับแสดงผลลัพธ์ออกทางหน้าจอครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. PRINT age</button>
                    <button onclick="checkAnswer(this, false, 'START ใช้สำหรับบอกจุดเริ่มต้นของโปรแกรมครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. START age</button>
                    <button onclick="checkAnswer(this, true, 'เยี่ยมมาก! INPUT (หรือ READ) หมายถึงการรับค่าข้อมูลเข้ามาในระบบครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. INPUT age</button>
                    <button onclick="checkAnswer(this, false, 'COMPUTE ใช้สำหรับการคำนวณครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. COMPUTE age</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;">ข้อที่ 3: ข้อใดคือโครงสร้าง Pseudocode ที่ถูกต้องที่สุดสำหรับ "รับค่า 2 ค่า แล้วนำมาบวกกัน"?</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;">ก. START -> COMPUTE -> INPUT -> STOP</button>
                    <button onclick="checkAnswer(this, false, 'อย่าลืมแสดงผล (PRINT) ด้วยสิครับ คำนวณเสร็จแล้วเงียบไปเลยไม่ได้นะ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. START -> INPUT -> COMPUTE -> STOP</button>
                    <button onclick="checkAnswer(this, true, 'เป๊ะมาก! เริ่มต้น -> รับค่า -> คำนวณ -> แสดงผลลัพธ์ -> สิ้นสุด คือลำดับที่ถูกต้องครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. START -> INPUT -> COMPUTE -> PRINT -> STOP</button>
                    <button onclick="checkAnswer(this, false, 'ไป PRINT ก่อนคำนวณไม่ได้นะครับ ระบบยังไม่มีคำตอบให้แสดงผลเลย')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. START -> INPUT -> PRINT -> COMPUTE -> STOP</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 = '#0277BD';
        btn.style.color = '#01579B';
        btn.style.opacity = '1';
        feedback.style.background = '#E1F5FE';
        feedback.style.color = '#0277BD';
        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>