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

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, #0277BD 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.2: เนรมิตหน้าจอด้วย Designer</h2>
        <p style="margin: 10px 0 0 0; font-size: 22px; color: #B3E5FC; font-weight: bold;">UI & Layout (แอปพลิเคชันเครื่องคิดเลข)</p>
    </div>

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

<h3 style="color: #01579B; border-left: 5px solid #0288D1; padding-left: 15px; font-size: 22px; margin-top: 30px;">🔍 1. รู้จัก 4 ส่วนประกอบสำคัญของหน้าจอ Designer</h3>
        <p>ก่อนจะเริ่มลากปุ่ม เราต้องรู้จักเครื่องมือรอบตัวเราให้ครบก่อนครับ หน้าจอ Designer แบ่งออกเป็น 4 ส่วนหลักๆ ได้แก่:</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. Palette (กล่องเครื่องมือ)</strong><br>
                <p style="font-size: 14px; margin-top: 5px; margin-bottom: 0;">อยู่ซ้ายสุด เป็นที่เก็บชิ้นส่วนทั้งหมดที่เราใช้สร้างแอป เช่น ปุ่มกด (Button), กล่องข้อความ (TextBox) หรือรูปภาพ</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. Viewer (หน้าจอจำลอง)</strong><br>
                <p style="font-size: 14px; margin-top: 5px; margin-bottom: 0;">อยู่ตรงกลาง คือหน้าจอสมาร์ตโฟนจำลอง เป็นพื้นที่ว่างๆ ที่เราจะใช้ลากเครื่องมือจาก Palette มาวาง</p>
            </div>
        </div>
        <div style="display: flex; flex-wrap: wrap; gap: 15px; margin-top: 15px;">
            <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. Components (รายการชิ้นส่วน)</strong><br>
                <p style="font-size: 14px; margin-top: 5px; margin-bottom: 0;">ถัดมาทางขวา จะแสดงรายชื่อชิ้นส่วนที่เราลากมาวางไว้บนหน้าจอทั้งหมด ช่วยให้เราไม่สับสนเวลาชิ้นส่วนเยอะๆ</p>
            </div>
            <div style="flex: 1; min-width: 200px; background: #F3E5F5; padding: 15px; border-radius: 12px; border: 2px solid #AB47BC;">
                <strong style="color: #6A1B9A; font-size: 16px;">4. Properties (แผงคุณสมบัติ)</strong><br>
                <p style="font-size: 14px; margin-top: 5px; margin-bottom: 0;">อยู่ขวาสุด ใช้ปรับแต่งชิ้นส่วนที่เราคลิกเลือก เช่น เปลี่ยนสีปุ่ม เปลี่ยนข้อความ หรือปรับขนาดตัวอักษร</p>
            </div>
        </div>

<h3 style="color: #01579B; border-left: 5px solid #0288D1; padding-left: 15px; font-size: 22px; margin-top: 35px;">📐 2. การจัดวาง (Layout) ด้วย HorizontalArrangement</h3>
        <p>ใน MIT App Inventor เมื่อเราลากปุ่มมาวางบนหน้าจอ <strong>ชิ้นส่วนต่างๆ จะถูกบังคับให้เรียงต่อกันจากบนลงล่าง (แนวตั้ง) เสมอ!</strong> แล้วถ้าเราอยากสร้างปุ่มเครื่องคิดเลขที่ต้องมีปุ่มบวก ลบ คูณ หาร วาง <strong>"เรียงติดกันในแนวนอน"</strong> จะทำอย่างไร?</p>
        
        <div style="background: #FAFAFA; padding: 20px; border-radius: 12px; border-left: 6px solid #FF5722; margin-top: 10px;">
            <p style="margin: 0; font-size: 15px;"><strong>💡 คำตอบคือ ต้องใช้เครื่องมือจัดการ Layout ครับ!</strong></p>
            <ul style="margin-top: 5px; margin-bottom: 0; font-size: 14px; color: #333;">
                <li>ให้ไปที่ Palette เลือกเมนูย่อยที่ชื่อว่า <strong>Layout</strong></li>
                <li>คลิกลากเครื่องมือ <strong>HorizontalArrangement (กล่องจัดเรียงแนวนอน)</strong> มาวางบนหน้าจอ</li>
                <li>จากนั้น เมื่อเราลากปุ่ม (Button) เข้าไปใส่ในกล่องนี้ ปุ่มต่างๆ ก็จะสามารถวางเรียงต่อกันในแนวนอน ซ้ายไปขวา ได้อย่างสวยงามครับ!</li>
            </ul>
        </div>

