Snake's AI 互動學習實驗室

日期：
互動實驗室整合範例

互動實驗室整合範例

實驗一：修改頁面標題

請輸入新的標題，然後點擊下方按鈕更新頁面標題。

document.getElementById('update-title-btn').addEventListener('click', () => {
  const newTitle = document.getElementById('new-title').value;
  if (newTitle.trim() !== "") {
    document.getElementById('page-title').textContent = newTitle;
  }
});

實驗二：變更頁面背景色

document.getElementById('change-bg-btn').addEventListener('click', () => {
  const newColor = document.getElementById('bg-color-picker').value;
  document.body.style.backgroundColor = newColor;
});

實驗三：顯示或隱藏教學內容

這裡是教學內容，包含網頁設計的基本概念與技巧說明。

document.getElementById('toggle-tutorial-btn').addEventListener('click', () => {
  const tutorialContent = document.getElementById('tutorial-content');
  tutorialContent.style.display = (tutorialContent.style.display === 'none' || tutorialContent.style.display === '')
                                  ? 'block' : 'none';
});

實驗四：更新標題與變更標題顏色

請輸入新的標題，並選擇一個標題顏色。



    // 更新標題文字
    document.getElementById('update-title-btn-4').addEventListener('click', () => {
      const newTitle = document.getElementById('new-title-4').value;
      if (newTitle.trim() !== "") {
        document.getElementById('page-title').textContent = newTitle;
      }
    });

    // 變更標題顏色
    document.getElementById('change-color-btn').addEventListener('click', () => {
      const selectedColor = document.getElementById('title-color').value;
      document.getElementById('page-title').style.color = selectedColor;
    });

實驗五：改變字體大小

這是一段可以改變字體大小的文字。

const textElement = document.getElementById('text');
let fontSize = 16; // 初始字體大小

// 放大字體
document.getElementById('increase-btn').addEventListener('click', () => {
  fontSize += 2; // 增加 2px
  textElement.style.fontSize = fontSize + 'px';
});

// 縮小字體
document.getElementById('decrease-btn').addEventListener('click', () => {
  if (fontSize > 10) { // 避免字體過小
    fontSize -= 2; // 減少 2px
    textElement.style.fontSize = fontSize + 'px';
  }
});