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

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, #FFB75E 0%, #ED8F03 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 9: เผยแพร่ผลงาน (Publishing)</h2>
        <p style="margin: 10px 0 0 0; font-size: 18px; color: #FFF8E1;">ตัดริบบิ้นเปิดตัวเว็บไซต์ และส่งต่อความรู้สู่สายตาชาวโลก</p>
    </div>

<div style="margin-bottom: 40px;">
        <h3 style="color: #E65100; border-left: 5px solid #FFB75E; padding-left: 15px; font-size: 22px;">1. ปุ่ม "เผยแพร่ (Publish)" คือกุญแจสำคัญ</h3>
        <p>ตราบใดที่เรายังไม่กดปุ่ม <b>"เผยแพร่" (สีน้ำเงินมุมขวาบน)</b> เว็บไซต์ของเราก็จะยังเป็นแค่ไฟล์ฉบับร่าง (Draft) ที่มีแค่คนในทีมเท่านั้นที่เห็นครับ การกดปุ่มนี้คือการนำข้อมูลขึ้นเซิร์ฟเวอร์เพื่อให้คนทั้งโลกสามารถเข้าถึงได้</p>
        
        <h3 style="color: #E65100; border-left: 5px solid #FFB75E; padding-left: 15px; margin-top:30px; font-size: 22px;">2. ศิลปะการตั้งชื่อ URL (ที่อยู่เว็บ)</h3>
        <p>เมื่อกดเผยแพร่ครั้งแรก ระบบจะให้เราตั้งชื่อ <b>ที่อยู่เว็บ (Web Address)</b> หรือ URL กฎการตั้งชื่อที่ดีคือ: <b>"สั้น จำง่าย และสื่อความหมาย"</b></p>
        
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin-top: 15px;">
            <div style="background: #FFF3E0; padding: 15px; border-radius: 10px; border: 1px solid #FFE0B2;">
                <strong style="color: #EF6C00;">✅ ตัวอย่างที่ดี</strong>
                <p style="font-size: 14px; margin-top: 5px;"><code>science-fun</code> หรือ <code>history-m3</code> (ใช้ภาษาอังกฤษ ตัวเลข และเครื่องหมายขีดกลางได้)</p>
            </div>
            <div style="background: #FFEBEE; padding: 15px; border-radius: 10px; border: 1px solid #FFCDD2;">
                <strong style="color: #C62828;">❌ ตัวอย่างที่ไม่ดี</strong>
                <p style="font-size: 14px; margin-top: 5px;"><code>my-website-group5-12345</code> (ยาวเกินไปและไม่บอกว่าเว็บเกี่ยวกับอะไร)</p>
            </div>
        </div>

<h3 style="color: #E65100; border-left: 5px solid #FFB75E; padding-left: 15px; margin-top:30px; font-size: 22px;">3. สิทธิ์การเข้าชม (Who can view my site)</h3>
        <p>ในหน้าต่างเผยแพร่ เราสามารถกำหนดได้ว่าใครสามารถดูเว็บเราได้บ้าง หากต้องการให้คนทั่วไปค้นหาและเข้าชมได้ ให้ตั้งค่าเป็น <b>"สาธารณะ (Public)"</b> หรือ <b>"ทุกคนในอินเทอร์เน็ตค้นหาและเปิดได้"</b> ครับ</p>

<h3 style="color: #E65100; border-left: 5px solid #FFB75E; padding-left: 15px; margin-top:30px; font-size: 22px;">4. Peer Review (ให้เพื่อนช่วยรีวิว)</h3>
        <p>คนทำเว็บมักจะมองไม่เห็นจุดบกพร่องของตัวเองครับ! ก่อนที่จะส่งงานครู เราควรคัดลอกลิงก์เว็บไซต์ที่เผยแพร่แล้ว (ไอคอนรูปคลิปหนีบกระดาษ) ส่งให้เพื่อนกลุ่มอื่นช่วยทดลองใช้งานและให้คำติชม (Feedback) เพื่อนำมาปรับปรุงให้สมบูรณ์ที่สุด</p>
    </div>

<div style="background: #FFFDE7; border: 2px dashed #FBC02D; padding: 25px; border-radius: 15px; margin-bottom: 40px;">
        <h3 style="color: #F57F17; margin-top: 0; display: flex; align-items: center;">
            <span style="font-size: 30px; margin-right: 10px;">🚩</span> ภารกิจ: ลอนช์โปรเจกต์ (Launch!)
        </h3>
        <p>วินาทีประวัติศาสตร์มาถึงแล้วครับ ให้ <b>Project Manager</b> เป็นคนกดปุ่มปล่อยยาน!</p>

