跳转至

jsPsych："Hello world"的呈现

按照传统，本教程会讲解如何用jsPsych在浏览器页面中呈现 "Hello world!"。尽管这并不是一个真正的实验，但整个过程对于学习jsPsych的基础用法还是很有益的。

选择搭建方式

jsPsych从7.0版本开始，提供了三种搭建jsPsych项目的方式，你可以根据自己的需求选取搭建方式。

  • 我想要最简单的搭建方式：这种方法是通过使用托管在CDN上的文件来实现的。使用这种方法时，我们不需要下载或安装什么东西。该方法的缺点在于我们无法对jsPsych框架进行自定义，但是对于大多数实验，当前方法还是足够的。

  • 我想要在保持简单的同时能够对框架进行自定义：使用这种方法时，我们需要下载jsPsych库的源代码。 如果你使用过 jsPsych 7.0以前的版本，这应该是你最熟悉的方式 。拿到源代码之后，我们就可以对框架进行修改，从而对插件的功能进行微调。

  • 我想要使用现代的JavaScript特性，如npm和import语句：我们可以通过NPM安装jsPsych、插件和扩展。这种方式可以方便我们将jsPsych和我们熟悉的JavaScript框架结合起来，以及使用TypeScript、打包工具等。

选项1：使用CDN托管的脚本

第1步：创建HTML文件

小贴士

用jsPsych编写程序时，我们需要一个好的编辑器，Visual Studio Code（支持Windows, OSX, Linux）就是一个很好的选择。

我们来创建一个名为experiment.html的新文件。

（几乎）所有的HTML文档都会使用相同的基本代码，如下所示：

<!DOCTYPE html>
<html>
  <head>
    <title>My experiment</title>
  </head>
  <body></body>
</html>

把上边的代码添加到experiment.html文件中并保存。现在，在浏览器中打开该文件，就可以看到一个空白页，页面标题为'My experiment'。

第2步：引入jsPsych框架

jsPsych框架是通过<script>标签引入的。我们这里使用的jsPsych框架来自于CDN，即，框架托管在服务器上，我们不需要自己下载一份源代码了。

<!DOCTYPE html>
<html>
  <head>
    <title>My experiment</title>
    <script src="https://unpkg.com/jspsych@7.1.2"></script>
  </head>
  <body></body>
</html>

注意，上面的URL中包含了jsPsych的版本号，因而，我们的实验并不会因为jsPsych未来的升级而发生改变。

我们可能还需要引入jsPsych的样式表，该样式表会对实验的样式进行一些设置。此时，我们就需要在文档的<head>中加入一个<link>标签：

<!DOCTYPE html>
<html>
  <head>
    <title>My experiment</title>
    <script src="https://unpkg.com/jspsych@7.1.2"></script>
    <link href="https://unpkg.com/jspsych@7.1.2/css/jspsych.css" rel="stylesheet" type="text/css" />
  </head>
  <body></body>
</html>

第3步：创建script元素并初始化jsPsych

我们可以在<body>标签后面加上<script>标签，来添加JavaScript代码。

<!DOCTYPE html>
<html>
  <head>
    <title>My experiment</title>
    <script src="https://unpkg.com/jspsych@7.1.2"></script>
    <link href="https://unpkg.com/jspsych@7.1.2/css/jspsych.css" rel="stylesheet" type="text/css" />
  </head>
  <body></body>
  <script>
  </script>
</html>

我们通过调用initJsPsych()函数并将其返回值赋给一个变量来初始化jsPsych：

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

第4步：使用插件来打印消息

在这一部分的demo中，我们实现的功能是在屏幕上呈现文字。这也正是html-keyboard-response插件的功能。使用插件之前，我们需要通过<script>标签将其引入。

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

引入插件后，我们就可以使用它来创建一个试次。使用html-keyboard-response插件创建试次时，我们需要创建一个对象，这个对象有一个type属性，值为jsPsychHtmlKeyboardResponse。我们还可以在这个对象中指定插件其他的参数。下面的例子中，我们通过stimulus参数来指定呈现的文字。关于各个插件的参数，可以在它们各自的文档页上找到。

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

    const hello_trial = {
      type: jsPsychHtmlKeyboardResponse,
      stimulus: 'Hello world!'
    }
  </script>
