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

Back

รูปสินค้า (850 x 600 / .jpg , .png) *

ประเภทบทเรียน

ประเภทบทเรียนย่อย

Title

Description

Keyword

Detail

<div class="lesson-container" style="font-family: 'Sarabun', 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.05);">
    
    <div style="background: linear-gradient(135deg, #00b09b 0%, #96c93d 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px;">
        <h2 style="margin: 0; font-size: 30px; font-weight: bold; text-shadow: 1px 1px 2px rgba(0,0,0,0.2);">✅ Module 8: ตรวจสอบคุณภาพและทดสอบระบบ (QA)</h2>
        <p style="margin: 10px 0 0 0; font-size: 18px; color: #F1F8E9;">สวมวิญญาณนักสืบ จับผิดจุดบกพร่อง ก่อนปล่อยเว็บไซต์สู่สายตาชาวโลก</p>
    </div>

<div style="margin-bottom: 40px;">
        <h3 style="color: #2E7D32; border-left: 5px solid #00b09b; padding-left: 15px; font-size: 22px;">1. ทำไมต้อง QA (Quality Assurance)?</h3>
        <p>ลองจินตนาการว่าเราสร้างบ้านเสร็จแล้ว แต่ลืมตรวจสอบว่าล็อกประตูได้ไหม หรือน้ำประปาไหลหรือเปล่า... เว็บไซต์ก็เหมือนกันครับ! ก่อนจะเปิดให้คนอื่นเข้าชม เราต้องมั่นใจว่าทุกอย่างทำงานได้ถูกต้อง ไม่มีคำผิด และไม่มีลิงก์เสีย เพราะสิ่งเหล่านี้ส่งผลต่อ "ความน่าเชื่อถือ" ของโครงงานเราครับ</p>
        
        <h3 style="color: #2E7D32; border-left: 5px solid #00b09b; padding-left: 15px; margin-top:30px; font-size: 22px;">2. พลังแห่งปุ่ม "แสดงตัวอย่าง (Preview)"</h3>
        <p>สิ่งที่เราเห็นในหน้าจอแก้ไข (Editor) อาจจะไม่เหมือนกับสิ่งที่ผู้ใช้เห็นจริง 100% ครับ ดังนั้น Google Sites จึงมีปุ่ม <b>"ไอคอนรูปดวงตา (Preview)"</b> ที่แถบด้านบน เพื่อจำลองมุมมองจริง</p>
        
        
        <h3 style="color: #2E7D32; border-left: 5px solid #00b09b; padding-left: 15px; margin-top:30px; font-size: 22px;">3. เช็คความเป๊ะบนทุกอุปกรณ์ (Responsive Design Check)</h3>
        <p>สมัยนี้คนดูเว็บผ่านมือถือมากกว่าคอมพิวเตอร์แล้วนะครับ! โชคดีที่ Google Sites ปรับหน้าจอให้เป็น <b>Responsive</b> (ย่อ-ขยายตามขนาดจอ) โดยอัตโนมัติ แต่เราก็ต้องตรวจสอบอยู่ดี</p>
        <div style="background: #E8F5E9; padding: 15px; border-radius: 10px; border: 1px solid #A5D6A7; margin-top: 15px;">
            <p style="margin: 0;">เมื่ออยู่ในโหมด Preview ให้มองหา <b>แถบเมนูด้านล่างขวา</b> แล้วลองคลิกเปลี่ยนไอคอนไปมาเพื่อดูผลลัพธ์:</p>
            <ul style="margin-top: 10px; padding-left: 20px;">
                <li>📱 <b>โทรศัพท์ (Mobile):</b> เช็คว่าตัวหนังสือเล็กไปไหม? เมนูเปลี่ยนเป็นขีด 3 ขีด (Hamburger menu) หรือยัง?</li>
                <li>📟 <b>แท็บเล็ต (Tablet):</b> การจัดเรียงรูปภาพยังสวยงามอยู่ไหม?</li>
                <li>💻 <b>หน้าจอขนาดใหญ่ (Desktop):</b> ภาพรวมดูโล่งเกินไปหรือเปล่า?</li>
            </ul>
        </div>

<h3 style="color: #2E7D32; border-left: 5px solid #00b09b; padding-left: 15px; margin-top:30px; font-size: 22px;">4. เช็กลิสต์จับผิด (The QA Checklist)</h3>
        <p>ก่อนจะกด Publish ลองไล่เช็คตามรายการนี้ดูนะครับ:</p>
        <ul style="list-style-type: none; padding-left: 0;">
            <li style="background: #FAFAFA; padding: 10px; border-left: 4px solid #FF5722; margin-bottom: 8px;">🔍 <b>คำผิด/การสะกด:</b> อ่านทวนทุกบรรทัด อย่าให้มีเด็ดขาด!</li>
            <li style="background: #FAFAFA; padding: 10px; border-left: 4px solid #FF5722; margin-bottom: 8px;">🔗 <b>ลิงก์ตาย (Broken Links):</b> ลองกดทุกปุ่ม ทุกข้อความที่เป็นลิงก์ ว่ามันพาไปถูกหน้าหรือไม่</li>
            <li style="background: #FAFAFA; padding: 10px; border-left: 4px solid #FF5722; margin-bottom: 8px;">🖼️ <b>รูปภาพ/วิดีโอ:</b> โหลดขึ้นครบทุกรูปไหม? วิดีโอ YouTube เล่นได้ปกติหรือเปล่า?</li>
            <li style="background: #FAFAFA; padding: 10px; border-left: 4px solid #FF5722; margin-bottom: 8px;">🔐 <b>สิทธิ์การเข้าถึง:</b> ไฟล์จาก Drive ที่ฝังไว้ (Module 6) เปิดสิทธิ์เป็นสาธารณะหรือยัง? (ลองใช้โหมด Incognito เช็คดู)</li>
        </ul>
    </div>

