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

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, #7B1FA2 0%, #BA68C8 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px; border-bottom: 5px solid #4A148C;">
        <h2 style="margin: 0; font-size: 30px; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.3); color: #F3E5F5;">🔍 ขั้นตอนที่ 3: นักสืบข้อมูล</h2>
        <p style="margin: 10px 0 0 0; font-size: 18px; color: #E1BEE7;">(รวบรวมข้อมูล และกำหนดรูปแบบอัลกอริทึม)</p>
    </div>

<div style="background: #F3E5F5; border: 2px dashed #AB47BC; padding: 25px; border-radius: 15px; margin-bottom: 40px;">
        <h3 style="color: #6A1B9A; margin-top: 0; display: flex; align-items: center;">
            <span style="font-size: 30px; margin-right: 10px;">🎯</span> ภารกิจของเรา
        </h3>
        <p style="font-size: 18px; margin-bottom: 0;">สวมวิญญาณนักสืบ! ค้นหา <b>"ความรู้เพิ่มเติม"</b> ที่จำเป็นต้องใช้แก้ปัญหา และตัดสินใจเลือก <b>"รูปแบบของอัลกอริทึม"</b> ที่เหมาะสมกับโจทย์ที่สุด!</p>
    </div>

<div style="margin-bottom: 40px;">
        <h3 style="color: #4A148C; border-left: 5px solid #7B1FA2; padding-left: 15px; font-size: 22px;">1. ทำไมต้องทำขั้นตอนนี้?</h3>
        <p>บางครั้งโจทย์ปัญหาคอมพิวเตอร์ก็ไม่ได้ให้ข้อมูลเรามาครบถ้วนครับ! เปรียบเสมือนนักสืบที่ต้องไปหา <b>"เบาะแส (Clues)"</b> เพิ่มเติม เช่น ต้องไปค้นหาสูตรคณิตศาสตร์ หรือหาสัญลักษณ์ผังงานที่ถูกต้อง เพื่อให้เรานำไปสร้างโปรแกรมได้อย่างไม่มีข้อผิดพลาดนั่นเอง</p>
        
        <h3 style="color: #4A148C; border-left: 5px solid #7B1FA2; padding-left: 15px; margin-top:30px; font-size: 22px;">2. ภารกิจหลัก 2 ประการของนักสืบ</h3>
        <p>ในขั้นตอนนี้ นักเรียนจะต้องทำภารกิจย่อย 2 ส่วน ดังนี้ครับ:</p>
        
        <div style="display: grid; grid-template-columns: 1fr; gap: 15px; margin-top: 20px;">
            <div style="background: #FCE4EC; padding: 20px; border-radius: 10px; border: 1px solid #F48FB1;">
                <strong style="color: #C2185B; font-size: 18px;">💡 ภารกิจที่ 1: สืบค้นข้อมูลเพิ่มเติม</strong>
                <p style="font-size: 15px; margin-top: 5px; color: #444;">
                    เราต้องรู้อะไรเพิ่มอีกบ้างเพื่อให้คอมพิวเตอร์ทำงานนี้ได้? <br>
                    <span style="background: #FFF; padding: 4px 8px; border-radius: 4px; color: #AD1457; display: inline-block; margin-top: 8px;"><b>ตัวอย่างเช่น:</b> ค้นหาสูตร "พื้นที่สี่เหลี่ยม = กว้าง x ยาว" หรือ ค้นหาว่าการรับค่าต้องใช้สัญลักษณ์ผังงานรูปสี่เหลี่ยมด้านขนาน เป็นต้น</span>
                </p>
            </div>
            
            <div style="background: #E8EAF6; padding: 20px; border-radius: 10px; border: 1px solid #9FA8DA;">
                <strong style="color: #283593; font-size: 18px;">🛤️ ภารกิจที่ 2: ระบุรูปแบบอัลกอริทึม</strong>
                <p style="font-size: 15px; margin-top: 5px; color: #444; margin-bottom: 10px;">โปรแกรมที่เรากำลังจะเขียน มีรูปแบบการทำงานเป็นแบบไหนใน 3 แบบนี้?</p>
                <div style="display: flex; flex-wrap: wrap; gap: 10px;">
                    <div style="flex: 1; background: #FFF; padding: 10px; border-radius: 6px; border-left: 4px solid #3F51B5; font-size: 14px;">
                        <b>1. แบบเรียงลำดับ (Sequence):</b><br>ทำงานเป็นเส้นตรงจากบนลงล่าง ไม่มีเงื่อนไขให้คิด
                    </div>
                    <div style="flex: 1; background: #FFF; padding: 10px; border-radius: 6px; border-left: 4px solid #FF9800; font-size: 14px;">
                        <b>2. แบบทางเลือก (Selection):</b><br>มีเงื่อนไขให้ต้องตัดสินใจ (เช่น ถ้าคะแนน > 50 ให้สอบผ่าน)
                    </div>
                    <div style="flex: 1; background: #FFF; padding: 10px; border-radius: 6px; border-left: 4px solid #4CAF50; font-size: 14px;">
                        <b>3. แบบทำซ้ำ (Repetition):</b><br>ต้องทำสิ่งเดิมวนไปเรื่อยๆ จนกว่าจะครบกำหนด (Loop)
                    </div>
                </div>
            </div>
        </div>
    </div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background-color: #7B1FA2; color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px; color: #F3E5F5;">✍️ มินิควิซ ทบทวนความรู้ (ขั้นตอนที่ 3)</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; opacity: 0.9;">ประลองปัญญานักสืบ ก่อนลุยด่านต่อไป!</p>
        </div>
        
        <div style="border: 2px solid #7B1FA2; 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: #4A148C;">ข้อที่ 1: ในขั้นตอนการรวบรวมข้อมูล "ข้อมูลเพิ่มเติม" ที่เรามักจะต้องสืบค้นเพื่อนำมาเขียนโปรแกรมคือข้อใด?</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; font-family: inherit; font-size: 16px;">ก. ราคาของเครื่องคอมพิวเตอร์ที่ใช้</button>
                    <button onclick="checkAnswer(this, true, 'เยี่ยมมาก! สูตรคำนวณต่างๆ (เช่น สูตรหาพื้นที่, สูตรแปลงอุณหภูมิ) คือหัวใจสำคัญที่เราต้องรู้ก่อนเขียนคำสั่งให้คอมพิวเตอร์คิดครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer; font-family: inherit; font-size: 16px;">ข. สูตรคำนวณทางคณิตศาสตร์ที่เกี่ยวข้องกับปัญหา</button>
                    <button onclick="checkAnswer(this, false, 'ประวัติผู้สร้างโปรแกรมเป็นความรู้รอบตัวที่ดี แต่ยังไม่ใช่ข้อมูลหลักในการแก้โจทย์ปัญหาครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer; font-family: inherit; font-size: 16px;">ค. ประวัติของบุคคลที่คิดค้นการเขียนโปรแกรม</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: #4A148C;">ข้อที่ 2: โครงสร้างรูปแบบของอัลกอริทึม มีกี่รูปแบบหลัก อะไรบ้าง?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, true, 'ถูกต้องเป๊ะเลยครับ! อัลกอริทึมบนโลกนี้ประกอบขึ้นจากโครงสร้างพื้นฐาน 3 แบบนี้เท่านั้นครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer; font-family: inherit; font-size: 16px;">ก. 3 รูปแบบ คือ แบบเรียงลำดับ, แบบทางเลือก, และแบบทำซ้ำ</button>
                    <button onclick="checkAnswer(this, false, 'น่าเสียดายที่ตัวเลือกนี้มีคำว่า แบบสุ่ม ซึ่งไม่ใช่โครงสร้างพื้นฐานของอัลกอริทึมครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer; font-family: inherit; font-size: 16px;">ข. 3 รูปแบบ คือ แบบเรียงลำดับ, แบบสุ่ม, และแบบทำซ้ำ</button>
                    <button onclick="checkAnswer(this, false, 'มี 3 รูปแบบหลักเท่านั้นครับ ลองอ่านทบทวนดูอีกครั้งน้า')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer; font-family: inherit; font-size: 16px;">ค. 2 รูปแบบ คือ แบบเดินหน้า และ แบบถอยหลัง</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: #4A148C;">ข้อที่ 3: หากโจทย์คือ "โปรแกรมหาผลรวมของตัวเลข 2 จำนวน" โปรแกรมนี้ควรมีรูปแบบอัลกอริทึมแบบใด?</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; font-family: inherit; font-size: 16px;">ก. แบบเรียงลำดับ (Sequence)</button>
                    <button onclick="checkAnswer(this, false, 'แบบทางเลือก ต้องมีเงื่อนไขให้ตัดสินใจ เช่น ถ้าเลขมากกว่า 10 ค่อยเอามาบวกกัน เป็นต้นครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer; font-family: inherit; font-size: 16px;">ข. แบบทางเลือก (Selection)</button>
                    <button onclick="checkAnswer(this, false, 'แบบทำซ้ำ ต้องมีการวนลูปทำสิ่งเดิมซ้ำๆ ครับ แต่โจทย์ข้อนี้ทำแค่รอบเดียวจบเลย')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer; font-family: inherit; font-size: 16px;">ค. แบบทำซ้ำ (Repetition)</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 = '#F3E5F5';
        btn.style.borderColor = '#9C27B0';
        btn.style.color = '#4A148C';
        btn.style.opacity = '1';
        feedback.style.background = '#F3E5F5';
        feedback.style.color = '#4A148C';
        feedback.innerHTML = "✅ ถูกต้องครับ! " + msg;
    } else {
        btn.style.background = '#FFEBEE';
        btn.style.borderColor = '#F44336';
        btn.style.color = '#C62828';
        btn.style.opacity = '1';
        feedback.style.background = '#FFEBEE';
        feedback.style.color = '#C62828';
        feedback.innerHTML = "❌ ยังไม่ใช่นะครับ: " + msg;
    }
}
</script>