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

Back

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

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

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

Title

Description

Keyword

Detail

<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 15px rgba(0,0,0,0.08);">
    
    <div style="background: linear-gradient(135deg, #0A192F 0%, #112240 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px; border-bottom: 5px solid #64FFDA;">
        <h2 style="margin: 0; font-size: 30px; font-weight: bold; color: #64FFDA; text-shadow: 0 2px 4px rgba(0,0,0,0.5);">🕵️‍♂️ หน่วยที่ 1: ไขรหัสลับอัลกอริทึม</h2>
        <p style="margin: 10px 0 0 0; font-size: 18px; color: #CCD6F6;">คิดแบบคอมพิวเตอร์ วางแผนให้เป๊ะ ก่อนลงมือโค้ดจริง!</p>
    </div>

<div style="margin-bottom: 40px;">
        <h3 style="color: #112240; border-left: 5px solid #64FFDA; padding-left: 15px; font-size: 22px;">1. คิดแบบคอมพิวเตอร์ (Computational Thinking)</h3>
        <p>นักเรียนเคยสงสัยไหมครับว่า คอมพิวเตอร์ฉลาดขนาดนี้ได้ยังไง? จริงๆ แล้วคอมพิวเตอร์ไม่ได้ฉลาดเลยครับ มันแค่ <b>"ทำตามคำสั่งเก่งมาก"</b> ถ้าเราอยากคุยกับคอมพิวเตอร์ให้รู้เรื่อง เราต้องมีทักษะที่เรียกว่า <b>แนวคิดเชิงคำนวณ (Computational Thinking)</b> ซึ่งก็คือการคิดแก้ปัญหาอย่างเป็นระบบ แยกย่อยปัญหาใหญ่ๆ ให้เป็นปัญหาเล็กๆ เพื่อให้แก้ได้ง่ายขึ้นนั่นเองครับ</p>
        
        <h3 style="color: #112240; border-left: 5px solid #64FFDA; padding-left: 15px; margin-top:30px; font-size: 22px;">2. อัลกอริทึม (Algorithm) คืออะไร?</h3>
        <p><b>อัลกอริทึม</b> ฟังดูเหมือนคำศัพท์มนุษย์ต่างดาวใช่ไหมครับ? แต่จริงๆ แล้วมันคือ <b>"ขั้นตอนวิธี"</b> หรือลำดับการทำงานที่ชัดเจน (เหมือนสูตรทำอาหาร) เช่น อัลกอริทึมการทอดไข่ดาว:</p>
        <div style="background: #F0F4F8; padding: 15px; border-radius: 10px; border: 1px solid #D9E2EC; margin-top: 15px;">
            <ol style="margin: 0; padding-left: 20px; color: #334E68;">
                <li>ตั้งกระทะบนเตา</li>
                <li>เทน้ำมันลงไป รอน้ำมันร้อน</li>
                <li>ตอกไข่ใส่กระทะ</li>
                <li>รอจนไข่สุกตามต้องการ</li>
                <li>ตักไข่ใส่จาน พร้อมเสิร์ฟ!</li>
            </ol>
        </div>
        <p style="margin-top: 15px;">ถ้าเราบอกขั้นตอนชัดเจนแบบนี้ ไม่ว่าใคร (หรือคอมพิวเตอร์) มาทำตาม ก็จะได้ไข่ดาวที่หน้าตาเหมือนกันเป๊ะเลยครับ!</p>

<h3 style="color: #112240; border-left: 5px solid #64FFDA; padding-left: 15px; margin-top:30px; font-size: 22px;">3. เขียนแผนที่ด้วย "รหัสลำลอง (Pseudocode)"</h3>
        <p>ก่อนที่เราจะไปเขียนโปรแกรมด้วยภาษา Scratch เราต้องร่างแผนผังในกระดาษก่อน เราเรียกวิธีนี้ว่า <b>รหัสลำลอง (Pseudocode)</b> คือการเขียนอัลกอริทึมด้วย "ภาษามนุษย์" สั้นๆ กระชับ เพื่อให้คนอ่านเข้าใจว่าโปรแกรมเราจะทำงานสเต็ปไหนบ้าง ก่อนจะเอาไปแปลงเป็นโค้ดคอมพิวเตอร์ครับ</p>
    </div>

