CHAPTER 17 · PRACTICE WORKSPACE

索引、render、亂數與輪播

可前後切換並抽取練習提示的原生 JavaScript 輪播

03 Checkpoint 2 2/3
  1. 01Starter讀懂作品骨架
  2. 02Checkpoint 1加入第一項能力
  3. 03Checkpoint 2累積第二項能力
  4. 04Solution核對完整結果

TASK STATUS

三項任務目前狀態

TASK-01已完成

用目前索引渲染作品內容

修改檔案:script.js

完成後看見:標題、描述與張數來自 slides[index]

TASK-02已完成

完成可首尾循環的前後切換

修改檔案:script.js

完成後看見:最後一張可回第一張,第一張可回最後一張

TASK-03本階段處理

抽出陣列內的隨機提示

修改檔案:script.js

完成後看見:每次點擊顯示一項有效提示

WORKSPACE

本階段實作區

已完成 TASK-02;先核對可見結果,再前往 TASK-03。

FOCUS TASK · TASK-03

現在只處理:抽出陣列內的隨機提示

修改:script.js

完成後:每次點擊顯示一項有效提示

講解時展開:2 個小型比較

亂數 vs 有效索引|抽選仍要落在資料範圍

比較:Math.random 產生的是數值,還要轉成陣列有效索引才能安全取出提示。

現在做:在 Solution 閱讀 pickTip handler,將 Math.random()、乘上 tips.lengthMath.floor()tips[randomIndex] 四段責任逐一圈出,再連按五次確認結果都落在提示陣列。

看預期與證據

預期:完成後能觀察到「每次點擊顯示一項有效提示」,並說出Math.random 產生的是數值,還要轉成陣列有效索引才能安全取出提示。

證據:用前後截圖或口述比較「每次點擊顯示一項有效提示」,指出這個小型實驗如何證明Math.random 產生的是數值,還要轉成陣列有效索引才能安全取出提示。

每次點擊 vs 有效提示|驗收內容不是只看有變

比較:隨機結果可以不同,但每次都必須是資料陣列中存在且可讀的提示。

現在做:在 Solution 連按隨機提示五次,將每次文字與 tips 陣列逐項比對;即使連續抽到相同提示也算有效,不以『每次都不同』作為錯誤判定。

看預期與證據

預期:完成後能觀察到「每次點擊顯示一項有效提示」,並說出隨機結果可以不同,但每次都必須是資料陣列中存在且可讀的提示。

證據:用前後截圖或口述比較「每次點擊顯示一項有效提示」,指出這個小型實驗如何證明隨機結果可以不同,但每次都必須是資料陣列中存在且可讀的提示。

需要排錯時查看:任務循環(觀察 → 預測 → 實作 → 故障 → 驗收)
  1. A|觀察:在 Checkpoint 2 走完第一張上一頁與最後一張下一頁的循環,再按提示按鈕,確認提示結果區仍沒有新內容。
  2. B|預測:連按隨機提示數次,確認每次結果都來自有效提示清單。
  3. C|實作:在 script.js 的 pickTip click handler 完成「抽出陣列內的隨機提示」,一次只處理本任務責任。
  4. D|故障:若結果不一致,先依原操作重現,再檢查 pickTip click handler 與 script.js,最後重跑原操作。
  5. E|驗收:每次點擊顯示一項有效提示

完成條件:DONE-03:每次點擊顯示一項有效提示

CAROUSEL LAB

作品輪播

第 1 / 3 張

準備顯示作品

內容由 render 更新。

提示會出現在這裡。

CHAPTER HANDOFF

把資料陣列接上目前索引

接收:第 16 章已驗收判斷、works 陣列迴圈 render 與 localStorage 清除邊界;本章改在獨立輪播頁練習同一個「資料陣列 → render → DOM」責任模式。

本章交棒:slidescurrentIndexrenderSlide()、首尾 modulo 與提示陣列的有效索引;第 18 章會在獨立 timer 頁加入時間生命週期,不共用本頁 HTML。

CONTINUE

繼續完成 TASK-03

前往 Solution,依要求完成「抽出陣列內的隨機提示」。

前往 Solution:完成 TASK-03