基礎(chǔ)的Hello World

按照傳統(tǒng)，本教程會講解如何用jsPsych在瀏覽器頁面中呈現(xiàn) "Hello world!"。盡管這并不是一個真正的實驗，但整個過程對于學(xué)習(xí)jsPsych的基礎(chǔ)用法還是很有益的。

jsPsych從7.0版本開始，提供了三種搭建jsPsych項目的方式，你可以根據(jù)自己的需求選取搭建方式。

我想要最簡單的搭建方式：這種方法是通過使用托管在CDN上的文件來實現(xiàn)的。使用這種方法時，我們不需要下載或安裝什么東西。該方法的缺點在于我們無法對jsPsych框架進行自定義，但是對于大多數(shù)實驗，當前方法還是足夠的。

我想要在保持簡單的同時能夠?qū)蚣苓M行自定義：使用這種方法時，我們需要下載jsPsych庫的源代碼。 如果你使用過 jsPsych 7.0以前的版本，這應(yīng)該是你最熟悉的方式 。拿到源代碼之后，我們就可以對框架進行修改，從而對插件的功能進行微調(diào)。

我想要使用現(xiàn)代的JavaScript特性，如npm和import語句：我們可以通過NPM安裝jsPsych、插件和擴展。這種方式可以方便我們將jsPsych和我們熟悉的JavaScript框架結(jié)合起來，以及使用TypeScript、打包工具等。

小貼士

用jsPsych編寫程序時，我們需要一個好的編輯器，Visual Studio Code（支持Windows, OSX, Linux）就是一個很好的選擇。

我們來創(chuàng)建一個名為experiment.html的新文件。

（幾乎）所有的HTML文檔都會使用相同的基本代碼，如下所示：

把上邊的代碼添加到experiment.html文件中并保存。現(xiàn)在，在瀏覽器中打開該文件，就可以看到一個空白頁，頁面標題為'My experiment'。

jsPsych框架是通過標簽引入的。我們這里使用的jsPsych框架來自于CDN，即，框架托管在服務(wù)器上，我們不需要自己下載一份源代碼了。

注意，上面的URL中包含了jsPsych的版本號，因而，我們的實驗并不會因為jsPsych未來的升級而發(fā)生改變。

我們可能還需要引入jsPsych的樣式表，該樣式表會對實驗的樣式進行一些設(shè)置。此時，我們就需要在文檔的中加入一個標簽：

我們可以在標簽后面加上標簽，來添加JavaScript代碼。

我們通過調(diào)用initJsPsych()函數(shù)并將其返回值賦給一個變量來初始化jsPsych：

在這一部分的demo中，我們實現(xiàn)的功能是在屏幕上呈現(xiàn)文字。這也正是html-keyboard-response插件的功能。使用插件之前，我們需要通過標簽將其引入。

引入插件后，我們就可以使用它來創(chuàng)建一個試次。使用html-keyboard-response插件創(chuàng)建試次時，我們需要創(chuàng)建一個對象，這個對象有一個type屬性，值為jsPsychHtmlKeyboardResponse。我們還可以在這個對象中指定插件其他的參數(shù)。下面的例子中，我們通過stimulus參數(shù)來指定呈現(xiàn)的文字。關(guān)于各個插件的參數(shù)，可以在它們各自的文檔頁上找到。

定義好了試次之后，我們就需要告訴jsPsych將這個試次包含在要運行的實驗中。這就要求我們調(diào)用jsPsych.run函數(shù)并傳入一條時間線。對于像當前這種簡單的實驗，使用的時間線就是一個數(shù)組，其中包含了需要運行的試次。

保存文件后，在瀏覽器中打開，我們就可以看到屏幕上顯示的"Hello world!"，按鍵后，文字就會消失（試次結(jié)束）。

我們的第一步是下載最新發(fā)布的jsPsych。這里是下載鏈接(jspsych.zip))。我們也可以從GitHub releases page的頂部找到最新的版本。

在電腦上創(chuàng)建一個新文件夾用于存放實驗用到的文件。當前教程中，我們將這個文件夾命名為"MyExperiment"。在這個文件夾中添加一個名為jspsych的子文件夾。創(chuàng)建好后，將第1步中下載的文件打開，并將dist文件夾中的文件復(fù)制到j(luò)spsych文件夾中。文件結(jié)構(gòu)如下：

小貼士