<div style="background: #E6FFFA; border: 2px dashed #38B2AC; padding: 25px; border-radius: 15px; margin-bottom: 40px;">
        <h3 style="color: #234E52; margin-top: 0; display: flex; align-items: center;">
            <span style="font-size: 30px; margin-right: 10px;">🧩</span> ภารกิจ: นักสืบวางแผน
        </h3>
        <p>ให้นักเรียนฝึกเขียน "รหัสลำลอง (Pseudocode)" แบบง่ายๆ เพื่อแก้ปัญหาในชีวิตประจำวัน!</p>

<div style="background: white; padding: 20px; border-radius: 10px; margin-top: 15px; border: 1px solid #B2F5EA;">
            <h4 style="margin-top: 0; color: #2C7A7B;">🛠 สเต็ปการทำงาน:</h4>
            <ol style="padding-left: 20px; margin-bottom: 0;">
                <li style="margin-bottom: 10px;">หยิบกระดาษและปากกาขึ้นมา</li>
                <li style="margin-bottom: 10px;">เลือกหัวข้อ 1 อย่าง: <b>"ขั้นตอนการต้มบะหมี่กึ่งสำเร็จรูป"</b> หรือ <b>"ขั้นตอนการเดินทางมาโรงเรียน"</b></li>
                <li style="margin-bottom: 10px;">เขียนลำดับขั้นตอน (อัลกอริทึม) ออกมาเป็นข้อๆ ตั้งแต่เริ่มต้น จนจบการทำงาน</li>
                <li style="margin-bottom: 10px;">ลองอ่านทบทวนดูว่า ถ้าหุ่นยนต์มาทำตามขั้นตอนของเรา หุ่นยนต์จะทำสำเร็จไหม? (มีข้ามขั้นตอนไหนไปหรือเปล่า?)</li>
                <li style="margin-bottom: 0;">ถ่ายรูปผลงาน ส่งให้คุณครูตรวจได้เลย!</li>
            </ol>
        </div>
    </div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background-color: #112240; color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px; color: #64FFDA;">✍️ มินิควิซ ทบทวนความรู้ (หน่วยที่ 1)</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; opacity: 0.8;">มาทดสอบความเป็นนักสืบไซเบอร์กันเถอะ!</p>
        </div>
        
        <div style="border: 2px solid #112240; 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: #112240;">ข้อที่ 1: "อัลกอริทึม (Algorithm)" มีความหมายตรงกับข้อใดมากที่สุด?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'อุปกรณ์คอมพิวเตอร์เราเรียกว่า Hardware ครับผม')" 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;">ข. ลำดับขั้นตอนวิธีในการแก้ปัญหาหรือการทำงานอย่างชัดเจน</button>
                    <button onclick="checkAnswer(this, false, 'ภาษาโปรแกรมมีหลายภาษา เช่น Scratch, Python ครับ แต่อัลกอริทึมคือวิธีการคิดครับ')" 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: #112240;">ข้อที่ 2: ทำไมเราถึงต้องเขียน "รหัสลำลอง (Pseudocode)" ก่อนไปเขียนโปรแกรมจริง?</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;">ก. เพื่อใช้เป็นโครงร่างหรือแผนผังให้เข้าใจง่าย ก่อนนำไปแปลงเป็นโค้ด</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;">ค. เพื่อให้คอมพิวเตอร์ทำงานได้เร็วขึ้นเป็น 2 เท่า</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: #112240;">ข้อที่ 3: ข้อใดคือ "อัลกอริทึม" ของการแปรงฟันที่ถูกต้องและสมเหตุสมผลที่สุด?</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, 'เก่งมากครับ! นี่คือลำดับขั้นตอน (Algorithm) ที่ถูกต้องตามหลักความเป็นจริงเป๊ะเลย!')" 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>
    </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 = '#E6FFFA';
        btn.style.borderColor = '#38B2AC';
        btn.style.color = '#234E52';
        btn.style.opacity = '1';
        feedback.style.background = '#E6FFFA';
        feedback.style.color = '#234E52';
        feedback.innerHTML = "✅ ถูกต้องครับ! " + msg;
    } else {
        btn.style.background = '#FFF5F5';
        btn.style.borderColor = '#F56565';
        btn.style.color = '#742A2A';
        btn.style.opacity = '1';
        feedback.style.background = '#FFF5F5';
        feedback.style.color = '#742A2A';
        feedback.innerHTML = "❌ ยังไม่ใช่นะครับ: " + msg;
    }
}
</script>
<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>