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

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, #2C3E50 0%, #FD746C 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.3);">🏆 Module 10: นำเสนอโครงงานเว็บไซต์ (Presentation)</h2>
        <p style="margin: 10px 0 0 0; font-size: 18px; color: #FFECB3;">บทสรุปแห่งความสำเร็จ: เล่าเรื่องราว เบื้องหลัง และคุณค่าของผลงาน</p>
    </div>

<div style="margin-bottom: 40px;">
        <h3 style="color: #2C3E50; border-left: 5px solid #FD746C; padding-left: 15px; font-size: 22px;">1. ศิลปะการ "ขายไอเดีย" (The Art of Pitching)</h3>
        <p>การนำเสนอโครงงานไม่ใช่แค่การเปิดเว็บไซต์ให้ครูดูแล้วจบไป แต่คือการ <b>"เล่าเรื่องราว (Storytelling)"</b> ครับ เริ่มต้นให้น่าสนใจ (Hook) บอกปัญหาที่เจอ และโชว์ว่าเว็บไซต์ของเราเข้าไปช่วยแก้ปัญหานั้นได้อย่างไร ที่สำคัญคือ <b>"ห้ามอ่านตามสไลด์เด็ดขาด!"</b> ให้พูดด้วยความมั่นใจและเป็นธรรมชาติ</p>
        
        <h3 style="color: #2C3E50; border-left: 5px solid #FD746C; padding-left: 15px; margin-top:30px; font-size: 22px;">2. มากกว่าแค่โชว์เว็บ คือการโชว์ "กระบวนการ" (Process)</h3>
        <p>สิ่งที่ทำให้โครงงานนี้น่าประทับใจ ไม่ใช่แค่หน้าเว็บที่สวยงาม แต่คือ <b>"เบื้องหลังการทำงาน"</b> ที่ผ่านมาครับ ในการนำเสนอ ควรพูดถึงสิ่งเหล่านี้ด้วย:</p>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin-top: 15px;">
            <div style="background: #ECEFF1; padding: 15px; border-radius: 10px; border: 1px solid #CFD8DC;">
                <strong style="color: #37474F;">🗺️ Site Map & UX</strong>
                <p style="font-size: 14px; margin-top: 5px;">โชว์แผนผังที่เคยร่างไว้ อธิบายว่าทำไมถึงจัดวางเมนูแบบนี้ ทำไมถึงคิดว่าแบบนี้ผู้ใช้จะใช้งานง่าย</p>
            </div>
            <div style="background: #FFF3E0; padding: 15px; border-radius: 10px; border: 1px solid #FFE0B2;">
                <strong style="color: #E65100;">🎨 Design Choices</strong>
                <p style="font-size: 14px; margin-top: 5px;">อธิบายเหตุผลในการเลือกใช้ "ธีมสี" และ "ฟอนต์" ว่าสื่อความหมายตรงกับหัวข้อโครงงานอย่างไร</p>
            </div>
        </div>

<h3 style="color: #2C3E50; border-left: 5px solid #FD746C; padding-left: 15px; margin-top:30px; font-size: 22px;">3. บทสะท้อนการเรียนรู้ (Reflection & Feedback)</h3>
        <p>ช่วงสุดท้ายของการนำเสนอ คือการสรุปว่า <b>"ทีมของเราได้เรียนรู้อะไรบ้าง?"</b> เจอปัญหาอะไรและแก้อย่างไร และที่สำคัญคือการเปิดใจรับฟังคำแนะนำ (Feedback) จากครูและเพื่อนๆ เพื่อนำไปพัฒนาตัวเองต่อไปในอนาคตครับ</p>
    </div>

<div style="background: #FFF8E1; border: 2px dashed #F9A825; 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> ภารกิจสุดท้าย: เตรียมขึ้นเวที!
        </h3>
        <p>ให้เวลาทีม 20 นาที เตรียมสไลด์นำเสนอ (Presentation Deck) ประมาณ 5-7 หน้า โดยมีหัวข้อดังนี้:</p>

