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

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, #311B92 0%, #4A148C 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px; border-bottom: 5px solid #1A237E;">
        <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.5: ผู้ช่วย AI กับการพัฒนาระบบ</h2>
        <p style="margin: 10px 0 0 0; font-size: 22px; color: #D1C4E9; font-weight: bold;">AI Assistants in Programming</p>
    </div>

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

<h3 style="color: #311B92; border-left: 5px solid #5E35B1; padding-left: 15px; font-size: 22px; margin-top: 30px;">🌟 1. เครื่องมือ AI ที่ช่วยเขียนโปรแกรม</h3>
        <p>ปัจจุบันมี AI หลายตัวที่ถูกฝึกฝนมาให้เข้าใจภาษาคอมพิวเตอร์อย่างลึกซึ้ง เช่น:</p>
        <div style="display: flex; flex-wrap: wrap; gap: 15px; margin-top: 15px;">
            <div style="flex: 1; min-width: 200px; background: #F3E5F5; padding: 15px; border-radius: 12px; border: 2px solid #BA68C8; text-align: center;">
                <strong style="color: #6A1B9A; font-size: 18px;">✨ Gemini / ChatGPT</strong><br>
                <p style="font-size: 14px; margin-top: 5px;">AI แบบแชทบอทที่เราสามารถพิมพ์ถาม-ตอบเป็นภาษาไทยได้เลย ให้ช่วยอธิบายโค้ดหรือแต่งโค้ดใหม่ให้ก็ได้</p>
            </div>
            <div style="flex: 1; min-width: 200px; background: #E8EAF6; padding: 15px; border-radius: 12px; border: 2px solid #7986CB; text-align: center;">
                <strong style="color: #283593; font-size: 18px;">🐙 GitHub Copilot</strong><br>
                <p style="font-size: 14px; margin-top: 5px;">AI ที่ฝังตัวอยู่ในโปรแกรมเขียนโค้ด คอยเดาใจและพิมพ์โค้ดบรรทัดต่อไปให้เราอัตโนมัติ</p>
            </div>
        </div>

<h3 style="color: #311B92; border-left: 5px solid #5E35B1; padding-left: 15px; font-size: 22px; margin-top: 35px;">🗣️ 2. ศิลปะการสั่งงาน AI (Prompt Engineering)</h3>
        <p>AI จะเก่งแค่ไหน ขึ้นอยู่กับคำสั่งหรือ <strong>พรอมต์ (Prompt)</strong> ที่เราป้อนให้มันครับ การเขียนพรอมต์ที่ดีต้องชัดเจนและเจาะจง</p>
        <div style="background: #263238; color: #ECEFF1; padding: 15px; border-radius: 12px; margin-top: 10px; border-left: 6px solid #4DB6AC;">
            <p style="margin: 0; color: #80CBC4; font-weight: bold;">✅ ตัวอย่าง Prompt ที่ดีสำหรับขอให้ AI ช่วยเขียนแอป Tkinter:</p>
            <ul style="margin-top: 5px; margin-bottom: 0; font-family: 'Courier New', Courier, monospace; font-size: 15px; line-height: 1.6;">
                <li>"เขียนโปรแกรมคำนวณ BMI ด้วยภาษา Python โดยมี GUI ด้วย Tkinter"</li>
                <li>"อธิบายรหัสต้นฉบับ Python ที่ยกมานี้ให้เด็ก ม.3 เข้าใจง่ายๆ หน่อย"</li>
                <li>"ช่วยแก้โค้ดด้านล่างนี้ให้ที มันเกิด Error ... แล้วช่วยอธิบายสาเหตุที่ผิดด้วย"</li>
            </ul>
        </div>

<h3 style="color: #311B92; border-left: 5px solid #5E35B1; padding-left: 15px; font-size: 22px; margin-top: 35px;">⚖️ 3. ข้อดี vs ข้อควรระวัง ในการใช้ AI</h3>
        
        <div style="display: flex; flex-wrap: wrap; gap: 15px; margin-top: 15px;">
            <div style="flex: 1; min-width: 250px; background: #E8F5E9; padding: 20px; border-radius: 12px; border: 1px solid #A5D6A7;">
                <strong style="color: #2E7D32; font-size: 18px;">👍 ประโยชน์ (Pros)</strong>
                <ul style="margin-top: 10px; padding-left: 20px; font-size: 14px; margin-bottom: 0;">
                    <li>ลดเวลาในการเขียนโปรแกรมได้อย่างมหาศาล</li>
                    <li>ช่วยหาบั๊ก (Debug) หรือข้อผิดพลาดที่เรามองไม่เห็น</li>
                    <li>เป็นเหมือน "ติวเตอร์ส่วนตัว" ที่สอนโค้ดเราได้ 24 ชั่วโมง</li>
                    <li>ช่วยสร้างโครงสร้างโปรแกรมเริ่มต้นให้เรานำไปพัฒนาต่อได้ทันที</li>
                </ul>
            </div>
            <div style="flex: 1; min-width: 250px; background: #FFEBEE; padding: 20px; border-radius: 12px; border: 1px solid #EF9A9A;">
                <strong style="color: #C62828; font-size: 18px;">⚠️ ข้อควรระวัง (Precautions)</strong>
                <ul style="margin-top: 10px; padding-left: 20px; font-size: 14px; margin-bottom: 0;">
                    <li><strong>โค้ดอาจไม่ถูกต้อง 100%:</strong> ต้องตรวจสอบและรันดูเองก่อนเสมอ</li>
                    <li><strong>ระวังเรื่องความปลอดภัย:</strong> โค้ดที่ AI ให้อาจมีช่องโหว่ หรือไม่เหมาะกับการนำไปใช้จริงกับ Big Data ที่เป็นความลับ</li>
                    <li><strong>ไม่ควรใช้แทนการเรียนรู้:</strong> หากเราก๊อปปี้ไปวางโดยไม่ทำความเข้าใจ เราจะไม่มีวันเขียนโปรแกรมเป็นเลย</li>
                </ul>
            </div>
        </div>

