---
# System prepended metadata

title: week19 hw

---

# week19 hw

### 專案目標
以實際的作品運用現代框架與工具，呈現計畫中所學的成果


### 產品名稱
Z-axis


### 產品簡介
Z-axis，為您的演說帶來無限的可能。

在虛擬的網路世界中，Z-axis 將連結您(代表 x)與觀眾(代表 y)的即時多人互動，三方串連打造更加自由、更加立體的互動空間。

Z-axis 提供即時匿名留言、按讚投票、抽籤問答、測驗互動、問卷調查...等多項豐富演說的功能，透過即時數據，分析所有活動參與者的想法，以利整場演說延伸出更多互動地可能。


### 產品目標說明
提供演說者：
- 更加直覺、簡潔的使用介面。
- 多樣化的互動功能，例：按讚投票、抽籤問答、測驗互動、問卷調查。
- 後台數據分析功能，了解活動參與者的想法、答題狀況等。

提供參與者：
- 進行「匿名」活動參與，包含留言、投票、答題、抽獎等。
- 透過匿名，更加勇於表達意見、想法與提問。


### 產品需求描述
#### 前台
- 註冊
  - google
  - email
- 登入
  - google
  - email
- 頁面
  - Q&A 頁面
    - 使用者：置頂問題、隨機抽問題、註記回答過的問題
    - 參與者：提問、按讚、按讚數量、參與者提問的問題、Q&A 數量
  - 測驗頁面
    - 使用者：測驗狀態、排名總表
    - 參與者：倒數計時、答題、答題狀況、PR 值
  - 抽獎頁面
    - 使用者：抽獎
    - 參與者：中獎名單
- 顯示標題/簡介
- 隱藏標題/簡介
- 切換主題


#### 後台
- 建立
  - Q&A
    - 標題、簡介、開始時間、結束時間
  - 測驗
    - 名稱、簡介、題目
  - 抽獎
    - 名稱、簡介、獎品資訊
- 已建立活動列表
  - 已發佈：查看、刪除、查詢關鍵字
    - Q&A：名稱、簡介、提問數量、提問內容、連結
    - 測驗：名稱、簡介、題目、排名、落點分析
    - 抽獎：名稱、簡介、獎品資訊、中獎人名單
  - 未發佈：查看、刪除、查詢關鍵字、編輯
    - Q&A：名稱、簡介、連結
    - 測驗：名稱、簡介、題目
    - 抽獎：名稱、簡介、獎品資訊


## 功能篇

### role
- 「使用者」: 活動的發起者，可以回答 Q&A 與參與者互動
- 「參與者」: 可以提出 Q&A 給使用者回答

### 系統更新公告
- P2 身為一個使用者，我希望可以在後台看到，官方的系統更新公告


### 註冊功能
( 使用者 - 綁 Google 或輸入信箱/密碼 )
- P0 身為一個使用者，我希望可以透過 Google 帳號註冊
- P0 身為一個使用者，我希望可以透過輸入 email、密碼，來註冊使用者
- P1 身為一個使用者，我希望可以註冊成功後，網頁自動轉向後台
- P1 身為一個使用者，我希望可以在我忘記輸入欄位時，跳出警示訊息，以便提醒我
- P1 身為一個使用者，我希望可以在我重複註冊時，跳出警示訊息，以便提醒我
- P1 身為一個使用者，我希望可以在我輸入密碼未包含英文及數字時，跳出警示訊息，以便提醒我
---
- P3 身為一個使用者，我希望可以透過 email 驗證，來確認非機器人


### 登入功能
- P0 身為一個使用者，我希望可以透過 Google 帳號登入
- P0 身為一個使用者，我希望可以透過輸入 email、密碼登入
- P1 身為一個使用者，我希望可以登入成功後，網頁自動轉向後台
- P1 身為一個使用者，我希望可以在我忘記輸入欄位時，跳出警示訊息，以便提醒我
- P1 身為一個使用者，我希望可以在我輸入錯誤 email 或 密碼時，跳出警示訊息，以便提醒我


