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

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, #4A148C 0%, #311B92 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;">💻 หน่วยที่ 1 EP.3: ลงมือสร้างและตรวจสอบ SDLC ขั้นที่ 3-4</h2>
        <p style="margin: 10px 0 0 0; font-size: 22px; color: #D1C4E9; font-weight: bold;">Program Coding & Testing</p>
    </div>

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

<h3 style="color: #311B92; border-left: 5px solid #5E35B1; padding-left: 15px; font-size: 22px; margin-top: 30px;">⌨️ ขั้นตอนที่ 3: การเขียนโปรแกรม (Program Coding)</h3>
        <p>ขั้นตอนนี้คือการนำแบบที่ร่างไว้มาสร้างเป็นแอปพลิเคชัน โดยเลือกเครื่องมือหรือภาษาคอมพิวเตอร์ให้เหมาะสมกับงานและระดับความสามารถของผู้พัฒนาครับ</p>
        
        <div style="display: flex; flex-wrap: wrap; gap: 15px; margin-top: 15px;">
            <div style="flex: 1; min-width: 250px; background: #F3E5F5; padding: 20px; border-radius: 12px; border: 2px solid #AB47BC;">
                <strong style="color: #6A1B9A; font-size: 18px;">🧩 เขียนโค้ดแบบบล็อก (Block Programming)</strong><br>
                <p style="font-size: 14px; margin-top: 10px;">เหมาะสำหรับผู้เริ่มต้น อาศัยการลากวาง (Drag and Drop) บล็อกคำสั่งมาต่อกันคล้ายจิ๊กซอว์ ไม่ต้องพิมพ์โค้ดยาวๆ เช่นโปรแกรม <strong>MIT App Inventor</strong> หรือ <strong>Thunkable</strong></p>
            </div>
            <div style="flex: 1; min-width: 250px; background: #E8EAF6; padding: 20px; border-radius: 12px; border: 2px solid #5C6BC0;">
                <strong style="color: #283593; font-size: 18px;">📜 เขียนโค้ดแบบข้อความ (Text-based Programming)</strong><br>
                <p style="font-size: 14px; margin-top: 10px;">เหมาะสำหรับผู้ที่มีความเชี่ยวชาญ พิมพ์คำสั่งเป็นภาษาคอมพิวเตอร์โดยตรง ซึ่งยืดหยุ่นและทำระบบที่ซับซ้อนได้ดีกว่า เช่น <strong>Python, Java, Swift</strong></p>
            </div>
        </div>

<h3 style="color: #311B92; border-left: 5px solid #5E35B1; padding-left: 15px; font-size: 22px; margin-top: 35px;">🐞 ขั้นตอนที่ 4: การทดสอบและแก้ไขโปรแกรม (Program Testing & Verification)</h3>
        <p>สร้างแอปเสร็จแล้ว อย่าเพิ่งรีบปล่อยให้คนอื่นใช้! เราต้องนำแอปมา <strong>จำลองการใช้งานจริง</strong> เพื่อค้นหาข้อผิดพลาดเสียก่อน</p>
        
        <div style="background: #FFF8E1; padding: 20px; border-radius: 12px; border-left: 6px solid #FFC107; margin-top: 15px;">
            <p style="margin: 0 0 10px 0; font-weight: bold; color: #F57F17;">ทำไมต้องทดสอบโปรแกรมก่อนนำไปใช้งาน?</p>
            <ul style="font-size: 14px; margin-top: 5px; margin-bottom: 0; line-height: 1.8;">
                <li>เพื่อหา <strong>ข้อผิดพลาด (Bug)</strong> เช่น ปุ่มกดไม่ติด แอปเด้งหลุด หรือคำนวณตัวเลขผิด</li>
                <li>เพื่อตรวจสอบว่าแอปทำงานได้ <strong>ตรงตามความต้องการ</strong> ที่เราออกแบบไว้ในขั้นตอนที่ 1 และ 2 หรือไม่</li>
                <li>หากพบข้อผิดพลาด จะได้ <strong>ปรับปรุงแก้ไข (Debug)</strong> ให้เรียบร้อย เพื่อให้ผู้ใช้งานได้สัมผัสประสบการณ์ที่ดีที่สุดและไม่หงุดหงิดเวลาใช้งานจริง</li>
            </ul>
        </div>