<h3 style="color: #01579B; border-left: 5px solid #0288D1; padding-left: 15px; font-size: 22px; margin-top: 35px;">🛠️ 3. ลงมือออกแบบแอป "เครื่องคิดเลข (Calculator)"</h3>
        <p>มาจัดโครงสร้างหน้าจอแอปพลิเคชันเครื่องคิดเลขอย่างง่ายด้วยชิ้นส่วน (Component) พื้นฐานกันครับ!</p>
        
        <div style="background: #263238; color: #ECEFF1; padding: 20px; border-radius: 12px; margin-top: 15px; line-height: 1.8;">
            <p style="margin: 0 0 10px 0; color: #4DB6AC; font-weight: bold; font-size: 16px;">📝 ขั้นตอนการออกแบบหน้าจอ (UI Design Steps):</p>
            <ol style="margin: 0; padding-left: 25px; font-size: 14px;">
                <li><strong>ช่องแสดงตัวเลข:</strong> ไปที่เมนู User Interface ลาก <strong>TextBox</strong> มาวางด้านบนสุด เพื่อใช้เป็นช่องสำหรับกรอกตัวเลขและแสดงผลลัพธ์การคำนวณ</li>
                <li><strong>จัดเตรียมพื้นที่แนวนอน:</strong> ลาก <strong>HorizontalArrangement</strong> (จากเมนู Layout) มาวางต่อด้านล่าง TextBox</li>
                <li><strong>สร้างปุ่มเครื่องหมาย:</strong> ลาก <strong>Button</strong> จำนวน 4 ปุ่ม เข้าไปใส่เรียงกันในกล่อง HorizontalArrangement</li>
                <li><strong>ตกแต่งปุ่มให้เป็นเครื่องหมายคณิตศาสตร์:</strong> คลิกเลือกปุ่มทีละอัน แล้วไปที่แผง <strong>Properties</strong> เปลี่ยนข้อความในช่อง <code>Text</code> ให้เป็นเครื่องหมาย <strong>+</strong>, <strong>-</strong>, <strong>*</strong>, <strong>/</strong> ตามลำดับ (สามารถปรับขนาดฟอนต์ให้ใหญ่ขึ้นได้ที่ช่อง <code>FontSize</code>)</li>
            </ol>
        </div>

