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

Back

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

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

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

Title

Description

Keyword

Detail

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

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

/* สร้างรูปจำลอง Loop Block (ตัว C) */
  .loop-block-visual {
    width: 120px;
    height: 80px;
    margin: 10px auto;
    border-left: 15px solid #FFAB00;
    border-top: 15px solid #FFAB00;
    border-bottom: 15px solid #FFAB00;
    border-right: none;
    border-radius: 10px 0 0 10px;
    position: relative;
    box-shadow: 3px 3px 0px #E65100;
  }
  
  .loop-arrow {
    font-size: 40px;
    color: #FF6F00;
    font-weight: bold;
    display: block;
    margin-top: 10px;
    animation: spin 3s infinite linear;
  }

/* กล่องโค้ดจำลอง */
  .code-box {
    background-color: #FFF8E1;
    border: 1px dashed #FFC107;
    padding: 10px;
    border-radius: 8px;
    text-align: left;
    font-family: monospace;
    margin: 10px 0;
    font-size: 14px;
  }

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

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

.btn-next-ep3 { background-color: #FFC107; color: #333; }
  .btn-prev-ep3 { background-color: #BDBDBD; color: white; }
  
  .quiz-option-ep3 {
    display: block;
    width: 100%;
    margin: 8px 0;
    padding: 10px;
    background: white;
    border: 2px solid #FFC107;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    color: #333;
  }
  
  .quiz-option-ep3:hover { background-color: #FFF8E1; }

@keyframes zoomIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
  }
  
  @keyframes spin { 100% { transform: rotate(360deg); } }

#feedback-ep3 { margin-top: 15px; font-weight: bold; min-height: 24px;}
</style>

<div class="learning-card-container-ep3">
  
  <div class="learning-card-ep3 active" id="c3-card-1">
    <h3 style="color:#F57F17;">ตอนที่ 3: วงวนมหาสนุก (Loop)</h3>
    <div class="loop-arrow">↻</div>
    <p>เคยไหม? ที่ต้องทำอะไรซ้ำๆ เดิมๆ <br>เช่น เดิน 10 ก้าว, ปรบมือ 5 ครั้ง</p>
    <p>ในคอมพิวเตอร์ เราเรียกสิ่งนี้ว่า<br><strong style="color:#F57F17; font-size:20px;">"การทำซ้ำ" (Loop)</strong></p>
  </div>

<div class="learning-card-ep3" id="c3-card-2">
    <h3 style="color:#F57F17;">ทำไมต้องใช้ Loop?</h3>
    <p>ถ้าต้องสั่งให้ตัวละคร "เดิน 5 ครั้ง"</p>
    
    <div style="display:flex; justify-content:space-around;">
        <div class="code-box">
            <strong style="color:red;">แบบไม่ใช้ Loop</strong><br>
            เดินไปข้างหน้า<br>
            เดินไปข้างหน้า<br>
            เดินไปข้างหน้า<br>
            เดินไปข้างหน้า<br>
            เดินไปข้างหน้า
        </div>
        <div class="code-box">
            <strong style="color:green;">แบบใช้ Loop</strong><br>
            <span style="color:#F57F17;">ทำซ้ำ (5 รอบ)</span> {<br>
              เดินไปข้างหน้า<br>
            }
        </div>
    </div>
    <p>เห็นไหมครับ? แบบใช้ Loop สั้นกว่าเยอะ!</p>
  </div>

<div class="learning-card-ep3" id="c3-card-3">
    <h3 style="color:#F57F17;">ทดสอบความเข้าใจ</h3>
    
    <div class="loop-block-visual" style="height:auto; border-right:none; padding:10px; text-align:left; color:#333; font-weight:bold; font-size:14px;">
        ทำซ้ำ (3 รอบ) <br>
           ➔ ร้อง "Meow" 😺
    </div>

<p>ถาม: โปรแกรมนี้จะร้อง Meow กี่ครั้ง?</p>
    
    <button class="quiz-option-ep3" onclick="checkAnswerEp3(1)">1 ครั้ง</button>
    <button class="quiz-option-ep3" onclick="checkAnswerEp3(3)">3 ครั้ง</button>
    <button class="quiz-option-ep3" onclick="checkAnswerEp3(99)">ร้องไปเรื่อยๆ ไม่หยุด</button>
    
    <div id="feedback-ep3"></div>
  </div>

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

function changeCardEp3(direction) {
    document.getElementById(`c3-card-${currentCardEp3}`).classList.remove('active');
    currentCardEp3 += direction;
    document.getElementById(`c3-card-${currentCardEp3}`).classList.add('active');

document.getElementById('prevBtnEp3').disabled = (currentCardEp3 === 1);
    
    const nextBtn = document.getElementById('nextBtnEp3');
    if (currentCardEp3 === totalCardsEp3) {
        nextBtn.style.display = 'none';
    } else {
        nextBtn.style.display = 'block';
    }
  }