</div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background-color: #4A148C; color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px; color: #FFF;">✍️ มินิควิซ ทบทวนความรู้ EP.3</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; color: #D1C4E9;">ทดสอบความเข้าใจเรื่องการเขียนโค้ดและทดสอบแอปพลิเคชัน</p>
        </div>
        
        <div style="border: 2px solid #4A148C; 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: "การเขียนโปรแกรม (Program Coding)" ในวงจร SDLC มีหน้าที่หลักคืออะไร?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'การสำรวจปัญหาคือขั้นตอนที่ 1 (Problem Analysis) ครับ')" 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, 'การวาดหน้าจอคือขั้นตอนที่ 2 (Program Design) ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. การวาดภาพจำลองหน้าจอแอปพลิเคชันลงบนกระดาษ</button>
                    <button onclick="checkAnswer(this, false, 'การจัดทำคู่มือคือขั้นตอนที่ 5 (Program Documentation) ครับ')" 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: #311B92;">ข้อที่ 2: หากนักเรียนเป็นมือใหม่ที่ไม่เคยเรียนภาษาคอมพิวเตอร์มาก่อน เครื่องมือใดเหมาะสมที่สุดในการเริ่มต้นสร้างแอปพลิเคชันบนสมาร์ตโฟน?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'Python เป็นภาษาแบบ Text-based ซึ่งผู้เรียนต้องจำคำสั่งและไวยากรณ์ (Syntax) ครับ อาจจะยากไปสำหรับจุดเริ่มต้น')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. โปรแกรมภาษา Python</button>
                    <button onclick="checkAnswer(this, false, '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, true, 'เยี่ยมมากครับ! MIT App Inventor เป็นการเขียนโปรแกรมแบบบล็อก (Block Programming) อาศัยการลากวาง ทำให้มือใหม่สร้างแอปได้ง่ายมากๆ ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. โปรแกรม MIT App Inventor</button>
                    <button onclick="checkAnswer(this, false, 'Java เป็นภาษาโปรแกรมระดับสูงที่ค่อนข้างซับซ้อน เหมาะสำหรับนักพัฒนามืออาชีพครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. โปรแกรมภาษา Java</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: คำว่า "ข้อผิดพลาด" หรือโปรแกรมทำงานไม่ถูกต้อง ในวงการคอมพิวเตอร์นิยมเรียกสั้นๆ ว่าอะไร?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, true, 'ถูกต้องครับ! บั๊ก (Bug) คือศัพท์ที่ใช้เรียกข้อผิดพลาดในโปรแกรม และการแก้ไขมันจะเรียกว่า ดีบั๊ก (Debug)')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. บั๊ก (Bug)</button>
                    <button onclick="checkAnswer(this, false, 'ไวรัส (Virus) คือโปรแกรมประสงค์ร้ายที่จงใจสร้างมาทำลายข้อมูลครับ ไม่ใช่ข้อผิดพลาดจากการเขียนโค้ดทั่วไป')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. ไวรัส (Virus)</button>
                    <button onclick="checkAnswer(this, false, 'สแปม (Spam) คือข้อความหรืออีเมลขยะที่ส่งมาก่อกวนครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. สแปม (Spam)</button>
                    <button onclick="checkAnswer(this, false, 'แฮกเกอร์ (Hacker) คือบุคคลที่เจาะระบบคอมพิวเตอร์ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. แฮกเกอร์ (Hacker)</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: หากนักเรียนสร้าง "แอปพลิเคชันทายคำศัพท์ภาษาอังกฤษ" เสร็จแล้ว ทำไมจึงต้องนำแอปนี้ไปให้เพื่อนๆ ลองเล่นก่อนนำไปส่งครู?</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, 'เป้าหมายไม่ใช่การแข่งความเร็วครับ แต่เพื่อตรวจสอบความสมบูรณ์ของแอป')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. เพื่อแข่งขันกันว่าโทรศัพท์ของใครเปิดแอปพลิเคชันได้เร็วกว่ากัน</button>
                    <button onclick="checkAnswer(this, true, 'ใช่เลยครับ! การให้เพื่อนลองเล่นคือการ ทดสอบโปรแกรม (Testing) เพื่อดูว่ามีข้อผิดพลาดไหม และเพื่อนๆ พึงพอใจในการใช้งานหรือเปล่า')" 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: 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: หากในระหว่าง "การทดสอบโปรแกรม" (Testing) พบว่าเวลากดปุ่มแล้วแอปพลิเคชันเด้งปิดตัวเองเสมอ ผู้พัฒนาควรทำอย่างไรต่อไปตามหลัก SDLC?</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, 'ถูกต้องครับ! หากพบ Bug ในช่วงทดสอบ จะต้องย้อนกลับไปแก้ไขโค้ดให้เรียบร้อยและทดสอบซ้ำจนกว่าจะมั่นใจว่าแอปทำงานได้อย่างสมบูรณ์')" 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>
    </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>