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

Back

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

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

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

Title

Description

Keyword

Detail

/* Quiz Style */
  .quiz-section { border-top: 2px dashed #CCC; padding-top: 30px; margin-top: 10px; }
  .quiz-header { font-family: 'Kanit'; font-size: 24px; color: #1E88E5; margin-bottom: 20px; text-align: center; font-weight: bold; }
  .q-block { margin-bottom: 25px; background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
  .q-question { font-weight: bold; font-size: 18px; color: #333; margin-bottom: 15px; }
  .q-btn { width: 100%; padding: 12px; margin-top: 8px; background: #FAFAFA; border: 1px solid #DDD; border-radius: 8px; text-align: left; cursor: pointer; transition: 0.2s; font-size: 16px; font-family: 'Sarabun'; }
  .q-btn:hover { background: #E3F2FD; border-color: #1E88E5; }
  .feedback { margin-top: 15px; padding: 12px; border-radius: 8px; display: none; font-weight: bold; font-size: 16px; }
  .correct { background: #C8E6C9; color: #2E7D32; border: 1px solid #2E7D32; }
  .wrong { background: #FFCDD2; color: #C62828; border: 1px solid #C62828; }
</style>

<div class="ep-container">
  <div class="ep-head">
    <div class="ep-icon"><i class="fas fa-route"></i></div>
    <div>
      <h1 style="margin:0; font-family:'Kanit'; font-size: 28px;">EP.1: ภารกิจเดินทางไปโรงเรียน</h1>
      <p style="margin:5px 0 0; opacity:0.9; font-size: 18px;">วิเคราะห์ทางเลือกเพื่อผลลัพธ์ที่ดีที่สุด</p>
    </div>
  </div>

<div class="content">
    <div class="case-study-box">
      <strong>สถานการณ์:</strong> นักเรียนต้องเดินทางจากบ้านไปโรงเรียนให้ทันเวลาเข้าแถวเคารพธงชาติ (08.00 น.) โดยมีงบประมาณไม่เกิน 50 บาทต่อวัน 
    </div>

<div class="step-label">ขั้นระบุปัญหา (5W1H)</div>
    <p>จากการวิเคราะห์พบว่าปัญหาหลักคือ <strong>"ความไม่แน่นอนของเวลาเดินทาง"</strong> และ <strong>"งบประมาณที่จำกัด"</strong> เราต้องหาความรู้เกี่ยวกับสายรถเมล์ และค่าใช้จ่ายของยานพาหนะต่างๆ </p>

<div class="step-label">ขั้นออกแบบและเลือกวิธีการ</div>
    <p>เรามาลองเปรียบเทียบ 2 ทางเลือกยอดฮิตกันครับ:</p>
    
    <table class="comparison-table">
      <tbody><tr>
        <th>กิจกรรม</th>
        <th>ทางเลือก A: รถเมล์</th>
        <th>ทางเลือก B: มอเตอร์ไซค์รับจ้าง</th>
      </tr>
      <tr>
        <td><strong>เวลาที่ใช้</strong></td>
        <td>40-50 นาที (เสี่ยงรถติด)</td>
        <td>15-20 นาที (รวดเร็ว)</td>
      </tr>
      <tr>
        <td><strong>ค่าใช้จ่าย</strong></td>
        <td>15 บาท (ประหยัด)</td>
        <td>40-60 บาท (แพงกว่า)</td>
      </tr>
    </tbody></table>

<div class="step-label">การประเมินผล</div>
    <p>หากวันไหนตื่นเช้า ทางเลือก A จะดีที่สุดเพราะประหยัดเงินได้มาก แต่หากตื่นสาย ทางเลือก B อาจจำเป็นเพื่อให้ทันเวลา 08.00 น. แม้จะจ่ายแพงกว่าก็ตามครับ </p>

<div class="quiz-section">
      <div class="quiz-header">🧠 แบบทดสอบความเข้าใจ</div>

<div class="q-block">
        <div class="q-question">1. ข้อใดคือ "ข้อจำกัด" ที่สำคัญที่สุดในกรณีศึกษานี้?</div>
        <button class="q-btn" onclick="check(this, 'q1', false)">ก. ระยะทางระหว่างบ้านและโรงเรียน</button>
        <button class="q-btn" onclick="check(this, 'q1', true)">ข. เวลาเข้าแถว 08.00 น. และงบประมาณ 50 บาท</button>
        <button class="q-btn" onclick="check(this, 'q1', false)">ค. จำนวนสายรถเมล์ที่วิ่งผ่านหน้าบ้าน</button>
        <button class="q-btn" onclick="check(this, 'q1', false)">ง. สภาพอากาศในวันนั้นๆ</button>
        <div id="fb-q1" class="feedback"></div>
      </div>

<div class="q-block">
        <div class="q-question">2. การเลือกยานพาหนะที่เหมาะสมที่สุด ควรพิจารณาจากปัจจัยใดร่วมกัน?</div>
        <button class="q-btn" onclick="check(this, 'q2', false)">ก. ความสวยงามของรถ</button>
        <button class="q-btn" onclick="check(this, 'q2', true)">ข. เวลาที่ใช้และค่าใช้จ่ายภายใต้เงื่อนไข</button>
        <button class="q-btn" onclick="check(this, 'q2', false)">ค. ยี่ห้อของรถจักรยานยนต์</button>
        <button class="q-btn" onclick="check(this, 'q2', false)">ง. เพื่อนที่ร่วมเดินทางไปด้วย</button>
        <div id="fb-q2" class="feedback"></div>
      </div>
    </div>
  </div>
</div>

if(correct) {
    btn.style.background = '#C8E6C9';
    btn.style.borderColor = '#2E7D32';
    btn.style.color = '#1B5E20';
    btn.style.opacity = '1';
    fb.innerHTML = "✅ ถูกต้อง! การเข้าใจข้อจำกัดช่วยให้เราเลือกวิธีแก้ปัญหาได้ดีที่สุด"; 
    fb.className = "feedback correct"; 
  } else {
    btn.style.background = '#FFCDD2';
    btn.style.borderColor = '#C62828';
    btn.style.color = '#B71C1C';
    btn.style.opacity = '1';
    fb.innerHTML = "❌ ยังไม่ถูกครับ ลองทบทวนเงื่อนไขเวลาและงบประมาณดูนะ"; 
    fb.className = "feedback wrong"; 
  }
  fb.style.display = "block";
}
</script>