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

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, #fc6076 0%, #ff9a44 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;">🧩 หน่วยที่ 2: การออกแบบอัลกอริทึมเพื่อแก้ปัญหา</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;">
        
        <h3 style="color: #D32F2F; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px;">📝 ศัพท์เทคโนโลยีน่ารู้ (Vocabulary)</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-top: 15px; margin-bottom: 35px;">
            <div style="background: #FFF3E0; padding: 15px; border-radius: 10px; border: 1px solid #FFE0B2; text-align: center; font-weight: bold; color: #E65100; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">Algorithm (อัลกอริทึม)</div>
            <div style="background: #FFF3E0; padding: 15px; border-radius: 10px; border: 1px solid #FFE0B2; text-align: center; font-weight: bold; color: #E65100; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">Flowchart (ผังงาน)</div>
            <div style="background: #FFF3E0; padding: 15px; border-radius: 10px; border: 1px solid #FFE0B2; text-align: center; font-weight: bold; color: #E65100; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">Narrative Description (แบบบรรยาย)</div>
            <div style="background: #FFF3E0; padding: 15px; border-radius: 10px; border: 1px solid #FFE0B2; text-align: center; font-weight: bold; color: #E65100; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">Pseudo Code (รหัสลำลอง)</div>
        </div>

<h3 style="color: #D32F2F; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px;">🤔 อัลกอริทึม (Algorithm) คืออะไร?</h3>
        <p><strong>อัลกอริทึม</strong> หมายถึง ขั้นตอนชุดคำสั่ง หรือกลุ่มคำสั่งที่ต้องการปฏิบัติงานอย่างเป็นระบบ เพื่อนำไปสู่การแก้ปัญหาให้สำเร็จ</p>
        
        <div style="background: #E0F7FA; padding: 20px; border-radius: 10px; border-left: 5px solid #00BCD4; margin: 20px 0;">
            <p style="margin: 0; font-size: 16px;">💡 <strong>ตัวอย่างในชีวิตประจำวัน: การไปโรงเรียน</strong><br><br>
            1. ตื่นนอน (6:00 น.) ➔ 2. อาบน้ำ ➔ 3. แต่งตัว ➔ 4. รับประทานอาหาร (15 นาที) ➔ 5. ไปโรงเรียน ➔ 6. ถึงโรงเรียนทันเวลา (7:00 น.)</p>
        </div>

<h3 style="color: #D32F2F; border-left: 5px solid #FFC107; padding-left: 15px; margin-top:35px; font-size: 22px;">💻 อัลกอริทึมกับระบบคอมพิวเตอร์</h3>
        <p>การทำงานของคอมพิวเตอร์ก็ต้องอาศัยอัลกอริทึมเช่นกัน โดยจะรับข้อมูลเข้ามา <strong>(Input)</strong> จากนั้นจะทำตามชุดคำสั่งทีละขั้นตอน <strong>(Process ขั้นที่ 1, 2, 3...)</strong> เพื่อประมวลผลให้ได้ผลลัพธ์ที่ถูกต้อง <strong>(Output)</strong> ออกมา</p>

