jspsych 介绍
jsPsych是一个非常好用的心理学实验插件,可以用来构建心理学实验。具体的就不多介绍了,大家可以去看官网:https://www.jspsych.org/latest/
但是大家在使用时就会发现,这个插件只能使用js绘制界面,或者说传一段html代码,就是不支持任何现代化的前端框架。在如今的习惯了组件化的前端看来是非常的难受,代码复用性非常差,编程体验也不好。
jspsych-vue插件介绍
今天给大家推荐的一个组件 jspsych-vue就是为了解决这个问题而设计的。下面简单介绍下如何使用。
创建vue工程
使用npm create vue创建就可以。这里就不多赘述了。
安装
使用yarn或者npm安装都可以:
shell
yarn add jspsych-vue
导入样式
需要在main.js中导入样式:
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创建一个渲染实验的位置,比如:
js
<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就可以。
js
import jsPsychImageKeyboardResponse from '@jspsych/plugin-image-keyboard-response'
onMouted(()=>{
const timeline = [
type: jsPsychImageKeyboardResponse
]
jspsych.run(timeline)
})
看到这里可能就有人问了,我这样写和原生的jspsych有什么区别???
下面就是神奇的地方,你可以用一个组件代替plugin,需要做的就是导出一个info就可以。
例子:
js
<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>
简单来说,需要导出一个info对象,告诉jspsych需要传入什么参数,这个参数可以在timeline里定义。然后也没有trial函数了,在轮到这个trial的时候,会自动挂载这个组件,然后执行setup方法。把之前trial函数的内容放在setup中就可以。
最后,不要忘记调用jspsych.finishTrial来结束当前的trial。
用了这个组件,可以随心所欲的在jspsych中使用vue的众多UI库了!
最后放上仓库地址,觉得有帮助的小伙伴可以点点star!https://github.com/HGGshiwo/jspsych-vue.git