# data[].attributes.headline
內容細項分成20項 (測驗時間一節半)

# data[].attributes.subject
內容細項分成20項 (測驗時間一節半)

# data[].attributes.body
完成後按照要求放在自己小組的區塊內

不會做的主題也可以搜尋網路的作法(考驗你們搜尋資料的能力)

可以自由選擇要做哪些項目

注意你給AI的提示詞，以下這些網站可以用

chatgpt

perplexity

gemini (需要學校以外的帳號登入)

至少要完成 9 項，不然無論勝負都會被安排之後的抬餐

# data[].attributes.body
用ai工具生成動物的圖片，三張"同樣動物"不同動作的圖片。

完成圖片上傳後需要截圖證明是你們實作的

# data[].attributes.body
用ai工具生成音樂

曲名：珍重再見

完成後上傳音樂創作的連結分享，並分享你創作完成的截圖證明是你們實作

# data[].attributes.body
用ai工具寫一首詩或歌詞

主題是畢業相關

完成後分享文字內容，並分享創作截圖工具內容證明

# data[].attributes.body
主題：國語句型提示機

點擊按鈕，會隨機提供人事時地物分別的五個條件

只能點擊一次的不記分

完成後把代碼貼上來

# data[].attributes.body
主題：生存類型小遊戲

難易度不可以在3分鐘內就破關

需要至少三個不同房間或場景按鈕

至少需要包含6種素材

要有血量標示(包括實際消耗)

材料可以有食物、水、藥水等等

補充相對應的基本條件

可加入怪物、植物、礦石等等

要可以操作外，包括通關條件、失敗的介面都需要設計

完成後把代碼貼上來

# data[].attributes.body
主題：記帳小工具

要包含收入、支出按鈕

點擊按鈕後分別會有至少4種選項按鈕可以點選

要有實際小工具計錢功能(加減)

完成後把代碼貼上來

# data[].attributes.body
主題：數學四則運算練習器

點擊開始練習按鈕會計時計分

包含共50題題庫(加減乘除)

每次開始隨機抽其中的10題

每錯一題扣10分，滿分100分

倒計時設定5分鐘

完成後把代碼貼上來

# data[].attributes.body
用影片形式火柴人動畫

主題：介紹一種水果

可插入實際圖片或是應用圖片素材

每頁動畫不得超過5秒，做一部至少1分鐘的介紹影片。

完成後貼上影片連結(記得開分享)

# data[].attributes.body
用影片形式呈現

主題：介紹一篇唐詩

內容需要介紹作者、解釋句子、包含唸讀錄音

每頁動畫不得超過6秒，做一部至少1分鐘的介紹影片。

完成後貼上影片連結(記得開分享)

# data[].attributes.body
主題：介紹報紙

製作至少四項超連結的跳轉、每一頁都需要包含實際網路找的圖片，以及清楚說明至少100字

可以包括報紙版面介紹、報紙內容、報紙種類....

發布之後，給予網站的連結

# data[].attributes.body
製作一份畢業典禮的邀請函(真實)

主旨在於邀請爸爸媽媽們一同前來參加畢業典禮

內容需豐富附圖、文字說明至少100字

排版清楚後下載成png或jpg檔案分享

# data[].attributes.body
用任意網站或是用代碼創作

製作至少20張的單字卡(可翻面，一面中文一面英文)

主題自訂(20張都要分別相關)

ex. 交通工具、工作、動物......

完成後貼上網址或是代碼或是成品分享

# data[].attributes.body
畫圖後用以下網站做出動圖

https://sketch.metademolab.com/

分享這個圖片的至少10個動作，上傳分享

# data[].attributes.attachment_link.description
Transform static sketches into fun animations.

# data[].attributes.body
製作畢業典禮致詞錄音結合網站動畫

參考以下，要有開頭結尾錄製1:30

親愛的校長、各位師長、家長，以及我最珍貴的同學們：

今天，當鳳凰花綻放得像火焰般熱烈，我們站在這裡，帶著六年的點滴回憶，準備展開新的旅程。還記得.....

「今天我們以學校為榮，明天學校將以我們為傲！」

