[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_23":24,"_25":26,"_27":21,"_28":21,"_29":21,"_30":21,"_31":21,"_32":26,"_33":34},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":-7,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":21},"sharedTextdocId","67ff5c8bbad88191942acb70d134fd54","versionInt","title","2025 Sion’s Time Traveler Journal 超時空之旅營隊推薦","type","code/react","content","import React, { useState, useEffect } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card, CardContent } from \"@/components/ui/card\";\n\n// 🧠 問卷資料（6 題）\nconst quizData = [\n {\n question: \"在家裡，孩子最常『玩得忘記時間』的瞬間是什麼模樣？\",\n options: [\n { text: \"他在房間靜靜做著某個東西，完全沒注意時間，就過了兩個小時。\", keywords: [\"手作\", \"靜態\"] },\n { text: \"他邊說邊畫圖，畫完還會告訴你這副畫的背景故事。\", keywords: [\"語文\", \"藝術\"] },\n { text: \"他一邊敲打手上的東西，一邊跟著音樂跳來跳去。\", keywords: [\"音樂\", \"動態\"] },\n { text: \"他在客廳擺出各種道具，自己想像這是一場實驗或比賽。\", keywords: [\"科學\", \"運動體能\"] },\n ],\n },\n {\n question: \"如果孩子發現了一個神秘的箱子，他最有可能怎麼做？\",\n options: [\n { text: \"觀察它的構造，開始動手打開它。\", keywords: [\"手作\", \"邏輯\"] },\n { text: \"幻想箱子裡住著一隻動物，並把他創造出來。\", keywords: [\"藝術\", \"動物\"] },\n { text: \"設計一個小小的闖關遊戲，或看看這箱子可以怎麼利用。\", keywords: [\"魔方\", \"邏輯\"] },\n { text: \"問這是誰的？然後不感興趣。\", keywords: [\"科學\", \"靜態\"] },\n ],\n },\n {\n question: \"當孩子與朋友一起玩耍時，他通常會怎麼玩？\",\n options: [\n { text: \"一起跳舞、運動，或是追逐遊戲玩個不停。\", keywords: [\"動態\", \"音樂\", \"運動體能\"] },\n { text: \"設計規則、講故事、一起演角色扮演，家家酒。\", keywords: [\"語文\", \"藝術\"] },\n { text: \"找地方靜靜地玩積木、拼圖或畫畫。\", keywords: [\"靜態\", \"手作\"] },\n { text: \"把自己收藏的玩具或道具組裝，並拿出來介紹。\", keywords: [\"科技\", \"好玩\"] },\n ],\n },\n {\n question: \"週末的午後，孩子最可能主動提議做什麼？\",\n options: [\n { text: \"去戶外公園運動、探險、找昆蟲或動物。\", keywords: [\"戶外\", \"動物\"] },\n { text: \"去看一場電影或參加有趣的科技活動。\", keywords: [\"科技\", \"好玩\"] },\n { text: \"畫一張海報或做一個屬於自己的小作品。\", keywords: [\"藝術\", \"手作\"] },\n { text: \"拿出實驗箱、種子或觀察日記繼續研究。\", keywords: [\"科學\", \"靜態\"] },\n ],\n },\n {\n question: \"如果學校舉辦一個成果發表展示孩子的任何物品，孩子會想展出什麼？\",\n options: [\n { text: \"自己用廢棄物做的機器人或創意設計作品。\", keywords: [\"動態\", \"邏輯\"] },\n { text: \"一段舞蹈或音樂表演。\", keywords: [\"藝術\", \"音樂\"] },\n { text: \"介紹最近培育的植物、標本或實驗成果。\", keywords: [\"科學\", \"靜態\"] },\n { text: \"和朋友一起策劃的互動關卡或解謎遊戲。\", keywords: [\"語文\", \"好玩\"] },\n ],\n },\n {\n question: \"請選擇孩子的年級\",\n options: [\n { text: \"G1-G2\", keywords: [\"G1-G2\"] },\n { text: \"G3-G6\", keywords: [\"G3-G6\"] },\n ],\n },\n {\n question: \"請選擇孩子預計可以參加的週次（可複選）\",\n options: [\n { text: \"WEEK1（07/01-07/04）\", keywords: [\"WEEK1（07/01-07/04）\"], multi: true },\n { text: \"WEEK2（07/07 - 07/11）\", keywords: [\"WEEK2（07/07 - 07/11）\"], multi: true },\n { text: \"WEEK3（07/14 - 07/18）\", keywords: [\"WEEK3（07/14 - 07/18）\"], multi: true },\n { text: \"WEEK4（07/21 - 07/25）\", keywords: [\"WEEK4（07/21 - 07/25）\"], multi: true },\n { text: \"WEEK5（07/28 - 08/01）\", keywords: [\"WEEK5（07/28 - 08/01）\"], multi: true },\n { text: \"WEEK6（08/04 - 08/08）\", keywords: [\"WEEK6（08/04 - 08/08）\"], multi: true },\n { text: \"WEEK7（08/11 - 08/15）\", keywords: [\"WEEK7（08/11 - 08/15）\"], multi: true },\n { text: \"WEEK8（08/18 - 08/22）\", keywords: [\"WEEK8（08/18 - 08/22）\"], multi: true },\n ]\n}\n];\n\n// 🏕️ Summer Camp 資料（campData）\nconst campData = [\n {\n name: \"Sion's English Camp\",\n keywords: [\"戶外\", \"好玩\", \"手作\"],\n week: \"WEEK1（07/01 - 07/04）\",\n grades: [\"G1-G2\", \"G3-G6\"],\n description: \"全英語的溝通，無論是在課堂或下課時間都沈浸在英語裡。手作與科學實驗，再加上各種體能遊戲，豐富暑假美好時光。\"\n },\n {\n name: \"Sion's English Camp\",\n keywords: [\"戶外\", \"好玩\", \"手作\"],\n week: \"WEEK2（07/07 - 07/11）\",\n grades: [\"G1-G2\", \"G3-G6\"],\n description: \"全英語的溝通，無論是在課堂或下課時間都沈浸在英語裡。手作與科學實驗，再加上各種體能遊戲，豐富暑假美好時光。\"\n },\n {\n name: \"Sion's English Camp\",\n keywords: [\"戶外\", \"好玩\", \"手作\"],\n week: \"WEEK5（07/28 - 08/01）\",\n grades: [\"G1-G2\"],\n description: \"全英語的溝通，無論是在課堂或下課時間都沈浸在英語裡。手作與科學實驗，再加上各種體能遊戲，豐富暑假美好時光。\"\n },\n {\n name: \"21世紀鍊金術 Green Lab: Plants & Science Camp\",\n keywords: [\"好玩\", \"科學\", \"靜態\"],\n week: \"WEEK6（08/04 - 08/08）\",\n grades: [\"G1-G2\"],\n description: \"觀察植物特性，利用植物的顏色或香味與科學結合，創造出生活上可以利用的小工具，讓孩子動手又動腦，探索大自然的奧秘。\"\n\n },\n {\n name: \"倫敦地底的森林 Giant Pets & Rainforest Camp\",\n keywords: [\"戶外\", \"手作\", \"爬蟲\"],\n week: \"WEEK4（07/21 - 07/25）\",\n grades: [\"G1-G2\", \"G3-G6\"],\n description: \"大型巨獸介紹與互動（鱷魚、陸龜、巨人守宮...），探索林業永續對環境的重要性，一起探索動物與生態吧。\"\n },\n {\n name: \"冰上狂歡節 Curling Camp\",\n keywords: [\"戶外\", \"球類\", \"動態\"],\n week: \"WEEK5（07/28 - 08/01）\",\n grades: [\"G1-G2\", \"G3-G6\"],\n description: \"喜歡探索新奇的運動，一起了解奧運的冰球項目，團隊競賽與夥伴一起培養默契吧。\"\n },\n {\n name: \"創世歷險記 Coding & Modeling Camp\",\n keywords: [\"好玩\", \"電腦科技\", \"靜態\"],\n week: \"WEEK3（07/14 - 07/18）\",\n grades: [\"G1-G2\", \"G3-G6\"],\n description: \"電腦科技與程式語言，讓孩子了解最夯的AI與Coding邏輯推理。\"\n },\n {\n name: \"勇者的光劍 Fencer Camp\",\n keywords: [\"戶外\", \"好玩\", \"動態\"],\n week: \"WEEK7（08/11 - 08/15）\",\n grades: [\"G1-G2\", \"G3-G6\"],\n description: \"體驗西洋劍的競技運動，穿上帥氣裝備與頭盔，刺擊與防禦加上輕盈的腳步，來場擊劍比賽吧！\"\n },\n {\n name: \"叢林馴鷹手 Falconry Camp\",\n keywords: [\"戶外\", \"動物\", \"動態\"],\n week: \"WEEK2（07/07 - 07/11）\",\n grades: [\"G1-G2\", \"G3-G6\"],\n description: \"跟著馴鷹老師近距離接觸猛禽類（哈里斯鷹、遊隼...等），並踏上尋找貓頭鷹的旅途，了解台灣特有猛禽。\"\n },\n {\n name: \"古老傳說壁畫 Artist Camp\",\n keywords: [\"戶外\", \"手作\", \"藝術\"],\n week: \"WEEK2（07/07 - 07/11）\",\n grades: [\"G1-G2\", \"G3-G6\"],\n description: \"了解古人利用植物染色的智慧，利用多媒體創作屬於自己的黏土雕塑、拓印畫，還有各種不同的創意發揮。\"\n },\n {\n name: \"圓桌騎士隊 Knight Camp\",\n keywords: [\"戶外\", \"動物\", \"動態\"],\n week: \"WEEK1（07/01-07/04）\",\n grades: [\"G1-G2\", \"G3-G6\"],\n description: \"陽光與汗水在馬場上盡情揮灑，認識馬兒從馬術器具到馬的個性，體驗一場充滿野性與尤雅的英式馬術。\"\n },\n {\n name: \"太陽神的競技場 Flag Football Camp\",\n keywords: [\"戶外\", \"球類\", \"動態\"],\n week: \"WEEK3（07/14 - 07/18）\",\n grades: [\"G1-G2\", \"G3-G6\"],\n description: \"美式足球的刺激，與團隊默契戰術培養，無論男孩女孩都喜愛的超熱門運動，腰旗美式足球。\"\n }, {\n name: \"工藝大師坊 Art Crafting Camp\",\n keywords: [\"手作\", \"靜態\", \"藝術\"],\n week: \"WEEK1（07/01-07/04）\",\n grades: [\"G1-G2\", \"G3-G6\"],\n description: \"利用竹子編織出精美的藝術作品，並學習各種花草相關的藝術發揮，一起來培養美感與創意。\"\n },\n {\n name: \"未來的3D羅浮宮 Weaving Craft Camp\",\n keywords: [\"手作\", \"好玩\", \"靜態\", \"藝術\"],\n week: \"WEEK6（08/04 - 08/08）\",\n grades: [\"G1-G2\", \"G3-G6\"],\n description: \"利用皮革製作獨一無二的小皮件，增添生活藝術感，並學習體驗如何用3D列印筆來創作。\"\n },\n {\n name: \"機械實驗室 Arduino Build Camp\",\n keywords: [\"好玩\", \"電腦科技\", \"靜態\"],\n week: \"WEEK8（08/18 - 08/22）\",\n grades: [\"G3-G6\"],\n description: \"帶領孩子進入電子與程式設計世界，透過 Arduino 實作體驗科技創新與工程挑戰，做出屬於自己的投籃機。\"\n },\n {\n name: \"蒸汽競速場 Extreme Sports Camp\",\n keywords: [\"戶外\", \"好玩\", \"動態\"],\n week: \"WEEK4（07/21 - 07/25）\",\n grades: [\"G1-G2\", \"G3-G6\"],\n description: \"以輪子類型的運動為特色，讓孩子在暑期一次體驗：直排輪、蛇板、地上曲棍球...等等。\"\n },\n {\n name: \"金字塔工藝坊 Natural Art Camp\",\n keywords: [\"手作\", \"靜態\", \"藝術\"],\n week: \"WEEK3（07/14 - 07/18）\",\n grades: [\"G1-G2\", \"G3-G6\"],\n description: \"特色課程結合自然素材與傳統工藝，啟發孩子創意發揮製作漂浮花瓶與黏土花卉，培養環保意識與藝術鑑賞力。\"\n },\n {\n name: \"科幻電影院 Virtual Reality Camp\",\n keywords: [\"好玩\", \"電腦科技\", \"靜態\", \"藝術\"],\n week: \"WEEK7（08/11 - 08/15）\",\n grades: [\"G3-G6\"],\n description: \"透過虛擬實境特色課程，讓孩子沉浸在未來感十足的科幻世界中，體驗科技與創意影像。\"\n },\n {\n name: \"科技奧運會 Technology Sports Camp\",\n keywords: [\"戶外\", \"運動\", \"科技\", \"科學\", \"動態\"],\n week: \"WEEK8（08/18 - 08/22）\",\n grades: [\"G1-G2\", \"G3-G6\"],\n description: \"融合科技創新、讓孩子了解運動數值與分析，在虛擬世界裡練習投籃並運用科技的分析讓體育競技更上一層樓。\"\n },\n {\n name: \"節奏慶典實驗室 Music & Rhythm Camp\",\n keywords: [\"手作\", \"科技\", \"音樂\", \"靜態\", \"藝術\"],\n week: \"WEEK5（07/28 - 08/01）\",\n grades: [\"G1-G2\", \"G3-G6\"],\n description: \"結合Ipad的GarageBand音樂創作遊戲，與音箱鼓的節奏拍打，透過互動實作了解音樂製作與體驗音樂魅力。\"\n },\n {\n name: \"米蘭藝廊 Art & Multimedia Creation\",\n keywords: [\"手作\", \"好玩\", \"靜態\", \"藝術\"],\n week: \"WEEK5（07/28 - 08/01）\",\n grades: [\"G1-G2\", \"G3-G6\"],\n description: \"特色課程引領孩子運用多媒體與手作技術，從構思到實作全面展現個人創意與藝術風格。\"\n },\n {\n name: \"尼羅河的寶藏 Financial Camp\",\n keywords: [\"手作\", \"好玩\", \"靜態\"],\n week: \"WEEK3（07/14 - 07/18）\",\n grades: [\"G1-G2\", \"G3-G6\"],\n description: \"以財經啟蒙為特色課程，結合實作與邏輯思維，讓孩子認識金融世界並認知金錢與生活的關聯。\"\n },\n {\n name: \"虛幻製造所 Augmented Reality Camp\",\n keywords: [\"好玩\", \"科技\", \"靜態\"],\n week: \"WEEK6（08/04 - 08/08）\",\n grades: [\"G3-G6\"],\n description: \"特色課程運用擴增實境技術，激發孩子創新思維，讓科技與藝術在互動實作中完美融合。\"\n },\n {\n name: \"豐收莊園 Food & STEAM Camp\",\n keywords: [\"手作\", \"科學\", \"靜態\"],\n week: \"WEEK1（07/01-07/04）\",\n grades: [\"G1-G2\", \"G3-G6\"],\n description: \"特色課程以食材實驗與 STEAM 學習為主題，讓孩子在動手實作中體驗科學與食品的關係。\"\n },\n {\n name: \"達文西未來學院 Da Vinci Camp: F1 Speed Secrets\",\n keywords: [\"好玩\", \"科學\", \"靜態\"],\n week: \"WEEK7（08/11 - 08/15）\",\n grades: [\"G1-G2\"],\n description: \"創意設計與組裝自己的F1人車機器人，透過實作實驗啟發孩子的科學思維與工程潛能。\"\n },\n {\n name: \"遺跡解謎 LEGO & Magic Cube Camp\",\n keywords: [\"科技\", \"靜態\", \"邏輯\"],\n week: \"WEEK2（07/07 - 07/11）\",\n grades: [\"G1-G2\"],\n description: \"樂高與科技、物理運動，搭建各種工具。魔方與解謎挑戰為主軸，培養孩子的邏輯推理與創意思維。\"\n },\n {\n name: \"遺跡解謎 LEGO & Magic Cube Camp\",\n keywords: [\"科技\", \"靜態\", \"邏輯\"],\n week: \"WEEK8（08/18 - 08/22）\",\n grades: [\"G1-G2\", \"G3-G6\"],\n description: \"樂高與科技、物理運動，搭建各種工具。魔方與解謎挑戰為主軸，培養孩子的邏輯推理與創意思維。\"\n },\n {\n name: \"都市爬蟲 Biology Camp\",\n keywords: [\"手作\", \"爬蟲\", \"靜態\"],\n week: \"WEEK7（08/11 - 08/15）\",\n grades: [\"G1-G2\", \"G3-G6\"],\n description: \"都市生態觀察常見的空蟲，近距離與小型爬蟲互動，並了解基礎的標本製作，啟發孩子對自然生命的好奇與關懷。\"\n },\n {\n name: \"量子峽谷之旅 Rock Climbing Camp\",\n keywords: [\"戶外\", \"好玩\", \"動態\"],\n week: \"WEEK6（08/04 - 08/08）\",\n grades: [\"G1-G2\", \"G3-G6\"],\n description: \"攀岩、抱石與垂降挑戰，訓練孩子體能與意志，並培養團隊協作精神。\"\n },\n {\n name: \"飛行夢想家 Drone Soccer Camp\",\n keywords: [\"戶外\", \"好玩\", \"科技\", \"靜態\"],\n week: \"WEEK4（07/21 - 07/25）\",\n grades: [\"G3-G6\"],\n description: \"從組裝無人機到操空無人機升空，並且訓練手眼協調讓無人機精準進洞。\"\n },\n {\n name: \"齒輪動畫坊 LEGO Stopmotion Camp\",\n keywords: [\"手作\", \"科技\", \"藝術\", \"邏輯\"],\n week: \"WEEK4（07/21 - 07/25）\",\n grades: [\"G1-G2\"],\n description: \"運用樂高定格動畫創作，融合科技、藝術與說故事的能力，激發孩子的創意思維與故事表達。\"\n }\n];\n\nconst weekOrder = {\n \"WEEK1（07/01-07/04）\": 1,\n \"WEEK2（07/07 - 07/11）\": 2,\n \"WEEK3（07/14 - 07/18）\": 3,\n \"WEEK4（07/21 - 07/25）\": 4,\n \"WEEK5（07/28 - 08/01）\": 5,\n \"WEEK6（08/04 - 08/08）\": 6,\n \"WEEK7（08/11 - 08/15）\": 7,\n \"WEEK8（08/18 - 08/22）\": 8\n};\nconst generateCampDescription = (camp) => {\n const descriptions = {\n \"手作\": \"動手創作帶來滿足與樂趣。\",\n \"好玩\": \"孩子們都愛不釋手的營隊活動！\",\n \"靜態\": \"適合專注且喜歡安靜創作的孩子。\",\n \"動態\": \"充滿能量與動感的活動內容。\",\n \"戶外\": \"大自然中的探索與學習。\",\n \"科學\": \"激發對世界的好奇與理解。\",\n \"藝術\": \"發揮創意，探索美感。\",\n \"科技\": \"動手實作的科技應用與創新。\",\n \"邏輯\": \"訓練思考與解決問題的能力。\",\n \"電腦科技\": \"與未來接軌的數位學習。\",\n \"音樂\": \"享受節奏與創造的樂趣。\",\n \"動物\": \"親近自然，了解生命。\",\n \"爬蟲\": \"發現冷血動物的奇妙世界。\",\n \"球類\": \"團隊合作與體能訓練兼具。\",\n \"語言\": \"孩子太喜歡外語學習了，一起來沉浸在語言學習的環境裡吧。\"\n };\n\n const matched = camp.keywords.map(k => descriptions[k]).filter(Boolean);\n return matched.length > 0\n ? matched.join(\"\")\n : \"這是一個精彩又豐富的營隊體驗。\";\n};\n\nconst KidsCampQuiz = () => {\n const [currentQuestion, setCurrentQuestion] = useState(0);\n const [selectedOptions, setSelectedOptions] = useState([]);\n const [multiSelected, setMultiSelected] = useState([]);\n const [showWarning, setShowWarning] = useState(false);\n const [campRecommendations, setCampRecommendations] = useState([]);\n\n const handleOptionSelect = (option) => {\n const isLastQuestion = currentQuestion === quizData.length - 1;\n if (isLastQuestion) {\n const exists = multiSelected.some(o => o.text === option.text);\n const newSelected = exists\n ? multiSelected.filter(o => o.text !== option.text)\n : [...multiSelected, option];\n setMultiSelected(newSelected);\n if (newSelected.length > 0) setShowWarning(false);\n } else {\n setSelectedOptions([...selectedOptions, option]);\n setCurrentQuestion(currentQuestion + 1);\n }\n };\n\n const handleNext = () => {\n if (multiSelected.length === 0) {\n setShowWarning(true);\n return;\n }\n setSelectedOptions([...selectedOptions, ...multiSelected]);\n setCurrentQuestion(currentQuestion + 1);\n };\n\n const resetQuiz = () => {\n setCurrentQuestion(0);\n setSelectedOptions([]);\n setMultiSelected([]);\n setCampRecommendations([]);\n setShowWarning(false);\n };\n\n useEffect(() => {\n const hasFinished = currentQuestion >= quizData.length;\n const gradeSelection = selectedOptions.find(opt => opt.keywords?.includes(\"G1-G2\") || opt.keywords?.includes(\"G3-G6\"));\n\n if (hasFinished && gradeSelection) {\n const grade = gradeSelection.keywords[0];\n const keywords = selectedOptions.flatMap(o => o.keywords || []);\n const selectedWeeks = selectedOptions\n .filter(opt => Array.isArray(opt.keywords) && typeof opt.keywords[0] === 'string' && opt.keywords[0].startsWith(\"WEEK\"))\n .map(opt => opt.keywords[0]);\n\n const weekCamps = {};\n campData\n .filter(camp => camp.grades.includes(grade) && selectedWeeks.includes(camp.week))\n .forEach(camp => {\n if (!weekCamps[camp.week]) weekCamps[camp.week] = [];\n weekCamps[camp.week].push(camp);\n });\n\n const bestWeekCamps = Object.keys(weekCamps).map(week => {\n const rankedCamps = weekCamps[week]\n .map(camp => ({\n ...camp,\n matchScore: camp.keywords.filter(k => keywords.includes(k)).length\n }))\n .sort((a, b) => b.matchScore - a.matchScore);\n return { ...rankedCamps[0], week };\n });\n\n const sortedRecommendations = bestWeekCamps.sort((a, b) => weekOrder[a.week] - weekOrder[b.week]);\n setCampRecommendations(sortedRecommendations);\n }\n }, [currentQuestion]);\n\n return (\n

\n \n {campRecommendations.length === 0 && currentQuestion < quizData.length ? (\n \n \n

{quizData[currentQuestion]?.question}

\n {currentQuestion === quizData.length - 1 ? (\n <>\n {quizData[currentQuestion].options.map((option, idx) => {\n const selected = multiSelected.some(o => o.text === option.text);\n return (\n handleOptionSelect(option)}\n className={`h-auto whitespace-normal text-left ${selected ? 'bg-blue-500 text-white' : ''}`}\n variant={selected ? \"default\" : \"outline\"}\n >\n {option.text}\n \n );\n })}\n {showWarning && (\n

請至少選擇一個週次後再顯示結果。

\n )}\n \n \n ) : (\n quizData[currentQuestion]?.options.map((option, idx) => (\n handleOptionSelect(option)}\n className=\"h-auto whitespace-normal text-left\"\n variant=\"outline\"\n >\n {option.text}\n \n ))\n )}\n

\n \n \n ) : (\n \n \n

{quizData[currentQuestion]?.question}

推薦的 2025 Sion’s Time Traveler Journal 超時空之旅

{camp.name}

2025 Sion’s Time Traveler Journal 超時空之旅 營隊推薦

2025 Sion’s Time Traveler Journal 超時空之旅營隊推薦