一個為「科普寫作」課程設計的互動式抽獎模擬網站。
本專案以 Counter-Strike 2（CS2）造型箱（case opening） 為題材， 將隨機獎勵、近失、持續投入與虛擬物品的社交價值等概念， 轉化成可以讓班上同學實際參與的課堂活動。
An interactive classroom simulation inspired by Counter-Strike 2 case opening, created for a science communication activity about randomized rewards and player behavior.
本專案來自一門「科普寫作」課程。
課程要求學生選擇一個主題撰寫科普文章，並搭配設計一個能讓全班參與的活動。 我們選擇 Counter-Strike 2 作為主題，而我負責探討 Steam 遊戲中 造型箱抽取機制，以及其中可能涉及的心理現象。
單純透過文章說明抽箱機制，很難讓讀者真正感受到「知道機率很低， 卻仍想繼續抽取」的過程，因此我製作了 Lucky Draw， 將部分抽箱設計轉化成一個可以直接操作的互動式網站。
活動中，每位玩家會獲得有限的虛擬金幣， 可以用來抽取不同稀有度的虛擬物品。
抽到物品後，玩家可以：
- 保留物品，增加自己的「社交分數」
- 出售部分物品，換取更多金幣繼續抽取
活動最後會透過排行榜顯示所有參與者的社交分數， 並讓排名前三名的同學獲得實際獎勵。
藉由讓抽取結果、虛擬物品價值、排行榜與真實獎勵產生連結， 希望讓參與者不只是理解文章中的概念， 而是透過實際決策與競爭過程體驗這些機制。
網站中的部分機制，是根據科普文章所探討的心理學概念進行設計。
本活動的目的在於提供一個可操作的體驗情境， 並非正式心理學實驗，因此網站機制與心理學概念之間的對應， 主要作為課堂討論與科普說明使用。
| 網站機制 | 對應概念 | 設計方式 |
|---|---|---|
| 不同稀有度的隨機抽取 | 變動比率增強（Variable-ratio reinforcement） | 每一次抽取的結果都具有不確定性，高價值物品的出現機率較低 |
| 抽取時的滾動動畫 | 近失效應（Near-miss effect） | 抽取動畫在結果揭曉前快速經過不同物品，使玩家感受到「差一點得到更稀有物品」的情境 |
| 每 5 次付費抽取贈送 1 次免費抽取 | 持續投入與沉沒成本相關決策 | 透過累積抽取次數與額外獎勵，使玩家在已經投入資源後產生繼續參與的誘因 |
| 不同物品具有不同社交分數 | 虛擬物品的社交價值 | 稀有物品除了具有稀有度差異，也會直接影響玩家的排行榜分數 |
| 全班即時排行榜 | 社會比較與競爭 | 將玩家持有的物品轉化成公開可比較的分數 |
| 前三名獲得實際獎勵 | 虛擬價值與真實誘因 | 讓網站中的排行榜結果與課堂中的實際獎勵產生連結 |
其中「5 次付費抽取贈送 1 次免費抽取」並不等同於沉沒成本效應本身， 而是用來營造「已經投入了一部分資源，因此更想繼續」的決策情境。
- 玩家進入網站並建立自己的活動資料。
- 每位玩家取得固定數量的初始虛擬金幣。
- 使用金幣進行抽取，取得不同稀有度的物品。
- 玩家決定要保留物品，或出售物品換回金幣。
- 每完成一定次數的付費抽取，可以取得免費抽取機會。
- 系統依照目前持有的物品計算社交分數。
- 玩家可以查看排行榜，比較自己與其他參與者的分數。
- 活動結束後，由管理員頁面統整全班結果。
- 最終排名前三名的參與者取得課堂活動獎勵。
玩家初始擁有 300 金幣。
每次付費抽取需要：
30 金幣
物品分成五種稀有度：
| 稀有度 | 出現機率 | 出售價格 | 社交分數 |
|---|---|---|---|
| ⚪ 白色 | 40% | 3 | 1 |
| 🔵 藍色 | 30% | 8 | 3 |
| 🟣 紫色 | 18% | 20 | 8 |
| 🔴 紅色 | 9% | 80 | 25 |
| 🟡 金色 | 3% | 不可出售 | 80 |
每完成 5 次付費抽取，玩家可取得 1 次免費抽取機會。
因此玩家在活動過程中需要持續在兩種資源之間取捨：
可以用來進行更多次抽取。
出售物品可以增加金幣， 但同時也代表放棄該物品帶來的社交分數。
由玩家目前持有的物品計算。
越稀有的物品通常具有越高的社交分數， 並會直接影響玩家在全班排行榜中的排名。
依照不同稀有度的設定機率， 隨機決定每一次抽取的結果。
透過滾動式動畫呈現抽取過程， 在結果正式揭曉以前顯示不同可能的物品。
此設計除了增加互動感之外， 也用來模擬遊戲開箱中常見的近失體驗。
系統記錄：
- 玩家目前金幣
- 持有物品
- 抽取次數
- 免費抽取次數
- 社交分數
玩家可以選擇出售取得的部分物品， 換取金幣繼續參與抽取。
這讓玩家必須在：
「留下高價值物品」
與
「取得更多抽取機會」
之間做出決策。
完成一定次數的付費抽取後， 系統會提供免費抽取機會。
依照所有玩家目前的社交分數產生排名。
排行榜讓原本只存在於玩家帳號中的虛擬物品， 進一步成為可以被其他參與者比較的社交指標。
在實際課堂活動中， 最終排名前三名的玩家可以取得額外獎勵。
為了方便課堂活動進行， 另外製作管理員頁面查看整體活動狀況，例如：
- 參與玩家
- 抽取狀況
- 玩家社交分數
- 排行榜
- 不同稀有度物品的分布
- 活動相關統計資料
這些資料主要用於活動進行與最後的課堂討論。
差一點抽到紅球獲金球的滾動動畫展現近失效應。
- React
- Vite
- Tailwind CSS
- Firebase Firestore
用於保存玩家資料與活動進度。
- Framer Motion
- Lucide React
Framer Motion 主要用於開箱與介面動畫， Lucide React 則用於介面圖示。
Clone repository：
git clone https://github.com/Trioc/lucky-draw.git
cd lucky-draw安裝 dependencies：
npm install啟動開發環境：
npm run dev建立 production build：
npm run build部分功能依賴 Firebase Firestore，若未設定對應 Firebase 環境，玩家資料相關功能可能無法正常運作。
這個網站最初的目標，是在有限的課堂時間內完成一個可供全班實際參與的互動活動， 因此部分設計以快速實作與活動需求為優先，而不是正式產品環境。
例如管理員頁面使用前端 PIN 作為簡易進入限制。
這種方式適合當時一次性的課堂活動， 但並不能視為真正的安全驗證機制。
若未來要將系統改造成正式公開服務，可以進一步改善：
使用 Firebase Authentication 或其他身份驗證方式 透過 Firebase Security Rules 限制資料存取 將管理員權限移至可信任的後端 將敏感設定移出前端程式 增加更完整的錯誤處理 改善活動資料與使用者資料的管理方式
此外，本活動的目的主要是讓參與者體驗與討論相關心理現象， 並沒有採用正式實驗設計、控制組或統計檢定， 因此不應將活動結果視為心理學研究證據。
本專案原先是為一次性的課堂活動所製作。
課程活動目前已結束， 原始課堂版本使用 Firebase、多排行榜與管理員統計；目前公開版為 localStorage 單機 Demo。 Repository 主要保留作為專案紀錄與程式實作參考。