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

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: #1565C0; 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: #42A5F5; }
  .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-microchip"></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">
    <div class="intro-box">ในโลกของเทคโนโลยี <b>อิเล็กทรอนิกส์ (Electric)</b> เข้ามามีบทบาทสำคัญมากในการควบคุมกลไกต่างๆ ให้ทำงานได้อัตโนมัติ ก่อนที่เราจะไปต่อวงจร เรามาทำความรู้จัก <b>วัสดุอุปกรณ์อิเล็กทรอนิกส์พื้นฐาน</b> ที่นักประดิษฐ์ต้องใช้กันก่อนครับ </div>
    
    <h2 style="font-family:'Kanit'; color:#0D47A1;">ชิ้นส่วนอิเล็กทรอนิกส์ที่ควรรู้จัก</h2>

[Image of basic electronic components on a breadboard]

<div class="elec-grid">
      <div class="e-card">
        <div class="e-icon"><i class="fas fa-th"></i></div>
        <div class="e-text">
          <h3>แผงวงจรทดลอง <br>(Breadboard)</h3><br><p>แผงพลาสติกที่มีรูจำนวนมาก ใช้สำหรับเสียบสายไฟและอุปกรณ์เพื่อทดลองต่อวงจร โดยไม่ต้องบัดกรี </p>
        </div>
      </div>
      <div class="e-card">
        <div class="e-icon"><i class="fas fa-lightbulb"></i></div>
        <div class="e-text">
          <h3>หลอด LED</h3><br><p>ไดโอดเปล่งแสง (Light Emitting Diode) ทำหน้าที่ให้แสงสว่าง มีขา 2 ขา (บวกและลบ)</p>
        </div>
      </div>
      <div class="e-card">
        <div class="e-icon"><i class="fas fa-wave-square"></i></div>
        <div class="e-text">
          <h3>ตัวต้านทาน <br>(Resistor)</h3><br><p>ตัวต้านทานกระแสไฟฟ้า ช่วยจำกัดหรือลดปริมาณกระแสไฟฟ้าที่ไหลในวงจร เพื่อไม่ให้อุปกรณ์อื่นพัง </p>
        </div>
      </div>
      <div class="e-card">
        <div class="e-icon"><i class="fas fa-volume-up"></i></div>
        <div class="e-text">
          <h3>ออดไฟฟ้า <br>(Buzzer)</h3><br><p>กริ่งหรือลำโพงขนาดเล็ก ทำหน้าที่เปลี่ยนพลังงานไฟฟ้าให้เป็น "เสียง" แจ้งเตือน</p>
        </div>
      </div>
      <div class="e-card">
        <div class="e-icon"><i class="fas fa-project-diagram"></i></div>
        <div class="e-text">
          <h3>สายจัมเปอร์ <br>(Jumper Wire)</h3><br><p>สายไฟเส้นเล็กๆ ที่ใช้เสียบเชื่อมต่อกระแสไฟระหว่างอุปกรณ์ต่างๆ บน Breadboard</p>
        </div>
      </div>
    </div><br><p>นอกจากนี้ ยังมีอุปกรณ์ขั้นสูงอย่าง <b>ไมโครคอนโทรลเลอร์ (Microcontroller)</b>  ซึ่งเปรียบเสมือนสมองกลที่ใช้สั่งการอุปกรณ์เหล่านี้ ซึ่งเราจะได้เรียนรู้ใน EP ถัดไปครับ!</p>

<div class="quiz-section">
      <div class="quiz-header">🧠 แบบทดสอบทบทวน (3 ข้อ)</div>

<div class="q-block">
        <div class="q-question">1. อุปกรณ์ใดทำหน้าที่ "จำกัดหรือต้านทาน" การไหลของกระแสไฟฟ้าในวงจร?</div>
        <button class="q-btn" onclick="check(this, 'q1', false)">ก. แผงวงจรทดลอง (Breadboard) </button>
        <button class="q-btn" onclick="check(this, 'q1', false)">ข. หลอดไฟ LED </button>
        <button class="q-btn" onclick="check(this, 'q1', true)">ค. ตัวต้านทาน (Resistor) </button>
        <button class="q-btn" onclick="check(this, 'q1', false)">ง. สายจัมเปอร์ (Jumper Wire) </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', true)">ก. ออดไฟฟ้า (Buzzer) </button>
        <button class="q-btn" onclick="check(this, 'q2', false)">ข. มอเตอร์ (Motor) </button>
        <button class="q-btn" onclick="check(this, 'q2', false)">ค. สวิตช์ (Switch) </button>
        <button class="q-btn" onclick="check(this, 'q2', false)">ง. ตัวต้านทานแปรค่าตามแสง (LDR) </button>
        <div id="fb-q2" class="feedback"></div>
      </div>

<div class="q-block">
        <div class="q-question">3. ข้อดีที่สำคัญที่สุดของการใช้ "แผงวงจรทดลอง (Breadboard)" คืออะไร?</div>
        <button class="q-btn" onclick="check(this, 'q3', false)">ก. ทำหน้าที่จ่ายพลังงานไฟฟ้าให้กับวงจร</button>
        <button class="q-btn" onclick="check(this, 'q3', true)">ข. สามารถเสียบทดลองต่อวงจรได้สะดวก โดยไม่จำเป็นต้องบัดกรี </button>
        <button class="q-btn" onclick="check(this, 'q3', false)">ค. [cite_start]ช่วยลดความต้านทานของกระแสไฟ </button>
        <button class="q-btn" onclick="check(this, 'q3', false)">ง. ทำหน้าที่เป็นสมองกลควบคุมการทำงาน</button>
        <div id="fb-q3" 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>