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

Back

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

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

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

Title

Description

Keyword

Detail

/* Quiz Style */
  .ep3-quiz-section { margin-top: 40px; border-top: 2px dashed #CCC; padding-top: 20px; }
  .ep3-quiz-item { margin-bottom: 20px; }
  .ep3-quiz-q { font-weight: bold; font-size: 18px; margin-bottom: 10px; color: #4A148C; }
  .ep3-quiz-btn { width: 100%; padding: 10px; margin-top: 5px; border: 1px solid #CCC; border-radius: 8px; background: white; cursor: pointer; text-align: left; transition: 0.2s; font-family: 'Sarabun', sans-serif; font-size: 16px; }
  .ep3-quiz-btn:hover { background: #E1BEE7; }
  .ep3-feedback { margin-top: 10px; font-weight: bold; display: none; padding: 10px; border-radius: 5px; }
  .ep3-correct { background: #C8E6C9; color: #2E7D32; }
  .ep3-wrong { background: #FFCDD2; color: #C62828; }
</style>

<div class="ep3-container">
  <div class="ep3-header">
    <div class="ep3-icon"><i class="fas fa-lightbulb"></i></div>
    <div>
      <h2 style="margin:0; font-weight:800; font-size: 24px; font-family: 'Prompt', sans-serif;">Why Technology?</h2>
      <p style="margin:5px 0 0; color:#FFF8E1; font-size: 16px;">EP.3 ทำไมต้องมีเทคโนโลยี? (ปัจจัยและความสำคัญ)</p>
    </div>
  </div>

<div class="ep3-content-body">
    <p>อะไรคือแรงผลักดันให้มนุษย์ไม่หยุดคิดค้น? คำตอบอยู่ที่ <b>5 ปัจจัยหลัก</b> นี้ครับ</p>

<div class="ep3-grid-box">
      <div class="ep3-card">
        <i class="fas fa-utensils"></i>
        <h4>1. ปัจจัยสี่</h4>
        <p>เพื่อความอยู่รอด (อาหาร, ยา, เสื้อผ้า, ที่อยู่)</p>
      </div>
      <div class="ep3-card">
        <i class="fas fa-cloud-showers-heavy"></i>
        <h4>2. เอาชนะธรรมชาติ</h4>
        <p>เครื่องเตือนภัย, เขื่อน, บ้านยกสูงหนีน้ำ</p>
      </div>
      <div class="ep3-card">
        <i class="fas fa-microscope"></i>
        <h4>3. ความอยากรู้</h4>
        <p>กล้องโทรทรรศน์ดูดาว, กล้องจุลทรรศน์</p>
      </div>
      <div class="ep3-card">
        <i class="fas fa-music"></i>
        <h4>4. ความบันเทิง</h4>
        <p>เครื่องดนตรี, เครื่องเล่นเพลง, ลำโพง</p>
      </div>
      <div class="ep3-card">
        <i class="fas fa-praying-hands"></i>
        <h4>5. ความเชื่อ/วัฒนธรรม</h4>
        <p>การทำมัมมี่, บั้งไฟขอฝน, อาหารหมักดอง</p>
      </div>
    </div>
    
    <div class="ep3-quiz-section">
      <h3>🧠 แบบทดสอบท้ายบท (3 ข้อ)</h3>
      
      <div class="ep3-quiz-item">
        <div class="ep3-quiz-q">1. การประดิษฐ์ "กล้องโทรทรรศน์" เพื่อส่องดูดวงดาว เกิดจากปัจจัยใด?</div>
        <button class="ep3-quiz-btn" onclick="checkAnsEP3(this, 'q1', false)">ก. ความต้องการปัจจัยสี่</button>
        <button class="ep3-quiz-btn" onclick="checkAnsEP3(this, 'q1', false)">ข. กฎระเบียบทางสังคม</button>
        <button class="ep3-quiz-btn" onclick="checkAnsEP3(this, 'q1', true)">ค. ความอยากรู้อยากเห็น</button>
        <button class="ep3-quiz-btn" onclick="checkAnsEP3(this, 'q1', false)">ง. ความเชื่อและวัฒนธรรม</button>
        <div id="fb-ep3-q1" class="ep3-feedback"></div>
      </div>

<div class="ep3-quiz-item">
        <div class="ep3-quiz-q">2. การสร้าง "บั้งไฟ" หรือการทำ "มัมมี่" เกิดจากปัจจัยใด?</div>
        <button class="ep3-quiz-btn" onclick="checkAnsEP3(this, 'q2', true)">ก. ความเชื่อและวัฒนธรรม</button>
        <button class="ep3-quiz-btn" onclick="checkAnsEP3(this, 'q2', false)">ข. ความบันเทิง</button>
        <button class="ep3-quiz-btn" onclick="checkAnsEP3(this, 'q2', false)">ค. การเอาชนะธรรมชาติ</button>
        <button class="ep3-quiz-btn" onclick="checkAnsEP3(this, 'q2', false)">ง. ความอยากรู้อยากเห็น</button>
        <div id="fb-ep3-q2" class="ep3-feedback"></div>
      </div>

<div class="ep3-quiz-item">
        <div class="ep3-quiz-q">3. การสร้าง "เขื่อน" หรือ "บ้านยกสูง" เป็นการสร้างเทคโนโลยีเพื่อวัตถุประสงค์ใด?</div>
        <button class="ep3-quiz-btn" onclick="checkAnsEP3(this, 'q3', false)">ก. เพื่อความบันเทิง</button>
        <button class="ep3-quiz-btn" onclick="checkAnsEP3(this, 'q3', true)">ข. เพื่อเอาชนะและป้องกันภัยจากธรรมชาติ</button>
        <button class="ep3-quiz-btn" onclick="checkAnsEP3(this, 'q3', false)">ค. เพื่อความสวยงาม</button>
        <button class="ep3-quiz-btn" onclick="checkAnsEP3(this, 'q3', false)">ง. เพื่อการสื่อสาร</button>
        <div id="fb-ep3-q3" class="ep3-feedback"></div>
      </div>

</div>
  </div>
<script>
  function checkAnsEP3(btn, qId, isCorrect) {
    const fb = document.getElementById('fb-ep3-' + qId);
    const btns = btn.parentElement.getElementsByClassName('ep3-quiz-btn');
    for(let b of btns) { b.disabled = true; b.style.opacity = '0.7'; b.style.cursor = 'default'; }
    if(isCorrect) {
      btn.style.background = '#C8E6C9'; fb.innerHTML = '✅ ถูกต้อง! สุดยอดครับ'; fb.className = 'ep3-feedback ep3-correct';
    } else {
      btn.style.background = '#FFCDD2'; fb.innerHTML = '❌ ผิดครับ ลองดูเหตุผลทั้ง 5 ข้ออีกครั้งนะ'; fb.className = 'ep3-feedback ep3-wrong';
    }
    fb.style.display = 'block';
  }
</script>
</div><div style="background-color: #f8f9fa; border: 1px solid #e9ecef; border-left: 5px solid #0d6efd; padding: 20px; margin-top: 50px; margin-bottom: 20px; border-radius: 8px; font-family: 'Sarabun', sans-serif; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
    <div style="display: flex; align-items: center; margin-bottom: 10px;">
        <span style="font-size: 1.5em; margin-right: 10px;">💡</span>
        <strong style="color: #0d6efd; font-size: 1.2em;">พบข้อผิดพลาดหรือมีข้อเสนอแนะ?</strong>
    </div>
    <p style="color: #495057; font-size: 1em; margin-bottom: 15px; line-height: 1.6;">
        หากนักเรียนหรือคุณครูพบจุดที่ควรแก้ไขในบทเรียน/แบบทดสอบนี้ หรือมีข้อเสนอแนะเพิ่มเติม สามารถแจ้งครูพิสิฐเพื่อนำไปปรับปรุงเนื้อหาให้สมบูรณ์ยิ่งขึ้นได้เลยครับ <br>
        <span style="font-size: 0.9em; color: #6c757d;">(ขอบคุณที่ร่วมเป็นส่วนหนึ่งในการพัฒนาการเรียนรู้ไปด้วยกันครับ)</span>
    </p>
    <a href="mailto:tpisit@wsst.ac.th?subject=แจ้งข้อเสนอแนะ/ข้อผิดพลาด บทเรียน SmartyQuizKids" style="display: inline-block; background-color: #0d6efd; color: #ffffff; padding: 10px 20px; text-decoration: none; border-radius: 5px; font-size: 1em; font-weight: bold;">
        ✉️ ส่งอีเมลแจ้งครูพิสิฐ
    </a>
</div>