</html>

第5步：运行实验

定义好了试次之后，我们就需要告诉jsPsych将这个试次包含在要运行的实验中。这就要求我们调用jsPsych.run函数并传入一条时间线。对于像当前这种简单的实验，使用的时间线就是一个数组，其中包含了需要运行的试次。

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

    const hello_trial = {
      type: jsPsychHtmlKeyboardResponse,
      stimulus: 'Hello world!'
    }

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

保存文件后，在浏览器中打开，我们就可以看到屏幕上显示的"Hello world!"，按键后，文字就会消失（试次结束）。

选项2：下载jsPsych并手动添加到项目中

第1步：下载jsPsych

我们的第一步是下载最新发布的jsPsych。这里是下载链接(jspsych.zip))。我们也可以从GitHub releases page的顶部找到最新的版本。

第2步: 创建实验项目文件夹

在电脑上创建一个新文件夹用于存放实验用到的文件。当前教程中，我们将这个文件夹命名为"MyExperiment"。在这个文件夹中添加一个名为jspsych的子文件夹。创建好后，将第1步中下载的文件打开，并将dist文件夹中的文件复制到jspsych文件夹中。文件结构如下：

📂 MyExperiment
--  📂 jspsych
----  📄 jspsych.js
----  📄 plugin-animation.js
----  📄 plugin-audio-keyboard-response.js
----  ...

第3步: 创建HTML文件

小贴士

用jsPsych编写程序时，我们需要一个好的编辑器，Visual Studio Code（支持Windows, OSX, Linux）就是一个很好的选择。

现在，在MyExperiment文件夹下创建一个名为experiment.html的新文件。文件结构如下：

📂 MyExperiment
--  📄 experiment.html
--  📂 jspsych

（几乎）所有的HTML文档都会使用相同的基本代码，如下所示：

<!DOCTYPE html>
<html>
  <head>
    <title>My experiment</title>
  </head>
  <body></body>
</html>

把上边的代码添加到experiment.html文件中并保存。现在，在浏览器中打开该文件，就可以看到一个空白页，页面标题为'My experiment'。

第4步：引入jsPsych框架

我们通过<script>标签来引入jsPsych。将该标签的src属性设置为jspsych.js文件的路径：

<!DOCTYPE html>
<html>
  <head>
    <title>My experiment</title>
    <script src="jspsych/jspsych.js"></script>
  </head>
  <body></body>
</html>

我们可能还需要引入jsPsych的样式表，该样式表会对实验的样式进行一些设置。此时，我们就需要在文档的<head>中加入一个<link>标签：

<!DOCTYPE html>
<html>
  <head>
    <title>My experiment</title>
    <script src="jspsych/jspsych.js"></script>
    <link href="jspsych/jspsych.css" rel="stylesheet" type="text/css" />
  </head>
  <body></body>
</html>

第5步：创建script元素并初始化jsPsych

我们可以在<body>标签后面加上<script>标签，来添加JavaScript代码。

<!DOCTYPE html>
<html>
  <head>
    <title>My experiment</title>
    <script src="jspsych/jspsych.js"></script>
    <link href="jspsych/jspsych.css" rel="stylesheet" type="text/css" />
  </head>
  <body></body>
  <script>
  </script>
</html>

我们通过调用initJsPsych函数并将其返回值赋给一个变量来初始化jsPsych：

<!DOCTYPE html>
<html>
  <head>
    <title>My experiment</title>
    <script src="jspsych/jspsych.js"></script>
    <link href="jspsych/jspsych.css" rel="stylesheet" type="text/css" />
  </head>
  <body></body>
  <script>
    const jsPsych = initJsPsych();
  </script>
</html>

第6步：使用插件来打印消息

在这一部分的demo中，我们实现的功能是在屏幕上呈现文字。这也正是html-keyboard-response插件的功能。使用插件之前，我们需要通过<script>标签将其引入。

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

