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

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, #8E2DE2 0%, #4A00E0 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 3: เริ่มต้นโปรเจกต์ & การทำงานร่วมกัน</h2>
        <p style="margin: 10px 0 0 0; font-size: 18px; color: #E1BEE7;">สร้างพื้นที่ทำงาน และปลดล็อกพลังแห่งการสร้างเว็บเป็นทีม</p>
    </div>

<div style="margin-bottom: 40px;">
        <h3 style="color: #673AB7; border-left: 5px solid #00E676; padding-left: 15px; font-size: 22px;">1. สร้างพื้นที่ทำงาน (Create Your Site)</h3>
        <p>เริ่มต้นสร้างเว็บไซต์โดยเข้าไปที่ <b>sites.google.com</b> แล้วคลิกที่เครื่องหมาย <b>"+" (ว่าง/Blank)</b> เพื่อสร้างเว็บไซต์ใหม่ สิ่งแรกที่ต้องทำคือ <b>"การตั้งชื่อเอกสารเว็บไซต์"</b> ที่มุมซ้ายบน (เพื่อให้หาง่ายใน Google Drive) และตั้ง <b>"ชื่อเว็บไซต์"</b> ที่จะแสดงผลให้ผู้เข้าชมเห็นครับ</p>
        
        <h3 style="color: #673AB7; border-left: 5px solid #00E676; padding-left: 15px; margin-top:30px; font-size: 22px;">2. พลังแห่งการทำงานร่วมกัน (Co-editing)</h3>
        <p>ความเจ๋งของ Google Sites คือเราไม่ต้องทำเว็บคนเดียว! เราสามารถเชิญเพื่อนในกลุ่มเข้ามาแก้ไขเว็บ <b>"พร้อมกัน ในเวลาเดียวกันได้"</b> (เหมือนตอนทำ Google Docs) </p>
        [Image of Google Sites sharing settings showing how to add editors]
        <div style="background: #F3E5F5; padding: 15px; border-radius: 10px; border: 1px solid #CE93D8; margin-top: 15px;">
            <strong style="color: #6A1B9A;">✨ วิธีเชิญเพื่อนเข้าทีม:</strong>
            <ol style="margin-top: 5px; margin-bottom: 0; padding-left: 20px;">
                <li>คลิกปุ่ม <b>"แชร์กับผู้อื่น (Share with others)"</b> ที่มีรูปคนและเครื่องหมายบวก (มุมขวาบน)</li>
                <li>พิมพ์อีเมลของเพื่อนร่วมทีมลงไป</li>
                <li>ตรวจสอบให้แน่ใจว่าสิทธิ์ของเพื่อนถูกตั้งเป็น <b>"ผู้แก้ไข (Editor)"</b> แล้วกดส่ง!</li>
            </ol>
        </div>

<h3 style="color: #673AB7; border-left: 5px solid #00E676; padding-left: 15px; margin-top:30px; font-size: 22px;">3. กฎเหล็กเมื่อแก้ไขเว็บพร้อมกัน (Collaboration Etiquette)</h3>
        <p>แม้จะทำงานพร้อมกันได้ แต่ถ้าต่างคนต่างแย่งกันพิมพ์ใน "กล่องข้อความเดียวกัน" ข้อมูลอาจจะทับซ้อนและพังได้ครับ! เทคนิคที่ดีคือ <b>"แบ่งหน้ากันทำ"</b> (Divide and Conquer) เช่น <i>"เดี๋ยวเราจัดหน้าแรกนะ ส่วนเธอไปสร้างหน้าประวัติผู้จัดทำได้เลย"</i> แบบนี้งานจะเสร็จไวและไม่ตีกันครับ</p>
    </div>

<div style="background: #E8F5E9; border: 2px dashed #4CAF50; padding: 25px; border-radius: 15px; margin-bottom: 40px;">
        <h3 style="color: #2E7D32; margin-top: 0; display: flex; align-items: center;">
            <span style="font-size: 30px; margin-right: 10px;">🚩</span> ภารกิจ: ประกอบร่างทีมเวิร์ค
        </h3>
        <p>ให้ <b>Project Manager</b> ของแต่ละกลุ่มเป็นคนตั้งต้นสร้างเว็บไซต์ แล้วชวนเพื่อนๆ เข้ามาทำงานครับ</p>