</div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background-color: #311B92; color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px; color: #FFF;">✍️ มินิควิซ ทบทวนความรู้ EP.5</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; color: #D1C4E9;">ทดสอบความเข้าใจเรื่องการใช้งาน AI ช่วยเขียนโปรแกรม</p>
        </div>
        
        <div style="border: 2px solid #311B92; 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: #311B92;">ข้อที่ 1: โปรแกรมใดต่อไปนี้ ถือเป็น "ปัญญาประดิษฐ์ (AI)" ที่นักพัฒนาซอฟต์แวร์นิยมนำมาใช้เป็นผู้ช่วยในการเขียนโปรแกรมมากที่สุด?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'Adobe Photoshop เป็นโปรแกรมตกแต่งรูปภาพครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. Adobe Photoshop</button>
                    <button onclick="checkAnswer(this, false, 'Microsoft Excel เป็นโปรแกรมตารางคำนวณ (Spreadsheet) ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. Microsoft Excel</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้องครับ! GitHub Copilot (รวมถึง ChatGPT และ Gemini) เป็น AI อัจฉริยะที่ถูกออกแบบมาเพื่อช่วยแนะนำและเขียนโค้ดให้โปรแกรมเมอร์ทำงานได้ไวขึ้น')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. GitHub Copilot</button>
                    <button onclick="checkAnswer(this, false, 'PyInstaller เป็นเครื่องมือแปลงไฟล์ .exe ไม่ใช่ปัญญาประดิษฐ์ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. PyInstaller</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: #311B92;">ข้อที่ 2: คำว่า "Prompt" ในการใช้งาน AI หมายถึงสิ่งใด?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'นามสกุลไฟล์ของโปรแกรมคือ Executable (.exe) ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. นามสกุลไฟล์ของโปรแกรมที่สร้างเสร็จแล้ว</button>
                    <button onclick="checkAnswer(this, true, 'เยี่ยมมากครับ! Prompt คือชุดคำสั่งหรือประโยคที่เราพิมพ์เพื่อสื่อสารและป้อนคำถามให้ AI ทำงานตามที่เราต้องการ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. คำสั่งหรือข้อความที่เราป้อนเข้าไปเพื่อสั่งให้ AI ทำงานหรือตอบคำถาม</button>
                    <button onclick="checkAnswer(this, false, 'หน้าต่างแจ้งเตือนคือ Message Box ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. หน้าต่างสีดำที่ใช้สำหรับแจ้งเตือนข้อผิดพลาด (Bug)</button>
                    <button onclick="checkAnswer(this, false, 'ราคาค่าบริการไม่เรียกว่า Prompt ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. ราคาค่าบริการรายเดือนในการสมัครใช้งานระบบ AI</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: #311B92;">ข้อที่ 3: หากนักเรียนนำโค้ดภาษา Python ที่ AI เขียนมาให้ ไปรันในโปรแกรมแล้วเกิด Error นักเรียนควรทำอย่างไรเป็นอันดับแรก?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'ยังไม่ต้องทิ้งครับ AI ช่วยแก้ให้เราได้')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. ลบโปรแกรมทิ้งแล้วเริ่มต้นเขียนใหม่ด้วยตัวเองตั้งแต่บรรทัดแรก</button>
                    <button onclick="checkAnswer(this, false, 'การโหลด AI ตัวใหม่ไม่ได้รับประกันว่าจะไม่ Error ครับ บางครั้งปัญหาอยู่ที่สภาพแวดล้อมเครื่องเรา')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. ถอนการติดตั้งโปรแกรมแล้วเปลี่ยนไปใช้ AI ตัวอื่นที่ฉลาดกว่า</button>
                    <button onclick="checkAnswer(this, false, 'การฝืนรันโปรแกรมที่มี Error อาจทำให้เครื่องค้างได้ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. ปล่อยทิ้งไว้แบบนั้นแล้วทำการแปลงไฟล์เป็น .exe ทันทีเพื่อแก้ปัญหา</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้องครับ! หากเกิด Error วิธีที่ดีที่สุดคือก๊อปปี้ข้อความ Error นั้นกลับไปให้ AI ดู เพื่อให้ AI ช่วยวิเคราะห์สาเหตุและเสนอวิธีแก้ไขให้เราครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. นำข้อความ Error ที่เกิดขึ้น คัดลอกกลับไปถาม AI (Prompt) เพื่อให้ AI ช่วยอธิบายและหาวิธีแก้ไข</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: #311B92;">ข้อที่ 4: ข้อใดคือ "ข้อควรระวัง (Precautions)" ที่สำคัญที่สุดในการใช้ AI ช่วยเขียนโปรแกรมสำหรับเก็บข้อมูลสารสนเทศ?</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;">ก. AI จะทำให้แอปพลิเคชันของเราทำงานได้เร็วกว่าปกติถึง 10 เท่า</button>
                    <button onclick="checkAnswer(this, true, 'ใช่เลยครับ! AI ไม่ใช่พระเจ้า บางครั้งมันอาจเขียนโค้ดที่ผิดพลาด ใช้งานไม่ได้จริง หรือสร้างช่องโหว่ด้านความปลอดภัย เราจึงต้องตรวจสอบและทำความเข้าใจโค้ดก่อนนำไปใช้เสมอ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. โค้ดที่ AI สร้างให้ อาจไม่ถูกต้อง 100% หรืออาจมีช่องโหว่ด้านความปลอดภัย ผู้พัฒนาจึงต้องตรวจสอบและทดสอบก่อนใช้งานจริงเสมอ</button>
                    <button onclick="checkAnswer(this, false, 'AI ไม่ได้ขโมยฮาร์ดแวร์ครับ และถ้าใช้งานถูกวิธีก็ไม่ต้องกลัวการแฮกเข้ากล้อง')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. AI จะแอบเปิดกล้องเว็บแคมเพื่อแอบดูข้อมูลใบหน้าของผู้ใช้งาน</button>
                    <button onclick="checkAnswer(this, false, 'เราสามารถแปลงไฟล์ .exe จากโค้ดที่ AI เขียนให้ได้ตามปกติครับ ไม่มีข้อห้าม')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. โค้ดที่ได้จาก AI ไม่สามารถนำไปแปลงเป็นไฟล์ .exe เพื่อนำไปใช้งานได้</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: #311B92;">ข้อที่ 5: การนำ AI มาช่วยเขียนโปรแกรม Python แบบ GUI ส่งผลดีอย่างไรต่อการเรียนรู้วิชาวิทยาการคำนวณ?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, true, 'ถูกต้องที่สุดครับ! AI เป็นเครื่องมือที่ทรงพลัง เมื่อใช้คู่กับความเข้าใจพื้นฐาน มันจะช่วยลดความหงุดหงิดจากการพิมพ์ผิด และทำให้เราสร้างสรรค์ชิ้นงานได้รวดเร็วและมีประสิทธิภาพมากขึ้นครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. ช่วยลดความยุ่งยากในการจำคำสั่งพื้นฐาน (Syntax) ทำให้นักเรียนมีเวลาโฟกัสกับการออกแบบโครงสร้างและการแก้ปัญหามากขึ้น</button>
                    <button onclick="checkAnswer(this, false, 'ไม่ควรทำแบบนั้นครับ การให้ AI ทำแทนหมดโดยไม่รู้เรื่องเลย จะทำให้เราไม่เกิดการเรียนรู้ใดๆ เลย')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. ทำให้นักเรียนไม่จำเป็นต้องเรียนรู้ภาษาคอมพิวเตอร์เลย แค่ให้ AI สร้างแอปให้ส่งครูก็พอ</button>
                    <button onclick="checkAnswer(this, false, 'ไวรัสป้องกันได้ด้วย Antivirus ครับ AI เขียนโค้ดไม่ได้ช่วยป้องกันไวรัสบนเครื่อง')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. ทำให้โปรแกรมที่นักเรียนสร้างขึ้นมาได้รับการป้องกันจากไวรัสคอมพิวเตอร์ทุกชนิด</button>
                    <button onclick="checkAnswer(this, false, 'ลิขสิทธิ์เป็นเรื่องซับซ้อนครับ และการให้ AI เขียนให้ไม่ได้แปลว่าจะได้ใบรับรองระดับโลกอัตโนมัติ')" 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 = '#EDE7F6';
        btn.style.borderColor = '#5E35B1';
        btn.style.color = '#311B92';
        btn.style.opacity = '1';
        feedback.style.background = '#EDE7F6';
        feedback.style.color = '#5E35B1';
        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>