鐵人檔案
本系列文章將帶領讀者從零開始，使用純前端技術（HTML5、CSS3、Vanilla JavaScript）打造一個名為「賽博紓壓診所」的互動心理測驗網頁。
內容涵蓋：結合 Web Audio API 的動態互動音效、Rage Click 壓力消滅小遊戲、廟宇抽籤盲選、即時心電圖暴走特效、Canvas 六角形能力雷達圖，以及惡搞病歷戳章動畫與匿名發洩牆。
除了技術實作，也融入了多國語系與日夜模式切換，希望透過這 30 天的實作分享，帶大家用程式碼創造一個兼具娛樂性與療癒感的網頁作品！
前言 昨天我們把 10 道題目的動態渲染框架與求運氣的「廟宇籤筒」機制搞定了。看著畫面隨著使用者的點擊，一題一題往下切換，整個心理測驗的骨架已經相當完整。不過，...
前言 DAY 11 把六大維度的分數存下來了。 使用者每做完一題，程式就會默默幫他把分數累積起來。 最後可能得到： 日常：5 效率：8 社交：3 心態：6 放鬆...
前言 昨天終於把那張雷達圖畫出來了。 從 Day 11 開始累積的： 日常：5 效率：8 社交：3 心態：6 放鬆：9 職涯：4 到了 Day 12，已經不再...
前言 上一篇讓雷達圖學會了慢慢長出來，診斷文字也會晚一點點才浮現，結果頁終於有了一點「正在分析」的儀式感。 寫完之後我自己重新整理頁面玩了好幾次，玩到第三、四次...
前言 上一篇讓診所學會開處方之後，我自己又玩了好幾輪。 測完、看處方、笑一下，然後按 F5。 畫面回到首頁，一切歸零。 剛剛那張處方籤、那個「心態 -5」的診斷...
前言 先老實招認一件事。 從我把結果頁刻出來的那天開始，畫面上就一直放著這一行： <p>今日綜合腦內電池耗損率</p> <div...
前言 昨天總算把那顆卡在 0% 好幾天的電池救活了，看著耗損率跟著緩動曲線一路跑上去，還滿有成就感的。 寫完之後我把病歷本打開來，順手把六個維度的分數攤開來看：...
前言 昨天把六個維度都換算成同一把尺之後，心情輕鬆了不少，想說今天可以稍微喘口氣。 結果我打開整包 JavaScript，想隨手調一下求籤的音效，想讓抽到「大凶...
前言 昨天把音效分成三個獨立函式之後，心情輕鬆很多，想調哪個聲音就改哪個函式，不用再大海撈針。 然後我盯著整包程式碼看了一下，意識到還有語言的問題： 這整間診所...
前言 昨天把整個首頁的文字都接進 i18n 之後，我很得意地點了幾輪語言按鈕，看著標題、說明、按鈕文字一起變換，覺得自己真的很厲害。 然後我順手點了「進入紓壓診...