### 使用者後台：
- P1 身為一個使用者，我希望可以透過後台，「查看」我發過的每項活動標題、簡介、開始時間、結束時間
- P1 身為一個使用者，我希望可以透過後台，「刪除」我發過的每項活動標題、簡介、開始時間、結束時間
- P1 身為一個使用者，我希望可以透過後台，「編輯」我尚未發出去的活動標題、簡介、開始時間、結束時間
- P2 身為一個使用者，我希望可以透過後台，「搜尋」標題的關鍵字，以查詢我發過某項活動
- P2 身為一個使用者，我希望可以透過後台，「查看」我發過的每項活動，觀眾提問數量
- P2 身為一個使用者，我希望可以透過後台，「查看」我發過的每項活動，觀眾提問內容
- P2 身為一個使用者，我希望可以透過後台，「查看」我發過的活動總數
---
- P1 身為一個使用者，我希望可以透過後台，「點選」進入活動頁面
- P1 身為一個使用者，我希望可以透過後台，「點選」複製連結，讓我可以分享給觀眾
- P2 身為一個使用者，我希望可以透過後台，「建立」QRcode
- P2 身為一個使用者，我希望可以透過後台，「下載」QRcode 圖片
---
- P1 身為一個使用者，我希望可以從使用者後台，點選新增 Q&A 活動按鈕
- P3 身為一個使用者，我希望可以從使用者後台，點選建立測驗按鈕
- P3 身為一個使用者，我希望可以點選建立抽獎按鈕
---
- P4 身為一個使用者，我希望可以從線上系統直接回答聽眾的問題(使用者回覆評論功能)



### Q&A
( 使用者 - Q&A 發佈：新增、輸入、發佈、取消 )
- P1 身為一個使用者，我希望可以從使用者後台，點選新增 Q&A 活動按鈕
- P1 身為一個使用者，我希望可以透過輸入活動標題、活動簡介、選擇開始時間、結束時間，以建立活動
- P1 身為一個使用者，我希望可以選擇時間長短，決定最短當天到最長 7 天的匿名留言時間限制
- P1 身為一個使用者，我希望可以在我輸入完輸入框後，可以點選發佈按鈕，成功發佈活動
- P1 身為一個使用者，我希望可以在我忘記輸入欄位時，跳出警示訊息，以便提醒我
- P1 身為一個使用者，我希望可以點選新增活動按鈕後，也可以點選取消按鈕，以取消我正在輸入或開啟的建立畫面
- *開始時間、結束時間設定要查一下
---
( 使用者 - 進入 Q&A 介面：功能 )
- P2 身為一個使用者，我希望可以透過左側欄來「查看」目前的活動標題及簡介
- P2 身為一個使用者，我希望可以透過左側欄來「隱藏」目前的活動標題及簡介
- P2 身為一個使用者，我希望可以透過問題列，將某一則問題置頂
- P2 身為一個使用者，我希望可以透過「點選」問題上的已解決按鈕，將已回答的問題「顯示」在 Resolved 處
- P2 身為一個使用者，我希望可以透過「點選」問題上的已解決按鈕，將已回答的問題「消失」在 Popular / Recent
---
( 使用者 - 進入 Q&A 介面：抽問題 )
- P3 身為一個使用者，我希望可以透過左側欄，來點選隨機抽籤問題按鈕
- P3 身為一個使用者，我希望可以透過左側欄，在點選隨機抽籤之後，隨機抽出我尚未回答的問題(已按讚數加權抽出來) 
- P3 身為一個使用者，我希望可以透過左側欄，在點選隨機抽籤之後，抽出其中一則問題，並顯示在置頂的下一則
- P3 身為一個使用者，我希望可以透過左側欄，在點選隨機抽籤之後，抽出其中一則問題，若沒有置頂問題，則置頂
---
( 參與者 - 進入 Q&A 介面：功能 )
- P1 身為一個參與者，我希望不需要註冊，就可以匿名提出問題，或一起輸入暱稱及問題
- P1 身為一個參與者，我希望可以即時看到每個人的問題
---
- P2 身為一個參與者，我希望可以對有興趣的問題按讚
- P2 身為一個參與者，我希望可以看到某問題的按讚數量
- P2 身為一個參與者，我希望可以透過左側欄來「查看」目前的活動標題及簡介
- P2 身為一個參與者，我希望可以透過左側欄來「隱藏」目前的活動標題及簡介
- P2 身為一個參與者，我希望可以點選 My Question，看到我發表過的問題
- P2 身為一個參與者，我希望可以看到 Q&A 裡面，問題的總數
- P2 身為一個參與者，我希望可以切換顯示評論：Popular / Recent / Resolve
---
- P4 身為一個參與者，我希望切換佈景主題
- P4 身為一個參與者，我希望可以透過網址，隨時進入活動頁面，查看使用者的回答


