JavaScript must be enabled to play.
Browser lacks capabilities required to play.
Upgrade or switch to another browser.
Loading…
<<set $lastName to "">> <<set $firstName to "">> <<set $gender to "">> <<set $birthday to "">> <<set $score to 0>> <<set $ans1 to "">> <<set $ans2 to "">> <<set $ans3 to "">>
<<nobr>> 小朋友，歡迎來到色彩魔法教室！<br> 在開始這段冒險之前，請先填寫你的資料（每一格都要填喔）： <div class="form-container"> <div class="form-group"> <label>你的姓氏：</label> <input type="text" id="ln-input" placeholder="例如：李" autofocus> </div> <div class="form-group"> <label>你的名字：</label> <input type="text" id="fn-input" placeholder="例如：小明"> </div> <div class="form-group"> <label>你的性別：</label> <select id="gd-input"> <option value="">請選擇</option> <option value="男">男</option> <option value="女">女</option> </select> </div> <div class="form-group"> <label>你的出生年月日：</label> <input type="date" id="birth-picker"> </div> </div> <div id="btn-lock-area" class="btn-wrapper is-disabled"> <div class="choice-container"> <<link "填好了，出發畫海報！">> <<set $lastName to document.getElementById('ln-input').value.trim()>> <<set $firstName to document.getElementById('fn-input').value.trim()>> <<set $gender to document.getElementById('gd-input').value>> <<set $birthday to document.getElementById('birth-picker').value>> <<goto "Start">> <</link>> </div> </div> <div id="hint-msg" class="hint-text">請填完所有欄位，按鈕就會亮起來喔！</div> <</nobr>>\ <<nobr>> <<repeat 400ms>> <<set _ln to document.getElementById('ln-input') ? document.getElementById('ln-input').value : "">> <<set _fn to document.getElementById('fn-input') ? document.getElementById('fn-input').value : "">> <<set _gd to document.getElementById('gd-input') ? document.getElementById('gd-input').value : "">> <<set _bd to document.getElementById('birth-picker') ? document.getElementById('birth-picker').value : "">> <<if _ln.trim() !== "" and _fn.trim() !== "" and _gd !== "" and _bd !== "">> <<run document.getElementById('btn-lock-area').classList.remove('is-disabled')>> <<run document.getElementById('hint-msg').style.display = 'none'>> <<stop>> <</if>> <</repeat>> <</nobr>>
鐘聲響了，放學後的綜合教室裡只剩下''$firstName''和同學小明。\ 明天就是學校的園遊會了！你們班負責「手作餅乾攤位」，而''$firstName''正低著頭為海報趕工。\ 海報中央畫好了餅乾攤位，但旁邊看起來有點空，''$firstName''決定在左邊畫大樹，右邊畫夕陽。 不過，你打開水彩盒時發現只剩下三種顏色：''「紅色」''、''「黃色」''和''「藍色」''。\ 「怎麼辦...」''$firstName''苦惱地看著調色盤。 <div class="choice-container"><<link "開始挑戰調色！">><<goto "Task 1">><</link>></div>
【第一關：大樹的葉子】\ ''$firstName''在畫紙左邊畫了樹幹，接著要幫大樹畫上''綠色''的樹葉。但現在只有紅、黃、藍三原色，要把哪兩種混合才能調出''綠色''呢？ <div class="choice-container"><<link "把「紅色」和「藍色」混在一起">><<goto "Task 1 Fail A">><</link>><<link "把「紅色」和「黃色」混在一起">><<goto "Task 1 Fail B">><</link>><<link "把「黃色」和「藍色」混在一起">><<goto "Task 1 Success">><</link>></div>
你混合了紅色與藍色，結果大樹長出了神祕的''紫色''樹葉！小明忍不住笑了：「你畫的是外星人的樹嗎？」\ ''$firstName''覺得這太詭異了，還是洗乾淨畫筆重新挑戰吧！ <div class="choice-container"><<link "重新調色">><<goto "Task 1">><</link>></div>
你混合了紅色與黃色，結果大樹變成了鮮豔的''橘色''！小明說：「看著海報覺得更熱了！」\ 看起來像秋天的楓葉，但現在是夏天。還是洗乾淨畫筆重新調色吧。 <div class="choice-container"><<link "重新調色">><<goto "Task 1">><</link>></div>
你把''黃色''和''藍色''混合，變成了漂亮的''綠色''！\ 樹葉看起來充滿夏天的活力。小明拍手叫好：「好漂亮的綠樹！」 <div class="choice-container"><<link "繼續畫右邊的夕陽">><<goto "Task 2">><</link>></div>
【第二關：溫暖的夕陽】\ 你打算在右邊畫上''橘色''夕陽。調色盤現在乾淨了，要把哪兩種顏色混在一起，才能調出''橘色''呢？ <div class="choice-container"><<link "把「紅色」和「藍色」混在一起">><<goto "Task 2 Fail A">><</link>><<link "把「紅色」和「黃色」混在一起">><<goto "Task 2 Success">><</link>><<link "把「黃色」和「藍色」混在一起">><<goto "Task 2 Fail B">><</link>></div>
你混合了紅色與藍色，結果天空變成了''紫色''！看起來倒像快要打雷的颱風天。\ 小明搓了搓手臂說：「我們的攤位好像會跑出幽靈...」洗乾淨畫筆重新再來。 <div class="choice-container"><<link "重新調色">><<goto "Task 2">><</link>></div>
你混合了黃色與藍色，結果天空變成了一片''綠色''！\ 小明笑得東倒西歪：「你在畫保護色嗎？大家會找不到攤位的！」還是洗乾淨再來一次吧。 <div class="choice-container"><<link "重新調色">><<goto "Task 2">><</link>></div>
你混合了''紅色''和''黃色''，出現了飽滿的''橘色''！\ 夕陽與綠樹搭配在一起，整張海報既繽紛又歡樂。小明說：「這絕對是最亮眼的海報！」這時，美術老師走進了教室... <div class="choice-container"><<link "看看是誰來了">><<goto "Knowledge">><</link>></div>
美術老師驚喜地看著海報：「畫得真好！''$firstName''只用三原色就畫出了這麼繽紛的作品呢。」 <div class="teacher-box"> <div class="teacher-box-title">🎨 色彩小教室</div> 紅、黃、藍是「''色彩三原色''」，它們無法被調出來，卻能兩兩相加變成「''二次色''」：<br> 👉 💛 ＋ 💙 ＝ 💚 ''綠色''<br> 👉 ❤️ ＋ 💛 ＝ 🧡 ''橘色''<br> 👉 ❤️ ＋ 💙 ＝ 💜 ''紫色'' </div> 「既然你們親自體驗了調色，老師就來考考你們吧！」 <div class="choice-container"><<link "接受隨堂考！">><<goto "Quiz 1">><</link>></div>
<div class="quiz-header">🎨 隨堂考：第 1 題 / 共 3 題</div>\ 如果要幫葡萄塗上好吃的''紫色''，該混合哪兩種顏色呢？ <div class="choice-container"><<link "紅色 ＋ 藍色">><<set $score += 1>><<set $ans1 to "紅色+藍色">><<goto "Quiz 1 Result">><</link>><<link "紅色 ＋ 黃色">><<set $ans1 to "紅色+黃色">><<goto "Quiz 1 Result">><</link>><<link "黃色 ＋ 藍色">><<set $ans1 to "黃色+藍色">><<goto "Quiz 1 Result">><</link>></div>
<<if $score eq 1>>「答對了！''$firstName''很棒！」老師在計分板畫了顆星。<<else>>「不對喔，紫色是『紅色 ＋ 藍色』。」老師溫柔提醒。<</if>>\ <div class="choice-container"><<link "下一題">><<goto "Quiz 2">><</link>></div>
<div class="quiz-header">🎨 隨堂考：第 2 題 / 共 3 題</div>\ 溫暖南瓜的''橘色''是怎麼來的呢？ <div class="choice-container"><<link "紅色 ＋ 藍色">><<set $ans2 to "紅色+藍色">><<goto "Quiz 2 Result">><</link>><<link "黃色 ＋ 藍色">><<set $ans2 to "黃色+藍色">><<goto "Quiz 2 Result">><</link>><<link "紅色 ＋ 黃色">><<set $score += 1>><<set $ans2 to "紅色+黃色">><<goto "Quiz 2 Result">><</link>></div>
<<if $score gte 1 and ($score eq 2 or ($score eq 1 and previous() eq "Quiz 2"))>>「沒錯！紅加黃就是橘色！」老師滿意地點點頭。<<else>>「差一點點！橘色需要『紅色 ＋ 黃色』喔。」老師說。<</if>>\ <div class="choice-container"><<link "最後一題">><<goto "Quiz 3">><</link>></div>
<div class="quiz-header">🎨 隨堂考：第 3 題 / 共 3 題</div>\ 生機勃勃的草地''綠色''，需要哪兩種顏料？ <div class="choice-container"><<link "紅色 ＋ 藍色">><<set $ans3 to "紅色+藍色">><<goto "Quiz 3 Result">><</link>><<link "黃色 ＋ 藍色">><<set $score += 1>><<set $ans3 to "黃色+藍色">><<goto "Quiz 3 Result">><</link>><<link "紅色 ＋ 黃色">><<set $ans3 to "紅色+黃色">><<goto "Quiz 3 Result">><</link>></div>
<<if $score gte 1 and ($score eq 3 or ($score eq 2 and previous() eq "Quiz 3") or ($score eq 1 and previous() eq "Quiz 3"))>>「完全正確！黃色加藍色就是生機盎然的綠色喔！」老師開心地拍拍手。<<else>>「可惜沒猜中！草地的綠色是由『黃色 ＋ 藍色』調出來的喔。」老師笑著說。<</if>>\ <div class="choice-container"><<link "看總結結果">><<goto "Final Result">><</link>></div>
<div class="quiz-header">🌟 測驗結束！''$firstName''的星星：$score / 3 顆</div>\ <<if $score eq 3>>「太厲害了！你完全掌握了三原色魔法！」\ ''【結局：滿分的調色大師】''\ <<elseif $score eq 2>>「表現得很棒！你已經知道大部分秘訣了。」\ ''【結局：進步中的色彩學徒】''\ <<else>>「別灰心，下次畫畫時可以再大膽嘗試喔！」\ ''【結局：不斷探索的小畫家】''\ <</if>>\ <<nobr>> <div class="form-container" style="font-size: 15px; border-style: dashed; border-color: #CCC; margin-top: 20px;"> 📝 <strong>本次挑戰記錄</strong><br> ————————————————<br> ● <strong>姓名</strong>：<<= $lastName + $firstName >><br> ● <strong>性別</strong>：$gender<br> ● <strong>生日</strong>：$birthday<br> ————————————————<br> 恭喜完成冒險，希望你在色彩的世界玩得開心！ </div> <</nobr>>\ <div class="choice-container">\ <<nobr>> /* 使用你提供的 Google 表單資料進行對接 */ <<set _formID = "1FAIpQLSe3NuJOR4DT2ezuK7smac60m2DbXYOtcri-10Eus3dqBnIHYA">> <<set _entryLN = "entry.2027691619">> <<set _entryFN = "entry.831653580">> <<set _entryGD = "entry.3420155">> <<set _entryBD = "entry.1815382062">> <<set _entryA1 = "entry.1245138516">> <<set _entryA2 = "entry.872873794">> <<set _entryA3 = "entry.712123016">> /* 組合完整表單提交連結 */ <<set _fullUrl = "https://docs.google.com/forms/d/e/" + _formID + "/formResponse?" + _entryLN + "=" + encodeURIComponent($lastName) + "&" + _entryFN + "=" + encodeURIComponent($firstName) + "&" + _entryGD + "=" + encodeURIComponent($gender) + "&" + _entryBD + "=" + encodeURIComponent($birthday) + "&" + _entryA1 + "=" + encodeURIComponent($ans1) + "&" + _entryA2 + "=" + encodeURIComponent($ans2) + "&" + _entryA3 + "=" + encodeURIComponent($ans3) + "&submit=Submit">> <a class="upload-btn" @href="_fullUrl" target="_blank">📤 上傳成果到 Google 表單</a> <</nobr>>\ <<link "重新體驗">><<run Engine.restart()>><</link>>\ </div>