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

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, #1A237E 0%, #3949AB 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px; border-bottom: 5px solid #FFC107;">
        <h2 style="margin: 0; font-size: 26px; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.3); color: #FFEB3B;">📊 หน่วยที่ 5: ข้อมูลและการประมวลผล</h2>
        <p style="margin: 10px 0 0 0; font-size: 22px; color: #FFFFFF; font-weight: bold;">EP.1 โลกของข้อมูล และความแตกต่างที่ต้องรู้</p>
    </div>

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

<h3 style="color: #1A237E; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 30px;">1. ข้อมูล (Data) vs สารสนเทศ (Information)</h3>
        
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 20px; margin-top: 20px;">
            <div style="background: #E8EAF6; padding: 20px; border-radius: 10px; border: 1px solid #C5CAE9;">
                <strong style="color: #283593; font-size: 18px;">📁 ข้อมูล (Data)</strong>
                <p style="font-size: 15px; margin-top: 10px;">คือ <b>"ข้อเท็จจริง"</b> ที่ยังไม่ผ่านการปรับแต่งหรือตีความ เช่น คะแนนดิบของนักเรียนแต่ละคน, อุณหภูมิในแต่ละวัน หรือราคาสินค้าที่ยังไม่ได้สรุป</p>
                <div style="background: white; padding: 10px; border-radius: 5px; font-size: 14px; border-left: 4px solid #3F51B5;">
                    ตัวอย่าง: 15, 20, 18, 25 (แค่ตัวเลขลอยๆ)
                </div>
            </div>
            <div style="background: #FFF8E1; padding: 20px; border-radius: 10px; border: 1px solid #FFE082;">
                <strong style="color: #F57F17; font-size: 18px;">💡 สารสนเทศ (Information)</strong>
                <p style="font-size: 15px; margin-top: 10px;">คือ ข้อมูลที่ผ่าน <b>"การประมวลผล"</b> (วิเคราะห์, คำนวณ, สรุปผล) มาแล้ว จนสามารถนำไปใช้ตัดสินใจได้ทันที</p>
                <div style="background: white; padding: 10px; border-radius: 5px; font-size: 14px; border-left: 4px solid #FFC107;">
                    ตัวอย่าง: คะแนนเฉลี่ยของห้องคือ 19.5 คะแนน
                </div>
            </div>
        </div>

<h3 style="color: #1A237E; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 35px;">2. ประเภทของข้อมูลตามลักษณะ</h3>
        <p>ในทางคอมพิวเตอร์ เราแบ่งข้อมูลออกเป็นประเภทหลักๆ เพื่อให้ง่ายต่อการเก็บรักษา ดังนี้:</p>
        <ul style="line-height: 2; font-size: 16px;">
            <li><b>ข้อมูลตัวเลข (Numeric Data):</b> ข้อมูลที่นำไปคำนวณได้ เช่น ราคาสินค้า, จำนวนเงิน</li>
            <li><b>ข้อมูลตัวอักษร/ข้อความ (Text Data):</b> ข้อมูลที่เป็นตัวอักษร หรือตัวเลขที่คำนวณไม่ได้ เช่น ชื่อ-นามสกุล, ทะเบียนรถ</li>
            <li><b>ข้อมูลภาพ (Image Data):</b> ข้อมูลที่เป็นภาพนิ่ง ภาพเคลื่อนไหว หรือกราฟิกต่างๆ</li>
            <li><b>ข้อมูลเสียง (Audio Data):</b> ข้อมูลที่รับรู้ได้ด้วยการได้ยิน เช่น เพลง, เสียงพูด</li>
        </ul>

<div style="background: linear-gradient(135deg, #E1F5FE 0%, #B3E5FC 100%); padding: 20px; border-radius: 10px; margin-top: 30px; border: 1px solid #81D4FA; text-align: center;">
            <strong style="color: #01579B; font-size: 18px;">กระบวนการสำคัญ:</strong>
            <p style="margin: 10px 0 0 0; font-size: 18px; color: #0277BD;"><b>ข้อมูล (Input) ➡️ ประมวลผล (Process) ➡️ สารสนเทศ (Output)</b></p>
        </div>
        
    </div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background-color: #1A237E; color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px; color: #FFC107;">✍️ มินิควิซ ทบทวนความรู้ (EP.1)</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; color: #C5CAE9;">มาลองเช็กกันดูว่า "ข้อมูล" กับ "สารสนเทศ" พี่แยกออกไหม?</p>
        </div>
        
        <div style="border: 2px solid #1A237E; 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: #1A237E;">ข้อที่ 1: "คะแนนสอบรายบุคคลของนักเรียนทั้งห้อง" จัดว่าเป็นสิ่งใดในทางคอมพิวเตอร์?</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;">ก. ข้อมูล (Data)</button>
                    <button onclick="checkAnswer(this, false, 'ยังไม่ใช่จ้า สารสนเทศต้องผ่านการคำนวณหรือสรุปมาแล้วนะ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. สารสนเทศ (Information)</button>
                    <button onclick="checkAnswer(this, false, 'ความรู้คือการนำสารสนเทศไปประยุกต์ใช้อีกทีจ้า')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. ความรู้ (Knowledge)</button>
                    <button onclick="checkAnswer(this, false, 'อันนี้เป็นขั้นตอนการทำงานจ้า')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. การประมวลผล (Processing)</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: #1A237E;">ข้อที่ 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;">ก. ภาพถ่ายท้องฟ้า</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;">ค. รายงานพยากรณ์อากาศว่าวันนี้ฝนจะตก 80%</button>
                    <button onclick="checkAnswer(this, false, 'อันนี้คือข้อมูลตัวเลขดิบจ้า')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. อุณหภูมิ 32 องศาเซลเซียส</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: #1A237E;">ข้อที่ 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, 'ถูกต้อง! ข้อมูลตัวอักษร เช่น ชื่อคน หรือทะเบียนรถ ไม่สามารถนำมาบวกหรือคูณกันได้ครับ')" 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 = '#E8EAF6';
        btn.style.borderColor = '#1A237E';
        btn.style.color = '#1A237E';
        btn.style.opacity = '1';
        feedback.style.background = '#E8EAF6';
        feedback.style.color = '#1A237E';
        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>