謝謝大家！
（致詞人姓名）(日期）

# data[].attributes.body
生成一篇包含四個章節的小說

內容要適合國小中低年級讀

主題自訂，每個章節至少600字

AI沒辦法一口氣生成全部因為字數有上限，需要分幾次生成

完成後貼上來分享，這裡貼上有字數限制

# data[].attributes.body
拍一張照片，轉換成像素風格圖片

放上來兩張圖片比對分享

# data[].attributes.body
2x+y+3z=51

當x,y,z都是正整數且不得為0時，的所有可能解

貼上ai圖片及結果

# data[].attributes.body
登入後設計電子討論牆

分成幾個區塊

1.分享音樂連結(影片一部)

2.分享ai介紹影片(影片一部)

3.宣傳自我介紹網站(組員全部的自我介紹)

# data[].attributes.headline
19  看完影片寫下答案

# data[].attributes.subject
19  看完影片寫下答案

# data[].attributes.body
影片播放找到四題分別的答案並截圖

# data[].attributes.body
商品任4樣

製作拍賣網站的價格定價以及下單的功能

用任意ai可協助

# data[].attributes.body
<!DOCTYPE html>

<html lang="zh-Hant">

<head>

<meta charset="UTF-8">

<title>角色選擇大冒險！</title>

<style>

body {

font-family: '微軟正黑體';

background-color: #f5f5dc;

text-align: center;

padding: 40px;

}

.character, .monster {

display: inline-block;

padding: 20px;

border: 3px solid #333;

border-radius: 10px;

background-color: #fff;

width: 240px;

margin: 10px;

}

.btn {

padding: 10px 20px;

margin: 10px;

font-size: 16px;

border-radius: 10px;

border: none;

cursor: pointer;

}

.btn-start { background: #007bff; color: white; }

.btn-attack { background-color: #28a745; color: white; }

.btn-heal { background-color: #17a2b8; color: white; }

.btn-ultimate { background-color: #dc3545; color: white; }

.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.log {

margin-top: 30px;

background: #f2f2f2;

padding: 20px;

border-radius: 10px;

height: 250px;

overflow-y: auto;

text-align: left;

width: 500px;

margin-left: auto;

margin-right: auto;

font-size: 14px;

}

select {

font-size: 16px;

padding: 5px;

margin-bottom: 20px;

}

</style>

</head>

<body>

<h1>🎮 選角對戰喵霸龍！</h1>

<select id="characterSelect">

<option value="pinliang">品良（平均型）</option>

<option value="zoro">索隆（高攻擊）</option>

<option value="luffy">魯夫（高血量）</option>

</select>

<button class="btn btn-start" onclick="startGame()">開始遊戲！</button>

<div id="gameArea" style="display:none;">

<div class="character" id="hero">

<h2 id="heroName">主角：</h2>

<p>❤️ HP：<span id="heroHP"></span></p>

<p>🧪 藥水：<span id="potions">2</span></p>

<p>💥 必殺：<span id="ultCount">1</span></p>

</div>

<div class="monster">

<h2>怪物：喵霸龍</h2>

<p>💀 HP：<span id="monsterHP">120</span></p>

</div>

<button class="btn btn-attack" onclick="attack()">攻擊</button>

<button class="btn btn-heal" onclick="heal()">補血</button>

<button class="btn btn-ultimate" onclick="ultimate()" id="ultBtn">必殺技</button>

<div class="log" id="log">

<strong>📜 戰鬥紀錄：</strong><br>

</div>

</div>

<script>

let hero = {

name: "品良",

hp: 100,

maxHP: 100,

potions: 2,

ult: 1,

minDmg: 5,

maxDmg: 20

};

let monsterHP = 120;

function startGame() {

const choice = document.getElementById("characterSelect").value;

if (choice === "pinliang") {

hero = { name: "品良", hp: 100, maxHP: 100, potions: 2, ult: 1, minDmg: 5, maxDmg: 20 };

} else if (choice === "zoro") {

hero = { name: "索隆", hp: 90, maxHP: 90, potions: 2, ult: 1, minDmg: 10, maxDmg: 30 };

} else if (choice === "luffy") {

hero = { name: "魯夫", hp: 130, maxHP: 130, potions: 2, ult: 1, minDmg: 3, maxDmg: 15 };

}

monsterHP = 120;

document.getElementById("gameArea").style.display = "block";

document.getElementById("heroName").innerText = `主角：${hero.name}`;

updateUI();

document.getElementById("log").innerHTML = "<strong>📜 戰鬥紀錄：</strong><br>";

}

function updateUI() {

document.getElementById("heroHP").innerText = hero.hp;

document.getElementById("monsterHP").innerText = monsterHP;

document.getElementById("potions").innerText = hero.potions;

document.getElementById("ultCount").innerText = hero.ult;

document.getElementById("ultBtn").disabled = hero.ult <= 0;

}

function logMsg(msg) {

const log = document.getElementById("log");

log.innerHTML += msg + "<br>";

log.scrollTop = log.scrollHeight;

}

function attack() {

if (hero.hp <= 0 || monsterHP <= 0) return;

let heroDmg = Math.floor(Math.random() * (hero.maxDmg - hero.minDmg + 1)) + hero.minDmg;

let monsterDmg = Math.floor(Math.random() * 15) + 3;

// 怪物暴擊 10%

if (Math.random() < 0.1) {

monsterDmg *= 2;

logMsg("💥 喵霸龍暴擊了！");

}

monsterHP -= heroDmg;

hero.hp -= monsterDmg;

if (monsterHP < 0) monsterHP = 0;

if (hero.hp < 0) hero.hp = 0;

logMsg(`🗡️ ${hero.name} 攻擊造成 ${heroDmg} 傷害！`);

logMsg(`😾 喵霸龍反擊造成 ${monsterDmg} 傷害！`);

endCheck();

updateUI();

}

function heal() {

if (hero.potions <= 0 || hero.hp <= 0 || monsterHP <= 0) return;

let healAmt = Math.floor(Math.random() * 20) + 10;

hero.hp += healAmt;

if (hero.hp > hero.maxHP) hero.hp = hero.maxHP;

hero.potions--;

logMsg(`🧪 ${hero.name} 使用補血藥水，回復 ${healAmt} HP！`);

updateUI();

}

function ultimate() {

if (hero.ult <= 0 || hero.hp <= 0 || monsterHP <= 0) return;

let ultDmg = Math.floor(Math.random() * 50) + 30;

monsterHP -= ultDmg;

if (monsterHP < 0) monsterHP = 0;

hero.ult--;

let counter = Math.floor(Math.random() * 15) + 3;

hero.hp -= counter;

if (hero.hp < 0) hero.hp = 0;

logMsg(`💥 ${hero.name} 發動必殺技，造成 ${ultDmg} 傷害！`);

logMsg(`😾 喵霸龍反擊造成 ${counter} 傷害！`);

endCheck();

updateUI();

}

function endCheck() {

if (hero.hp === 0 && monsterHP === 0) {

logMsg("<strong>☠️ 雙雙倒地！這就是命運！</strong>");

} else if (hero.hp === 0) {

logMsg(`<strong>😭 ${hero.name} 被喵霸龍打敗了！</strong>`);

} else if (monsterHP === 0) {

logMsg(`<strong>🎉 ${hero.name} 打贏了喵霸龍！大勝利！</strong>`);

}

}

</script>

</body>

</html>

# data[].attributes.body
鈴聲響起像砲火的回音，
黑板上寫不完的，是青春的航行。
六年級甲班的夥伴們，
我們不是說再見，是準備揚帆前進。

操場曾是我們的戰場，
午休時間，一場場笑聲的衝鋒。
你是狙擊手，他是廚師，我扮船長，
教室，就是我們的千陽號船艙。

考卷像海獸，我們合力擊敗；
比賽是暴風，也學會了不後退的節拍。
老師們是我們的羅盤和指針，
指向未來的偉大航道，不會迷失方向。

畢業不是終點，是紀念碑前的敬禮，
我們將夢想摺成紙船，放入記憶的海裡。
「我要成為海賊王！」不是童言，
而是「我要成為最棒的我」的宣言。

再見不是結束，而是冒險的開端，
讓我們用友情的筆，寫下下一段航程。
不論風雨，不論遼闊天邊，
畢業了，我們依然是夥伴，永不說再見。

# data[].attributes.body
24 - 9 + 36 = 51

12 + 24 + 15 = 51

# data[].attributes.body
<!DOCTYPE html>

<html lang="zh-Hant">

<head>

<meta charset="UTF-8" />

<title>記帳小工具</title>

<style>

body {

font-family: "Segoe UI", sans-serif;

text-align: center;

background-color: #f4f4f4;

padding: 30px;

}

h1 {

color: #333;

}

.total {

font-size: 28px;

margin: 20px 0;

color: #006400;

}

.buttons {

margin: 20px 0;

}

button {

margin: 8px;

padding: 10px 20px;

font-size: 16px;

border: none;

background-color: #4CAF50;

color: white;

border-radius: 6px;

cursor: pointer;

}

button:hover {

background-color: #45a049;

}

.options {

display: none;

margin-top: 10px;

}

.income-options, .expense-options {

margin-top: 10px;

}

.options button {

background-color: #008CBA;

}

.expense-options button {

background-color: #f44336;

}

.options button:hover {

opacity: 0.9;

}

</style>

</head>

<body>

<h1>記帳小工具</h1>

<div class="total">目前總金額：$<span id="balance">0</span></div>

<div class="buttons">

<button onclick="toggleOptions('income')">收入</button>

<button onclick="toggleOptions('expense')">支出</button>

</div>

<!-- 收入選項 -->

<div class="options income-options" id="income-options">

<button onclick="updateBalance(5000)">薪水 +$5000</button>

<button onclick="updateBalance(1000)">兼職 +$1000</button>

<button onclick="updateBalance(300)">紅包 +$300</button>

<button onclick="updateBalance(200)">零用錢 +$200</button>

</div>

<!-- 支出選項 -->

<div class="options expense-options" id="expense-options">

<button onclick="updateBalance(-100)">早餐 -$100</button>

<button onclick="updateBalance(-300)">午餐 -$300</button>

<button onclick="updateBalance(-50)">公車費 -$50</button>

<button onclick="updateBalance(-200)">玩具 -$200</button>

</div>

<script>

let balance = 0;

function toggleOptions(type) {

document.getElementById('income-options').style.display = type === 'income' ? 'block' : 'none';

document.getElementById('expense-options').style.display = type === 'expense' ? 'block' : 'none';

}

function updateBalance(amount) {

balance += amount;

document.getElementById('balance').textContent = balance;

}

</script>

</body>

</html>

# data[].attributes.body
import tkinter as tk

import random

import time

import threading

# 題庫產生

def generate_problem():

ops = ['+', '-', '*', '/']

num1 = random.randint(1, 50)

num2 = random.randint(1, 50)

op = random.choice(ops)

if op == '/':

num1 = num1 * num2

question = f"{num1} {op} {num2}"

answer = round(eval(question), 2) if op == '/' else int(eval(question))

return question, answer

class MathQuizApp:

def init(self, root):

self.root = root

self.root.title("數學四則運算練習器")

self.score = 0

self.timer_seconds = 300

self.current_question = 0

self.questions = []

self.answers = []

self.create_widgets()

def create_widgets(self):

self.timer_label = tk.Label(self.root, text="時間剩餘: 05:00", font=("Arial", 14))

self.timer_label.pack(pady=10)

self.question_label = tk.Label(self.root, text="點擊開始練習", font=("Arial", 18))

self.question_label.pack(pady=10)

self.entry = tk.Entry(self.root, font=("Arial", 16))

self.entry.pack(pady=5)

self.submit_btn = tk.Button(self.root, text="提交答案", command=self.submit_answer)

self.submit_btn.pack(pady=5)

self.score_label = tk.Label(self.root, text="分數: 0", font=("Arial", 14))

self.score_label.pack(pady=5)

self.start_btn = tk.Button(self.root, text="開始練習", command=self.start_quiz)

self.start_btn.pack(pady=10)

def start_quiz(self):

self.score = 0

self.current_question = 0

self.questions = []

self.answers = []

for _ in range(50):

q, a = generate_problem()

self.questions.append(q)

self.answers.append(a)

self.selected_indices = random.sample(range(50), 10)

self.timer_seconds = 300

threading.Thread(target=self.countdown).start()

self.show_question()

def countdown(self):

while self.timer_seconds > 0:

mins, secs = divmod(self.timer_seconds, 60)

time_str = f"{mins:02d}:{secs:02d}"

self.timer_label.config(text=f"時間剩餘: {time_str}")

time.sleep(1)

self.timer_seconds -= 1

self.finish_quiz()

def show_question(self):

if self.current_question < 10:

idx = self.selected_indices[self.current_question]

self.question_label.config(text=f"題目 {self.current_question+1}: {self.questions[idx]} = ?")

self.entry.delete(0, tk.END)

else:

self.finish_quiz()

def submit_answer(self):

if self.current_question >= 10 or self.timer_seconds <= 0:

return

try:

user_answer = float(self.entry.get())

idx = self.selected_indices[self.current_question]

correct = self.answers[idx]

if abs(user_answer - correct) < 0.01:

self.score += 10

else:

self.score -= 10

self.score_label.config(text=f"分數: {self.score}")

self.current_question += 1

self.show_question()

except ValueError:

self.question_label.config(text="請輸入數字！")

def finish_quiz(self):

self.question_label.config(text=f"測驗結束！你的最終得分是：{self.score}")

self.entry.delete(0, tk.END)

# 建立主視窗

root = tk.Tk()

app = MathQuizApp(root)

root.mainloop()

# data[].attributes.body
<!DOCTYPE html>

<html lang="zh-Hant">

<head>

<meta charset="UTF-8">

<title>數學四則運算練習器</title>

<style>

body {

font-family: 'Arial', sans-serif;

text-align: center;

background-color: #f0f8ff;

padding: 30px;

}

h1 {

color: #333;

}

#question-container {

margin: 20px auto;

max-width: 400px;

}

.question {

margin: 10px 0;

font-size: 20px;

}

input {

width: 100px;

padding: 5px;

font-size: 16px;

}

#timer, #score {

font-size: 18px;

margin: 15px;

color: #444;

}

button {

padding: 10px 20px;

font-size: 16px;

background-color: #4CAF50;

color: white;

border: none;

border-radius: 6px;

cursor: pointer;

}

button:hover {

background-color: #45a049;

}

#result {

font-size: 24px;

font-weight: bold;

margin-top: 20px;

color: #d32f2f;

}

</style>

</head>

<body>

<h1>數學四則運算練習器</h1>

<button onclick="startQuiz()">開始練習</button>

<div id="timer"></div>

<div id="score"></div>

<form id="quizForm" onsubmit="submitQuiz(); return false;">

<div id="question-container"></div>

<button type="submit" style="display:none;" id="submitBtn">送出答案</button>

</form>

<div id="result"></div>

<script>

const totalQuestions = 10;

let score = 100;

let timeLeft = 300; // 5 minutes in seconds

let timerInterval;

let currentQuestions = [];

// 題庫 50 題（四則運算隨機產生）

function generateQuestionSet() {

const questions = [];

const operators = ['+', '-', '*', '/'];

while (questions.length < 50) {

let a = Math.floor(Math.random() * 50) + 1;

let b = Math.floor(Math.random() * 50) + 1;

let op = operators[Math.floor(Math.random() * 4)];

if (op === '/' && a % b !== 0) continue; // 除法確保整除

const expr = ${a} ${op} ${b};

const answer = eval(expr);

questions.push({ q: expr, a: answer });

}

return questions;

}

const fullQuestionSet = generateQuestionSet();

function startQuiz() {

score = 100;

timeLeft = 300;

currentQuestions = [];

document.getElementById('question-container').innerHTML = '';

document.getElementById('result').textContent = '';

document.getElementById('submitBtn').style.display = 'inline';

// 抽取隨機10題

const indices = [...Array(50).keys()];

indices.sort(() => Math.random() - 0.5);

for (let i = 0; i < totalQuestions; i++) {

currentQuestions.push(fullQuestionSet[indices[i]]);

}

// 顯示題目

const container = document.getElementById('question-container');

currentQuestions.forEach((item, idx) => {

const div = document.createElement('div');

div.className = 'question';

div.innerHTML = `

${idx + 1}. ${item.q} =

<input type="number" step="any" name="answer${idx}" required>

`;

container.appendChild(div);

});

// 開始倒數計時

clearInterval(timerInterval);

timerInterval = setInterval(updateTimer, 1000);

updateTimer(); // 立即更新一次

document.getElementById('score').textContent = `目前分

# data[].attributes.body
<!DOCTYPE html>

<html lang="zh-TW">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>拍賣遊戲</title>

<style>

body {

font-family: Arial, sans-serif;

text-align: center;

background-color: #f4f4f9;

margin: 0;

padding: 20px;

}

.item {

margin: 20px;

padding: 20px;

background-color: #fff;

border-radius: 10px;

box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

}

.item h2 {

margin: 0;

font-size: 24px;

color: #333;

}

.item p {

font-size: 18px;

color: #666;

}

.button {

background-color: #28a745;

color: #fff;

padding: 10px 20px;

border: none;

border-radius: 5px;

cursor: pointer;

font-size: 16px;

}

.button:disabled {

background-color: #ccc;

}

#budget {

font-size: 24px;

margin-bottom: 20px;

color: #ff5722;

}

</style>

</head>

<body>

<h1>拍賣遊戲</h1>

<p>你現在有 200 元，開始競標吧！</p>

<div id="budget">剩餘預算: 200 元</div>

<div class="item" id="item1">

<h2>商品 1：高級耳機</h2>

<p>起始價格：50 元</p>

<p>當前競標價格：<span id="price1">50</span> 元</p>

<button class="button" onclick="bid('item1')">競標</button>

<button class="button" onclick="exitBid('item1')" id="exit1">退出競標</button>

</div>

<div class="item" id="item2">

<h2>商品 2：運動鞋</h2>

<p>起始價格：70 元</p>

<p>當前競標價格：<span id="price2">70</span> 元</p>

<button class="button" onclick="bid('item2')">競標</button>

<button class="button" onclick="exitBid('item2')" id="exit2">退出競標</button>

</div>

<div class="item" id="item3">

<h2>商品 3：平板電腦</h2>

<p>起始價格：100 元</p>

<p>當前競標價格：<span id="price3">100</span> 元</p>

<button class="button" onclick="bid('item3')">競標</button>

<button class="button" onclick="exitBid('item3')" id="exit3">退出競標</button>

</div>

<div class="item" id="item4">

<h2>商品 4：智能手錶</h2>

<p>起始價格：80 元</p>

<p>當前競標價格：<span id="price4">80</span> 元</p>

<button class="button" onclick="bid('item4')">競標</button>

<button class="button" onclick="exitBid('item4')" id="exit4">退出競標</button>

</div>

<script>

let budget = 200; // 初始預算

let itemPrices = {

'item1': 50,

'item2': 70,

'item3': 100,

'item4': 80

};

// 更新預算顯示

function updateBudget() {

document.getElementById('budget').innerHTML = '剩餘預算: ' + budget + ' 元';

}

// 競標函數

function bid(item) {

if (budget <= 0) {

alert('預算不足，無法再競標!');

return;

}

let priceElement = document.getElementById('price' + item.slice(-1));

let newPrice = itemPrices[item] + 10; // 每次競標價格增加10元

itemPrices[item] = newPrice;

priceElement.innerHTML = newPrice;

// 扣除預算

if (budget >= newPrice) {

budget -= 10;

} else {

alert('預算不足，無法繼續競標此商品!');

}

updateBudget();

}

// 退出競標

function exitBid(item) {

let priceElement = document.getElementById('price' + item.slice(-1));

let lastPrice = itemPrices[item];

// 提示玩家退出後的價格

alert(item.slice(4) + ' 競標結束，最終價格為 ' + lastPrice + ' 元!');

// 禁用競標按鈕

document.querySelector('#' + item + ' .button').disabled = true;

document.querySelector('#exit' + item.slice(-1)).disabled = true;

}

</script>

</body>

</html>

# data[].attributes.body
import tkinter as tk

import random

# 建立 20 組動物單字卡

flashcards = [

{"english": "cat", "chinese": "貓"},

{"english": "dog", "chinese": "狗"},

{"english": "rabbit", "chinese": "兔子"},

{"english": "elephant", "chinese": "大象"},

{"english": "lion", "chinese": "獅子"},

{"english": "tiger", "chinese": "老虎"},

{"english": "bear", "chinese": "熊"},

{"english": "monkey", "chinese": "猴子"},

{"english": "zebra", "chinese": "斑馬"},

{"english": "giraffe", "chinese": "長頸鹿"},

{"english": "panda", "chinese": "熊貓"},

{"english": "kangaroo", "chinese": "袋鼠"},

{"english": "penguin", "chinese": "企鵝"},

{"english": "dolphin", "chinese": "海豚"},

{"english": "whale", "chinese": "鯨魚"},

{"english": "horse", "chinese": "馬"},

{"english": "fox", "chinese": "狐狸"},

{"english": "wolf", "chinese": "狼"},

{"english": "sheep", "chinese": "羊"},

{"english": "cow", "chinese": "牛"},

]

class FlashcardApp:

def init(self, root):

self.root = root

self.root.title("動物單字卡")

self.index = 0

self.is_english_side = True # 初始為英文面

self.card = flashcards[self.index]

self.label = tk.Label(root, text="", font=("Arial", 40))

self.label.pack(pady=40)

self.flip_button = tk.Button(root, text="翻面", command=self.flip_card, font=("Arial", 14))

self.flip_button.pack(pady=10)

self.next_button = tk.Button(root, text="下一張", command=self.next_card, font=("Arial", 14))

self.next_button.pack(pady=5)

self.update_card()

def update_card(self):

text = self.card["english"] if self.is_english_side else self.card["chinese"]

self.label.config(text=text)

def flip_card(self):

self.is_english_side = not self.is_english_side

self.update_card()

def next_card(self):

self.index = (self.index + 1) % len(flashcards)

self.card = flashcards[self.index]

self.is_english_side = True

self.update_card()

# 主程式啟動

root = tk.Tk()

app = FlashcardApp(root)

root.mainloop()

# data[].attributes.body
<!DOCTYPE html>

<html lang="zh-TW">

<head>

<meta charset="UTF-8">

<title>國語句型提示機（5題版）</title>

<style>

body { font-family: sans-serif; text-align: center; background: #f9fbff; padding: 30px; }

h1 { color: #005ab5; }

button {

font-size: 20px;

padding: 10px 30px;

margin: 20px;

background-color: #28a745;

color: white;

border: none;

border-radius: 10px;

cursor: pointer;

}

button:disabled {

background-color: #bbb;

cursor: not-allowed;

}

.result {

margin-top: 20px;

text-align: left;

width: 600px;

margin-left: auto;

margin-right: auto;

background: #fff;

padding: 20px;

border-radius: 10px;

box-shadow: 0 0 8px rgba(0,0,0,0.1);

}

.question {

margin-bottom: 20px;

border-bottom: 1px solid #ddd;

padding-bottom: 10px;

}

</style>

</head>

<body>

<h1>✏️ 國語句型提示機（5題）</h1>

<p>點擊一次，產生 5 題句型提示</p>

<button id="generateBtn" onclick="generateSentences()">產生 5 題</button>

<div id="resultBox" class="result" style="display:none;"></div>

<script>

const people = ["小明", "媽媽", "老師", "弟弟", "美美"];

const actions = ["吃早餐", "寫作業", "打掃房間", "玩球", "讀故事書"];

const times = ["今天早上", "昨天晚上", "上個星期", "星期六下午", "放學後"];

const places = ["在家裡", "在學校", "在圖書館", "在公園", "在教室"];

const objects = ["用鉛筆", "帶著書包", "拿著掃把", "拿著球", "用平板"];

function getRandom(arr) {

return arr[Math.floor(Math.random() * arr.length)];

}

function generateSentences() {

let output = '';

for (let i = 1; i <= 5; i++) {

const person = getRandom(people);

const action = getRandom(actions);

const time = getRandom(times);

const place = getRandom(places);

const object = getRandom(objects);

output += `

<div class="question">

<strong>第 ${i} 題</strong><br>

👦 人物：${person}<br>

📅 時間：${time}<br>

📍 地點：${place}<br>

🔧 使用：${object}<br>

📝 動作：${action}

</div>

`;

}

document.getElementById("resultBox").innerHTML = output;

document.getElementById("resultBox").style.display = "block";

document.getElementById("generateBtn").disabled = true;

}

</script>

</body>

</html>

# data[].attributes.body
<!DOCTYPE html>

<html lang="zh-Hant">

<head>

<meta charset="UTF-8">

<title>國語句型提示機</title>

<style>

body {

font-family: "Arial", sans-serif;

text-align: center;

margin-top: 50px;

}

button {

padding: 10px 20px;

font-size: 16px;

}

.result {

margin-top: 30px;

font-size: 20px;

}

</style>

</head>

<body>

<h1>國語句型提示機</h1>

<button id="generateBtn">點我產生句型提示！</button>

<div class="result" id="result"></div>

<script>

const people = ["小明", "老師", "媽媽", "朋友", "同學"];

const actions = ["吃早餐", "寫作業", "打球", "看書", "唱歌"];

const times = ["早上", "中午", "晚上", "放學後", "星期天"];

const places = ["教室", "公園", "家裡", "圖書館", "操場"];

const things = ["蘋果", "書包", "籃球", "鉛筆", "水壺"];

document.getElementById("generateBtn").addEventListener("click", function() {

const getRandom = arr => arr[Math.floor(Math.random() * arr.length)];

const result = `

<p><strong>人：</strong>${getRandom(people)}</p>

<p><strong>事：</strong>${getRandom(actions)}</p>

<p><strong>時：</strong>${getRandom(times)}</p>

<p><strong>地：</strong>${getRandom(places)}</p>

<p><strong>物：</strong>${getRandom(things)}</p>

`;

document.getElementById("result").innerHTML = result;

this.disabled = true; // 按鈕只能點一次

});

</script>

</body>

</html>

# data[].attributes.body
第一章：刺刺走丟了

在森林裡，有一隻叫「刺刺」的小刺蝟。刺刺有圓圓的小鼻子、短短的小腳，身上還長滿了軟軟的刺。牠每天最喜歡的事情，就是跟森林裡的朋友一起玩耍，有松鼠小可、兔子跳跳，還有烏龜慢慢。

一天早上，森林裡的陽光暖暖的，空氣裡還飄著淡淡的花香。刺刺開心地從家裡跑出來，打算跟大家一起玩捉迷藏。「今天我一定要當第一個找到大家的人！」刺刺在心裡想著，還小聲笑了出來。

大家集合在大樹下，由松鼠小可負責當鬼。「數到二十，大家快去躲好哦！」小可捂住眼睛，開始大聲數數：「一、二、三……」

刺刺趕緊往森林裡跑，想找個超級秘密又沒人找得到的地方。牠跑過小溪、跳過石頭，還穿過一片開滿黃色小花的草地。跑著跑著，刺刺發現前面有一個從來沒去過的小洞穴。牠心想：「嘿嘿，大家一定找不到我！」於是就鑽進去了。

洞裡涼涼的，還有淡淡的泥土味。刺刺把自己縮成一顆圓球，等著大家來找。可是時間過了好久好久，洞口一點聲音都沒有。刺刺開始覺得有點奇怪，也有一點怕怕的。

「怎麼都沒有人來啊？該不會……我走太遠了吧？」刺刺慢慢從洞裡爬出來，發現外面已經有點暗了，夕陽快下山，天邊變成橘橘紅紅的。刺刺看看四周，突然發現自己不認得這裡是哪裡了。

「哎呀！我迷路了啦！」刺刺大叫，圓圓的小鼻子抽動著，眼睛裡都快冒出眼淚。

牠想回家，可是到處都長得好像，樹木一棵一棵，石頭也都一樣。刺刺走幾步，又停下來。牠開始後悔剛剛跑太遠，心裡有點慌，但又不敢大聲叫怕嚇到其他動物。

就在這個時候，從遠方傳來一個熟悉的聲音，「刺刺～你在哪裡啊～」

刺刺的耳朵一動，仔細聽著。那是兔子跳跳的聲音！牠馬上用盡全身的力氣大喊：「我在這裡啦！」

但是，森林裡的樹太多，聲音一下子就被擋住了。

「我一定要想辦法出去！」刺刺告訴自己，於是牠開始找路，想著要找到一棵大樹，上面有特別形狀的樹洞，那是大家集合的地方。

就這樣，刺刺一邊走，一邊記著路邊的石頭和花，心裡雖然還是怕怕的，但也告訴自己不能放棄。第二章：森林裡的聲音

刺刺一邊走，一邊努力記住剛剛經過的地方，可是森林裡的樹太多了，草叢一堆、小路彎來彎去，越走刺刺就越心慌。

「呼……我到底是從哪裡來的啦！」刺刺喘著氣，鼻子聞了聞空氣，想找找熟悉的味道。可是空氣裡只有樹葉和泥土的味道，還有遠方飄來的一點點花香。

就在這時，刺刺聽見樹叢裡有沙沙沙的聲音，他的小耳朵馬上豎起來。「是誰啊？」刺刺小聲問，但沒有人回答。

「該不會是……大野狼吧？」刺刺嚇得全身的刺都立起來，腳也不敢動了，只敢躲在一塊大石頭後面，偷偷探出頭看。

忽然，從草叢裡鑽出來一個圓圓的小腦袋，原來是松鼠小可！

「刺刺！你在這裡啊！我們大家都在找你耶！」小可氣喘吁吁地跑過來，尾巴還沾著幾片樹葉。

刺刺看到小可，差點感動到哭出來，「小可～～我以為我回不去了啦！」

小可拍拍牠的肩膀，「別怕，我跟你一起找回去的路，我剛剛有做記號呢！」

「蛤？什麼記號？」刺刺好奇地問。

小可得意地指著一棵樹幹，上面有牠用小爪子刮過的三條痕跡。「這就是我剛剛邊找邊做的，這樣就不會迷路啦！」

刺刺聽了超佩服，「哇～你怎麼這麼聰明啊！」

「嘿嘿，我可是森林捉迷藏冠軍耶！」小可自豪地挺起胸膛。

兩人一邊說笑，一邊沿著記號慢慢走，沒多久天色又更暗了一點，樹林裡開始有一些奇怪的聲音，像是「嗚——嗚——」的風聲，還有葉子「沙沙沙」地晃動。

「你有沒有聽到？」刺刺小聲說。

「有啊……不過應該只是風啦，別怕別怕！」小可說著，尾巴偷偷往刺刺身邊靠。

正當他們打算再往前走的時候，突然，前面冒出兩個小亮點，一閃一閃的。

刺刺嚇到差點叫出來，「鬼火嗎？！」

小可也嚇一跳，「不對！那是……烏龜慢慢的燈籠！」

果然，慢慢慢慢走過來，背上還綁著一盞小燈籠。

「嘿，你們怎麼還在這裡啊？大家都在大樹那邊集合了啦！」慢慢慢吞吞地說。

刺刺和小可聽到超開心，馬上衝過去抱住慢慢。

「走走走！快帶我們回去！」刺刺說。

於是，他們三個一起踏上回家的路，雖然天色已經很暗，但有慢慢的燈籠照亮，大家心裡都踏實多了。第三章：意外的大水坑

慢慢背著燈籠走在前面，刺刺和小可跟在後頭，三隻小動物一邊走，一邊東張西望。燈籠的光把路邊的樹影拉得長長的，影子跟著他們一起晃來晃去，好像偷偷在跟著。

「呼～還好遇到你們，不然我真的快哭了啦。」刺刺邊走邊說，聲音還有點哽咽。

小可拍拍他的背，「別怕啦，再迷路我們就躺在地上睡覺，等天亮再回家。」

「你確定不會被大野狼先發現嗎？」刺刺眼睛瞪大大。

小可尷尬笑笑，「呃……那我們還是趕快走好了！」

慢慢走得很穩，但他就是慢，走幾步就停下來看看地上，確認燈籠有沒有歪掉。刺刺急得直跳腳，「慢慢你快一點啦！」

慢慢轉過頭，無辜地說：「我這是安全第一，慢工出細活懂不懂？」

突然，小可停下腳步，「咦？前面好像有個大水坑耶。」

燈籠光照過去，果然，有個超大的水坑橫在路中央，水面反射著燈光，一閃一閃的，看起來像一張黑漆漆的嘴巴，準備把誰掉進去。

「哇靠，好大！」刺刺嚇到倒退兩步。

小可拿個小石頭丟進水裡，「噗通！」水花濺起來，他們才發現這水坑可不淺，萬一掉進去，刺刺這種不會游泳的，直接泡湯。

「我們得繞過去啦！」慢慢建議。

「可是旁邊都是亂七八糟的草叢和藤蔓耶，我們會不會又迷路啊？」刺刺抖抖的說。

小可皺著眉想了一下，「好，我來開路！我這麼靈活，一定沒問題！」

說完他就開始鑽進草叢，慢慢提著燈籠跟著，刺刺只好硬著頭皮走最後面。草叢裡有些細細長長的藤蔓，一不小心就會被絆到，還有一堆樹枝伸出來，像是故意想抓住他們的尾巴一樣。

「哎呦！」刺刺的刺卡住一根藤蔓，小可和慢慢趕快回頭幫他扯開。

「你這身刺真的有夠麻煩的耶，躲草叢根本自帶困難模式。」小可吐槽。

刺刺無奈地嘟嘴，「我也不想啊！」

好不容易，三個小傢伙東繞西鑽，終於繞過大水坑。回到路上的時候，大家都累癱了。

「呼……我們快到了吧？」刺刺滿臉泥巴問。

慢慢點點頭，「再走過前面那棵有洞的大樹就到了！」

聽到這句，刺刺眼睛一亮，「衝啊！」

小可和慢慢也跟著跑起來，燈籠在空中晃來晃去，照亮了前方的路，像一顆會飛的小太陽。第四章：回到大樹下

刺刺、小可和慢慢終於看到那棵熟悉的大樹，樹幹上有個圓圓的樹洞，還長著像兔子耳朵一樣的樹枝。那正是他們平常集合和玩耍的地方。

「是那裡！我們到了！」刺刺興奮地喊，腳底都像裝了彈簧一樣，蹦蹦跳跳地衝了過去。

在大樹下，其他動物朋友們都還在等著。兔子跳跳、小鳥叽叽、松鼠妹咪，還有幾隻躲在灌木叢裡的青蛙，一看到他們，馬上衝上來。

「刺刺！你終於回來了！」跳跳差點飛撲過去，整隻撲倒在刺刺身上，結果被刺刺的刺戳了一下，立刻跳開，「哎呦呦呦！還是忘了你那滿身針啊！」

大家圍過來七嘴八舌問東問西。

「你跑去哪裡啦？」 「我們剛剛還以為你被樹精抓走了！」 「是不是在草叢裡睡著啦？」

刺刺不好意思地抓抓頭，「嘿嘿，我只是……躲太遠了啦，然後不小心迷路了。」

小可馬上在旁邊補一句，「他差點被自己嚇哭，還以為大野狼要吃他！」

「哪有啦！」刺刺害羞地反駁，臉都紅了。

慢慢慢慢地走過來，把燈籠放在地上，「還好我們找到你，不然今晚你就得睡在水坑邊跟青蛙聊天了。」

大家聽了哈哈大笑，氣氛一下子變得熱鬧又溫暖。

兔子跳跳拍拍手，「好啦好啦，既然大家都回來了，來玩最後一場捉迷藏，這次換慢慢當鬼！」

慢慢瞪大眼睛，「蛤？我當鬼？我動作那麼慢，數完二十大家都能跑到下個森林去耶！」

「不行不行，就你！」大家一起起哄。

慢慢無奈，「唉，好啦，那我慢慢數，你們慢慢躲。」

刺刺這時突然說：「我不躲那麼遠了，我就躲大樹後面，保證不迷路！」

大家笑翻，連慢慢都忍不住噗哧笑出來。

那天晚上，森林裡傳來一陣又一陣的笑聲，燈籠的光一直亮著，像小小的星星陪著大家玩耍，直到天邊慢慢亮起第一道晨光。

從那天起，刺刺學會了不管玩得多開心，也不能跑太遠，更重要的是——朋友，永遠是最棒的方向感

# data[].attributes.body
<!DOCTYPE html>

<html lang="zh-TW">

<head>

<meta charset="UTF-8">

<title>數學四則運算練習器</title>

<style>

body { font-family: sans-serif; padding: 20px; background: #f0f0f0; }

h1 { color: #333; }

button { padding: 10px 20px; font-size: 16px; }

.question { margin: 15px 0; }

.hidden { display: none; }

.timer { font-size: 20px; font-weight: bold; color: red; }

</style>

</head>

<body>

<h1>數學四則運算練習器</h1>

<button onclick="startQuiz()">開始練習</button>

<div id="timer" class="timer hidden">剩餘時間：05:00</div>

<div id="quiz" class="hidden"></div>

<div id="score" class="hidden"></div>

<script>

const totalQuestions = 50;

const selectedCount = 10;

const quizTime = 5 * 60; // 5 分鐘

let questions = [];

let timerId;

let remainingSeconds = quizTime;

function generateQuestions() {

const ops = ['+', '-', '*', '/'];

const questions = [];

while (questions.length < totalQuestions) {

let a = Math.floor(Math.random() * 50) + 1;

let b = Math.floor(Math.random() * 50) + 1;

const op = ops[Math.floor(Math.random() * ops.length)];

// 避免除以 0 且只產生整數除法

if (op === '/') {

a = a * b;

}

const question = {

text: ${a} ${op} ${b},

answer: eval(`${a} ${op} ${b}`)

};

questions.push(question);

}

return questions;

}

function startQuiz() {

document.getElementById('quiz').classList.remove('hidden');

document.getElementById('timer').classList.remove('hidden');

document.getElementById('score').classList.add('hidden');

document.getElementById('quiz').innerHTML = '';

questions = generateQuestions().sort(() => 0.5 - Math.random()).slice(0, selectedCount);

remainingSeconds = quizTime;

updateTimer();

// 啟動倒計時

if (timerId) clearInterval(timerId);

timerId = setInterval(() => {

remainingSeconds--;

updateTimer();

if (remainingSeconds <= 0) finishQuiz();

}, 1000);

// 顯示題目

questions.forEach((q, i) => {

const div = document.createElement('div');

div.classList.add('question');

div.innerHTML = `

<label>第 ${i + 1} 題：${q.text} =

<input type="number" id="q${i}" step="any">

</label>

`;

document.getElementById('quiz').appendChild(

function finishQuiz() {

clearInterval(timerId);

let score = 0;

questions.forEach((q, i) => {

const userAnswer = parseFloat(document.getElementById(`q${i}`).value);

if (Math.abs(userAnswer - q.answer) < 0.01) {

score += 10;

});

document.getElementById('score').classList.remove('hidden');

.getElementById('score').innerHTML = <h2>你的得分：${score} / 100</h2>;

# data[].attributes.body
畢業的這一天，陽光把笑容映亮，

回憶在心中流淌，每個瞬間都悠揚。

我們共同走過的路，如今終點即將達，

心中有些不捨，卻洋溢著熱烈的渴望。

畢業似場禮炮，在心底逐一綻放，

告別友情的懷抱，緊握未來的茫茫。

歲月的詩篇中，寫下心靈的吶喊，

願勇敢的翅膀，飛向無垠的遠方。

曾一起笑過笑，共度多少風雨，

無謂翻騰的波浪，迎接燦爛未來。

人生似場電影，這點滴的場景萌芽，

快樂的回憶蔓延，輕輕像把我們包圍。

今天是新的開始，展翅願高高飛，

心懷對過往的情詩，卻推開理想的門扉。

未來需彼此扶持，夢圓每段人行，

讓這段青春年歲，將餘生慢慢展開。

願一生不負期盼，闖過每個路標，

因畢業非終結，而是一個新的起跑。

# data[].attributes.body
<!DOCTYPE html>

<html lang="zh-Hant">

<head>

<meta charset="UTF-8">

<title>簡易記帳工具</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 40px;

background: #f5f5f5;

}

h1 {

text-align: center;

}

.buttons, .options {

text-align: center;

margin: 10px 0;

}

button {

padding: 10px 20px;

margin: 5px;

font-size: 16px;

}

#total {

text-align: center;

font-size: 24px;

margin-top: 20px;

}

</style>

</head>

<body>

<h1>記帳小工具</h1>

<div class="buttons">

<button onclick="showOptions('income')">收入</button>

<button onclick="showOptions('expense')">支出</button>

</div>

<div class="options" id="income-options" style="display:none;">

<button onclick="enterAmount('收入', '薪水')">薪水</button>

<button onclick="enterAmount('收入', '投資')">投資</button>

<button onclick="enterAmount('收入', '獎金')">獎金</button>

<button onclick="enterAmount('收入', '其他')">其他</button>

</div>

<div class="options" id="expense-options" style="display:none;">

<button onclick="enterAmount('支出', '食物')">食物</button>

<button onclick="enterAmount('支出', '交通')">交通</button>

<button onclick="enterAmount('支出', '娛樂')">娛樂</button>

<button onclick="enterAmount('支出', '其他')">其他</button>

</div>

<div id="total">目前總金額：$0</div>

<script>

let total = 0;

function showOptions(type) {

document.getElementById('income-options').style.display = type === 'income' ? 'block' : 'none';

document.getElementById('expense-options').style.display = type === 'expense' ? 'block' : 'none';

}

function enterAmount(type, category) {

const input = prompt(`請輸入 ${category} 的金額：`);

const amount = parseFloat(input);

if (!isNaN(amount) && amount > 0) {

if (type === '收入') {

total += amount;

} else {

total -= amount;

}

document.getElementById('total').innerText = 目前總金額：$${total};

} else {

alert('請輸入正確的金額');

}

}

</script>

</body>

</html>

# data[].attributes.body
<!DOCTYPE html>

<html lang="zh-Hant">

<head>

<meta charset="UTF-8">

<title>國語句型提示機</title>

<style>

body {

font-family: Arial, sans-serif;

text-align: center;

padding: 30px;

}

button {

font-size: 18px;

padding: 10px 20px;

margin-bottom: 20px;

}

.output {

font-size: 20px;

margin: 10px 0;

}

</style>

</head>

<body>

<h1>國語句型提示機</h1>

<button onclick="generateSentence()">點我獲得句型提示</button>

<div class="output" id="person"></div>

<div class="output" id="action"></div>

<div class="output" id="time"></div>

<div class="output" id="place"></div>

<div class="output" id="thing"></div>

<script>

const people = ["小明", "媽媽", "老師", "警察", "小狗"];

const actions = ["吃早餐", "寫作業", "打電話", "畫圖", "跑步"];

const times = ["早上", "中午", "晚上", "星期天", "放學後"];

const places = ["學校", "公園", "圖書館", "超市", "家裡"];

const things = ["一本書", "一杯牛奶", "手機", "鉛筆盒", "球"];

function getRandomItem(array) {

return array[Math.floor(Math.random() * array.length)];

}

function generateSentence() {

document.getElementById("person").textContent = "人： " + getRandomItem(people);

document.getElementById("action").textContent = "事： " + getRandomItem(actions);

document.getElementById("time").textContent = "時： " + getRandomItem(times);

document.getElementById("place").textContent = "地： " + getRandomItem(places);

document.getElementById("thing").textContent = "物： " + getRandomItem(things);

}

</script>

</body>

</html>

# data[].attributes.body
題目：畢業

畢業，這兩個字看似簡單，卻承載著無數的回憶與情感。每當我們走到人生的一個階段終點，畢業就像是一扇門，推開它，便是另一段旅程的開始。

回首過去的校園生活，點點滴滴浮現在眼前。清晨的鐘聲、課堂上的笑語、考試前的緊張、操場上的奔跑……這些日常的畫面，在畢業的時候竟變得如此珍貴。我們曾經抱怨過作業的繁重，曾經因成績而沮喪，卻也在這些磨練中逐漸成長，變得更加堅強與成熟。

畢業不只是離別，它也是一種祝福。我們與老師、同學道別，不代表再也不見，而是將這份情誼封存在心中，帶著它走向下一段人生旅程。畢業典禮上，一張張泛著光芒的畢業照、一句句誠摯的祝福，都是對過去努力的肯定，也是對未來夢想的期許。

當我們踏出校門的那一刻，心中難免有不捨、有徬徨，但更多的，應該是對未來的憧憬。畢業，不是結束，而是另一個開始。我們將帶著所學的知識與人生的經驗，勇敢地面對未知的挑戰，走出屬於自己的一條路。

畢業，就像是一首青春的詩，寫滿了回憶與希望。願我們都能帶著這份詩意與力量，奔赴人生的下一場精彩。

# data[].attributes.body
12 第十二題 <!DOCTYPE html><html lang="zh-TW"><head> <meta charset="UTF-8"> <title>食物單字卡</title> <style> body { font-family: sans-serif; background-color: #f8f8f8; display: flex; flex-direction: column; align-items: center; padding: 50px; } h1 { margin-bottom: 20px; } .card-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; } .card { width: 150px; height: 100px; perspective: 1000px; cursor: pointer; } .card-inner { position: relative; width: 100%; height: 100%; transition: transform 0.6s; transform-style: preserve-3d; } .card.flipped .card-inner { transform: rotateY(180deg); } .card-front, .card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; align-items: center; justify-content: center; border: 1px solid #ccc; border-radius: 8px; background: white; font-size: 18px; } .card-back { transform: rotateY(180deg); background: #ffe; } </style></head><body><h1>🍎 食物單字卡（點擊翻面）</h1><div class="card-container" id="cardContainer"></div><script> const vocab = [ { en: "apple", zh: "蘋果" }, { en: "banana", zh: "香蕉" }, { en: "bread", zh: "麵包" }, { en: "cheese", zh: "起司" }, { en: "chicken", zh: "雞肉" }, { en: "rice", zh: "白飯" }, { en: "noodles", zh: "麵條" }, { en: "beef", zh: "牛肉" }, { en: "carrot", zh: "紅蘿蔔" }, { en: "egg", zh: "雞蛋" }, { en: "fish", zh: "魚" }, { en: "grape", zh: "葡萄" }, { en: "lemon", zh: "檸檬" }, { en: "lettuce", zh: "萵苣" }, { en: "milk", zh: "牛奶" }, { en: "onion", zh: "洋蔥" }, { en: "peach", zh: "桃子" }, { en: "strawberry", zh: "草莓" }, { en: "tomato", zh: "番茄" }, { en: "watermelon", zh: "西瓜" } ]; const container = document.getElementById("cardContainer"); vocab.forEach((item, index) => { const card = document.createElement("div"); card.className = "card"; card.innerHTML = ` <div class="card-inner"> <div class="card-front">${item.zh}</div> <div class="card-back">${item.en}</div> </div> `; card.addEventListener("click", () => { card.classList.toggle("flipped"); }); container.appendChild(card); });</script></body></html>

# data[].attributes.attachment_link.title
📜 唐詩原文： 城闕輔三秦，風煙望五津。 與君離別意，同是宦遊人。 海內存知己，天涯若比鄰。 無為在歧路，兒女共沾巾。

# data[].attributes.body
《小魔法師露比的奇幻冒險》

🌟 第一章：魔法森林裡的小女孩

在一個晴朗的早晨，小女孩露比背著她的小書包，興奮地往山林深處走去。今天是她七歲生日，她決定自己去找一個特別的地方，當作生日禮物送給自己。

露比住在村子的邊緣，村子旁邊有一座森林。大人們常說那是「魔法森林」，裡面住著神奇的生物，也藏著美麗的寶石與不可思議的故事。可是，大人們也說：「小孩子不能進森林，那裡很危險。」不過露比不怕，她心想：「我只是看看，不會走太遠。」

她輕手輕腳地走進森林。陽光穿過樹葉，照在她的臉上，像在對她說「歡迎」。樹上的鳥兒唱著不一樣的歌，花朵會發光、轉圈圈，就像在跳舞。露比瞪大了眼睛：「哇！這裡真的有魔法耶！」

走著走著，露比看到一棵特別高的大樹，樹幹上居然有一扇小門。她小心地推開那扇門，裡面傳來一陣香甜的氣味。她走進去，發現裡面是一間用葉子和蘑菇建成的小屋，牆上掛滿了瓶瓶罐罐，有藍色的、有會冒泡泡的，還有一罐瓶子裡有小星星在閃光。

「這是誰的家呀？」露比好奇地問。

「歡迎光臨，小女孩。」一個輕柔的聲音回應她。

露比轉頭一看，是一位身穿長袍的小矮人。他戴著圓圓的眼鏡，鬍子像棉花糖一樣蓬鬆。

「我是奇奇，是這座魔法森林的守護者。」小矮人說：「你怎麼會來這裡呢？」

露比誠實地回答：「我今天生日，想找一個特別的地方。」

奇奇點點頭，笑著說：「那你來對地方了。也許你就是我們正在找的‘下一位小魔法師’呢。」

「我？魔法師？」露比睜大了眼睛。

「是的，但要先經過幾個小小的考驗。」奇奇眨了眨眼睛。「妳準備好了嗎？」

露比用力點頭：「我準備好了！」

她不知道，這趟旅程，將會讓她遇見許多神奇的朋友，也學會真正的魔法。

🌈 第二章：失蹤的獨角獸

第二天一早，露比回到魔法森林。她興奮地穿過跳舞的花叢、繞過唱歌的樹，來到奇奇的小屋。奇奇早已在門口等她，手上拿著一本厚厚的書。

「今天是妳第一堂魔法課，」奇奇說，「但我們遇到了一個麻煩。」

「什麼麻煩？」露比問。

「我們森林裡最小的獨角獸寶寶，叫做閃閃，昨天不見了。」奇奇皺著眉，「牠可能迷路了，或是被捉走了。」

露比立刻說：「我願意去找牠！」

奇奇笑了，拿出一根細細的魔法棒：「這是你的第一根魔法棒。現在，我要教妳第一個魔法——發光術。當你唸出咒語『光亮亮，閃閃放光芒』，魔法棒就會發出光，照亮黑暗的地方。」

露比接過魔法棒，練習了幾次：「光亮亮，閃閃放光芒！」她的魔法棒一開始只是抖了一下，後來開始發出微弱的藍光，最後真的亮了起來！

「我做到了！」她開心地跳了起來。

「非常好！」奇奇點頭，「妳可以出發了。我最後一次看到閃閃，是在銀月溪旁的迷霧林。」

露比小心翼翼地往迷霧林走去。霧氣濃得像牛奶一樣濃，什麼都看不清楚。她握緊魔法棒，唸出咒語：「光亮亮，閃閃放光芒！」一道藍光從她手中亮起，她終於看清前方的路。

「咩──」前方傳來一聲微弱的叫聲。

「是閃閃！」露比往聲音跑去，發現一隻小獨角獸困在荊棘中，小角閃著銀色的光，眼睛卻充滿害怕。

露比立刻用手撥開荊棘，安撫牠：「別怕，我來幫你。」

閃閃靠近露比，蹭了蹭她的手。她輕聲說：「我們回家吧。」

當她帶著閃閃回到奇奇家時，整個森林好像亮了起來。樹葉在鼓掌、鳥兒在歌唱，天空還下起了彩色的泡泡雨。

奇奇笑著說：「露比，妳做得太好了。妳不只是找到閃閃，還成功使用了第一個魔法。妳已經開始成為真正的小魔法師了。」

露比開心地笑了。她知道，她的冒險才剛剛開始。

⚔️ 第三章：邪惡巫師的陷阱

露比和奇奇正在森林裡學第二個魔法：飛行術。

「說出咒語：『輕輕飄，像羽毛飛高高』，並相信妳自己。」奇奇指導她。

露比唸著咒語：「輕輕飄，像羽毛飛高高！」一開始她只是跳了一下，但第二次她真的離地了幾公分，到了第三次，她居然飛起來了！

「我飛起來了！我真的飛起來了！」她開心地在空中轉了一圈。

正當她準備降落時，一片黑霧忽然從森林深處飄來，像一張大嘴巴，慢慢地吞噬陽光和顏色。花朵全都低下頭，小鳥停止歌唱，就連風也停了下來。

「是黑暗巫師——暗格斯！」奇奇大叫，「他一直想佔領魔法森林，把快樂和色彩全部偷走！」

露比剛降落，就聽見一個低沉的聲音：「呵呵，小小魔法師，你太嫩了，別妄想阻止我。」

黑霧中走出一個高大又陰沉的人影。他穿著黑色長袍，眼神冷冷地盯著露比。

「交出魔法棒，我或許會讓你離開這裡。」暗格斯說。

露比緊握魔法棒，抬起頭勇敢回答：「不！我不會讓你傷害這片森林！」

「那就讓我看看你的本事吧。」暗格斯揮手放出一團黑球，像閃電一樣朝露比飛來。

「光亮亮，閃閃放光芒！」露比的魔法棒立刻亮起來，把黑球打散了。

「不錯啊！」暗格斯皺起眉頭，雙手畫出一個大大的黑圈，把露比和奇奇都困在裡面。

奇奇喊道：「露比，用飛行術逃出去！去找森林女神，她有辦法打敗他！」

露比唸出咒語，飛出黑圈，拼命地往森林深處飛。她邊飛邊想：「我不能讓他得逞，我一定要救大家！」

她飛過會說話的樹、越過會唱歌的河，終於來到一座用水晶建成的神殿。裡面坐著一位美麗的女子，身上發出溫柔的光芒。

「妳是森林女神嗎？」露比問。

女神微笑點頭：「妳是新來的小魔法師嗎？願意用妳的勇氣與友誼來守護森林嗎？」

「我願意！」露比說。

女神遞給她一顆金色水晶：「用這顆水晶念出『心連心，光照黑暗』，會發動最強的保護魔法。」

露比接過水晶，轉身就往回飛。她的心跳得飛快，但她知道，她不再害怕了。

🤝 第四章：友誼的魔法

露比趕回奇奇被困的地方，暗格斯正準備用黑霧吞沒整座森林。

「停下來！」露比大喊。

「回來送死嗎？」暗格斯冷笑。

「我不是一個人！」露比舉起水晶，大聲唸出：「心連心，光照黑暗！」

一道金光從水晶爆發出來，照亮整片森林。黑霧被照得透明，然後像煙一樣消失了。

「不可能！」暗格斯退後兩步，臉上露出驚恐。

奇奇趕緊從黑圈裡跑出來：「做得好！這就是友誼的力量！」

就在這時，獨角獸寶寶閃閃也跑來了，牠頭上的角發出柔和的光。森林裡的動物們也陸續出現，小狐狸、小鳥、小精靈都站在露比身後。

「我們都不怕你！」他們一起喊。

暗格斯無法抵抗這麼多光明與團結的力量。他大叫一聲，然後「噗！」地一聲消失在空氣中，連黑霧也一點一點被清乾淨。

森林又恢復了生氣，花朵再度跳舞、鳥兒又唱起歌來，天空還出現了一道彩虹。

女神出現在空中，微笑著對露比說：「妳完成了試煉，也證明了，最強的魔法不是咒語，而是——友誼。」

奇奇拍拍露比的肩膀：「妳現在是真正的小魔法師了。」

露比笑了，眼裡閃著光芒：「謝謝大家，但我知道，這只是我的魔法冒險的開始。」

她牽著閃閃、跟著奇奇，一起走回那棵樹屋。他們知道，只要有愛和勇氣，他們可以面對任何冒險。

# data[].attributes.body
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>小型生存遊戲</title>

<style>

body {

font-family: sans-serif;

background-color: #f4f4f4;

display: flex;

flex-direction: column;

align-items: center;

padding: 20px;

}

h1 {

color: #333;

}

.game-buttons {

display: grid;

grid-template-columns: repeat(3, 120px);

gap: 15px;

margin-top: 20px;

}

button {

padding: 15px;

border: none;

border-radius: 10px;

background-color: #4CAF50;

color: white;

font-size: 16px;

cursor: pointer;

box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);

}

button:hover {

background-color: #45a049;

}

.log {

margin-top: 30px;

width: 100%;

max-width: 400px;

height: 150px;

overflow-y: auto;

background: white;

border: 1px solid #ccc;

padding: 10px;

border-radius: 5px;

}

.status {

margin-top: 20px;

background: white;

border: 1px solid #ccc;

padding: 10px;

border-radius: 5px;

width: 300px;

text-align: center;

}

</style>

</head>

<body>

<h1>🌲 小型生存遊戲 🌲</h1>

<div class="status">

<div>生命值: <span id="hp">30</span>/30</div>

<div>金錢: $<span id="money">500</span></div>

<div>武器狀態: <span id="weapon">未購買</span></div>

</div>

<div class="game-buttons">

<button onclick="useMedkit()">血包</button>

<button onclick="logAction('你吃了一些食物，補充了體力。')">食物</button>

<button onclick="buyWeapon()">武器</button>

<button onclick="encounterAnimal()">動物</button>

<button onclick="callForRescue()">呼救</button>

<button onclick="logAction('你進入商店，看看有什麼可以買。')">商店</button>

<button onclick="restartGame()">重新開始</button>

</div>

<div class="log" id="log"></div>

<script>

let hp = 30;

let maxHp = 30;

let money = 500;

let gameEnded = false;

let hasWeapon = false;

function updateStatus() {

document.getElementById("hp").innerText = hp;

document.getElementById("money").innerText = money;

document.getElementById("weapon").innerText = hasWeapon ? "已購買" : "未購買";

}

function logAction(message) {

const log = document.getElementById("log");

const time = new Date().toLocaleTimeString();

log.innerHTML = <div>[${time}] ${message}</div> + log.innerHTML;

}

function useMedkit() {

if (gameEnded) return;

if (money >= 200) {

hp = Math.min(hp + 20, maxHp);

money -= 200;

logAction("你使用了200元血包，恢復了20點生命。")

} else if (money >= 100) {

hp = Math.min(hp + 10, maxHp);

money -= 100;

logAction("你使用了100元血包，恢復了10點生命。")

} else {

logAction("你沒有足夠的錢使用血包！");

}

updateStatus();

}

function buyWeapon() {

if (gameEnded) return;

if (hasWeapon) {

logAction("你已經擁有武器了！");

} else if (money >= 300) {

money -= 300;

hasWeapon = true;

logAction("你花了300元買了一把武器，打怪獎勵增加！");

} else {

logAction("金錢不足，無法購買武器。");

}

updateStatus();

}

function encounterAnimal() {

if (gameEnded) return;

let earned = Math.floor(Math.random() * 91) + 10; // 10到100元

if (hasWeapon) earned += 10; // 有武器多10元

let damage = Math.floor(Math.random() * 10) + 1; // 1到10點傷害

money += earned;

hp -= damage;

logAction(`你打敗了動物，獲得了$${earned}，但受到了${damage}點傷害！`);

if (hp <= 0) {

hp = 0;

logAction("你倒下了！遊戲結束。");

gameEnded = true;

}

updateStatus();

}

function callForRescue() {

if (gameEnded) return;

if (money >= 1000) {

logAction("你花了1000元呼救成功，獲勝了！🎉");

gameEnded = true;

} else {

logAction("金錢不足，無法呼救。");

}

updateStatus();

}

function restartGame() {

hp = 30;

money = 500;

hasWeapon = false;

gameEnded = false;

document.getElementById("log").innerHTML = "";

updateStatus();

logAction("遊戲已重新開始！");

}

</script>

</body>

</html>

# data[].attributes.body
<!DOCTYPE html>

<html lang="zh-Hant">

<head>

<meta charset="UTF-8">

<title>冒險遊戲</title>

<style>

body { font-family: sans-serif; padding: 20px; background: #f4f4f4; }

button { padding: 10px; margin: 5px; font-size: 14px; }

.status { background: #fff; padding: 15px; border-radius: 10px; margin-top: 20px; white-space: pre-wrap; }

.message { margin-top: 10px; font-weight: bold; color: #b00; }

</style>

</head>

<body>

<h2>⚔️ 文字冒險遊戲</h2>

<div>

<button onclick="enterRoom(0)">➡️ 進入房間 1</button>

<button onclick="enterRoom(1)">➡️ 進入房間 2</button>

<button onclick="enterRoom(2)">➡️ 進入房間 3</button>

</div>

<div>

<button onclick="attackMonster()">攻擊怪物</button>

<button onclick="pickWeapon()">撿起武器</button>

</div>

<div class="status" id="status"></div>

<div class="message" id="message"></div>

<script>

let playerHP = 5;

let playerAttack = 0;

let monsterKills = 0;

let currentRoom = 0;

const rooms = [];

function randomChance(prob = 0.6) {

return Math.random() < prob;

}

function generateRoomContent() {

const monsters = [];

const weapons = [];

for (let i = 0; i < 5; i++) {

if (randomChance()) monsters.push({ hp: Math.floor(Math.random() * 10) + 1 });

if (randomChance()) weapons.push({ attack: Math.floor(Math.random() * 5) + 1 });

}

return {

monsters,

weapons,

hasAttacked: false,

hasPicked: false

};

}

// 初始化房間（3 間）

for (let i = 0; i < 3; i++) {

rooms.push(generateRoomContent());

}

function enterRoom(index) {

currentRoom = index;

// 每次進入時重新產生內容

rooms[currentRoom] = generateRoomContent();

showMessage(`你進入了房間 ${index + 1}。`, "#007700");

updateStatus();

}

function updateStatus() {

const room = rooms[currentRoom];

let text = 📍 當前房間：${currentRoom + 1}\n;

text += ❤️ 血量：${playerHP} / 5\n🗡️ 攻擊力：${playerAttack}\n☠️ 擊敗怪物：${monsterKills} / 5\n\n;

text += 👾 怪物：${room.monsters.length > 0 ? room.monsters.map(m => HP:${m.hp}`).join(', ') : '無'}\n`;

text += 🪓 武器：${room.weapons.length > 0 ? room.weapons.map(w => +${w.attack}`).join(', ') : '無'}\n`;

text += ✔️ 此房間已攻擊怪物：${room.hasAttacked ? '是' : '否'}\n;

text += ✔️ 此房間已撿武器：${room.hasPicked ? '是' : '否'}\n;

document.getElementById("status").innerText = text;

}

function showMessage(msg, color = "#b00") {

const msgBox = document.getElementById("message");

msgBox.innerText = msg;

msgBox.style.color = color;

}

function attackMonster() {

const room = rooms[currentRoom];

if (room.hasAttacked) {

showMessage("你已經攻擊過這個房間的怪物了！");

return;

}

room.hasAttacked = true;

if (room.monsters.length === 0) {

showMessage("這個房間沒有怪物可攻擊！");

return;

}

const monster = room.monsters[0];

if (playerAttack > monster.hp) {

monsterKills++;

showMessage(`✅ 你擊敗了一隻怪物！（怪物 HP: ${monster.hp}）`, "#008800");

} else {

playerHP--;

showMessage(`💢 怪物反擊你！你損失 1 滴血（怪物 HP: ${monster.hp}）`);

}

updateStatus();

checkGameEnd();

}

function pickWeapon() {

const room = rooms[currentRoom];

if (room.hasPicked) {

showMessage("你已經拿過這個房間的武器了！");

return;

}

room.hasPicked = true;

if (room.weapons.length === 0) {

showMessage("這個房間沒有武器可撿！");

return;

}

const weapon = room.weapons[0];

playerAttack += weapon.attack;

showMessage(`🪓 你獲得了攻擊力 +${weapon.attack} 的武器！`, "#0055aa");

updateStatus();

checkGameEnd();

}

function checkGameEnd() {

if (playerHP <= 0) {

showMessage("💀 你已經失去了所有血量，遊戲結束！");

disableButtons();

} else if (monsterKills >= 5) {

showMessage("🎉 你擊敗了五隻怪物，成功通關！");

disableButtons();

}

}

function disableButtons() {

document.querySelectorAll("button").forEach(btn => btn.disabled = true);

}

// 初始化畫面

updateStatus();

showMessage("🎮 遊戲開始，請選擇房間進入探索！", "#000");

</script>

</body>

</html>

# data[].attributes.body
<!DOCTYPE html>

<html lang="zh-Hant">

<head>

<meta charset="UTF-8">

<title>荒野求生</title>

<style>

body { font-family: Arial, sans-serif; background: #111; color: #eee; text-align: center; margin: 0; padding: 0; }

#game { padding: 30px; min-height: 100vh; }

#healthbar { height: 25px; width: 90%; max-width: 300px; background: red; margin: 10px auto; border-radius: 5px; }

#health { height: 100%; background: limegreen; transition: width 0.5s; }

.btn { margin: 8px; padding: 15px 30px; background: #28a745; border: none; border-radius: 10px; color: white; font-size: 18px; cursor: pointer; }

#inventory { margin-top: 20px; padding: 10px; background: rgba(0, 0, 0, 0.6); border-radius: 10px; }

#scene { margin-top: 20px; }

</style>

</head>

<body>

<h1>荒野求生</h1>

<div id="game">

<div id="stats">

生命值: <span id="healthText">100</span><br>

飢餓: <span id="hunger">0</span> | 口渴: <span id="thirst">0</span><br>

</div>

<div id="inventory">

食物: <span id="food">0</span> | 水: <span id="water">0</span><br>

<button class="btn" onclick="useItem('food')">吃食物</button>

<button class="btn" onclick="useItem('water')">喝水</button>

</div>

<div id="actions">

<button class="btn" onclick="go('forest')">去森林</button>

<button class="btn" onclick="go('lake')">去湖邊</button>

<button class="btn" onclick="go('mine')">去礦坑</button>

<button class="btn" onclick="rest()">休息</button>

</div>

<div id="scene"></div>

</div>

<script>

let health = 100, hunger = 0, thirst = 0;

let inventory = { food: 0, water: 0 };

let inBattle = false, monster = { name: '', hp: 0 };

function updateStats() {

document.getElementById('healthText').innerText = health;

document.getElementById('hunger').innerText = hunger;

document.getElementById('thirst').innerText = thirst;

document.getElementById('food').innerText = inventory.food;

document.getElementById('water').innerText = inventory.water;

if (hunger >= 100 || thirst >= 100 || health <= 0) gameOver('你死了...');

}

function nextDay() {

hunger += 20; thirst += 25;

if (hunger >= 100 || thirst >= 100) health -= 25;

updateStats();

}

function go(place) {

if (inBattle) return;

let encounter = Math.random();

if (place == 'forest') encounter < 0.5 ? inventory.food++ : startBattle('森林野狼', 60);

if (place == 'lake') encounter < 0.5 ? inventory.water++ : startBattle('水怪', 70);

if (place == 'mine') encounter < 0.4 ? inventory.food++ : startBattle('洞穴巨鼠', 80);

nextDay();

}

function rest() {

hunger += 15; thirst += 15;

updateStats();

nextDay();

}

function startBattle(name, hp) {

inBattle = true; monster = { name, hp };

renderBattle();

}

function renderBattle() {

document.getElementById('scene').innerHTML = `<p>遇到 ${monster.name}！（HP: ${monster.hp}）</p>

