在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

相关推荐
yinke小琪8 分钟前
JavaScript DOM节点操作(增删改)常用方法
前端·javascript
枣把儿12 分钟前
Vercel 收购 NuxtLabs!Nuxt UI Pro 即将免费!
前端·vue.js·nuxt.js
望获linux13 分钟前
【Linux基础知识系列】第四十三篇 - 基础正则表达式与 grep/sed
linux·运维·服务器·开发语言·前端·操作系统·嵌入式软件
爱编程的喵15 分钟前
从XMLHttpRequest到Fetch:前端异步请求的演进之路
前端·javascript
喜欢吃豆17 分钟前
深入企业内部的MCP知识(三):FastMCP工具转换(Tool Transformation)全解析:从适配到增强的工具进化指南
java·前端·人工智能·大模型·github·mcp
豆苗学前端21 分钟前
手把手实现支持百万级数据量、高可用和可扩展性的穿梭框组件
前端·javascript·面试
不见_21 分钟前
不想再写周报了?来看看这个吧!
前端·命令行
yinke小琪23 分钟前
JavaScript 事件冒泡与事件捕获
前端·javascript
pany24 分钟前
写代码的节奏,正在被 AI 改写
前端·人工智能·aigc
liliangrong77727 分钟前
ES2025新特性详解
前端