在jsPsych中使用Vue

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

相关推荐
从兄28 分钟前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰1 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式
清灵xmf2 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨2 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL2 小时前
npm入门教程1:npm简介
前端·npm·node.js
小白白一枚1113 小时前
css实现div被图片撑开
前端·css
薛一半3 小时前
PC端查看历史消息,鼠标向上滚动加载数据时页面停留在上次查看的位置
前端·javascript·vue.js
@蒙面大虾3 小时前
CSS综合练习——懒羊羊网页设计
前端·css
过期的H2O23 小时前
【H2O2|全栈】JS进阶知识(四)Ajax
开发语言·javascript·ajax
MarcoPage3 小时前
第十九课 Vue组件中的方法
前端·javascript·vue.js