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

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, #00838F 0%, #01579B 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px; border-bottom: 5px solid #00305A;">
        <h2 style="margin: 0; font-size: 26px; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.3); color: #FFF;">📲 หน่วยที่ 3 EP.4: ทดสอบแอปบนมือถือจริง</h2>
        <p style="margin: 10px 0 0 0; font-size: 22px; color: #B3E5FC; font-weight: bold;">Testing with AI Companion</p>
    </div>

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

<h3 style="color: #01579B; border-left: 5px solid #0288D1; padding-left: 15px; font-size: 22px; margin-top: 30px;">📶 1. สามวิธีในการทดสอบแอปพลิเคชัน</h3>
        <p>ระบบของ MIT App Inventor มีช่องทางให้เราเลือกทดสอบผลงานได้ถึง 3 รูปแบบ คือ:</p>
        
        <div style="display: flex; flex-wrap: wrap; gap: 15px; margin-top: 15px;">
            <div style="flex: 1; min-width: 200px; background: #E1F5FE; padding: 15px; border-radius: 12px; border: 2px solid #29B6F6;">
                <strong style="color: #0277BD; font-size: 16px;">1️⃣ ผ่าน AI Companion (แนะนำสุด!)</strong><br>
                <p style="font-size: 14px; margin-top: 5px; margin-bottom: 0;">ใช้มือถือของเราสแกน QR Code ผ่านสัญญาณ Wi-Fi เพื่อให้แอปไปโผล่บนหน้าจอมือถือทันที</p>
            </div>
            <div style="flex: 1; min-width: 200px; background: #FFF3E0; padding: 15px; border-radius: 12px; border: 2px solid #FFA726;">
                <strong style="color: #E65100; font-size: 16px;">2️⃣ ผ่าน Emulator (จำลองหน้าจอ)</strong><br>
                <p style="font-size: 14px; margin-top: 5px; margin-bottom: 0;">หากไม่มีมือถือ ระบบจะจำลองหน้าจอมือถือขึ้นมาบนจอคอมพิวเตอร์ให้เราใช้เมาส์คลิกแทน (ต้องลงโปรแกรมเสริมในคอมฯ)</p>
            </div>
            <div style="flex: 1; min-width: 200px; background: #E8F5E9; padding: 15px; border-radius: 12px; border: 2px solid #66BB6A;">
                <strong style="color: #2E7D32; font-size: 16px;">3️⃣ ผ่านสาย USB</strong><br>
                <p style="font-size: 14px; margin-top: 5px; margin-bottom: 0;">เสียบสาย USB จากมือถือเข้าคอมพิวเตอร์ เหมาะสำหรับโรงเรียนที่ไม่มี Wi-Fi ให้ใช้งาน</p>
            </div>
        </div>

<h3 style="color: #01579B; border-left: 5px solid #0288D1; padding-left: 15px; font-size: 22px; margin-top: 35px;">🐝 2. ขั้นตอนการใช้งาน MIT AI2 Companion</h3>
        <p>วันนี้เราจะมาลุยวิธีที่ได้รับความนิยมที่สุด นั่นคือการสแกนผ่าน <strong>AI Companion</strong> ครับ จุดเด่นของวิธีนี้คือ <strong>"การทำงานแบบ Real-time"</strong> คือถ้าเราแก้สีปุ่มในคอมพิวเตอร์ สีปุ่มในมือถือก็จะเปลี่ยนตามทันทีโดยไม่ต้องสแกนใหม่ครับ!</p>
        
        <div style="background: #FAFAFA; padding: 20px; border-radius: 12px; border-left: 6px solid #FF5722; margin-top: 15px; line-height: 1.8;">
            <p style="margin: 0 0 10px 0; color: #E65100; font-weight: bold; font-size: 18px;">📲 ขั้นตอนการเชื่อมต่อ (แค่ 3 สเต็ปง่ายๆ):</p>
            <ol style="margin: 0; padding-left: 25px; font-size: 15px;">
                <li><strong>โหลดแอปตัวช่วย:</strong> หยิบสมาร์ตโฟนขึ้นมา เข้าไปที่ Play Store หรือ App Store แล้วดาวน์โหลดแอปพลิเคชันที่ชื่อว่า <strong>"MIT AI2 Companion"</strong> (ไอคอนรูปผึ้งสีส้ม) ลงในเครื่อง</li>
                <li><strong>สร้าง QR Code ในคอมฯ:</strong> กลับมาที่หน้าเว็บไซต์ MIT App Inventor ที่เราเขียนแอปค้างไว้ ไปที่เมนูด้านบนสุด คลิกคำว่า <strong><code>Connect</code></strong> แล้วเลือก <strong><code>AI Companion</code></strong> จะมีหน้าต่าง QR Code พร้อมรหัส 6 ตัวอักษรเด้งขึ้นมา</li>
                <li><strong>สแกนเพื่อเชื่อมต่อ:</strong> เปิดแอป MIT AI2 Companion ในมือถือของเรา (<em>**สำคัญ: มือถือกับคอมพิวเตอร์ต้องต่อ Wi-Fi วงเดียวกัน**</em>) จากนั้นกดปุ่มสีฟ้า <strong><code>scan QR code</code></strong> แล้วเอากล้องมือถือไปส่องที่หน้าจอคอมพิวเตอร์ได้เลยครับ!</li>
            </ol>
        </div>

<div style="background: #E0F2F1; padding: 15px 20px; border-radius: 12px; border: 1px solid #4DB6AC; margin-top: 25px; text-align: center;">
            <p style="margin: 0; font-weight: bold; color: #00695C; font-size: 16px;">🎉 ว้าว! แอปพลิเคชันเครื่องคิดเลขของเราโผล่มาบนมือถือแล้ว! ลองจิ้มตัวเลขแล้วกดคำนวณดูได้เลยครับ!</p>
        </div>

</div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background-color: #00838F; color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px; color: #FFF;">✍️ มินิควิซ ทบทวนความรู้ EP.4</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; color: #B3E5FC;">ทดสอบความเข้าใจเรื่องการทดสอบแอปพลิเคชัน</p>
        </div>
        
        <div style="border: 2px solid #00838F; 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: #006064;">ข้อที่ 1: วิธีที่สะดวก รวดเร็ว และเป็นที่นิยมที่สุดในการนำแอปที่สร้างจาก MIT App Inventor มาแสดงผลบนสมาร์ตโฟนเพื่อทดสอบ คือวิธีใด?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'การต่อสาย USB ทำได้ครับ แต่ต้องลงไดรเวอร์และตั้งค่าเยอะกว่าวิธีอื่นๆ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. การเชื่อมต่อผ่านสายเคเบิล USB เข้ากับคอมพิวเตอร์</button>
                    <button onclick="checkAnswer(this, false, 'Emulator คือการจำลองโทรศัพท์บนจอคอมพิวเตอร์ครับ เหมาะสำหรับคนที่ไม่มีสมาร์ตโฟน')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. การใช้โปรแกรม Emulator เพื่อสร้างหน้าจอจำลองบนคอมพิวเตอร์</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้องครับ! การใช้แอป AI Companion ควบคู่กับการสแกน QR Code ผ่าน Wi-Fi เป็นวิธีที่ง่ายที่สุดและไม่ต้องลงโปรแกรมหนักๆ ในคอมพิวเตอร์เลย')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. การสแกน QR Code ผ่านแอปพลิเคชัน MIT AI2 Companion</button>
                    <button onclick="checkAnswer(this, false, 'Bluetooth ไม่ได้เป็นช่องทางหลักที่ระบบออกแบบมาให้ใช้เชื่อมต่อแบบสดๆ ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. การส่งไฟล์โค้ดผ่านระบบ Bluetooth เข้ามือถือ</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: #006064;">ข้อที่ 2: หากนักเรียนต้องการสร้างรหัส QR Code เพื่อให้มือถือสแกน นักเรียนต้องคลิกที่เมนูใดบนหน้าเว็บไซต์ MIT App Inventor?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'เมนู Build ใช้สำหรับแปลงแอปเป็นไฟล์สำหรับติดตั้ง (.apk) ส่งให้คนอื่นโหลดครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. เลือกเมนู Build -> Android App (.apk)</button>
                    <button onclick="checkAnswer(this, false, 'เมนู Projects ใช้สำหรับบันทึกงาน หรือสร้างโปรเจกต์ใหม่ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. เลือกเมนู Projects -> Save project</button>
                    <button onclick="checkAnswer(this, true, 'เยี่ยมมากครับ! เมนู Connect -> AI Companion คือคำสั่งสำหรับเรียก QR Code ออกมาเพื่อเชื่อมต่อกับแอปคู่หูบนมือถือครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. เลือกเมนู Connect -> AI Companion</button>
                    <button onclick="checkAnswer(this, false, 'เมนู Settings ใช้สำหรับตั้งค่าพื้นฐานของโปรแกรมครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. เลือกเมนู Settings -> Enable QR</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: #006064;">ข้อที่ 3: "หากนักเรียนไม่มีสมาร์ตโฟนเป็นของตนเอง" แต่นักเรียนยังต้องการทดสอบว่าแอปพลิเคชันทำงานได้ถูกต้องหรือไม่ นักเรียนสามารถแก้ปัญหาด้วยวิธีใด?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, true, 'ถูกต้องครับ! หากไม่มีมือถือ เราสามารถใช้เมนู Connect -> Emulator ระบบจะจำลองหน้าจอมือถือจำลอง (โทรศัพท์ปลอมๆ) ขึ้นมาบนจอคอมพิวเตอร์ให้เราทดสอบคลิกได้เลย')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. ใช้เมนู Emulator เพื่อสร้างหน้าจอมือถือจำลองขึ้นมาบนหน้าจอคอมพิวเตอร์แทน</button>
                    <button onclick="checkAnswer(this, false, 'ถ้าไม่มีมือถือ สาย USB ก็ใช้เชื่อมต่อกับอะไรไม่ได้อยู่ดีครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. ใช้สาย USB เชื่อมต่อเมาส์เข้ากับคอมพิวเตอร์แทน</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: #006064;">ข้อที่ 4: การเชื่อมต่อเพื่อทดสอบแอปพลิเคชันผ่านระบบ AI Companion บนสมาร์ตโฟน มีเงื่อนไขสำคัญที่สุดข้อใดจึงจะสแกนติด?</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;">ก. สมาร์ตโฟนต้องเป็นรุ่นราคาแพงและมีพื้นที่ความจำเหลือมากกว่า 100 GB</button>
                    <button onclick="checkAnswer(this, true, 'ใช่เลยครับ! คอมพิวเตอร์และสมาร์ตโฟนจะต้องเชื่อมต่อเครือข่าย Wi-Fi วงเดียวกัน (ชื่อเดียวกัน) ข้อมูลจึงจะสามารถวิ่งหากันเจอครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. คอมพิวเตอร์และสมาร์ตโฟนจะต้องเชื่อมต่ออินเทอร์เน็ตผ่าน Wi-Fi เครือข่ายเดียวกัน</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, 'เราไม่จำเป็นต้องนำสาย USB มาเสียบ ถ้าเราเลือกเชื่อมต่อแบบไร้สายผ่าน Wi-Fi/QR Code ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. ต้องเสียบสาย USB ค้างไว้ตลอดเวลาแม้จะสแกน QR Code แล้วก็ตาม</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: #006064;">ข้อที่ 5: ข้อใดคือ "จุดเด่น (ข้อดี)" ของการสแกนทดสอบแอปผ่าน AI Companion แทนที่จะดาวน์โหลดมาติดตั้งแบบถาวร?</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, 'การนำแอปไปลง Play Store หรือ App Store ต้องใช้กระบวนการทางฝั่งผู้พัฒนาของแต่ละค่ายครับ แค่สแกนไม่ได้ทำให้แอปขึ้นสโตร์ทันที')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. ทำให้แอปพลิเคชันถูกนำไปขายบน Play Store ทันทีที่มีการสแกน</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้องครับ! จุดแข็งคือ Live Testing หากเรากลับไปแก้บล็อกโค้ดในคอมพิวเตอร์ หน้าจอแอปบนมือถือของเราจะถูกอัปเดตตามโดยอัตโนมัติทันที ไม่ต้องเสียเวลาลบแอปแล้วลงใหม่เรื่อยๆ ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. หากมีการกลับไปแก้ไขโค้ดหรือสีปุ่มในคอมพิวเตอร์ หน้าจอแอปพลิเคชันบนสมาร์ตโฟนจะอัปเดตตามทันที (Real-time)</button>
                    <button onclick="checkAnswer(this, false, 'แอปที่ทดสอบผ่าน Companion เป็นแค่ตัวจำลองครับ พอปิดแอป Companion ตัวแอปที่เราสร้างก็จะหายไป ไม่ได้อยู่อย่างถาวร')" 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 = '#E0F2F1';
        btn.style.borderColor = '#00838F';
        btn.style.color = '#006064';
        btn.style.opacity = '1';
        feedback.style.background = '#E0F2F1';
        feedback.style.color = '#00838F';
        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>