### 測驗：
( 使用者 - 測驗發佈：新增、輸入、發佈、取消 )
- P3 身為一個使用者，我希望可以從使用者後台，點選建立測驗按鈕
- P3 身為一個使用者，我希望可以透過輸入測驗標題、測驗簡介、選擇開始時間、結束時間、勾選設置起始倒數時間(30秒或1分鐘)、設置問題、正確答案、其他選項，以建立測驗
- P3 身為一個使用者，我希望可以在我輸入完輸入框後，可以點選發佈按鈕，成功發佈測驗
- P3 身為一個使用者，我希望可以在我忘記輸入欄位時，跳出警示訊息，以便提醒我
- P3 身為一個使用者，我希望可以點選新增測驗按鈕後，也可以點選取消按鈕，以取消我正在輸入或開啟的建立畫面
---
( 使用者 - 進入測驗介面：功能 )
- P3 身為一個使用者，我希望可以查看目前的測驗狀態，尚未開始/測驗中/測驗結束
- P3 身為一個使用者，我希望可以在測驗結束後，顯示參與者的落點分析(table or 圓餅圖 or 長條圖....)
- P3 身為一個使用者，我希望可以在測驗結束後，查看參與者的答題排名總表(包含參與者 id 與答題狀況，相同成績以最早繳卷排序)
---
( 參與者 - 進入測驗介面：功能 )
- P3 身為一個參與者，我希望測驗的起始倒數時間可以顯示於畫面上，讓我有心理準備，時間一到立即顯示問題
- P3 身為一個參與者，我希望可以在測驗結束的倒數10秒前，畫面上顯示倒數計時，時間到會引爆炸彈(+炸彈聲音)，系統會強制交卷
- P3 身為一個參與者，我希望可以在測驗結束後，可以顯示自己的測驗 id、答題狀況(例如：5/10, 2/10, 7/10)、PR 值
- P4 身為一個參與者，我希望可以在測驗結束後，可以顯示測驗被隨機分配到的暱稱(動物名稱)


### 抽獎：
( 使用者 - 抽獎發佈：新增、輸入、發佈、取消 )
- P3 身為一個使用者，我希望可以點選建立抽獎按鈕
- P3 身為一個使用者，我希望可以透過輸入抽獎活動名稱、抽獎活動簡介、抽獎品項、獎品數量、獎品規格，以建立抽獎
- P3 身為一個使用者，我希望可以在我輸入完輸入框後，可以點選發佈按鈕，成功建立抽獎
- P3 身為一個使用者，我希望可以在我忘記輸入欄位時，跳出警示訊息，以便提醒我
- P3 身為一個使用者，我希望可以點選新增抽獎按鈕後，也可以點選取消按鈕，以取消我正在輸入或開啟的建立畫面
---
( 使用者 - 進入抽獎介面：功能 )
- P3 身為一個使用者，我希望可以點選立即抽獎按鈕，可以依據我的獎品數量，抽出參與者抽獎代號
- P3 身為一個使用者，我希望可以在抽出參與者抽獎代號後，於畫面上顯示
---
( 參與者 - 進入抽獎介面：功能 )
- P3 身為一個參與者，我希望可以輸入姓名、email 後，系統會隨機產生一個參與者抽獎代號，讓我對獎
- P3 身為一個參與者，我希望在抽出參與者抽獎代號後，可以所有中獎的抽獎代號，將顯示於畫面上


### 問卷：
- P3 身為一個使用者，我希望可以點選建立線上問卷按鈕，連結到 google 表單


### 開發工具
- wireframe
  - figma
- 前端
  - sass
  - React
- 後端
  - Server: express
  - DB: sequelize
  - 部署 : heroku
- 其他
  - webpack
  - [Asana](https://asana.com/zh-tw/pricing)


### 風格
- 未來科技、遊戲感


### 產品心智圖
- [連結](https://gitmind.com/app/doc/3583140425)
