在jsPsych中使用Vue

news2024/9/23 1:36:24

在这里插入图片描述

jspsych 介绍

jsPsych是一个非常好用的心理学实验插件，可以用来构建心理学实验。具体的就不多介绍了，大家可以去看官网：https://www.jspsych.org/latest/

但是大家在使用时就会发现，这个插件只能使用js绘制界面，或者说传一段html代码，就是不支持任何现代化的前端框架。在如今的习惯了组件化的前端看来是非常的难受，代码复用性非常差，编程体验也不好。

jspsych-vue插件介绍

今天给大家推荐的一个组件 jspsych-vue就是为了解决这个问题而设计的。下面简单介绍下如何使用。

创建vue工程

使用npm create vue创建就可以。这里就不多赘述了。

安装

使用yarn或者npm安装都可以：

yarn add jspsych-vue

导入样式

需要在main.js中导入样式：

import 'jspsych/css/jspsych.css' //这里导入
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.mount('#app')

使用

在App.vue中，使用Jspsych创建一个渲染实验的位置，比如：

<script setup>
import JsPsychVue from "jsPsych-vue";
var instance;
const init = e => instance = e;
</script>

<template>
  <JsPsychVue :options="options" @init="init">
  </JsPsychVue>
 </template>

这里就顺利拿到了jspsych的实例instance。下面就和jspsych原生的一样，定义一个timeline，然后run就可以。

import jsPsychImageKeyboardResponse from '@jspsych/plugin-image-keyboard-response'

onMouted(()=>{
	const timeline = [
		type: jsPsychImageKeyboardResponse
	]
	jspsych.run(timeline)
})

看到这里可能就有人问了，我这样写和原生的jspsych有什么区别？？？

下面就是神奇的地方，你可以用一个组件代替plugin，需要做的就是导出一个info就可以。

例子：

<template>
<div> {{ props.hello }} </div>
<button @click="handleClick">点击跳转</button>
</template>
<script setup lang="ts">
import { JsPsych } from "jspsych";
import { inject } from "vue";

const jsPsych: JsPsych = inject('jsPsych')!
const props = defineProps(['trial', 'on_load'])

const handleClick = () => jsPsych.finishTrial()

defineOptions({
  info: {
    name: 'hello world',
    parameters: {
      msg: {
        type: String,
        default: 'hello'
      }
    }
  }
})
</script>