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

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 20px rgba(0,0,0,0.1);">
    
    <div style="background: linear-gradient(135deg, #43A047 0%, #2E7D32 50%, #1B5E20 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px; border-bottom: 5px solid #145A32;">
        <h2 style="margin: 0; font-size: 26px; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.5); color: #FFF;">📊 หน่วยที่ 4 EP.1: รู้จัก "ข้อมูล" และการรวบรวมข้อมูล</h2>
        <p style="margin: 10px 0 0 0; font-size: 22px; color: #C8E6C9; font-weight: bold;">จุดเริ่มต้นของการนำเสนอผลงาน!</p>
    </div>

<div style="margin-bottom: 40px;">
        
        <p style="font-size: 18px;">ก่อนที่เราจะสร้างป้ายประกาศสวยๆ หรือทำสไลด์นำเสนอหน้าชั้นเรียน เราจำเป็นต้องมี <strong>"วัตถุดิบ"</strong> เสียก่อนครับ วัตถุดิบที่ว่านั้นก็คือ <strong>ข้อมูล</strong> นั่นเอง วันนี้เราจะมาสวมบทบาทเป็นนักสำรวจตัวจิ๋วกันครับ!</p>

<h3 style="color: #2E7D32; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 30px;">🔍 1. "ข้อมูล" กับ "สารสนเทศ" ต่างกันอย่างไร?</h3>
        <p>หลายคนอาจจะเคยได้ยินสองคำนี้ มาดูกันว่ามันต่างกันตรงไหนครับ:</p>
        
        <div style="display: flex; flex-direction: column; gap: 15px; margin-top: 15px;">
            <div style="background: #E8F5E9; padding: 20px; border-radius: 12px; border-left: 5px solid #4CAF50;">
                <strong style="color: #2E7D32; font-size: 18px;">📝 ข้อมูล (Data)</strong>
                <p style="font-size: 15px; margin-top: 5px; margin-bottom: 0;">คือ ข้อเท็จจริงหรือเหตุการณ์ที่เราสนใจ (มักจะเป็นตัวเลขหรือข้อความดิบๆ) เช่น <em>จดบันทึกความสูงของเพื่อนแต่ละคน (130 ซม., 134 ซม., 129 ซม.)</em></p>
            </div>
            
            <div style="background: #E3F2FD; padding: 20px; border-radius: 12px; border-left: 5px solid #2196F3;">
                <strong style="color: #1565C0; font-size: 18px;">✨ สารสนเทศ (Information)</strong>
                <p style="font-size: 15px; margin-top: 5px; margin-bottom: 0;">คือ การนำข้อมูลดิบมา "ประมวลผล (คิดคำนวณ)" ให้เกิดประโยชน์ เช่น <em>นำความสูงของเพื่อนทุกคนมาบวกกันแล้วหาร เพื่อหา "ความสูงเฉลี่ย" ของคนในห้อง</em> (สารสนเทศจะช่วยให้เราตัดสินใจและวางแผนงานได้ดีขึ้นครับ!)</p>
            </div>
        </div>

<h3 style="color: #2E7D32; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 35px;">🧺 2. การจัดกลุ่มและเรียงลำดับข้อมูล</h3>
        <p>เมื่อเราเก็บข้อมูลมาได้เยอะๆ มันจะดูวุ่นวายมากครับ เราต้องรู้จักการ <strong>"จัดระเบียบ"</strong> สมมติว่าเราไปเก็บมะม่วงมาได้ 5 ตะกร้า (ตะกร้าละ 12, 10, 11, 13, 14 ลูก) เราจะทำอย่างไรให้ดูง่ายขึ้น?</p>
        
        <div style="background: #FAFAFA; padding: 20px; border-radius: 12px; border: 1px solid #ddd; margin-top: 15px;">
            <ul style="margin-top: 0; padding-left: 20px; color: #333; margin-bottom: 0; line-height: 1.8; font-size: 15px;">
                <li><strong>การเรียงลำดับ:</strong> เราอาจจะนำตะกร้ามาเรียงใหม่ จากตะกร้าที่มีมะม่วง <strong style="color: #E65100;">มากที่สุด ไปหา น้อยที่สุด</strong></li>
                <li><strong>การจัดกลุ่ม (จำแนก):</strong> ถ้านำมะม่วงมากองรวมกัน เราอาจจะแยกกลุ่มเป็น <strong style="color: #E65100;">กลุ่มลูกใหญ่</strong> และ <strong style="color: #E65100;">กลุ่มลูกเล็ก</strong> เพื่อให้นับง่ายขึ้น</li>
                <li><strong>การสร้างตาราง:</strong> นำจำนวนมะม่วงแต่ละตะกร้า มาเขียนใส่ตาราง (ตะกร้าที่ 1 = 12 ลูก...) จะทำให้คนอื่นอ่านและเข้าใจได้ทันทีเลยครับ!</li>
            </ul>
        </div>