<div style="background: white; padding: 20px; border-radius: 10px; margin-top: 15px; border: 1px solid #FFE082;">
            <h4 style="margin-top: 0; color: #333;">🛠 โครงสร้างการนำเสนอ:</h4>
            <ol style="padding-left: 20px;">
                <li><b>หน้าแนะนำ:</b> ชื่อกลุ่ม, ชื่อสมาชิก, หัวข้อโครงงาน</li>
                <li><b>ที่มาและความสำคัญ:</b> ทำไมถึงทำเรื่องนี้? ปัญหาคืออะไร?</li>
                <li><b>กระบวนการออกแบบ:</b> โชว์ Site Map และอธิบายแนวคิดการออกแบบ (Theme/Colors)</li>
                <li><b>สาธิตผลงาน (Demo):</b> เปิดเว็บไซต์จริง และพาชมฟีเจอร์เด่นๆ (เช่น หน้าบทความ, Google Forms, แผนที่)</li>
                <li><b>สรุปและสะท้อนผล:</b> สิ่งที่ได้เรียนรู้, ปัญหาที่พบ, และการทำงานร่วมกันในทีม</li>
            </ol>
            <p style="text-align: center; margin-top: 20px; font-weight: bold; color: #E65100;">💡 เคล็ดลับ: ซ้อมพูดให้คล่อง แบ่งบทกันให้ชัดเจน และรักษาเวลา!</p>
        </div>
    </div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background-color: #37474F; color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px;">✍️ แบบทดสอบประเมินตนเอง (Module 10)</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; opacity: 0.8;">ทดสอบความพร้อมก่อนการนำเสนอจริง</p>
        </div>
        
        <div style="border: 2px solid #37474F; 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: #37474F;">ข้อที่ 1: สิ่งสำคัญที่สุดที่ควรทำในการนำเสนอโครงงาน (Project Presentation) คือข้อใด?</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, 'ถูกต้อง! การนำเสนอที่ดีคือการเล่าเรื่องราว ที่มา ปัญหา และกระบวนการทำงาน ไม่ใช่แค่การเปิดเว็บให้ดูเฉยๆ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. เล่าเรื่องราว (Storytelling) อธิบายที่มา ปัญหา และกระบวนการทำงานเบื้องหลัง</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: #37474F;">ข้อที่ 2: ทำไมเราจึงควรนำ "Site Map (แผนผังเว็บไซต์)" ที่เคยร่างไว้มาแสดงในการนำเสนอด้วย?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, true, 'ถูกต้อง! การโชว์ Site Map แสดงให้เห็นว่าเรามีการวางแผนอย่างเป็นระบบ ไม่ได้ทำแบบสะเปะสะปะ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. เพื่อแสดงให้เห็นถึงกระบวนการวางแผนและการออกแบบโครงสร้างที่เป็นระบบ</button>
                    <button onclick="checkAnswer(this, false, 'Site Map มีไว้โชว์โครงสร้าง ไม่ใช่เพื่อความสวยงามครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. เพื่อทำให้สไลด์ดูสวยงามขึ้น</button>
                    <button onclick="checkAnswer(this, false, 'การโชว์ Site Map ไม่ได้เกี่ยวกับการป้องกันการลอกเลียนแบบครับ')" 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: #37474F;">ข้อที่ 3: ทัศนคติที่ดีที่สุดเมื่อได้รับคำแนะนำ (Feedback) จากครูหรือเพื่อนหลังการนำเสนอ คือข้อใด?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'Feedback ไม่ใช่การจับผิดครับ แต่เป็นการช่วยมองในมุมที่เราอาจมองข้ามไป')" 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, 'ถูกต้อง! Feedback คือของขวัญที่ช่วยให้เรารู้จุดบกพร่องและนำไปพัฒนาตนเองให้เก่งขึ้นในอนาคตครับ')" 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 = '#FFF8E1';
        btn.style.borderColor = '#F9A825';
        btn.style.color = '#E65100';
        btn.style.opacity = '1';
        feedback.style.background = '#FFF8E1';
        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>