引入插件后，我们就可以使用它来创建一个试次。使用html-keyboard-response插件创建试次时，我们需要创建一个对象，这个对象有一个type属性，值为jsPsychHtmlKeyboardResponse。我们还可以在这个对象中指定插件其他的参数。下面的例子中，我们通过stimulus参数来指定呈现的文字。关于各个插件的参数，可以在它们各自的文档页上找到。

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

    const hello_trial = {
      type: jsPsychHtmlKeyboardResponse,
      stimulus: 'Hello world!'
    }
  </script>
</html>

第7步：运行实验

定义好了试次之后，我们就需要告诉jsPsych将这个试次包含在要运行的实验中。这就要求我们调用jsPsych.run函数并传入一条时间线。对于像当前这种简单的实验，使用的时间线就是一个数组，其中包含了需要运行的试次。

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

    const hello_trial = {
      type: jsPsychHtmlKeyboardResponse,
      stimulus: 'Hello world!'
    }

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

保存文件后，在浏览器中打开，我们就可以看到屏幕上显示的"Hello world!"，按键后，文字就会消失（试次结束）。

选项3：使用NPM

如果你选择通过npm安装jsPsych，我们就假定你已经对Node.js很熟悉，且了解web开发。此外，我们还假定你还用到了webpack或是其他打包工具。

补充

你可以去看一看jsPsych Builder CLI。jsPsych Builder使用webpack帮助我们将实验创建、搭建开发服务器、对脚本和样式表进行转译和打包等流程自动化。鉴于jsPsych Builder会自动完成本教程中的一些步骤，所以如果你选择使用它，可以去jsPsych Builder的GitHub Page上的getting started部分看看。

第1步：安装jsPsych

运行npm install jspsych。

这条命令会安装jsPsych的核心部分，而插件和扩展需要单独进行安装。

实例

我们通过调用initJsPsych函数创建JsPsych实例，其配置方式多种多样，我们可以将可选的参数通过一个对象传给initJsPsych。

import {initJsPsych} from 'jspsych';

const jsPsych = initJsPsych();

第3步：静态的HTML和CSS

jsPsych只需要我们的HTML文档中有一个body元素即可。而对于样式表，我们可以直接使用import 'jspsych/css/jspsych.css'在JavaScript文件中将其引入，也可以在HTML文档的头部添加一个link标签（例如<link href="path/to/jspsych.css" rel="stylesheet" type="text/css" />），选择哪一种取决于我们所使用的打包工具的设置。

第4步：安装并引入插件

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

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

接下来，我们来引入htmlKeyboardResponse插件类：

import {initJsPsych} from 'jspsych';
import htmlKeyboardResponse from '@jspsych/plugin-html-keyboard-response';

const jsPsych = initJsPsych();

第5步：创建试次

引入插件后，我们就可以使用它来创建一个试次。使用html-keyboard-response插件创建试次时，我们需要创建一个对象，这个对象有一个type属性，值为htmlKeyboardResponse。我们还可以在这个对象中指定插件其他的参数。下面的例子中，我们通过stimulus参数来指定呈现的文字。关于各个插件的参数，可以在它们各自的文档页上找到。

import {initJsPsych} from 'jspsych';
import htmlKeyboardResponse from '@jspsych/plugin-html-keyboard-response';

const jsPsych = initJsPsych();

const trial = {
  type: htmlKeyboardResponse,
  stimulus: 'Hello world!',
}

第6步：运行实验

定义好了试次之后，我们就需要告诉jsPsych将这个试次包含在要运行的实验中。这就要求我们调用jsPsych.run函数并传入一条时间线。对于像当前这种简单的实验，使用的时间线就是一个数组，其中包含了需要运行的试次。

import {initJsPsych} from 'jspsych';
import htmlKeyboardResponse from '@jspsych/plugin-html-keyboard-response';

const jsPsych = initJsPsych();

const trial = {
  type: htmlKeyboardResponse,
  stimulus: 'Hello world!',
}

jsPsych.run([trial]);