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

Back

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

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

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

Title

Description

Keyword

Detail

<p></p><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 20px rgba(0,0,0,0.1);">
    
    
    <div style="background: linear-gradient(135deg, #1E88E5 0%, #1565C0 50%, #0D47A1 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px; border-bottom: 5px solid #002171;">
        <h2 style="margin: 0; font-size: 26px; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.5); color: #FFF;">🚀 EP.0: ก้าวแรกสู่โลก Scratch</h2>
        <p style="margin: 10px 0 0 0; font-size: 22px; color: #BBDEFB; font-weight: bold;">วิธีสมัครสมาชิกแบบ Step-by-Step!</p>
    </div>

<div style="margin-bottom: 30px;">
        <p style="font-size: 18px; text-align: center;">ก่อนที่เราจะไปสร้างผลงานสุดเจ๋ง เราต้องมี "บัญชีนักประดิษฐ์" เป็นของตัวเองก่อนครับ <br><strong>คลิกที่แต่ละขั้นตอนด้านล่าง</strong> เพื่อดูวิธีสมัครสมาชิกแบบละเอียดได้เลย!</p>
    </div>

<div class="accordion-wrapper" style="display: flex; flex-direction: column; gap: 15px; margin-bottom: 40px;">

<div style="border: 2px solid #3498db; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
            <button onclick="toggleAccordion('step1')" style="width: 100%; text-align: left; background: #ebf5fb; color: #2874a6; padding: 20px; border: none; font-size: 18px; font-weight: bold; font-family: inherit; cursor: pointer; display: flex; justify-content: space-between; align-items: center;">
                <span>📌 ขั้นตอนที่ 1: เข้าสู่เว็บไซต์และเริ่มสมัคร</span>
                <span style="font-size: 24px;">👇</span>
            </button>
            <div id="step1" style="display: none; padding: 20px; background: rgb(255, 255, 255); border-top: 1px solid rgb(214, 234, 248);">
                <p>1. ให้น้องๆ เปิดเว็บบราวเซอร์แล้วเข้าไปที่เว็บไซต์ <b>scratch.mit.edu</b><br>
                2. มองหาเมนูด้านบนขวามือ แล้วคลิกที่ปุ่มคำว่า <b>"Join Scratch"</b> (เข้าร่วม Scratch)</p>
                <div style="text-align: center; margin-top: 15px;">
                    
                <img src=" https://smartyquizkids.com/assets/images/smn/fc221309746013ac554571fbd180e1c820260507105741.png">
                </div>
            </div>
        </div>

<div style="border: 2px solid #f39c12; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
            <button onclick="toggleAccordion('step2')" style="width: 100%; text-align: left; background: #fef5e7; color: #d68910; padding: 20px; border: none; font-size: 18px; font-weight: bold; font-family: inherit; cursor: pointer; display: flex; justify-content: space-between; align-items: center;">
                <span>👤 ขั้นตอนที่ 2: ตั้งชื่อผู้ใช้และรหัสผ่าน</span>
                <span style="font-size: 24px;">👇</span>
            </button>
            <div id="step2" style="display: none; padding: 20px; background: #fff; border-top: 1px solid #fae5d3;">
                <p>1. <b>Create a username:</b> ตั้งชื่อตัวละครของเราในเกม (ห้ามใช้ชื่อจริง-นามสกุลจริงนะ!) ให้ใช้ชื่อเล่นภาษาอังกฤษผสมตัวเลขครับ<br>
                2. <b>Create a password:</b> ตั้งรหัสผ่านลับที่จำได้ง่าย แต่คนอื่นเดายาก และพิมพ์ยืนยันอีกครั้งในช่องด้านล่าง</p>
                <div style="text-align: center; margin-top: 15px;">
                    
                  <img src=" https://smartyquizkids.com/assets/images/smn/e00da03b685a0dd18fb6a08af0923de020260506112646.png">
                </div>
            </div>
        </div>

<div style="border: 2px solid #9b59b6; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
            <button onclick="toggleAccordion('step3')" style="width: 100%; text-align: left; background: #f4ecf7; color: #76448a; padding: 20px; border: none; font-size: 18px; font-weight: bold; font-family: inherit; cursor: pointer; display: flex; justify-content: space-between; align-items: center;">
                <span>🌍 ขั้นตอนที่ 3: ข้อมูลส่วนตัว (ประเทศ, วันเกิด, เพศ)</span>
                <span style="font-size: 24px;">👇</span>
            </button>
            <div id="step3" style="display: none; padding: 20px; background: #fff; border-top: 1px solid #e8daef;">
                <p>1. เลือกประเทศที่อาศัยอยู่ (Thailand) <br>
                2. เลือกเดือนเกิด (Month) และปีเกิดเป็น ค.ศ. (Year)<br>
                3. เลือกเพศของน้องๆ</p>
                <div style="text-align: center; margin-top: 15px;">
                    
                 <img src=" https://smartyquizkids.com/assets/images/smn/bd686fd640be98efaae0091fa301e61320260507110406.png">
                </div>
            </div>
        </div>