<button class="btn" onclick="fight()">戰鬥</button>

<button class="btn" onclick="escape()">逃跑</button>`;

}

function fight() {

let damage = Math.random() < 0.2 ? 35 : 20;

monster.hp -= damage;

let scene = document.getElementById('scene');

scene.innerHTML += <p>攻擊！對${monster.name}造成${damage}傷害！</p>;

if (monster.hp <= 0) { scene.innerHTML += <p>打敗了${monster.name}！</p>; inBattle = false; nextDay(); return; }

health -= 20;

scene.innerHTML += <p>${monster.name}攻擊了你！</p>;

updateStats();

}

function escape() {

inBattle = false;

health -= 15;

document.getElementById('scene').innerHTML = '<p>你逃跑了，但受了點傷。</p>';

nextDay();

}

function useItem(item) {

if (item === 'food' && inventory.food > 0) {

inventory.food--; hunger = Math.max(0, hunger - 40);

document.getElementById('scene').innerHTML = '吃了食物，飢餓減少！';

}

if (item === 'water' && inventory.water > 0) {

inventory.water--; thirst = Math.max(0, thirst - 40);

document.getElementById('scene').innerHTML = '喝了水，口渴減少！';

}

updateStats();

}

function gameOver(message) {

document.getElementById('game').innerHTML = <h2>${message}</h2><button class="btn" onclick="location.reload()">重新開始</button>;

}

updateStats();

</script>

</body>

</html>

# data[].attributes.body
🌟《星星的祕密》🌟

📖 第一章：奇怪的藍色書本

在遙遠的未來，人類已經住在很多不同的星球上。小男孩凜和媽媽住在阿斯塔星的一個小鎮上。阿斯塔星的天空是紫色的，晚上還會看到好多好多像糖果一樣繽紛的星星。

那天，凜在學校後面的市集閒晃。市集裡有賣奇怪機器的小販，也有賣超大爆米花的老奶奶。突然，一本閃著藍色光芒的書從一個破爛的攤位上掉到他腳邊。

「咦？這是什麼？」凜蹲下來撿起書。書很重，上面寫著他看不懂的奇怪符號。奇怪的是，當他用手指輕輕碰到封面的時候，腦袋裡突然閃過好多奇怪的畫面——高高的大樹、藍藍的大海，還有一個穿著白裙子、笑得很溫柔的小姐姐。

「好漂亮的地方……可是，我從來沒見過啊。」凜喃喃自語。

這時，一個穿著黑色斗篷的老爺爺出現在他身後，聲音沙啞地說：「孩子，這本書，不是普通的東西。它藏著一個大秘密……」

凜嚇了一跳，趕緊把書抱在胸口。「你是誰？」

老爺爺咧嘴一笑，露出一口黃牙。「我是書的守護人，但現在，它選了你。小子，帶著它去帝都吧，那裡有你該知道的答案。」

說完，他就像風吹一樣消失了。

凜張大了嘴，還以為自己在做夢。但懷裡的書依然沉甸甸地存在著，閃爍著微弱的藍光。

回到家，凜怎麼也睡不著。他決定隔天一早就出發，去傳說中最繁華、最神秘的「艾利奧斯城」。

因為他隱隱感覺到，自己的命運，從撿起那本書開始，已經悄悄改變了。

📖 第二章：沙漠裡的朋友們

隔天一早，凜背上小背包，帶著那本奇怪的藍色書，偷偷離開了家。他搭上了開往帝都的飛行巴士，一路晃啊晃，來到了第一個中途站——「蘇恩沙漠」。

蘇恩沙漠很大，到處都是金黃色的沙子和像怪獸一樣高高的仙人掌。風一吹來，沙子就像小刀一樣刮在人臉上，痛得凜直皺眉。

「嗚啊，好熱好累啊……」凜一邊走一邊抱怨，背包裡的藍色書本也變得越來越沉重。

就在他快要走不動的時候，前方出現了一個身影。那是一個穿著紅色披風的女孩，手上拿著一把又大又酷的長槍，看起來像個帥氣的戰士。

「小鬼，你一個人來這種地方幹嘛？」女孩叉著腰問。

「呃，我……我要去帝都！」凜咬牙回答，還努力挺起胸膛，裝得很勇敢。

女孩哈哈大笑起來。「你這樣子，不迷路才怪。我叫蕾雅，是這附近最厲害的旅人哦！」

就在這時，一個金屬聲從旁邊傳來，「警告：沙塵暴即將來襲。請儘快尋找避難地點。」

凜嚇了一跳，轉頭一看，竟然是一個全身銀色的機械人，眼睛發著藍光，像一個會走路的大玩具！

「這是K-07，我的夥伴啦！」蕾雅拍拍那機械人的肩膀，「別怕，他很可靠的。」

K-07用平板的聲音說：「前方300公尺有一個廢棄地堡，可供暫時避難。」

於是，三人趕緊朝著地堡奔去。

到了地堡，凜這才有時間好好喘口氣。他把書拿出來，小心翼翼地打開。蕾雅一看到藍光，眼睛立刻亮了起來。

「這個……這個難道是——傳說中的『星星之書』？！」她驚呼。

凜一臉茫然，「星星之書？」

K-07則冷靜地補充說：「星星之書是古老地球文明留下的遺物，擁有能打開某個巨大秘密的力量。」

凜的心跳加速了。

也許，這趟旅程，會比他想像中還要更加奇妙、更加危險呢……

📖 第三章：帝都的陰謀

經過一整天的奔波，凜、蕾雅和K-07終於搭上了沙漠列車，抵達傳說中的帝都——艾利奧斯城。

這裡比凜想像中還要壯觀！ 高高的銀色塔樓直衝雲霄，空中還有飛船來來去去，人行道上都是穿著華麗衣服的人們。整座城市像一顆發光的大寶石，閃閃發亮。

「哇啊……」凜張大嘴巴，忍不住一直東張西望。

「小心點，這地方光鮮亮麗，但暗地裡可不乾淨呢。」蕾雅壓低聲音提醒他。

他們在一間不起眼的小旅館落腳。晚上，蕾雅和K-07偷偷跟凜開了一場「秘密會議」。

「我打聽過了，」蕾雅一邊說，一邊攤開一張地圖，「皇宮地下藏著一台叫做『亞特拉斯引擎』的機器，聽說可以控制整個銀河的能量流動。」

「而且，」K-07用機械聲補充，「根據我的資料，啟動引擎需要一本特別的書——很可能就是你帶來的那本藍色書本。」

凜的心咚咚跳個不停。

「可是，皇宮那麼大，我們怎麼找得到地下室呢？」他小聲問。

「這個簡單，」蕾雅神秘一笑，從背包裡拿出一張舊舊的門票，「明天有一場皇宮開放日，我們混進去就行了！」

凜緊張又興奮。他們馬上開始練習各種混進皇宮的方法，還讓K-07假裝成一個「皇家服務機器人」，增加掩護。

然而，他們沒注意到，在窗外的黑暗裡，有一雙銳利的眼睛正在靜靜觀察他們……

——那是皇室特務「黑貓」，一個動作快如閃電、專門抓叛徒的小女孩。 她已經把凜的樣子牢牢記在心裡，並準備向皇女艾瑟莉亞報告了。

這座美麗的城市裡，正悄悄醞釀著一場巨大的風暴……

📖 第四章：星星的約定

第二天，凜、蕾雅和K-07混在人群中，順利進入了金碧輝煌的皇宮。 他們跟著地圖，一路小心翼翼地來到一扇寫著「禁止進入」的巨大門前。

「就是這裡！」蕾雅壓低聲音說。

K-07立刻啟動破解裝置，「滴滴滴」幾聲後，大門悄悄打開了。裡面是一條長長的地下通道，隱約可以看到盡頭有微微的藍光。

「走吧！」凜握緊拳頭，大步往前走去。

他們走到通道盡頭，果然看到一台巨大的銀色機器，安靜地躺在黑暗中。那就是「亞特拉斯引擎」！在引擎中央，有一個小小的凹槽，正好能放下凜手上的藍色書本。

就在這時，一道冷冷的聲音響起：「果然是你們。」

皇女艾瑟莉亞穿著白色禮服，帶著一群士兵出現在他們背後。身旁還站著那個叫黑貓的女孩，露出得意的笑容。

「把書交出來。」艾瑟莉亞伸出手。

凜咬緊牙關，沒有動。

艾瑟莉亞繼續說：「我只是想讓銀河更強大，不會傷害無辜的人。只要啟動引擎，人類就能重新統一，再也不用害怕戰爭了。」

蕾雅搖搖頭，「用武力帶來的和平，不是真正的和平！」

K-07也冷靜地說：「未經選擇的力量，只會引來更大的毀滅。」

凜低頭，看著懷裡閃爍微光的書。他突然明白了：這本書，不是用來統治世界的，而是用來守護希望的。

「我不交！」凜大聲喊道。

下一秒，他舉起藍色書本，猛地把它插進引擎旁邊的一個緊急終止槽！

「轟！」一聲巨響，引擎瞬間熄滅了，藍光消失無蹤。整座皇宮震動了一下，但很快又恢復平靜。

艾瑟莉亞怔住了，最後苦笑一聲，輕輕放下武器。「……也許，這樣才是對的吧。」

事情平息後，凜、蕾雅和K-07站在皇宮外，看著滿天閃爍的星星。

「接下來呢？」蕾雅問。

凜握緊拳頭，笑了笑：「我要走遍每個星球，把真正的希望傳下去。」

K-07點點頭，冰冷的機械聲中帶著一絲溫柔：「同行嗎？」

「當然一起！」蕾雅咧嘴一笑。

三個好朋友，朝著廣闊的星空出發。 他們的故事，才剛剛開始。

在無盡的銀河中，有一顆小小的星星，悄悄許下了新的願望——

「只要有希望，哪裡都是家。」

# data[].attributes.body
鈴聲響起像砲火的回音，
黑板上寫不完的，是青春的航行。
六年級甲班的夥伴們，
我們不是說再見，是準備揚帆前進。

操場曾是我們的戰場，
午休時間，一場場笑聲的衝鋒。
你是狙擊手，他是廚師，我扮船長，
教室，就是我們的千陽號船艙。

考卷像海獸，我們合力擊敗；
比賽是暴風，也學會了不後退的節拍。
老師們是我們的羅盤和指針，
指向未來的偉大航道，不會迷失方向。

畢業不是終點，是紀念碑前的敬禮，
我們將夢想摺成紙船，放入記憶的海裡。

# data[].attributes.body
題目：畢業

畢業，這兩個字看似簡單，卻承載著無數的回憶與情感。每當我們走到人生的一個階段終點，畢業就像是一扇門，推開它，便是另一段旅程的開始。

回首過去的校園生活，點點滴滴浮現在眼前。清晨的鐘聲、課堂上的笑語、考試前的緊張、操場上的奔跑……這些日常的畫面，在畢業的時候竟變得如此珍貴。我們曾經抱怨過作業的繁重，曾經因成績而沮喪，卻也在這些磨練中逐漸成長，變得更加堅強與成熟。

畢業不只是離別，它也是一種祝福。我們與老師、同學道別，不代表再也不見，而是將這份情誼封存在心中，帶著它走向下一段人生旅程。畢業典禮上，一張張泛著光芒的畢業照、一句句誠摯的祝福，都是對過去努力的肯定，也是對未來夢想的期許。

當我們踏出校門的那一刻，心中難免有不捨、有徬徨，但更多的，應該是對未來的憧憬。畢業，不是結束，而是另一個開始。我們將帶著所學的知識與人生的經驗，勇敢地面對未知的挑戰，走出屬於自己的一條路。

畢業，就像是一首青春的詩，寫滿了回憶與希望。願我們都能帶著這份詩意與力量，奔赴人生的下一場精彩

# data[].attributes.body
<!DOCTYPE html>

<html lang="zh-Hant">

<head>

<meta charset="UTF-8">

<title>數學四則運算練習器</title>

<style>

body {

font-family: 'Arial', sans-serif;

text-align: center;

background-color: #f0f8ff;

padding: 30px;

}

h1 {

color: #333;

}

#question-container {

margin: 20px auto;

max-width: 400px;

}

.question {

margin: 10px 0;

font-size: 20px;

}

input {

width: 100px;

padding: 5px;

font-size: 16px;

}

#timer, #score {

font-size: 18px;

margin: 15px;

color: #444;

}

button {

padding: 10px 20px;

font-size: 16px;

background-color: #4CAF50;

color: white;

border: none;

border-radius: 6px;

cursor: pointer;

}

button:hover {

background-color: #45a049;

}

#result {

font-size: 24px;

font-weight: bold;

margin-top: 20px;

color: #d32f2f;

}

</style>

</head>

<body>

<h1>數學四則運算練習器</h1>

<button onclick="startQuiz()">開始練習</button>

<div id="timer"></div>

<div id="score"></div>

<form id="quizForm" onsubmit="submitQuiz(); return false;">

<div id="question-container"></div>

<button type="submit" style="display:none;" id="submitBtn">送出答案</button>

</form>

<div id="result"></div>

<script>

const totalQuestions = 10;

let score = 100;

let timeLeft = 300; // 5 minutes in seconds

let timerInterval;

let currentQuestions = [];

// 題庫 50 題（四則運算隨機產生）

function generateQuestionSet() {

const questions = [];

const operators = ['+', '-', '*', '/'];

while (questions.length < 50) {

let a = Math.floor(Math.random() * 50) + 1;

let b = Math.floor(Math.random() * 50) + 1;

let op = operators[Math.floor(Math.random() * 4)];

if (op === '/' && a % b !== 0) continue; // 除法確保整除

const expr = ${a} ${op} ${b};

const answer = eval(expr);

questions.push({ q: expr, a: answer });

}

return questions;

}

const fullQuestionSet = generateQuestionSet();

function startQuiz() {

score = 100;

timeLeft = 300;

currentQuestions = [];

document.getElementById('question-container').innerHTML = '';

document.getElementById('result').textContent = '';

document.getElementById('submitBtn').style.display = 'inline';

// 抽取隨機10題

const indices = [...Array(50).keys()];

indices.sort(() => Math.random() - 0.5);

for (let i = 0; i < totalQuestions; i++) {

currentQuestions.push(fullQuestionSet[indices[i]]);

}

// 顯示題目

const container = document.getElementById('question-container');

currentQuestions.forEach((item, idx) => {

const div = document.createElement('div');

div.className = 'question';

div.innerHTML = `

${idx + 1}. ${item.q} =

<input type="number" step="any" name="answer${idx}" required>

`;

container.appendChild(div);

});

// 開始倒數計時

clearInterval(timerInterval);

timerInterval = setInterval(updateTimer, 1000);

updateTimer(); // 立即更新一次

document.getElementById('score').textContent = `目前分

# data[].attributes.body
<!DOCTYPE html>

<html lang="zh-Hant">

<head>

<meta charset="UTF-8">

<title>角色選擇大冒險！</title>

<style>

body {

font-family: '微軟正黑體';

background-color: #f5f5dc;

text-align: center;

padding: 40px;

}

.character, .monster {

display: inline-block;

padding: 20px;

border: 3px solid #333;

border-radius: 10px;

background-color: #fff;

width: 240px;

margin: 10px;

}

.btn {

padding: 10px 20px;

margin: 10px;

font-size: 16px;

border-radius: 10px;

border: none;

cursor: pointer;

}

.btn-start { background: #007bff; color: white; }

.btn-attack { background-color: #28a745; color: white; }

.btn-heal { background-color: #17a2b8; color: white; }

.btn-ultimate { background-color: #dc3545; color: white; }

.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.log {

margin-top: 30px;

background: #f2f2f2;

padding: 20px;

border-radius: 10px;

height: 250px;

overflow-y: auto;

text-align: left;

width: 500px;

margin-left: auto;

margin-right: auto;

font-size: 14px;

}

select {

font-size: 16px;

padding: 5px;

margin-bottom: 20px;

}

</style>

</head>

<body>

<h1>🎮 選角對戰喵霸龍！</h1>

<select id="characterSelect">

<option value="pinliang">品良（平均型）</option>

<option value="zoro">索隆（高攻擊）</option>

<option value="luffy">魯夫（高血量）</option>

</select>

<button class="btn btn-start" onclick="startGame()">開始遊戲！</button>

<div id="gameArea" style="display:none;">

<div class="character" id="hero">

<h2 id="heroName">主角：</h2>

<p>❤️ HP：<span id="heroHP"></span></p>

<p>🧪 藥水：<span id="potions">2</span></p>

<p>💥 必殺：<span id="ultCount">1</span></p>

</div>

<div class="monster">

<h2>怪物：喵霸龍</h2>

<p>💀 HP：<span id="monsterHP">120</span></p>

</div>

<button class="btn btn-attack" onclick="attack()">攻擊</button>

<button class="btn btn-heal" onclick="heal()">補血</button>

<button class="btn btn-ultimate" onclick="ultimate()" id="ultBtn">必殺技</button>

<div class="log" id="log">

<strong>📜 戰鬥紀錄：</strong><br>

</div>

</div>

<script>

let hero = {

name: "品良",

hp: 100,

maxHP: 100,

potions: 2,

ult: 1,

minDmg: 5,

maxDmg: 20

};

let monsterHP = 120;

function startGame() {

const choice = document.getElementById("characterSelect").value;

if (choice === "pinliang") {

hero = { name: "品良", hp: 100, maxHP: 100, potions: 2, ult: 1, minDmg: 5, maxDmg: 20 };

} else if (choice === "zoro") {

hero = { name: "索隆", hp: 90, maxHP: 90, potions: 2, ult: 1, minDmg: 10, maxDmg: 30 };

} else if (choice === "luffy") {

hero = { name: "魯夫", hp: 130, maxHP: 130, potions: 2, ult: 1, minDmg: 3, maxDmg: 15 };

}

monsterHP = 120;

document.getElementById("gameArea").style.display = "block";

document.getElementById("heroName").innerText = `主角：${hero.name}`;

updateUI();

document.getElementById("log").innerHTML = "<strong>📜 戰鬥紀錄：</strong><br>";

}

function updateUI() {

document.getElementById("heroHP").innerText = hero.hp;

document.getElementById("monsterHP").innerText = monsterHP;

document.getElementById("potions").innerText = hero.potions;

document.getElementById("ultCount").innerText = hero.ult;

document.getElementById("ultBtn").disabled = hero.ult <= 0;

}

function logMsg(msg) {

const log = document.getElementById("log");

log.innerHTML += msg + "<br>";

log.scrollTop = log.scrollHeight;

}

function attack() {

if (hero.hp <= 0 || monsterHP <= 0) return;

let heroDmg = Math.floor(Math.random() * (hero.maxDmg - hero.minDmg + 1)) + hero.minDmg;

let monsterDmg = Math.floor(Math.random() * 15) + 3;

// 怪物暴擊 10%

if (Math.random() < 0.1) {

monsterDmg *= 2;

logMsg("💥 喵霸龍暴擊了！");

}

monsterHP -= heroDmg;

hero.hp -= monsterDmg;

if (monsterHP < 0) monsterHP = 0;

if (hero.hp < 0) hero.hp = 0;

logMsg(`🗡️ ${hero.name} 攻擊造成 ${heroDmg} 傷害！`);

logMsg(`😾 喵霸龍反擊造成 ${monsterDmg} 傷害！`);

endCheck();

updateUI();

}

function heal() {

if (hero.potions <= 0 || hero.hp <= 0 || monsterHP <= 0) return;

let healAmt = Math.floor(Math.random() * 20) + 10;

hero.hp += healAmt;

if (hero.hp > hero.maxHP) hero.hp = hero.maxHP;

hero.potions--;

logMsg(`🧪 ${hero.name} 使用補血藥水，回復 ${healAmt} HP！`);

updateUI();

}

function ultimate() {

if (hero.ult <= 0 || hero.hp <= 0 || monsterHP <= 0) return;

let ultDmg = Math.floor(Math.random() * 50) + 30;

monsterHP -= ultDmg;

if (monsterHP < 0) monsterHP = 0;

hero.ult--;

let counter = Math.floor(Math.random() * 15) + 3;

hero.hp -= counter;

if (hero.hp < 0) hero.hp = 0;

logMsg(`💥 ${hero.name} 發動必殺技，造成 ${ultDmg} 傷害！`);

logMsg(`😾 喵霸龍反擊造成 ${counter} 傷害！`);

endCheck();

updateUI();

}

function endCheck() {

if (hero.hp === 0 && monsterHP === 0) {

logMsg("<strong>☠️ 雙雙倒地！這就是命運！</strong>");

} else if (hero.hp === 0) {

logMsg(`<strong>😭 ${hero.name} 被喵霸龍打敗了！</strong>`);

} else if (monsterHP === 0) {

logMsg(`<strong>🎉 ${hero.name} 打贏了喵霸龍！大勝利！</strong>`);

}

}

</script>

</body>

</html>

# data[].attributes.body
<!DOCTYPE html>

<html lang="zh-Hant">

<head>

<meta charset="UTF-8">

<title>數學四則運算遊戲</title>

<style>

body {

font-family: Arial, sans-serif;

text-align: center;

padding: 20px;

}

.hidden {

display: none;

}

.question {

font-size: 24px;

margin: 20px 0;

}

input[type="number"] {

font-size: 20px;

padding: 5px;

width: 100px;

}

button {

padding: 10px 20px;

font-size: 16px;

margin-top: 10px;

}

#timer {

font-size: 18px;

margin-top: 10px;

}

</style>

</head>

<body>

<h1>數學四則運算練習</h1>

<button id="startBtn">開始練習</button>

<div id="gameArea" class="hidden">

<div id="timer">剩餘時間：5:00</div>

<div id="question" class="question"></div>

<input type="number" id="answerInput" />

<button id="submitBtn">提交答案</button>

<div id="progress"></div>

</div>

<div id="result" class="hidden">

<h2>練習結束！</h2>

<p id="scoreDisplay"></p>

<button onclick="location.reload()">再玩一次</button>

</div>

<script>

const allQuestions = [];

const operators = ['+', '-', '*', '/'];

while (allQuestions.length < 50) {

let a = Math.floor(Math.random() * 50) + 1;

let b = Math.floor(Math.random() * 50) + 1;

let op = operators[Math.floor(Math.random() * 4)];

if (op === '/' && a % b !== 0) continue; // 除法只取整除的

allQuestions.push({ a, b, op });

}

let selectedQuestions = [];

let currentQuestion = 0;

let score = 100;

let wrong = 0;

let timer;

let timeLeft = 300;

const startBtn = document.getElementById('startBtn');

const gameArea = document.getElementById('gameArea');

const questionDiv = document.getElementById('question');

const answerInput = document.getElementById('answerInput');

const submitBtn = document.getElementById('submitBtn');

const progressDiv = document.getElementById('progress');

const resultDiv = document.getElementById('result');

const scoreDisplay = document.getElementById('scoreDisplay');

const timerDisplay = document.getElementById('timer');

function startGame() {

selectedQuestions = allQuestions.sort(() => 0.5 - Math.random()).slice(0, 10);

currentQuestion = 0;

score = 100;

wrong = 0;

timeLeft = 300;

startBtn.classList.add('hidden');

gameArea.classList.remove('hidden');

showQuestion();

timer = setInterval(updateTimer, 1000);

}

function updateTimer() {

timeLeft--;

const minutes = Math.floor(timeLeft / 60);

const seconds = timeLeft % 60;

timerDisplay.textContent = 剩餘時間：${minutes}:${seconds.toString().padStart(2, '0')};

if (timeLeft <= 0) {

endGame();

}

}

function showQuestion() {

const q = selectedQuestions[currentQuestion];

questionDiv.textContent = ${q.a} ${q.op} ${q.b} = ?;

answerInput.value = '';

progressDiv.textContent = 第 ${currentQuestion + 1} 題 / 10;

}

function checkAnswer() {

const q = selectedQuestions[currentQuestion];

let correct;

switch (q.op) {

case '+': correct = q.a + q.b; break;

case '-': correct = q.a - q.b; break;

case '*': correct = q.a * q.b; break;

case '/': correct = q.a / q.b; break;

}

const userAnswer = Number(answerInput.value);

if (userAnswer !== correct) {

score -= 10;

wrong++;

}

currentQuestion++;

if (currentQuestion < 10) {

showQuestion();

} else {

endGame();

}

}

function endGame() {

clearInterval(timer);

gameArea.classList.add('hidden');

resultDiv.classList.remove('hidden');

scoreDisplay.textContent = 你的得分是：${score} 分（錯誤題數：${wrong}）;

}

startBtn.addEventListener('click', startGame);

submitBtn.addEventListener('click', checkAnswer);

</script>

</body>

</html>

# data[].attributes.body
<!DOCTYPE html>

<html lang="zh-TW">

<head>

<meta charset="UTF-8">

<title>拍賣網站</title>

<style>

body { font-family: sans-serif; text-align: center; background: #f0f0f0; }

h1 { margin-top: 20px; }

.products { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin-top: 30px; }

.product {

background: white;

border-radius: 10px;

box-shadow: 0 0 10px rgba(0,0,0,0.1);

padding: 20px;

width: 220px;

}

.product img { width: 100%; height: 150px; object-fit: cover; border-radius: 5px; }

.product h3 { margin: 10px 0 5px; }

.product p { margin: 5px 0; }

.product button {

background-color: #28a745;

color: white;

border: none;

padding: 10px 15px;

cursor: pointer;

border-radius: 5px;

}

.product button:hover {

background-color: #218838;

}

</style>

</head>

<body>

<h1>🛒 拍賣網站</h1>

<div class="products">

<div class="product">

<img src="https://via.placeholder.com/220x150?text=相機" alt="相機">

<h3>數位相機</h3>

<p>定價：NT$ 3200</p>

<button onclick="order('數位相機', 3200)">下單</button>

</div>

<div class="product">

<img src="https://via.placeholder.com/220x150?text=耳機" alt="耳機">

<h3>藍牙耳機</h3>

<p>定價：NT$ 990</p>

<button onclick="order('藍牙耳機', 990)">下單</button>

</div>

<div class="product">

<img src="https://via.placeholder.com/220x150?text=背包" alt="背包">

<h3>登山背包</h3>

<p>定價：NT$ 1580</p>

<button onclick="order('登山背包', 1580)">下單</button>

</div>

<div class="product">

<img src="https://via.placeholder.com/220x150?text=書籍" alt="書籍">

<h3>童話故事書</h3>

<p>定價：NT$ 250</p>

<button onclick="order('童話故事書', 250)">下單</button>

</div>

</div>

<script>

function order(name, price) {

alert(`您已成功下單「${name}」，金額：NT$${price}`);

}

</script>

</body>

</html>

# data[].attributes.body
https://www.canva.com/design/DAGl_hJUxHE/P037tXTUx7f_nGt7WnDx8g/edit?utm_content=DAGl_hJUxHE&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton

# data[].attributes.body
<!DOCTYPE html>

<html lang="zh-Hant">

<head>

<meta charset="UTF-8">

<title>畢業典禮邀請函</title>

<style>

body {

font-family: "Microsoft JhengHei", sans-serif;

background: #fff8f0;

padding: 30px;

text-align: center;

}

h1 {

color: #4a4a4a;

}

.content {

max-width: 700px;

margin: 0 auto;

background: #fff;

padding: 25px;

border-radius: 10px;

box-shadow: 0 0 10px rgba(0,0,0,0.1);

}

img {

max-width: 100%;

margin-top: 20px;

border-radius: 8px;

}

.footer {

margin-top: 40px;

color: #888;

font-size: 14px;

}

</style>

</head>

<body>

<div class="content">

<h1>親愛的爸爸媽媽：</h1>

<p style="font-size: 18px; line-height: 1.8;">

您好！<br><br>

時光飛逝，轉眼間我已經要從小學畢業了。<br>

感謝您這些年來的陪伴與鼓勵，讓我勇敢地成長、一步步邁向未來。<br><br>

在這個特別的日子裡，我最想和您一起分享這份榮耀與喜悅！<br>

誠摯邀請您來參加我的畢業典禮，一起見證我人生中重要的里程碑。<br><br>

📅 日期：2025年6月15日（星期日）<br>

🕘 時間：上午9:00<br>

📍 地點：XX國民小學 活動中心<br><br>

希望那一天，能看到您坐在台下為我微笑加油！<br>

我愛您們 ❤️

</p>

<img src="https://cdn.pixabay.com/photo/2015/09/18/18/20/graduation-944444_1280.jpg" alt="畢業帽圖片">

<img src="https://cdn.pixabay.com/photo/2020/10/21/13/20/family-5672733_1280.jpg" alt="一家人歡笑圖片">

<div class="footer">

小孩敬邀<br>

XX國小 六年X班<br>

</div>

</div>

</body>

</html>

# data[].attributes.body
https://www.canva.com/design/DAGl_jl8EhQ/6uJU8SXENLoRDB1RLJRaXQ/edit?utm_content=DAGl_jl8EhQ&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton

# data[].attributes.body
<!DOCTYPE html>

<html lang="zh">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>購物車與包包</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

background-color: #f4f4f4;

}

.header {

background-color: #333;

color: white;

padding: 10px 20px;

text-align: right;

font-size: 18px;

}

.container {

display: flex;

justify-content: space-around;

margin: 20px;

}

.product-list, .shopping-cart, .inventory {

background-color: white;

border-radius: 8px;

padding: 20px;

width: 30%;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

}

.product-list h2, .shopping-cart h2, .inventory h2 {

font-size: 22px;

margin-bottom: 10px;

}

.product-item {

padding: 10px 0;

display: flex;

justify-content: space-between;

}

button {

padding: 15px 30px;

font-size: 18px;

background-color: #4CAF50;

color: white;

border: none;

border-radius: 5px;

cursor: pointer;

margin-top: 10px;

}

button:hover {

background-color: #45a049;

}

.bag-item {

padding: 10px 0;

display: flex;

justify-content: space-between;

}

.auction-btn {

background-color: #FF5733;

}

.auction-btn:hover {

background-color: #ff471a;

}

.product-item button, .bag-item button {

font-size: 16px;

padding: 10px 20px;

}

</style>

</head>

<body>

<div class="header">

現有金額：<span id="current-money">9000</span>元

</div>

<div class="container">

<!-- 商品列表 -->

<div class="product-list">

<h2>商品列表</h2>

<div id="product-items">

<!-- 商品將動態生成 -->

</div>

</div>

<!-- 購物車 -->

<div class="shopping-cart">

<h2>購物車</h2>

<ul id="cart-items">

<li>無商品</li>

</ul>

</div>

<!-- 包包 -->

<div class="inventory">

<h2>包包中的物品</h2>

<ul id="bag-items">

<li>包包空空如也</li>

</ul>

</div>

</div>

<script>

let currentMoney = 9000;

let cart = [];

let bag = [];

// 隨機生成商品價格和名稱

function generateRandomProducts() {

const products = [];

for (let i = 0; i < 7; i++) {

const price = Math.floor(Math.random() * (1500 - 1000 + 1)) + 1000;

const product = {

name: `商品${String.fromCharCode(65 + i)}`, // 商品A, 商品B, ...

price: price

};

products.push(product);

}

return products;

}

// 更新商品顯示

function updateProductList() {

const productItems = document.getElementById('product-items');

const products = generateRandomProducts();

productItems.innerHTML = '';

products.forEach(product => {

const div = document.createElement('div');

div.classList.add('product-item');

div.innerHTML = `

<span>${product.name} - ${product.price}元</span>

<button onclick="addToCart('${product.name}', ${product.price})">加入購物車</button>

`;

productItems.appendChild(div);

});

}

// 添加商品到購物車

function addToCart(item, price) {

if (currentMoney >= price) {

cart.push({ item, price });

updateCart();

} else {

alert("金額不足，無法添加此商品！");

}

}

// 更新購物車顯示

function updateCart() {

const cartItems = document.getElementById('cart-items');

cartItems.innerHTML = '';

if (cart.length === 0) {

cartItems.innerHTML = '<li>無商品</li>';

} else {

cart.forEach((product, index) => {

const li = document.createElement('li');

li.textContent = `${product.item} - ${product.price}元`;

const checkoutBtn = document.createElement('button');

checkoutBtn.textContent = '付款';

checkoutBtn.onclick = () => checkout(index); // 每個商品有獨立的付款按鈕

li.appendChild(checkoutBtn);

cartItems.appendChild(li);

});

}

}

// 付款並將商品移到包包

function checkout(index) {

const product = cart[index];

if (currentMoney >= product.price) {

currentMoney -= product.price;

document.getElementById('current-money').innerText = currentMoney;

bag.push(product);

cart.splice(index, 1);

updateCart();

updateBag();

} else {

alert("金額不足，無法付款！");

}

}

// 更新包包顯示

function updateBag() {

const bagItems = document.getElementById('bag-items');

bagItems.innerHTML = '';

if (bag.length === 0) {

bagItems.innerHTML = '<li>包包空空如也</li>';

} else {

bag.forEach((product, index) => {

const li = document.createElement('li');

li.textContent = `${product.item} - ${product.price}元`;

const auctionBtn = document.createElement('button');

auctionBtn.textContent = '拍賣';

auctionBtn.classList.add('auction-btn');

auctionBtn.onclick = () => auctionItem(index); // 每個包包中的商品有獨立的拍賣按鈕

li.appendChild(auctionBtn);

bagItems.appendChild(li);

});

}

}

// 拍賣包包中的物品

function auctionItem(index) {

const product = bag[index];

const randomPrice = Math.floor(Math.random() * 9999) + 1;

currentMoney += randomPrice;

document.getElementById('current-money').innerText = currentMoney;

alert(`拍賣成功，獲得 ${randomPrice} 元！`);

bag.splice(index, 1);

updateBag();

}

// 初始載入商品並定時刷新

setInterval(updateProductList, 5000); // 每5秒刷新一次商品列表

updateProductList(); // 頁面加載時顯示商品

</script>

</body>

</html>