在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

相关推荐
深度混淆6 分钟前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China7 分钟前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q8 分钟前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海9 分钟前
Chrome离线安装包下载
前端·chrome
endingCode12 分钟前
45.坑王驾到第九期:Mac安装typescript后tsc命令无效的问题
javascript·macos·typescript
m512719 分钟前
LinuxC语言
java·服务器·前端
运维-大白同学41 分钟前
将django+vue项目发布部署到服务器
服务器·vue.js·django
Myli_ing1 小时前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
dr李四维1 小时前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
I_Am_Me_2 小时前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript