在jsPsych中使用Vue

在这里插入图片描述

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>

简单来说,需要导出一个info对象,告诉jspsych需要传入什么参数,这个参数可以在timeline里定义。然后也没有trial函数了,在轮到这个trial的时候,会自动挂载这个组件,然后执行setup方法。把之前trial函数的内容放在setup中就可以。

最后,不要忘记调用jspsych.finishTrial来结束当前的trial。

用了这个组件,可以随心所欲的在jspsych中使用vue的众多UI库了!

最后放上仓库地址,觉得有帮助的小伙伴可以点点star!https://github.com/HGGshiwo/jspsych-vue.git

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/49218.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

陌陌聊天数据案例分析

目录 背景介绍和需求分析基于hive数仓实现需求开发根据聊天数据建库建表加载数据ETL数据清洗背景分析原始数据出现的问题ETL实现 需求指标统计思路需求开发 基于FineBI实现可视化报表配置流程构建可视化报表 总结 背景介绍和需求分析 陌陌是一个聊天平台&#xff0c;每天都会产…

不能包含中文的正则表达式

原文 1、不包含汉字[^\u4e00-\u9fa5] var r /^[^\u4e00-\u9fa5]$/ if(r.test(str)){} 2、只能包含汉字 [\u4e00-\u9fa5]

STM32自己从零开始实操10:PCB全过程

一、PCB总体分布 分布主要参考有&#xff1a; 方便供电布线。方便布信号线。方便接口。人体工学。 以下只能让大家看到各个模块大致分布在板子的哪一块&#xff0c;只能说每个人画都有自己的理由&#xff0c;我的理由如下。 还有很多没有表达出来的东西&#xff0c;我也不知…

二叉树---二叉搜索树中的众数

题目&#xff1a; 给你一个含重复值的二叉搜索树&#xff08;BST&#xff09;的根节点 root &#xff0c;找出并返回 BST 中的所有 众数&#xff08;即&#xff0c;出现频率最高的元素&#xff09;。 如果树中有不止一个众数&#xff0c;可以按 任意顺序 返回。 假定 BST 满…

PingCAP 王琦智:下一代 RAG,tidb.ai 使用知识图谱增强 RAG 能力

导读 随着 ChatGPT 的流行&#xff0c;LLMs&#xff08;大语言模型&#xff09;再次进入人们的视野。然而&#xff0c;在处理特定领域查询时&#xff0c;大模型生成的内容往往存在信息滞后和准确性不足的问题。如何让 RAG 和向量搜索技术在实际应用中更好地满足企业需求&#…

昇思25天学习打卡营第14天|计算机视觉

昇思25天学习打卡营第14天 文章目录 昇思25天学习打卡营第14天FCN图像语义分割语义分割模型简介网络特点数据处理数据预处理数据加载训练集可视化 网络构建网络流程 训练准备导入VGG-16部分预训练权重损失函数自定义评价指标 Metrics 模型训练模型评估模型推理总结引用 打卡记录…

Electron 和 React 开发桌面应用程序

目录 书籍推荐 Electron React 在线资源和教程 官方文档 在线教程 综合学习路径 经典开发案例 Visual Studio Code Hyper Tusk Notable Beekeeper Studio 开源项目和示例代码 Electron React Boilerplate Electron Forge + React Electron React Template 学…

FPGA开发在verilog中关于阻塞和非阻塞赋值的区别

一、概念 阻塞赋值&#xff1a;阻塞赋值的赋值号用“”表示&#xff0c;对应的是串行执行。 对应的电路结构往往与触发沿没有关系&#xff0c;只与输入电平的变化有关系。阻塞赋值的操作可以认为是只有一个步骤的操作&#xff0c;即计算赋值号右边的语句并更新赋值号左边的语句…

Transformer-Bert---散装知识点---mlm,nsp

本文记录的是笔者在了解了transformer结构后嗑bert中记录的一些散装知识点&#xff0c;有时间就会整理收录&#xff0c;希望最后能把transformer一个系列都完整的更新进去。 1.自监督学习 bert与原始的transformer不同&#xff0c;bert是使用大量无标签的数据进行预训…

规范:前后端接口规范

