3-2 關，要來看看官網提供的 Demo 實驗教學。今天只要先把網頁給跑起來就好。

• Demo Experiment: Simple Reaction Time Task - jsPsych

一、建立開發環境

今天的範例以 https://codesandbox.io/ 當作開發環境。步驟約略如下

1. 進入 https://codesandbox.io/ 網站
   1. 看你想不想先註冊。想註冊的話，點擊網頁右上角的 Sign In 按鈕
   2. 不想註冊的話，點擊網頁右上角的 try for free 按鈕
2. 建立一個新的網頁專案
   1. 可以點擊畫面右上角的「+ Create」按鈕
   2. 或是大概在畫面中央的「New Sandbox」按鈕
3. 選擇要建立 static 專案
   1. 點擊跳出視窗中，左側選單 Official templates 選項
   2. 選擇 static ，有個橘色五角形圖示，中間寫著 5 的那個按鈕

然後就會跳出一個有編輯器的網頁

二、重建 DEMO 網頁

接下來，準備讓 Demo 的網頁實際運作起來

1. 我們到 範例的教學文件頁，找到 The final code 區塊，把程式碼貼到 index.html 裡面
2. 我們還少了圖片。先到這兩個網頁把圖片下載下來。網頁右邊偏中間有個下載按鈕
   1. https://github.com/jspsych/jsPsych/blob/main/examples/img/blue.png
   2. https://github.com/jspsych/jsPsych/blob/main/examples/img/orange.png
3. 在 codesandbox 的編輯器中，建立一個新資料夾，叫做 img
   1. 畫面偏左上角，有個圖示將滑鼠一上去後，會出現「new directory」的提示。點擊它就可以新增資料夾
4. 把剛剛下載的兩張圖片，上傳到 img 資料夾
   1. 將滑鼠移到 img 資料夾上，會出現一個往上的箭頭圖示，滑鼠移上去會出現「Upload Files」的提示。點擊它就可以上傳圖片

這時先存檔（ctrl + s），重新整理網頁後，應該就會出現 DEMO 實驗的網頁囉

附上最後應該呈現的效果

• https://codesandbox.io/s/simple-reaction-time-task-mdzvmw?file=/index.html

小結

今天還原了該怎麼讓 DEMO 程式碼跑起來，呈現在網頁上。明天將解釋 Demo 程式碼裡面的東西。