<div style="background: #F1F8E9; border: 2px dashed #8BC34A; padding: 25px; border-radius: 15px; margin-bottom: 40px;">
        <h3 style="color: #558B2F; margin-top: 0; display: flex; align-items: center;">
            <span style="font-size: 30px; margin-right: 10px;">🚩</span> ภารกิจ: ปฏิบัติการล่าบัก (Bug Hunt)
        </h3>
        <p>ให้สมาชิกทุกคนในทีม สวมบทบาทเป็น Tester ช่วยกันหาข้อผิดพลาดในเว็บไซต์ของตัวเองครับ</p>

<div style="background: white; padding: 20px; border-radius: 10px; margin-top: 15px; border: 1px solid #C5E1A5;">
            <h4 style="margin-top: 0; color: #333;">🛠 สเต็ปการทำงาน:</h4>
            <ol style="padding-left: 20px;">
                <li style="margin-bottom: 10px;">เปิด Google Sites ของกลุ่ม แล้วกดปุ่ม <b>Preview (รูปดวงตา)</b></li>
                <li style="margin-bottom: 10px;">แบ่งหน้าที่กันทดสอบ:
                    <ul>
                        <li>คนทึ่ 1: เช็คโหมดมือถือ 📱</li>
                        <li>คนที่ 2: เช็คโหมดแท็บเล็ต 📟</li>
                        <li>คนที่ 3: เช็คโหมดเดสก์ท็อป และไล่กดທุกลิงก์ 💻🔗</li>
                    </ul>
                </li>
                <li style="margin-bottom: 10px;">จดบันทึกจุดที่ต้องแก้ไข (เช่น "หน้าเกี่ยวกับเรา: ลิงก์ Facebook กดไม่ได้")</li>
                <li style="margin-bottom: 10px;">กดปิดโหมด Preview แล้วกลับไปช่วยกันแก้ไขให้เรียบร้อย!</li>
            </ol>
        </div>
    </div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background-color: #00796B; color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px;">✍️ แบบทดสอบประเมินตนเอง (Module 8)</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; opacity: 0.8;">ทดสอบความละเอียดรอบคอบก่อนปล่อยงาน</p>
        </div>
        
        <div style="border: 2px solid #00796B; 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: #00796B;">ข้อที่ 1: ประโยชน์ที่สำคัญที่สุดของการกดปุ่ม "แสดงตัวอย่าง (Preview)" รูปดวงตา คืออะไร?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'การบันทึกงาน Google Sites ทำให้อัตโนมัติอยู่แล้วครับ ไม่ต้องกด Preview')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. เพื่อบันทึกข้อมูลล่าสุดลงใน Google Drive</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, 'ปุ่มเผยแพร่ (Publish) เป็นคนละปุ่มกันครับ')" 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: #00796B;">ข้อที่ 2: คำว่า "Responsive Design" ในการสร้างเว็บไซต์ หมายถึงอะไร?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, true, 'ถูกต้อง! Google Sites ทำหน้าที่นี้ให้เราอัตโนมัติ แต่เราต้องคอยตรวจสอบว่ามันจัดระเบียบได้สวยงามในทุกจอหรือไม่')" 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, 'อันนั้นคือ Interactive Design ครับ (เช่น การใช้ Google Forms)')" 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: #00796B;">ข้อที่ 3: ในขั้นตอน QA สิ่งใดต่อไปนี้ที่ไม่จำเป็นต้องตรวจสอบ?</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, 'ถูกต้อง! ประวัติการแก้ไขมีไว้ดูกันเองภายในทีม ไม่ส่งผลต่อหน้าตาเว็บไซต์ที่คนอื่นเห็นครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. ตรวจสอบว่าใครเป็นคนแก้ไขเว็บไซต์คนล่าสุดในประวัติเวอร์ชัน (Version History)</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 = '#E8F5E9';
        btn.style.borderColor = '#4CAF50';
        btn.style.color = '#2E7D32';
        btn.style.opacity = '1';
        feedback.style.background = '#E8F5E9';
        feedback.style.color = '#2E7D32';
        feedback.innerHTML = "✅ ยอดเยี่ยม! " + msg;
    } else {
        btn.style.background = '#FBE9E7';
        btn.style.borderColor = '#FF5722';
        btn.style.color = '#BF360C';
        btn.style.opacity = '1';
        feedback.style.background = '#FBE9E7';
        feedback.style.color = '#BF360C';
        feedback.innerHTML = "❌ ยังไม่ใช่นะครับ: " + msg;
    }
}
</script>