在上一篇文章中,我已經成功用 amCharts5 建立了一個互動世界地圖,讓孩子們能在地圖上看到不同國家的位置與形狀。接下來的挑戰,就是把這張「全球地圖」變成一場真正的冒險旅程——每個國家都可以解鎖,進入後還有屬於自己的動物圖鑑,讓孩子們邊玩邊學。
我的規劃很簡單:
至於解鎖的鑰匙?當然是靠日常做任務累積啦!
在孩子完成額外的 支線任務 後,系統會跳出一個題目,答對就能獲得拼圖碎片,集滿碎片就能解鎖新國家或動物。
這樣的設計,可以把 學習 與 遊戲 巧妙結合,讓孩子有持續探索的動力。
一開始我在想,世界上這麼多國家,每個國家又有好幾種動物,更別說我完全沒有美術背景,要一個人畫出這些圖片根本不可能。
不過仔細想想,其實不用一次全做完,還且還有多個 AI 夥伴,應該不用擔心。
只要架構先搭好,就能先做幾個國家,後續慢慢擴充。
孩子解鎖的速度也沒那麼快,素材完全可以「邊做邊上」。
我決定先從 台灣 開始,製作一個包含圖片與簡介的國家介紹頁面,並根據內容設計對應的題庫。
這部分光用想的就覺得頭大,因為教育性質的軟體,資料正確性非常重要,還需要確保資訊有趣又易懂。
幸好這也正是 AI 擅長的事。
無論是資料查詢、整理、還是初步審核,AI 的速度與效率都遠勝我自己逐一搜尋。
我甚至可以讓 ChatGPT、Grok、Gemini 三個 AI 交叉比對資料,確保內容正確率更高。
AI 建議我把國家介紹與題庫統一儲存為 JSON
檔,方便後續直接擴充。
這個設計也不錯,資料結構化後,前端顯示與後續維護都會更輕鬆。
文字部分生成得很順利,但圖片就不一樣了。
我希望的風格是真實場景圖,可以變換不同美術風格,但畫面中不能有真實不存在的建築或景物。
然而直接讓 AI 畫,穩定性實在不高,畫一張就得等很久,而且常常產出不符需求的作品。
後來我找到一個更穩的方法:
先找一張真實的參考照片,再讓 AI 按指定風格重繪。
就像之前流行的「吉卜力風格照片生成」一樣,有了準確的參考圖,AI 的輸出品質和一致性都大幅提升,而且更容易控制畫面細節。
雖然產圖速度還是慢,但至少不會浪費時間在不合格的成品上。
既然產圖需要等待,我就改成 邊做其他功能、邊等 AI 生成圖片。
等素材一批產好後,再一次性把它們套進國家與動物頁面,並調整位置與大小。
這樣我就完成了第一個國家——台灣的介紹頁與動物圖鑑。
孩子解鎖的動物可以隨時點進來看介紹,等之後遇到相關題目時,就有更高的正確率。
題庫的設計邏輯是:
這意味著,隨著孩子探索更多國家與動物,他們的知識面會不斷擴張。
這種 邊玩邊累積知識 的循環,正是我想要的學習體驗。
雖然步驟簡單,但因為圖片生成速度慢,我決定先實作兩個國家,等孩子的解鎖進度追上,再持續擴充新的國家與動物。
透過這次的嘗試,我更確定 AI 不只是「輔助」,而是讓這個專案成形的 關鍵工具——沒有 AI,這種量級的教育內容製作,根本不可能一人完成。
在正式實作題目系統之前,我早已準備好 題庫 JSON 檔,並將解鎖國家的資料存進資料庫,另外也把先前開發的 語音模組 一併納入計劃。
當這些素材與功能都到位後,我就直接請 AI 協助撰寫程式碼,結果很快就完成了題庫與前端頁面的串接。
答題後出現的獲得拼圖碎片動畫,我也花了點時間調整,讓畫面既簡單又有成就感。搭配語音問答的互動,孩子在答對題目的瞬間,彷彿真的拿到了一塊珍貴的寶藏。
第一版平台上線後,我立刻上線給自己孩子來試用。
他們在解鎖地圖的同時,臉上全是興奮的笑容。每當獲得拼圖碎片時,眼睛都會亮一下;碎片湊齊的那一刻,更是會小心翼翼地打開解鎖介面,認真討論要先選哪一個動物。當按下解鎖按鈕、看到新動物出現在圖鑑中時,甚至高興得原地跳舞。
那一刻,我感覺這個冒險地圖真的活了起來,不再只是程式碼和素材的集合,而是一個能帶來歡笑與好奇心的世界。
當然,目前還是有些小遺憾——例如動物頁面暫時還沒有加入互動機制,也沒有播放動物叫聲。
本來想一次做到位,但考慮到開發成本與優先順序,這部分只好先擱置,等之後有空再來補強。
畢竟,偶爾偷個懶,也是長期開發過程中必不可少的養分。
敬請期待下一篇:《讓孩子愛上成語學習:AI 驅動的漸進式挑戰》