<div style="background: white; padding: 20px; border-radius: 10px; margin-top: 15px; border: 1px solid #A5D6A7;">
            <h4 style="margin-top: 0; color: #333;">🛠 สเต็ปการทำงาน:</h4>
            <ol style="padding-left: 20px;">
                <li style="margin-bottom: 10px;"><b>PM:</b> สร้าง Google Sites ใหม่ และตั้งชื่อเว็บไซต์ตามหัวข้อโครงงาน</li>
                <li style="margin-bottom: 10px;"><b>PM:</b> กดปุ่มแชร์ และเพิ่มอีเมลเพื่อนในกลุ่มทุกคนให้เป็น <b>"ผู้แก้ไข (Editor)"</b></li>
                <li style="margin-bottom: 10px;"><b>ทุกคนในทีม:</b> เข้าอีเมลของตนเอง กดรับคำเชิญ แล้วเข้ามาในเว็บไซต์ให้พร้อมหน้ากัน!</li>
                <li style="margin-bottom: 10px;"><b>ทุกคนในทีม:</b> ไปที่เมนู <b>"หน้าเว็บ (Pages)"</b> แล้วช่วยกันสร้างหน้าย่อยต่างๆ ให้ครบถ้วนตาม <b>Site Map</b> ที่วาดไว้ใน Module 2</li>
            </ol>
        </div>
    </div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background-color: #311B92; color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px;">✍️ แบบทดสอบประเมินตนเอง (Module 3)</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; opacity: 0.8;">ทดสอบความเข้าใจเรื่องการตั้งค่าและการทำงานเป็นทีม</p>
        </div>
        
        <div style="border: 2px solid #311B92; 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: หากต้องการให้เพื่อนในกลุ่มสามารถเข้ามาช่วยตกแต่งและเพิ่มเนื้อหาใน Google Sites ได้ ต้องกำหนดสิทธิ์เพื่อนให้เป็นอะไร?</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;">ก. ผู้มีสิทธิ์อ่าน (Viewer)</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้อง! การตั้งเป็น Editor จะทำให้เพื่อนมีสิทธิ์ในการแก้ไขหน้าเว็บได้เท่าเทียมกับเราเลยครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. ผู้แก้ไข (Editor)</button>
                    <button onclick="checkAnswer(this, false, 'ผู้แสดงความคิดเห็น จะแค่พิมพ์คอมเมนต์ได้ แต่จัดหน้าเว็บไม่ได้ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. ผู้แสดงความคิดเห็น (Commenter)</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, 'ถ้าพิมพ์ในกล่องเดียวกันพร้อมกัน ข้อความอาจจะบัคและบันทึกทับกันจนข้อมูลหายได้ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. ช่วยกันพิมพ์ข้อความในกล่องข้อความ (Text box) เดียวกันพร้อมๆ กันเพื่อให้เสร็จไว</button>
                    <button onclick="checkAnswer(this, false, 'การให้รหัสผ่านอีเมลส่วนตัวกับเพื่อนเป็นเรื่องที่ผิดหลักความปลอดภัย (Cyber Security) อย่างร้ายแรงครับ!')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. ให้ทุกคนใช้รหัสผ่านอีเมลของประธานกลุ่ม เพื่อล็อกอินเข้าเครื่องเดียวกัน</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้อง! การแบ่งหน้าหรือแบ่งส่วนรับผิดชอบชัดเจน (Divide and Conquer) จะช่วยลดปัญหาการทำงานทับซ้อนกันครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. ตกลงแบ่งหน้าที่รับผิดชอบคนละหน้า (Pages) ให้ชัดเจน เพื่อไม่ให้แก้ไขข้อมูลทับซ้อนกัน</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: ในการทำกิจกรรม "สร้างหน้าย่อย" (Pages) นักเรียนควรใช้ข้อมูลจากส่วนใดมาเป็นแนวทางในการสร้าง?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, true, 'ถูกต้อง! Site Map ที่เราวาดไว้ใน Module ที่แล้ว คือพิมพ์เขียวที่เราต้องยึดเป็นหลักในการสร้างหน้าเว็บครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. ดูจากแผนผังเว็บไซต์ (Site Map) ที่กลุ่มของเราได้ออกแบบร่วมกันไว้แล้ว</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></div></div></div>
<div style="background-color: #f8f9fa; border: 1px solid #e9ecef; border-left: 5px solid #0d6efd; padding: 20px; margin-top: 50px; margin-bottom: 20px; border-radius: 8px; font-family: 'Sarabun', sans-serif; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
    <div style="display: flex; align-items: center; margin-bottom: 10px;">
        <span style="font-size: 1.5em; margin-right: 10px;">💡</span>
        <strong style="color: #0d6efd; font-size: 1.2em;">พบข้อผิดพลาดหรือมีข้อเสนอแนะ?</strong>
    </div>
    <p style="color: #495057; font-size: 1em; margin-bottom: 15px; line-height: 1.6;">
        หากนักเรียนหรือคุณครูพบจุดที่ควรแก้ไขในบทเรียน/แบบทดสอบนี้ หรือมีข้อเสนอแนะเพิ่มเติม สามารถแจ้งครูพิสิฐเพื่อนำไปปรับปรุงเนื้อหาให้สมบูรณ์ยิ่งขึ้นได้เลยครับ <br>
        <span style="font-size: 0.9em; color: #6c757d;">(ขอบคุณที่ร่วมเป็นส่วนหนึ่งในการพัฒนาการเรียนรู้ไปด้วยกันครับ)</span>
    </p>
    <a href="mailto:tpisit@wsst.ac.th?subject=แจ้งข้อเสนอแนะ/ข้อผิดพลาด บทเรียน SmartyQuizKids" style="display: inline-block; background-color: #0d6efd; color: #ffffff; padding: 10px 20px; text-decoration: none; border-radius: 5px; font-size: 1em; font-weight: bold;">
        ✉️ ส่งอีเมลแจ้งครูพิสิฐ
    </a>
</div>