</div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background-color: #0277BD; color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px; color: #FFF;">✍️ มินิควิซ ทบทวนความรู้ EP.2</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; color: #B3E5FC;">ทดสอบความเข้าใจเรื่องส่วนประกอบหน้าจอและการจัดวางเลย์เอาต์</p>
        </div>
        
        <div style="border: 2px solid #0277BD; 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: #01579B;">ข้อที่ 1: ในหน้าจอการทำงานของ MIT App Inventor เครื่องมือที่ใช้สำหรับ "หยิบหรือลาก" ปุ่มกด (Button) และช่องข้อความ (TextBox) ออกมาใช้งาน มีชื่อเรียกว่าอะไร?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'Viewer คือหน้าจอโทรศัพท์จำลองตรงกลางครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. Viewer</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้องครับ! Palette (กล่องเครื่องมือ) ที่อยู่ฝั่งซ้ายสุด คือแหล่งรวมชิ้นส่วน (Component) ทั้งหมดที่เราสามารถลากมาสร้างแอปได้')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. Palette</button>
                    <button onclick="checkAnswer(this, false, 'Properties คือแผงสำหรับปรับแต่งสี ขนาด หรือข้อความครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. Properties</button>
                    <button onclick="checkAnswer(this, false, 'Components คือแผงที่แสดงรายชื่อชิ้นส่วนที่เราลากมาวางไว้แล้วครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. Components</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: #01579B;">ข้อที่ 2: หากนักเรียนนำปุ่ม (Button) มาวางบนหน้าจอ แล้วต้องการ "เปลี่ยนข้อความบนปุ่มจากคำว่า Text for Button1 ให้กลายเป็นเครื่องหมายบวก (+)" นักเรียนต้องไปแก้ไขที่ส่วนใด?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'Blocks คือหน้าต่างสำหรับต่อบล็อกคำสั่งครับ ไม่ใช่เปลี่ยนข้อความบนหน้าจอ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. หน้าต่าง Blocks</button>
                    <button onclick="checkAnswer(this, false, 'Palette คือกล่องสำหรับลากเครื่องมือออกมาครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. แผง Palette</button>
                    <button onclick="checkAnswer(this, true, 'เยี่ยมมากครับ! แผง Properties (คุณสมบัติ) ทางขวามือ มีไว้สำหรับปรับแต่งรายละเอียดของชิ้นส่วนที่เราคลิกเลือก เช่น เปลี่ยนข้อความในช่อง Text เปลี่ยนสี หรือปรับขนาดฟอนต์')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. แผง Properties</button>
                    <button onclick="checkAnswer(this, false, 'Viewer เป็นแค่หน้าจอแสดงผลให้เราดูครับ แก้ไขข้อความตรงๆ ในนั้นไม่ได้')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. หน้าจอ Viewer</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: #01579B;">ข้อที่ 3: โดยปกติแล้ว เมื่อเราลากชิ้นส่วนหลายๆ ชิ้นมาวางบนหน้าจอจำลอง (Viewer) ของ MIT App Inventor ชิ้นส่วนเหล่านั้นจะถูกจัดเรียงในลักษณะใดโดยอัตโนมัติ?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'ระบบจะไม่ได้เรียงให้แนวนอนโดยอัตโนมัติครับ ถ้าต้องการแบบนั้นต้องใช้ Layout ช่วย')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. เรียงต่อกันจากซ้ายไปขวา (แนวนอน)</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้องครับ! นี่คือค่าเริ่มต้น (Default) ของระบบ หากลากมาวางเฉยๆ ชิ้นส่วนต่างๆ จะเรียงต่อกันเป็นแถวลงมาเรื่อยๆ จากบนลงล่างครับ')" 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: #01579B;">ข้อที่ 4: จากปัญหาในข้อ 3 หากนักเรียนต้องการให้ปุ่ม + และปุ่ม - "วางเรียงต่อกันในแนวนอน (ซ้ายไปขวา)" นักเรียนจะต้องใช้งานเครื่องมือใดจากหมวด Layout เข้ามาช่วย?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, true, 'ใช่เลยครับ! HorizontalArrangement (การจัดเรียงแนวนอน) เป็นกล่องตัวช่วยพิเศษ ที่เมื่อเราเอาปุ่มไปใส่ไว้ข้างใน ปุ่มเหล่านั้นจะเรียงต่อกันแบบแนวนอนทันที')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. เครื่องมือ HorizontalArrangement</button>
                    <button onclick="checkAnswer(this, false, 'VerticalArrangement ใช้สำหรับการจัดเรียงเป็นแนวตั้งครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. เครื่องมือ VerticalArrangement</button>
                    <button onclick="checkAnswer(this, false, 'TextBox คือช่องสำหรับกรอกข้อความ ไม่ใช่เครื่องมือจัดเลย์เอาต์ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. เครื่องมือ TextBox</button>
                    <button onclick="checkAnswer(this, false, 'Label คือป้ายสำหรับแสดงข้อความครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. เครื่องมือ Label</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: #01579B;">ข้อที่ 5: ในการสร้างหน้าจอแอปพลิเคชันเครื่องคิดเลข ชิ้นส่วน (Component) ใดมีความเหมาะสมที่สุดในการใช้เป็น "พื้นที่แสดงผลลัพธ์การคำนวณ" และ "ให้ผู้ใช้พิมพ์ตัวเลข"?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'Button ใช้สำหรับคลิกสั่งงานครับ พิมพ์ตัวเลขไม่ได้')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. Button (ปุ่มกด)</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้องครับ! TextBox ทำหน้าที่เป็นช่องที่ให้ผู้ใช้พิมพ์ข้อความ (Input) และเราสามารถสั่งให้แอปแสดงผลลัพธ์การคำนวณ (Output) ลงไปในช่องนี้ได้เช่นกัน')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. TextBox (ช่องรับข้อความ)</button>
                    <button onclick="checkAnswer(this, false, 'Image ใช้สำหรับแสดงรูปภาพตกแต่งแอปครับ ไม่เกี่ยวกับการคำนวณ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. Image (รูปภาพ)</button>
                    <button onclick="checkAnswer(this, false, 'Sound ใช้สำหรับเล่นไฟล์เสียงครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. Sound (เสียง)</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 = '#0288D1';
        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>