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

Back

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

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

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

Title

Description

Keyword

Detail

.learning-card {
    display: none; /* ซ่อนการ์ดทั้งหมดก่อน */
    padding: 30px;
    text-align: center;
    animation: fadeIn 0.5s;
  }

.learning-card.active {
    display: block; /* แสดงเฉพาะการ์ดที่ Active */
  }

.card-image {
    width: 150px;
    height: 100px; /* ขนาดจำลอง */
    background-color: #f0f0f0;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-weight: bold;
    color: #555;
  }
  
  /* ตัวอย่างสีสำหรับสัญลักษณ์ */
  .oval-shape { border-radius: 50%; border: 3px solid #FF5733; }
  .rect-shape { border: 3px solid #33C1FF; }

.nav-buttons {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    background-color: #f9f9f9;
    border-top: 1px solid #eee;
  }

button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: 0.3s;
  }

.btn-next { background-color: #28a745; color: white; }
  .btn-prev { background-color: #6c757d; color: white; }
  .btn-quiz { background-color: #007bff; color: white; margin: 5px; }
  
  button:hover { opacity: 0.8; }
  button:disabled { background-color: #ddd; cursor: not-allowed; }

/* Animation */
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  #feedback { margin-top: 15px; font-weight: bold; }
</style>

<div class="learning-card-container">
  
  <div class="learning-card active" id="card-1">
    <h3>Card 1/3: จุดเริ่มต้นและสิ้นสุด</h3>
    <div class="card-image oval-shape">Start / End</div>
    <p>สัญลักษณ์ <strong>"วงรี" (Terminal)"</strong> ใช้สำหรับแสดงจุดเริ่มต้น <br>หรือจุดสิ้นสุดของการทำงานเสมอ</p>
  </div>

<div class="learning-card" id="card-2">
    <h3>Card 2/3: การประมวลผล</h3>
    <div class="card-image rect-shape">Process</div>
    <p>สัญลักษณ์ <strong>"สี่เหลี่ยมผืนผ้า"</strong> ใช้เมื่อมีการคำนวณ <br>หรือกำหนดค่าตัวแปร เช่น <em>X = X + 1</em></p>
  </div>

<div class="learning-card" id="card-3">
    <h3>Card 3/3: ทดสอบความเข้าใจ</h3>
    <p>คำถาม: สัญลักษณ์ใดใช้สำหรับ "เริ่มเขียนโปรแกรม"?</p>
    <div>
      <button class="btn-quiz" onclick="checkAnswer(false)">สี่เหลี่ยม</button>
      <button class="btn-quiz" onclick="checkAnswer(true)">วงรี</button>
    </div>
    <div id="feedback"></div>
  </div>

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

function changeCard(direction) {
    // ซ่อนการ์ดปัจจุบัน
    document.getElementById(`card-${currentCard}`).classList.remove('active');
    
    // เปลี่ยนเลขหน้า
    currentCard += direction;
    
    // แสดงการ์ดใหม่
    document.getElementById(`card-${currentCard}`).classList.add('active');

// จัดการปุ่มเปิด/ปิด
    document.getElementById('prevBtn').disabled = (currentCard === 1);
    
    if (currentCard === totalCards) {
        document.getElementById('nextBtn').style.display = 'none'; // ซ่อนปุ่มถัดไปเมื่อถึงหน้าสุดท้าย
    } else {
        document.getElementById('nextBtn').style.display = 'block';
        document.getElementById('nextBtn').innerText = 'ถัดไป';
    }
  }