<h3 style="color: #D32F2F; border-left: 5px solid #FFC107; padding-left: 15px; margin-top:35px; font-size: 22px;">🌟 ประโยชน์ 7 ประการของอัลกอริทึม</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin-top: 20px;">
            <div style="background: white; padding: 15px; border-radius: 10px; border-top: 4px solid #00BCD4; box-shadow: 0 3px 10px rgba(0,0,0,0.08);">🎯 1. ความถูกต้อง (Accuracy) - ผลลัพธ์ต้องตรงตามเป้าหมาย</div>
            <div style="background: white; padding: 15px; border-radius: 10px; border-top: 4px solid #00BCD4; box-shadow: 0 3px 10px rgba(0,0,0,0.08);">✂️ 2. ขั้นตอนสั้น กระชับ (Brevity) - มีเฉพาะขั้นตอนที่จำเป็น</div>
            <div style="background: white; padding: 15px; border-radius: 10px; border-top: 4px solid #00BCD4; box-shadow: 0 3px 10px rgba(0,0,0,0.08);">⚡ 3. ใช้ทรัพยากรน้อยที่สุด (Efficiency) - ประหยัดเวลาและต้นทุน</div>
            <div style="background: white; padding: 15px; border-radius: 10px; border-top: 4px solid #00BCD4; box-shadow: 0 3px 10px rgba(0,0,0,0.08);">🔄 4. รองรับการเปลี่ยนแปลง (Scalability) - ปรับปรุงแก้ไขได้ง่าย</div>
            <div style="background: white; padding: 15px; border-radius: 10px; border-top: 4px solid #00BCD4; box-shadow: 0 3px 10px rgba(0,0,0,0.08);">🚀 5. นำไปใช้งานได้รวดเร็ว (Learning & Improving) - สร้างสภาพแวดล้อมให้ทดลองได้ไว</div>
            <div style="background: white; padding: 15px; border-radius: 10px; border-top: 4px solid #00BCD4; box-shadow: 0 3px 10px rgba(0,0,0,0.08);">🗣️ 6. เข้าใจตรงกัน (Objectivity) - ไม่คลุมเครือ ตีความได้ทางเดียว</div>
            <div style="background: white; padding: 15px; border-radius: 10px; border-top: 4px solid #00BCD4; box-shadow: 0 3px 10px rgba(0,0,0,0.08);">🔎 7. ตรวจสอบได้ (Transparency) - ตรวจหาข้อผิดพลาดทีละขั้นตอนได้</div>
        </div>
    </div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background-color: #D32F2F; 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; opacity: 0.9;">ลองทำควิซด้านล่างนี้เพื่อเช็กความเข้าใจ (ไม่เก็บคะแนนจ้า)</p>
        </div>
        
        <div style="border: 2px solid #D32F2F; 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: #D32F2F;">ข้อที่ 1: อัลกอริทึม (Algorithm) หมายถึงข้อใด?</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, 'ยังไม่ใช่จ้า อันนั้นเรียกว่า Input Device')" 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: #D32F2F;">ข้อที่ 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, 'ถูกต้อง! การตื่นนอนคือจุดเริ่มต้น (Start) ของอัลกอริทึมนี้')" 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: #D32F2F;">ข้อที่ 3: อัลกอริทึมในระบบคอมพิวเตอร์ หน้าที่ "ชุดคำสั่ง หรือขั้นตอนที่ 1, 2, 3..." อยู่ในส่วนใด?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'Input คือการรับข้อมูลเข้ามาเฉยๆ จ้า')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. นำเข้า (Input)</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้อง! Process คือส่วนที่นำคำสั่งมาประมวลผลทีละขั้นตอน')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. ประมวลผล (Process)</button>
                    <button onclick="checkAnswer(this, false, 'Output คือผลลัพธ์ที่ได้ออกมาแล้วนะ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. นำออก (Output)</button>
                    <button onclick="checkAnswer(this, false, 'ส่วนนี้ไว้สำหรับบันทึกข้อมูลจ้า')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. บันทึก (Save)</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: #D32F2F;">ข้อที่ 4: ข้อใด "ไม่ใช่" ประโยชน์ของการเขียนอัลกอริทึม?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'อันนี้เป็นประโยชน์ข้อแรกเลย (Accuracy)')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. ช่วยให้การทำงานมีความถูกต้อง (Accuracy)</button>
                    <button onclick="checkAnswer(this, false, 'อันนี้ก็เป็นประโยชน์นะ (Objectivity)')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. ช่วยให้เข้าใจตรงกัน ไม่คลุมเครือ (Objectivity)</button>
                    <button onclick="checkAnswer(this, false, 'อันนี้คือความโปร่งใส (Transparency) ตรวจสอบได้')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. สามารถตรวจสอบหาข้อผิดพลาดได้ (Transparency)</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้อง! อัลกอริทึมเน้นที่ตรรกะและขั้นตอน ไม่ได้เกี่ยวกับสีสันของหน้าจอจ้า')" 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 = '#2E7D32';
        btn.style.color = '#1B5E20';
        btn.style.opacity = '1';
        feedback.style.background = '#E8F5E9';
        feedback.style.color = '#1B5E20';
        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>