iT邦幫忙

2023 iThome 鐵人賽

DAY 3
0

「時間線任務」這個 side project 是受到紐約時報的「Flashback: Your Weekly History Quiz, August 13, 2023」遊戲啟發而來的。在進行開發之前,我首先要對紐約時報這個遊戲頁面進行了全面的功能分析。為了更深入地了解其運作機制,我用了Chat GPT和人工觀察兩種不同的方法,對其整體功能和介面互動進行了評估。最終,在原有的基礎上加入了自己的內容和創新功能,使這個 project 更加完善。

chatGPT 插鍵 Browser 功能

chatGPT 插鍵 Browser 功能只要我們將網址貼上 ChatGPT ,並下達網站內容分析指令,就可以幫我們產出這個網站有哪些功能內容。

https://ithelp.ithome.com.tw/upload/images/20230918/20107703vyQZ6eMl7o.png

--- 以下 Browser 產出文本 ---

這個網站的標題是「Flashback: Your Weekly History Quiz, August 13, 2023」,由紐約時報(The New York Times)出版。這是一個每週的歷史知識測驗,主要功能和特點如下:

主要功能:

  1. 歷史測驗:網站提供一個測驗,要求用戶將 8 個重要的歷史事件按照時間順序排列。
  2. 互動性:用戶可以通過點擊或拖拽來移動事件,使其按照時間順序排列。
  3. 分享功能:用戶可以分享整篇文章。
  4. 廣告區塊:網站包含廣告,但也提供了跳過廣告的選項。
  5. 導航欄:包括搜索功能和其他網站導航選項。
  6. 訂閱和登錄:網站提供訂閱和登錄選項。
  7. Cookie 跟踪設置:網站使用 cookies 和類似方法來識別訪客並記住他們的偏好。

其他信息:

  • 發布日期:2023年8月5日
  • 描述:測驗您的歷史知識,通過將八個事件按照時間順序排列。

這個網站是一個很好的例子,展示了如何將教育和娛樂結合在一起,同時也提供了用戶互動和分享的機會。

來源:紐約時報

Browser 使用小提醒

Browser 免費方案每週只有 5 個 request,超過就需要課金。

https://ithelp.ithome.com.tw/upload/images/20230918/201077031NUnW3Bd9M.png

人工觀察分析

Browser 針對網站整理有的功能進行拆解分析,但網站畫面細節我們還是用人工觀察的方式進行評估。
這個小遊戲總共有三個主要頁面:遊戲開始、遊戲進行中、以及遊戲結束。

遊戲開始

  • 包含規則說明的 lightbox。
    遊戲開始頁面

遊戲進行中

  • 提供拖曳卡片的互動。
  • 有卡片排序的動畫效果。
  • 遊戲進度條
  • 步驟答題正確與否紀錄
  • 分數累積計算
    遊戲進行中頁面

遊戲結束

  • 包含計分總結功能。
  • 分享頁面選項。
  • 重新開始遊戲的功能。
    遊戲結束頁面
開發流程
  1. 首先完成各頁面的基本功能。(紅色部分)
  2. 接著進行功能優化。(綠色部分)

最終,所有這些功能全都將會在 Side Project 中呈現,只是製作的先後順序和時間會有所不同。
明天我們就可以開始更進一步製作網站內容。


上一篇
執行專案輔助工具
下一篇
Wireframe 製作
系列文
打造紐時風格的時間線小遊戲30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言