<div style="border: 2px solid #27ae60; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
            <button onclick="toggleAccordion('step4')" style="width: 100%; text-align: left; background: #e9f7ef; color: #1e8449; padding: 20px; border: none; font-size: 18px; font-weight: bold; font-family: inherit; cursor: pointer; display: flex; justify-content: space-between; align-items: center;">
                <span>📧 ขั้นตอนที่ 4: ใส่อีเมล และวิธียืนยันตัวตน (สำคัญ!)</span>
                <span style="font-size: 24px;">👇</span>
            </button>
            <div id="step4" style="display: none; padding: 20px; background: #fff; border-top: 1px solid #d4efdf;">
                <p>1. พิมพ์ <b>อีเมลของโรงเรียน (หรืออีเมลผู้ปกครอง)</b> ลงไปให้ถูกต้อง จากนั้นกดปุ่ม Create Your Account<br>
                2. <b>(สำคัญมาก)</b> น้องๆ ต้องเข้าไปที่กล่องข้อความในอีเมลของตัวเอง เปิดอีเมลจากทีมงาน Scratch แล้วกดปุ่ม <b>Confirm my email address</b> ถ้าน้องๆ ไม่กดยืนยัน จะไม่สามารถกดปุ่ม Share เพื่อส่งงานครูได้นะครับ!</p>
                <div style="text-align: center; margin-top: 15px;">
                    
                    <img src=" https://smartyquizkids.com/assets/images/smn/0336dcbab05b9d5ad24f4333c7658a0e20260506114928.png">
                </div>
            </div>
        </div>

</div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%); color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px; color: #FFF;">🧩 มินิควิซ สรุปความรู้ EP.0</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; color: #BBDEFB;">ทดสอบความเข้าใจก่อนเริ่มสมัครสมาชิกจริง!</p>
        </div>
        
        <div style="border: 2px solid #0D47A1; 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: #1565C0;">ข้อที่ 1: กฎข้อใดสำคัญที่สุดในการตั้งชื่อผู้ใช้ (Username) ในโปรแกรม Scratch?</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;">ข. ต้องใช้เลขประจำตัวประชาชน 13 หลัก</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, 'ไม่จำเป็นต้องใช้ตัวพิมพ์ใหญ่ทั้งหมดครับ สามารถใช้ตัวพิมพ์เล็กและตัวเลขผสมกันได้')" 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: #1565C0;">ข้อที่ 2: ทำไมนักเรียนจึงต้องเข้าไปกดยืนยันอีเมล (Confirm my email address) หลังจากสมัครสมาชิกเสร็จ?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, true, 'ถูกต้องครับ! ถ้าไม่ยืนยันอีเมล ปุ่ม Share จะไม่ทำงาน ทำให้นักเรียนส่งงานให้ครูตรวจไม่ได้ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. เพื่อให้สามารถกดปุ่ม Share และส่งผลงานให้ครูตรวจได้</button>
                    <button onclick="checkAnswer(this, false, 'Scratch เป็นโปรแกรมฟรีครับ ไม่เกี่ยวกับการรับไอเทมพิเศษแต่อย่างใด')" 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 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: #1565C0;">ข้อที่ 3: เว็บไซต์อย่างเป็นทางการสำหรับเข้าไปสมัครสมาชิกและสร้างผลงานด้วย Scratch คือเว็บใด?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'เว็บไซต์นี้คือเว็บค้นหาข้อมูลครับ ไม่ใช่หน้าโปรแกรม Scratch')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. www.google.com</button>
                    <button onclick="checkAnswer(this, false, 'นี่คือเว็บไซต์สำหรับดูวิดีโอครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. www.youtube.com</button>
                    <button onclick="checkAnswer(this, true, 'เป๊ะมากครับ! นี่คือที่อยู่เว็บไซต์อย่างเป็นทางการของโปรแกรม Scratch ที่พัฒนาโดยสถาบัน MIT ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. scratch.mit.edu</button>
                    <button onclick="checkAnswer(this, false, 'นี่คือโปรแกรมสร้างงานนำเสนอและกราฟิกครับ (ซึ่งน้องๆ ก็ใช้เก่งอยู่แล้ว!) แต่ไม่ใช่เว็บเขียนโค้ดนะ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. www.canva.com</button>
                </div>
                <div class="feedback" style="margin-top: 15px; font-weight: bold; display: none;"></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>

<script>
// ฟังก์ชันสำหรับกาง/หุบ เนื้อหา
function toggleAccordion(id) {
    var content = document.getElementById(id);
    if (content.style.display === "none") {
        content.style.display = "block";
    } else {
        content.style.display = "none";
    }
}

// ฟังก์ชันสำหรับตรวจคำตอบควิซ
function checkAnswer(btn, isCorrect, msg) {
    const parent = btn.parentElement;
    const feedback = parent.nextElementSibling;
    const buttons = parent.querySelectorAll('button');

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 = '#E3F2FD';
        btn.style.borderColor = '#1976D2';
        btn.style.color = '#0D47A1';
        btn.style.opacity = '1';
        feedback.style.background = '#E3F2FD';
        feedback.style.color = '#0D47A1';
        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><p></p>