<div style="background: white; padding: 20px; border-radius: 10px; margin-top: 15px; border: 1px solid #FFF59D;">
            <h4 style="margin-top: 0; color: #333;">🛠 สเต็ปการทำงาน:</h4>
            <ol style="padding-left: 20px;">
                <li style="margin-bottom: 10px;">คลิกปุ่ม <b>"เผยแพร่ (Publish)"</b> ที่มุมขวาบน</li>
                <li style="margin-bottom: 10px;">ตั้งชื่อ <b>ที่อยู่เว็บ (Web Address)</b> ให้จำง่ายและสอดคล้องกับหัวข้อโครงงาน</li>
                <li style="margin-bottom: 10px;">ตรวจสอบให้แน่ใจว่าสิทธิ์การเข้าชมเปิดเป็นสาธารณะ แล้วกด <b>"เผยแพร่"</b></li>
                <li style="margin-bottom: 10px;">คลิกไอคอน <b>"คัดลอกลิงก์เว็บไซต์ที่เผยแพร่ (Copy published site link)"</b> นำไปส่งให้เพื่อนต่างกลุ่มอย่างน้อย 2 คนช่วยรีวิว</li>
            </ol>
        </div>
    </div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background-color: #E65100; color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px;">✍️ แบบทดสอบประเมินตนเอง (Module 9)</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; opacity: 0.9;">ทดสอบความเข้าใจเรื่องการเผยแพร่และการตั้งชื่อ URL</p>
        </div>
        
        <div style="border: 2px solid #E65100; 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: #E65100;">ข้อที่ 1: หลังจากที่กดปุ่ม "เผยแพร่ (Publish)" ไปแล้ว หากนักเรียนเข้ามาแก้ไขคำผิดในหน้าแก้ไข (Editor) ผู้เข้าชมเว็บไซต์จะเห็นคำที่แก้ไขนั้นเมื่อใด?</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, 'ถูกต้อง! ทุกครั้งที่มีการแก้ไขและอยากให้หน้าเว็บจริงอัปเดตตาม เราจะต้องกดปุ่ม เผยแพร่ (Publish) ซ้ำอีกครั้งเสมอครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. จะเห็นก็ต่อเมื่อนักเรียนกดปุ่ม "เผยแพร่ (Publish)" ซ้ำอีกครั้ง เพื่ออัปเดตข้อมูล</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: #E65100;">ข้อที่ 2: หากโครงงานเว็บไซต์ของกลุ่มนักเรียนคือเรื่อง "ระบบสุริยะจักรวาล" ข้อใดคือการตั้งชื่อที่อยู่เว็บ (URL) ที่เหมาะสมที่สุด?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, true, 'ถูกต้อง! เป็นชื่อที่สั้น จำง่าย เป็นภาษาอังกฤษ และสื่อถึงเนื้อหาของเว็บไซต์ได้ชัดเจนที่สุดครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. solar-system</button>
                    <button onclick="checkAnswer(this, false, 'Google Sites ไม่อนุญาตให้ใช้ภาษาไทยและเว้นวรรคในการตั้งชื่อ URL ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. ระบบสุริยะ ของฉัน</button>
                    <button onclick="checkAnswer(this, false, 'ชื่อนี้ยาวเกินไป และตัวเลข 123456 ไม่ได้มีความหมายอะไร ทำให้จดจำยากครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. science-project-group-one-123456</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: #E65100;">ข้อที่ 3: กิจกรรม "Peer Review" หรือการให้เพื่อนกลุ่มอื่นช่วยทดลองเข้าเว็บไซต์ก่อนส่งงานครู มีจุดประสงค์หลักเพื่ออะไร?</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, 'ถูกต้อง! คนทำมักจะมองไม่เห็นจุดบกพร่องของตัวเอง การให้เพื่อนช่วยดูจะทำให้เราได้ Feedback ที่มีค่ากลับมาแก้ไขงานให้สมบูรณ์ขึ้นครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. เพื่อรับฟังความคิดเห็น (Feedback) จากผู้ใช้งานจริง นำมาปรับปรุงเว็บไซต์ให้สมบูรณ์ขึ้น</button>
                    <button onclick="checkAnswer(this, false, 'ยอดวิวไม่ได้มีผลต่อคะแนนเสมอไปครับ คุณภาพของเนื้อหาและการออกแบบสำคัญกว่า')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. เพื่อปั่นยอดผู้เข้าชม (Views) ให้เว็บไซต์ของตัวเองดูดัง</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 = '#FFF3E0';
        btn.style.borderColor = '#FF9800';
        btn.style.color = '#E65100';
        btn.style.opacity = '1';
        feedback.style.background = '#FFF3E0';
        feedback.style.color = '#E65100';
        feedback.innerHTML = "✅ ยอดเยี่ยม! " + msg;
    } else {
        btn.style.background = '#FFEBEE';
        btn.style.borderColor = '#F44336';
        btn.style.color = '#C62828';
        btn.style.opacity = '1';
        feedback.style.background = '#FFEBEE';
        feedback.style.color = '#C62828';
        feedback.innerHTML = "❌ ยังไม่ใช่นะครับ: " + msg;
    }
}
</script>