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

Back

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

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

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

Title

Description

Keyword

Detail

/* Case Study Box */
  .case-study { border: 2px dashed #1565C0; border-radius: 15px; padding: 20px; background: #FAFAFA; margin: 20px 0; }
  .case-header { background: #1565C0; color: white; padding: 5px 15px; border-radius: 20px; display: inline-block; font-weight: bold; margin-bottom: 15px; }
  
  /* Step List */
  .step-list { list-style: none; padding: 0; }
  .step-item { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 15px; }
  .step-num { background: #FFC107; color: #333; width: 30px; height: 30px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-weight: bold; flex-shrink: 0; }

/* Quiz Section */
  .quiz-section { margin-top: 40px; border-top: 2px solid #EEE; padding-top: 20px; }
  .quiz-btn { width: 100%; padding: 12px; margin-top: 10px; border: 1px solid #CCC; border-radius: 8px; background: white; cursor: pointer; font-size: 16px; transition: 0.2s; text-align: left; }
  .quiz-btn:hover { background: #E3F2FD; border-color: #2196F3; }
  .feedback { margin-top: 10px; font-weight: bold; display: none; padding: 10px; border-radius: 5px; }
  .correct { background: #C8E6C9; color: #2E7D32; }
  .wrong { background: #FFCDD2; color: #C62828; }

</style>

<div class="mech-container">
   
  <div class="mech-header">
    <div class="mech-icon"><i class="fas fa-cogs"></i></div>
    <div class="header-text">
      <h2>Mechanisms in Daily Life</h2>
      <p>EP.1 กลไก...ผู้อยู่เบื้องหลังความสะดวกสบาย</p>
    </div>
  </div>

<div class="content-body">
    
    <div class="concept-box">
      <p>🤔 <b>เคยสงสัยไหม?</b> ทำไมเราถึงปั่นจักรยานแล้วล้อหมุน? ทำไมกรรไกรถึงตัดกระดาษขาดง่ายๆ?</p>
      <p>คำตอบคือ <strong>"ระบบกลไก" (Mechanism System)</strong> ครับ! มันคือส่วนประกอบที่มนุษย์สร้างขึ้นเพื่อ:</p>
      <ul>
        <li>✅ <b>ผ่อนแรง (Reduce Force):</b> ให้เราทำงานหนักได้เบาลง</li>
        <li>✅ <b>ควบคุมการเคลื่อนที่ (Control Motion):</b> ให้วัตถุขยับไปในทิศทางที่เราต้องการ</li>
      </ul>
    </div>

<div class="case-study">
      <div class="case-header">🔎 กรณีศึกษา: เทปลบคำผิด (Correction Tape)</div>
      <p>ของใกล้ตัวที่น้องๆ ใช้กันทุกวัน ข้างในมีความลับซ่อนอยู่! ลองมาดูกันว่า <b>"กลไก"</b> ทำงานอย่างไรเมื่อเราลบคำผิด</p>
      
      <ul class="step-list">
        <li class="step-item">
          <div class="step-num">1</div>
          <div><b>Input (แรงเข้า):</b> เมื่อเราออกแรง <u>กด</u> ปลายเทปลงบนกระดาษ แล้ว <u>ลากถอยหลัง</u></div>
        </li>
        <li class="step-item">
          <div class="step-num">2</div>
          <div><b>Process (กลไกทำงาน):</b> แรงจากการลากจะทำให้ <b>"เฟือง" (Gear)</b> ภายในตลับเกิดการหมุน (ทวนเข็มนาฬิกา)</div>
        </li>
        <li class="step-item">
          <div class="step-num">3</div>
          <div><b>Output (ผลลัพธ์):</b> เนื้อเทปสีขาวจะถูกปล่อยออกมาปิดคำผิด ในขณะเดียวกัน เฟืองอีกตัวก็จะหมุนเก็บเทปใสที่ใช้แล้วกลับเข้าไปอย่างเป็นระเบียบ</div>
        </li>
      </ul>
      <p style="font-size: 16px; color: #666; text-align: center;"><i>(อ้างอิงจากหนังสือเรียน หน้า 3)</i></p>
    </div>

<h3 style="color:#1565C0;"><i class="fas fa-lightbulb"></i> สรุปใจความสำคัญ</h3>
    <p>ถ้าไม่มีกลไกเฟืองภายใน เทปก็จะพันกันยุ่งเหยิง หรือต้องใช้มือดึงเอง นี่แหละคือหน้าที่ของกลไก <b>"ช่วยให้ชีวิตง่ายขึ้นและทำงานได้แม่นยำ"</b> นั่นเองครับ</p>

<div class="quiz-section">
      <h3 style="color:#333;">🧠 ลองตอบดูหน่อย!</h3>
      <p><b>ข้อใดคือหน้าที่หลักของ "ระบบกลไก" ในเทปลบคำผิด?</b></p>
      
      <button class="quiz-btn" onclick="checkAns(this, false)">ก. เพื่อให้ตลับเทปมีน้ำหนักเบา</button>
      <button class="quiz-btn" onclick="checkAns(this, true)">ข. เพื่อส่งถ่ายแรงหมุนและเก็บเทปให้เป็นระเบียบ</button>
      <button class="quiz-btn" onclick="checkAns(this, false)">ค. เพื่อทำให้เนื้อเทปแห้งเร็วขึ้น</button>
      
      <div id="fb-ep1" class="feedback"></div>
    </div>

</div>
</div>

if(isCorrect) {
      btn.style.backgroundColor = '#C8E6C9';
      btn.style.borderColor = '#2E7D32';
      fb.innerHTML = '<i class="fas fa-check-circle"></i> <b>ถูกต้อง!</b> กลไกเฟืองช่วยเปลี่ยนแรงกดเป็นการหมุนเพื่อจ่ายและเก็บเทปครับ';
      fb.className = 'feedback correct';
    } else {
      btn.style.backgroundColor = '#FFCDD2';
      btn.style.borderColor = '#C62828';
      fb.innerHTML = '<i class="fas fa-times-circle"></i> <b>ยังไม่ใช่นะครับ</b> กลไกหลักคือการจัดการการหมุนของเทปครับ ลองใหม่รอบหน้านะ!';
      fb.className = 'feedback wrong';
    }
    fb.style.display = 'block';
  }
</script>