用jsPsych編寫程序時，我們需要一個好的編輯器，Visual Studio Code（支持Windows, OSX, Linux）就是一個很好的選擇。

現(xiàn)在，在MyExperiment文件夾下創(chuàng)建一個名為experiment.html的新文件。文件結(jié)構(gòu)如下：

（幾乎）所有的HTML文檔都會使用相同的基本代碼，如下所示：

把上邊的代碼添加到experiment.html文件中并保存。現(xiàn)在，在瀏覽器中打開該文件，就可以看到一個空白頁，頁面標題為'My experiment'。

我們通過標簽來引入jsPsych。將該標簽的src屬性設(shè)置為jspsych.js文件的路徑：

我們可能還需要引入jsPsych的樣式表，該樣式表會對實驗的樣式進行一些設(shè)置。此時，我們就需要在文檔的中加入一個標簽：

我們可以在標簽后面加上標簽，來添加JavaScript代碼。

我們通過調(diào)用initJsPsych函數(shù)并將其返回值賦給一個變量來初始化jsPsych：

在這一部分的demo中，我們實現(xiàn)的功能是在屏幕上呈現(xiàn)文字。這也正是html-keyboard-response插件的功能。使用插件之前，我們需要通過標簽將其引入。

引入插件后，我們就可以使用它來創(chuàng)建一個試次。使用html-keyboard-response插件創(chuàng)建試次時，我們需要創(chuàng)建一個對象，這個對象有一個type屬性，值為jsPsychHtmlKeyboardResponse。我們還可以在這個對象中指定插件其他的參數(shù)。下面的例子中，我們通過stimulus參數(shù)來指定呈現(xiàn)的文字。關(guān)于各個插件的參數(shù)，可以在它們各自的文檔頁上找到。

定義好了試次之后，我們就需要告訴jsPsych將這個試次包含在要運行的實驗中。這就要求我們調(diào)用jsPsych.run函數(shù)并傳入一條時間線。對于像當前這種簡單的實驗，使用的時間線就是一個數(shù)組，其中包含了需要運行的試次。

保存文件后，在瀏覽器中打開，我們就可以看到屏幕上顯示的"Hello world!"，按鍵后，文字就會消失（試次結(jié)束）。

如果你選擇通過npm安裝jsPsych，我們就假定你已經(jīng)對Node.js很熟悉，且了解web開發(fā)。此外，我們還假定你還用到了webpack或是其他打包工具。

補充

你可以去看一看jsPsych Builder CLI。jsPsych Builder使用webpack幫助我們將實驗創(chuàng)建、搭建開發(fā)服務(wù)器、對腳本和樣式表進行轉(zhuǎn)譯和打包等流程自動化。鑒于jsPsych Builder會自動完成本教程中的一些步驟，所以如果你選擇使用它，可以去jsPsych Builder的GitHub Page上的getting started部分看看。

運行npm install jspsych。

這條命令會安裝jsPsych的核心部分，而插件和擴展需要單獨進行安裝。

我們通過調(diào)用initJsPsych函數(shù)創(chuàng)建JsPsych實例，其配置方式多種多樣，我們可以將可選的參數(shù)通過一個對象傳給initJsPsych。

jsPsych只需要我們的HTML文檔中有一個body元素即可。而對于樣式表，我們可以直接使用import 'jspsych/css/jspsych.css'在JavaScript文件中將其引入，也可以在HTML文檔的頭部添加一個link標簽（例如），選擇哪一種取決于我們所使用的打包工具的設(shè)置。

我們可以使用下面的命令安裝html-keyboard-response插件：

npm install @jspsych/plugin-html-keyboard-response

接下來，我們來引入htmlKeyboardResponse插件類：

引入插件后，我們就可以使用它來創(chuàng)建一個試次。使用html-keyboard-response插件創(chuàng)建試次時，我們需要創(chuàng)建一個對象，這個對象有一個type屬性，值為htmlKeyboardResponse。我們還可以在這個對象中指定插件其他的參數(shù)。下面的例子中，我們通過stimulus參數(shù)來指定呈現(xiàn)的文字。關(guān)于各個插件的參數(shù)，可以在它們各自的文檔頁上找到。

定義好了試次之后，我們就需要告訴jsPsych將這個試次包含在要運行的實驗中。這就要求我們調(diào)用jsPsych.run函數(shù)并傳入一條時間線。對于像當前這種簡單的實驗，使用的時間線就是一個數(shù)組，其中包含了需要運行的試次。