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

Back

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

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

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

Title

Description

Keyword

Detail

.var-header {
    background-color: #FF5722;
    color: #FFFFFF;
    padding: 25px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
    border-bottom: 5px solid #BF360C; /* สีส้มไหม้ */
    background-image: linear-gradient(45deg, #FF7043, #E64A19);
  }

.var-content {
    padding: 30px;
  }

/* --- Card Accordion --- */
  .step-card {
    background-color: white;
    border: 2px solid #FF8A65;
    border-radius: 10px;
    margin-bottom: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  }
  
  .step-header {
    background-color: #FFCCBC;
    padding: 15px 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-left: 6px solid #D84315; /* แถบสีส้มเข้ม */
  }

.step-header:hover { background-color: #FFAB91; }
  
  .step-title {
    font-size: 18px;
    font-weight: bold;
    color: #D84315;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .icon-box { font-size: 24px; width: 40px; text-align: center; }
  .toggle-icon { font-size: 20px; color: #E64A19; transition: transform 0.3s; }

/* เนื้อหา */
  .step-detail {
    display: none;
    padding: 20px;
    background-color: white;
    border-top: 1px solid #eee;
    color: #444;
    line-height: 1.6;
  }

.step-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 20px auto 10px;
    border-radius: 8px;
    border: 3px solid #FF8A65;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  }
  .img-caption { text-align: center; font-size: 14px; color: #666; margin-bottom: 20px; font-style: italic; }

/* Active State */
  .step-card.active .step-detail { display: block; }
  .step-card.active .toggle-icon { transform: rotate(180deg); }
  .step-card.active .step-header { background-color: #FFAB91; }

/* --- Quiz --- */
  .quiz-section {
    margin-top: 40px;
    background-color: #FFF3E0;
    border: 3px solid #D84315;
    border-radius: 15px;
    padding: 25px;
    position: relative;
  }
  /* ไอคอนกล่อง */
  .quiz-section::after {
      content: '📦';
      font-size: 40px;
      position: absolute;
      top: -20px;
      right: -10px;
      transform: rotate(-10deg);
  }
  .quiz-title {
    text-align: center;
    color: #BF360C;
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 20px;
  }
  .q-item {
    background: white;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 15px;
    border: 2px solid #FF7043;
  }
  .check-btn {
    background-color: #D84315;
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 20px;
    cursor: pointer;
    margin-top: 10px;
    font-weight: bold;
    box-shadow: 0 4px #BF360C;
    transition: all 0.1s;
  }
  .check-btn:hover { background-color: #FF5722; }
  .check-btn:active { box-shadow: 0 2px #BF360C; transform: translateY(2px); }
  
  .msg-box { display: none; margin-top: 10px; font-weight: bold; }
</style>

<div class="scratch-var-container">
  <div class="var-header">📦 ตะลุยโลก Scratch EP.4: กล่องมหัศจรรย์เก็บข้อมูล (Variables)</div>

<div class="var-content">
    <p style="text-align:center; font-size:16px; color:#D84315; margin-bottom:20px; font-weight:500;">
      <b>"เกมสนุก...ต้องมีคะแนน!"</b> <br>
      มารู้จักกับ "กระเป๋าหน้าท้องโดราเอมอน" แห่งโลก Scratch <br>ที่จะช่วยให้โปรแกรมของคุณ "จำเก่ง" ขึ้นเป็นกอง <br>
      👇 <b>เปิดกล่องความรู้กันเลย!</b> 👇
    </p>

<div class="step-card active" onclick="toggleStep(this)">
      <div class="step-header">
        <div class="step-title"><span class="icon-box">🗳️</span> 1. Variable (ตัวแปร) คืออะไร?</div>
        <div class="toggle-icon">▼</div>
      </div>
      <div class="step-detail">
        <p><b>จินตนาการว่าคุณมี "กล่องเปล่า" 1 ใบครับ</b> 📦</p>
        <p>เราสามารถเอา <b>"ป้ายชื่อ"</b> มาแปะที่หน้ากล่องได้ เช่น เขียนว่า <i>"Score" (คะแนน)</i> หรือ <i>"Lives" (พลังชีวิต)</i></p>
        <p>จากนั้น เราก็สามารถใส่ <b>"ตัวเลข"</b> หรือ <b>"ข้อความ"</b> ลงไปในกล่องนี้ได้ และที่สำคัญคือ... เราสามารถ <b>"เปลี่ยนของในกล่อง"</b> ได้ตลอดเวลา!</p>
        <p>ในภาษาคอมพิวเตอร์ เราเรียกเจ้ากล่องเก็บข้อมูลนี้ว่า <b>Variable (ตัวแปร)</b> นั่นเองครับ</p>
        <img src=" https://smartyquizkids.com/assets/images/smn/4c56ff4ce4aaf9573aa5dff913df997a20260203092108.jpg" style="width: 100%;">
        <div class="img-caption">(ภาพจำลอง: ตัวแปรคือกล่องที่เราใช้เก็บค่าต่างๆ เช่น คะแนนเกม)</div>
      </div>
    </div>

<div class="step-card active" onclick="toggleStep(this)">
      <div class="step-header">
        <div class="step-title"><span class="icon-box">🎛️</span> 2. คำสั่ง Set และ Change ต่างกันยังไง?</div>
        <div class="toggle-icon">▼</div>
      </div>
      <div class="step-detail">
        <p>บล็อกสีส้มเข้มที่เราใช้บ่อยที่สุดมี 2 อัน คือ:</p>
        <ul>
            <li><b>Set [Score] to [0]:</b> (ตั้งค่า) คือการล้างของเก่าทิ้ง แล้วใส่ค่าใหม่ลงไปเลย <br><i>👉 ใช้ตอน: เริ่มเกมใหม่ (คะแนนต้องกลับมาเป็น 0)</i></li>
            <li><b>Change [Score] by [1]:</b> (เปลี่ยนค่า) คือการเพิ่มหรือลดจากของเดิม <br><i>👉 ใช้ตอน: เก็บเหรียญได้ (คะแนน +1) หรือ เดินชนศัตรู (พลังชีวิต -1)</i></li>
        </ul>
        <p><b>จำง่ายๆ:</b> Set = เริ่มใหม่ / Change = ปรับเพิ่มลด</p>
      </div>
    </div>

<div class="step-card active" onclick="toggleStep(this)">
      <div class="step-header">
        <div class="step-title"><span class="icon-box">💯</span> 3. โชว์คะแนนให้โลกเห็น!</div>
        <div class="toggle-icon">▼</div>
      </div>
      <div class="step-detail">
        <p>จุดเด่นของ Variable ใน Scratch คือ เราสามารถติ๊กถูก ✅ หน้าชื่อตัวแปร เพื่อให้มันแสดงผลเป็น <b>"ป้ายคะแนน"</b> บนหน้าจอเกมได้ทันที!</p>
        <p>สิ่งนี้ทำให้คนเล่นเกมรู้ว่า ตอนนี้ได้คะแนนเท่าไหร่แล้ว หรือเหลือเวลาอีกกี่วินาที ทำให้เกมตื่นเต้นขึ้นเยอะเลยครับ</p>
        <img src=" https://smartyquizkids.com/assets/images/smn/a3c65c2974270fd093ee8a9bf8ae7d0b20260203092203.jpg" style="width: 100%;">
        <div class="img-caption">(ภาพจำลอง: ป้ายคะแนนมุมซ้ายบนที่ช่วยให้ผู้เล่นรู้สถานะของเกม)</div>
      </div>
    </div>

<div class="quiz-section">
      <div class="quiz-title">📦 ทดสอบความจำกล่องวิเศษ</div>
      
      <div class="q-item">
        <p><b>1. เมื่อกดธงเขียวเพื่อเริ่มเกมใหม่ เราควรใช้บล็อกใดเพื่อทำให้คะแนนเป็น 0?</b></p>
        <label><input type="radio" name="var1" value="A"> ก. Change Score by 0</label><br>
        <label><input type="radio" name="var1" value="B"> ข. Set Score to 0</label><br>
        <label><input type="radio" name="var1" value="C"> ค. Hide Variable Score</label><br>
        <button class="check-btn" onclick="checkVar('var1', 'B', 'vmsg1')">ส่งคำตอบ</button>
        <div id="vmsg1" class="msg-box"></div>
      </div>

<div class="q-item">
        <p><b>2. ถ้าตัวละครเดินเก็บเหรียญทอง เราควรใช้บล็อกใดเพื่อเพิ่มคะแนน?</b></p>
        <label><input type="radio" name="var2" value="A"> ก. Set Score to 1</label><br>
        <label><input type="radio" name="var2" value="B"> ข. Change Score by 1</label><br>
        <label><input type="radio" name="var2" value="C"> ค. Change Score by -1</label><br>
        <button class="check-btn" onclick="checkVar('var2', 'B', 'vmsg2')">ส่งคำตอบ</button>
        <div id="vmsg2" class="msg-box"></div>
      </div>
    </div>

</div>
</div>