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

Back

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

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

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

Title

Description

Keyword

Detail

/* Quiz Style */
  .quiz-section { border-top: 2px dashed #CCC; padding-top: 30px; margin-top: 30px; }
  .quiz-header { font-family: 'Kanit'; font-size: 24px; color: #D84315; 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: #FBE9E7; border-color: #FF7043; }
  .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-balance-scale"></i></div>
    <div>
      <h1 style="margin:0; font-family:'Kanit'; font-size: 28px;">EP.2: เหรียญสองด้านของเทคโนโลยี</h1>
      <p style="margin:5px 0 0; opacity:0.9; font-size: 18px;">วิเคราะห์ผลกระทบด้านบวกและด้านลบ</p>
    </div>
  </div>

<div class="content">
    <p>การพัฒนาเทคโนโลยีส่งผลกระทบในหลายมิติครับ ทั้งต่อตัวเรา สังคม เศรษฐกิจ และที่สำคัญมากคือสิ่งแวดล้อม เรามาดูสรุปผลกระทบในด้านต่างๆ กันครับ</p>

<table class="impact-table">
      <thead>
        <tr>
          <th>ด้านที่ได้รับผลกระทบ</th>
          <th><span class="pos-text">ผลกระทบด้านบวก</span></th>
          <th><span class="neg-text">ผลกระทบด้านลบ</span></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><strong>มนุษย์และสังคม</strong></td>
          <td>ช่วยให้ติดต่อสื่อสารสะดวก รวดเร็ว และเข้าถึงข้อมูลความรู้ได้ง่าย </td>
          <td>อาจเกิดการว่างงานจากการใช้หุ่นยนต์แทนคน หรือปัญหาการหลอกลวงออนไลน์ </td>
        </tr>
        <tr>
          <td><strong>เศรษฐกิจ</strong></td>
          <td>เพิ่มผลผลิตทางการเกษตรและอุตสาหกรรม ลดต้นทุนการผลิต </td>
          <td>ต้องใช้เงินลงทุนสูงในการซื้อเทคโนโลยีใหม่ๆ </td>
        </tr>
        <tr>
          <td><strong>สิ่งแวดล้อม</strong></td>
          <td>มีเทคโนโลยีช่วยบำบัดน้ำเสีย หรือผลิตพลังงานสะอาด </td>
          <td>เกิดปัญหาขยะอิเล็กทรอนิกส์ และมลพิษจากกระบวนการผลิต </td>
        </tr>
      </tbody>
    </table>

<div class="quiz-section">
      <div class="quiz-header">🧠 แบบทดสอบ EP.2 (4 ข้อ)</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)">ข. ด้านเศรษฐกิจ</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', false)">ข. ด้านเศรษฐกิจ</button>
        <button class="q-btn" onclick="check(this, 'q2', true)">ค. ด้านสิ่งแวดล้อม</button>
        <button class="q-btn" onclick="check(this, 'q2', false)">ง. ด้านการศึกษา</button>
        <div id="fb-q2" class="feedback"></div>
      </div>

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

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

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