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

Back

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

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

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

Title

Description

Keyword

Detail

.learning-card {
    display: none;
    padding: 30px;
    text-align: center;
    animation: slideIn 0.5s;
  }

.learning-card.active {
    display: block;
  }

/* สร้างรูปสี่เหลี่ยมขนมเปียกปูนด้วย CSS */
  .diamond-wrapper {
    width: 100px;
    height: 100px;
    margin: 20px auto 30px; /* เว้นระยะด้านล่าง */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .diamond-shape {
    width: 70px;
    height: 70px;
    border: 4px solid #FF8C00; /* สีส้มเข้ม */
    background-color: #FFF4E0;
    transform: rotate(45deg); /* หมุน 45 องศา */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
  }

/* แก้ไขข้อความใน Diamond ไม่ให้เอียงตาม */
  .diamond-text {
    transform: rotate(-45deg); 
    font-weight: bold;
    color: #E65100;
    font-size: 14px;
  }

/* จำลองบล็อก Scratch */
  .scratch-block {
    background-color: #FFAB19;
    color: white;
    padding: 8px 15px;
    border-radius: 5px;
    display: inline-block;
    font-weight: bold;
    margin: 5px;
    border: 1px solid #E69500;
    box-shadow: 1px 1px 0px #CC8500;
    text-align: left;
  }

/* ปุ่มกด */
  .nav-buttons {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    background-color: #FFF8E1;
    border-top: 1px solid #FFECB3;
  }

button {
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 16px;
    transition: 0.2s;
    font-weight: bold;
  }

.btn-next { background-color: #FF8C00; color: white; }
  .btn-prev { background-color: #9E9E9E; color: white; }
  .btn-quiz { 
    background-color: #fff; 
    border: 2px solid #FF8C00; 
    color: #FF8C00; 
    margin: 10px; 
    min-width: 120px;
  }
  
  .btn-quiz:hover { background-color: #FF8C00; color: white; }
  button:hover { opacity: 0.9; transform: scale(1.02); }
  button:disabled { background-color: #E0E0E0; cursor: not-allowed; transform: none; }

@keyframes slideIn {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
  }
  
  #feedback-ep2 { margin-top: 15px; font-weight: bold; min-height: 24px;}
  .highlight { color: #E65100; font-weight: bold; }
</style>

<div class="learning-card-container-ep2">
  
  <div class="learning-card active" id="c2-card-1">
    <h3 style="color:#E65100;">ตอนที่ 2: ทางแยกแห่งการตัดสินใจ</h3>
    
    <div class="diamond-wrapper">
      <div class="diamond-shape">
        <span class="diamond-text">Decision</span>
      </div>
    </div>

<p>นี่คือสัญลักษณ์ <strong>"สี่เหลี่ยมขนมเปียกปูน"</strong> <br>(Decision Symbol)</p>
    <p>เราจะใช้เมื่อต้อง <span class="highlight">"ตรวจสอบเงื่อนไข"</span> <br>เพื่อเลือกไปทาง <strong>จริง (True)</strong> หรือ <strong>เท็จ (False)</strong></p>
  </div>

<div class="learning-card" id="c2-card-2">
    <h3 style="color:#E65100;">ตัวอย่าง: ฝนตกไหม?</h3>
    <p>ลองคิดตามนะครับ ถ้าเราจะออกจากบ้าน...</p>
    
    <div style="background:#f9f9f9; padding:15px; border-radius:10px; margin:10px 0;">
        <div class="scratch-block" style="background:#4C97FF;">ถาม: ฝนตกหรือไม่?</div><br>
        ⬇<br>
        <div class="scratch-block">ถ้า (จริง) ➔ กางร่ม ☔</div><br>
        <div class="scratch-block" style="background:#FF6680; margin-top:5px;">ถ้า (ไม่จริง) ➔ ใส่หมวก 🧢</div>
    </div>
    
    <p>ในโปรแกรม Scratch เราจะใช้บล็อกสีส้มที่ชื่อว่า <br><strong>"If...then...else"</strong> นั่นเองครับ</p>
  </div>

<div class="learning-card" id="c2-card-3">
    <h3 style="color:#E65100;">ภารกิจท้าทาย!</h3>
    <p>โจทย์: ถ้าคะแนนสอบผ่านคือ <strong>50 คะแนน</strong></p>
    <p style="font-size:18px;">แต่น้องสมาร์ทสอบได้ <strong>49 คะแนน</strong></p>
    <p>ถามว่า: เงื่อนไขเป็นจริง (ผ่าน) หรือ เท็จ (ตก)?</p>
    
    <div style="margin-top:20px;">
      <button class="btn-quiz" onclick="checkAnswerEp2(false)">❌ เป็นเท็จ (สอบตก)</button>
      <button class="btn-quiz" onclick="checkAnswerEp2(true)">✅ เป็นจริง (สอบผ่าน)</button>
    </div>
    <div id="feedback-ep2"></div>
  </div>

<div class="nav-buttons">
    <button class="btn-prev" onclick="changeCardEp2(-1)" id="prevBtnEp2" disabled="">ย้อนกลับ</button>
    <button class="btn-next" onclick="changeCardEp2(1)" id="nextBtnEp2">ถัดไป</button>
  </div>
</div>

function changeCardEp2(direction) {
    document.getElementById(`c2-card-${currentCardEp2}`).classList.remove('active');
    currentCardEp2 += direction;
    document.getElementById(`c2-card-${currentCardEp2}`).classList.add('active');

document.getElementById('prevBtnEp2').disabled = (currentCardEp2 === 1);
    
    const nextBtn = document.getElementById('nextBtnEp2');
    if (currentCardEp2 === totalCardsEp2) {
        nextBtn.style.display = 'none';
    } else {
        nextBtn.style.display = 'block';
    }
  }