前面提到了實驗是什麼、以及網路實驗的好處。今天要來用 jsPsych 套件來寫一個網路實驗 Hello World。
在網頁這技術剛出來時(約 1991 年)，其實只有 HTML 的部分。JavaScript 在 1995 年時出現，而 CSS 大概在 2000 年後才有比較多的開發者在使用。
在網頁開發這領域剛出現時，只要掌握前端三語言：HTML、CSS、JavaScritp，就可以開始開發了。但時至今日，前端開發已經不是這麼簡單的事情了：還會需要另外了解許多能協助開發的工具，例如前端套件。
打個比方。一般人為了通話或上網需求，會購入 iPhone 或安卓手機，這時我們會獲得一台裸機的手機。但這時，我們可能對手機有更多的需求，例如讓手機變好看、防止撞擊、聽音樂。於是我們購入掛飾、手機殼、無線耳機等配件。
在前端開發的世界也是如此。幾十年前，網頁開發者可能只是想讓網頁上有東西能顯示，所以只需要簡單的 HTML 就好。但現在，我們使用的網頁有各式各樣的功能，例如搜尋、電商、部落格。不是說這些功能不能用單純的 HTML、CSS、JavaScript 所完成，只是所耗費的時間會是難以估計的多。
為了時間、為了 CP 值、為了網頁開發者的肝，我們需要現成的工具幫助開發。關卡三因為需求是寫網路心理學實驗，所以我們就找這方面的工具：jsPsych，我們將這類型的工具稱之為套件 (package)。因為它就像是一個工具箱，可能從裡面拿出很多的小工具出來使用。
接下來介紹 jsPsych 這個套件。
jsPsych 的官網在這：jsPsych
jsPsych 的介紹頁面是這樣寫的：
jsPsych is a JavaScript framework for creating behavioral experiments that run in a web browser.
Experiments in jsPsych are created using plugins. Each plugin defines different kinds of events, like showing an image on the screen, and collects different kinds of data, like recording which key was pressed at which time. You can use the plugins that are included with jsPsych, use plugins that are developed by community members in the contrib repository, or create your own plugins. By assembling different plugins together into a timeline, it is possible to create a wide range of experiments.
不負責翻譯：
jsPsych 是一個為了建立行為實驗而誕生的 JavaScript 框架(可以理解為套件、工具)，它可以跑在瀏覽器上。
我們會用 jsPsych 的 plugin 去建立實驗。每個 plugin 有不同的事件，像是在螢幕上秀出圖片、收集資料、紀錄在何時按了什麼按鍵 …
還是有點抽象對吧？直接寫個 Hello World 練手一下吧
這裡是官方的 Hello World 教學
這裡是我將 Hello World 範例寫在 CodeSandBox 的連結
請試著照官方教學的 Option 1: Using CDN-hosted scripts 做看看。或是照著 CodeSandBox 的範例依樣照葫蘆。
<!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>
今天介紹了套件是什麼，以及介紹了 jsPsych 是能用來建立行為實驗並能在瀏覽器上跑的工具。明天將進一步解說這 Hello World 做了什麼事情。
iThome鐵人賽
看影片追技術