<h3 style="color: #2E7D32; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 35px;">🎯 3. การกำหนด "หัวข้อ" ก่อนลงมือสำรวจ</h3>
        <p>ก่อนที่เราจะเดินไปจดบันทึกข้อมูล เราต้องกำหนดเป้าหมายให้ชัดเจนก่อนครับ ว่าเราอยากรู้อะไร เช่น:</p>
        
        <div style="background: #FFF8E1; padding: 15px; border-radius: 8px; border-left: 4px solid #FFC107; margin-top: 15px;">
            <p style="margin: 0; font-size: 15px; color: #F57F17;">
                🌸 <strong>เรื่อง: สำรวจสวนดอกไม้</strong><br>
                👉 <strong>หัวข้อย่อยที่เราจะจด:</strong> ดอกไม้มีสีอะไรบ้าง? มีกี่ต้นที่ออกดอก? มีกี่ต้นที่ยังไม่ออกดอก?
            </p>
        </div>

<div style="background: #FFF3E0; padding: 15px; border-radius: 8px; margin-top: 20px; font-size: 15px; color: #E65100; text-align: center; border: 1px dashed #FF9800;">
            <em>💡 <strong>ข้อคิด:</strong> การรวบรวมข้อมูลที่ถูกต้องและเป็นระเบียบ จะทำให้เรานำไปสร้างกราฟหรือตารางในคอมพิวเตอร์ได้ง่ายขึ้นมากๆ ครับ!</em>
        </div>

</div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background: linear-gradient(135deg, #2E7D32 0%, #1B5E20 100%); color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px; color: #FFF;">🧩 มินิควิซ ทบทวนความรู้ EP.1</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; color: #C8E6C9;">ทดสอบความเป็นนักสำรวจข้อมูลในตัวคุณ!</p>
        </div>
        
        <div style="border: 2px solid #1B5E20; 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: #1B5E20;">ข้อที่ 1: สถานการณ์ในข้อใด จัดว่าเป็น "สารสนเทศ (Information)" ที่ผ่านการคำนวณมาแล้ว?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'นี่คือการเก็บข้อมูลดิบ (Data) ครับ ยังไม่ได้นำมาคำนวณเลย')" 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, 'เก่งมากครับ! การหา ค่าเฉลี่ย คือการนำข้อมูลหลายๆ ตัวมาคิดเลขและประมวลผลให้กลายเป็นสารสนเทศที่มีประโยชน์ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. การนำน้ำหนักของเพื่อนทั้งห้องมาบวกกันแล้วหาร เพื่อหา "น้ำหนักเฉลี่ย"</button>
                    <button onclick="checkAnswer(this, false, 'การนับและจดตัวเลขเฉยๆ ยังถือว่าเป็นข้อมูลดิบ (Data) ครับ')" 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: #1B5E20;">ข้อที่ 2: หากนักเรียนมีตะกร้ามะม่วง 5 ใบ การนำมะม่วงมาแยกเป็น "กลุ่มลูกใหญ่" และ "กลุ่มลูกเล็ก" เรียกว่าวิธีการใด?</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;">ข. การจัดกลุ่มข้อมูล (การจำแนก)</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: #1B5E20;">ข้อที่ 3: ก่อนที่นักเรียนจะเดินไปสอบถามเพื่อนๆ ในโรงอาหาร นักเรียนควรทำสิ่งใดเป็นอันดับแรกเพื่อให้ได้ข้อมูลที่ต้องการ?</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;">ค. เดินเข้าไปถามคำถามมั่วๆ นึกอะไรออกก็ถาม</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 = '#E8F5E9';
        btn.style.borderColor = '#4CAF50';
        btn.style.color = '#1B5E20';
        btn.style.opacity = '1';
        feedback.style.background = '#E8F5E9';
        feedback.style.color = '#2E7D32';
        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>