[給心理人的前端網頁開發] 20 關卡三：網路實驗 - jsPsych Hello World 解說 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2023 iThome 鐵人賽

DAY 20

Modern Web

給心理人的前端網頁開發系列第 20 篇

[給心理人的前端網頁開發] 20 關卡三：網路實驗 - jsPsych Hello World 解說

15th鐵人賽

ayugioh2003

2023-10-05 23:06:13

260 瀏覽

分享至

昨天介紹了 jsPsych 是什麼，以及用它寫了一個 Hello World。今天來進一步的解說這範例做了什麼事情。

先附上程式碼：

<!DOCTYPE html>
<html>
  <head>
    <title>My experiment</title>
    <script src="https://unpkg.com/jspsych@7.0.0"></script>
    <script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@1.0.0"></script>
    <link
      href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>
  <body></body>
  <script>
    const jsPsych = initJsPsych();

    const hello_trial = {
      type: jsPsychHtmlKeyboardResponse,
      stimulus: "Hello world!"
    };
    const hello2_trial = {
      type: jsPsychHtmlKeyboardResponse,
      stimulus: "Hello world2!"
    };

    jsPsych.run([hello_trial, hello2_trial]);
  </script>
</html>

一、HTML 部分

<head>
  <title>My experiment</title>
  <script src="https://unpkg.com/jspsych@7.0.0"></script>
  <script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@1.0.0"></script>
  <link
    href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
    rel="stylesheet"
    type="text/css"
  />
</head>
<body></body>

首先看到 <head> 部分

<head> 是這個要設定給網頁的一些與畫面元素本身沒有直接相關的資訊。

<title> 就是指這個網頁的標題，會出現在瀏覽器的分頁標題上。

<script> 是用來引入 JavaScript 用的，在這個範例中就是引入 jsPsych 提供的套件跟 plugin。網址 https://unpkg.com/jspsych@7.0.0 是 jsPsych 這個套件的核心，後面 @7.0.0 是它的版本號。網址 https://unpkg.com/@jspsych/plugin-html-keyboard-response@1.0.0 是 jsPsych 的一個 plugin，用來處理跟鍵盤敲擊相關的功能。

<link> 是用來引入 CSS 用的。網址 https://unpkg.com/jspsych@7.0.0/css/jspsych.css 是 jsPsych 提供的 CSS 樣式。

然後或許你有注意到， <body> 裡面是空的。初學寫網頁時，我們會把很多的元素例如 <div> 、 <button> 往裡面塞。但因為這個範例引入了 jsPsych，整個網頁畫面的顯示就變成由這個 jsPsych 套件所管理，因此 <body> 就不需要放元素進去了。

二、JavaScript 部分

這邊用註解的方式進行說明

// <script> 引入的 JS，會在瀏覽器的全局環境中，引入 initJsPsych 函式
// 呼叫 initJsPsych 函式後，會回傳一個物件。並把這個物件存進 jsPsych 變數中
const jsPsych = initJsPsych(); 

// 實驗的嘗試次數(trial)。
// type 可以設定測驗類型、stimulus 是要顯示在畫面的內容
const hello_trial = {
  type: jsPsychHtmlKeyboardResponse,
  stimulus: "Hello world!"
};
const hello2_trial = {
  type: jsPsychHtmlKeyboardResponse,
  stimulus: "Hello world2!"
};

// jsPsych 這個物件有 run 方法，呼叫這個方法，並且把前面的兩個 trial 測驗放進去
// 之後執行實驗時，就會出現這兩個測驗內容
jsPsych.run([hello_trial, hello2_trial]);