1、前言 随着互联网的高速发展&#xff0c;前端页面的展示、交互体验越来越灵活、炫丽&#xff0c;响应体验也要求越来越高&#xff0c;后端服务的高并发、高可用、高性能、高扩展等特性的要求也愈加苛刻&#xff0c;从而导致前后端研发各自专注于自己擅长的领域深耕细作。 然…

volatile,最轻量的同步机制

目录 一、volatile 二、如何使用&#xff1f; 三、volatile关键字能代替synchronized关键字吗&#xff1f; 四、总结&#xff1a; 还是老样子&#xff0c;先来看一段代码&#xff1a; 我们先由我们自己的常规思路分析一下代码&#xff1a;子线程中&#xff0c;一直循环&…

NoSQL之Redis非关系型数据库

目录 一、数据库类型 1&#xff09;关系型数据库 2&#xff09;非关系型数据库 二、Redis远程字典服务器 1&#xff09;redis介绍 2&#xff09;redis的优点 3&#xff09;Redis 为什么那么快&#xff1f; 4&#xff09;Redis使用场景 三、Redis安装部署 1&#xff0…

kail-linux如何使用NAT连接修改静态IP

1、Contos修改静态IP vi /etc/sysconfig/network-scripts/ifcfg-ens33&#xff0c; 标记红色处可能序号会变动 参考linux配置网络不通解决方案_kylinv10sp2 网关不通-CSDN博客https://tanrt06.blog.csdn.net/article/details/132430485?spm1001.2014.3001.5502 Kail时候NAT连…

从 NextJS SSRF 漏洞看 Host 头滥用所带来的危害

前言 本篇博文主要内容是通过代码审计以及场景复现一个 NextJS 的安全漏洞&#xff08;CVE-2024-34351&#xff09;来讲述滥用 Host 头的危害。 严正声明&#xff1a;本博文所讨论的技术仅用于研究学习&#xff0c;旨在增强读者的信息安全意识&#xff0c;提高信息安全防护技能…

NCRE2-3 网络服务器选型

记忆的部分比较多&#xff0c;会有错误 网络服务器的分类 了解 应用领域不同 Internet通用服务器数据库服务器文件服务器应用服务器 按网络应用规模 基础级服务器工作组级服务器部门级服务器企业级服务器 按网络服务器主机的硬件体系结构 基于CISC处理器的Inter机构(IA)的…

浅谈断言之XML Schema断言

浅谈断言之XML Schema断言 “XML Schema断言”是一种专门用于验证基于XML的响应是否遵循特定XML Schema定义的标准和结构的断言类型。下面我们将详细探讨XML Schema断言的各个方面。 XML Schema断言简介 XML Schema断言&#xff08;XML Schema Assertion&#xff09;允许用户…

fastJSON 解决kafka消息斜杠转义问题

Bug: kafka发送消息时的JSON转义异常 问题描述: 问题描述:kafka消息发送出去但是消费者执行相关逻辑的时候报错. 场景:当时实习的时候需要模拟数据做一个实时经纬度传输的接口,使用kafka实时发送消息将数据同步到数据库中 问题分析: fastjson使用不当可能导致转义异常**,kafka…

Android 15 之如何快速适配 16K Page Size

在此之前&#xff0c;我们通过 《Android 15 上 16K Page Size 为什么是最坑》 介绍了&#xff1a; 什么是16K Page Size为什么它对于 Android 很坑如何测试 如果你还没了解&#xff0c;建议先去了解下前文&#xff0c;然后本篇主要是提供适配的思路&#xff0c;因为这类适配…

计算机视觉9 全卷积网络

全卷积网络&#xff08;Fully Convolutional Network&#xff0c;简称 FCN&#xff09;在计算机视觉领域具有重要地位。 传统的卷积神经网络&#xff08;CNN&#xff09;在最后的输出层通常使用全连接层来进行分类任务。然而&#xff0c;全连接层会丢失空间信息&#xff0c;使得…

Facebook Dating:社交平台的约会新体验

随着社交媒体的普及和技术的发展&#xff0c;传统的社交方式正在经历革新&#xff0c;尤其是在约会这个领域。Facebook作为全球领先的社交平台&#xff0c;推出了Facebook Dating&#xff0c;旨在为用户提供一个全新的约会体验。本文将探讨Facebook Dating如何重新定义社交平台…