在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,一经查实,立即删除!

相关文章

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

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

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

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

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

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

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;提高信息安全防护技能…

浅谈断言之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;因为这类适配…

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

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

43 华三AC登录Web页面

一 无线上WEB页面 1 创建vlan 56 [AC-KongZhi]vlan 56 2 退出 [AC-KongZhi-vlan56]quit 3 进入vlan三层口 配置IP地址 [AC-KongZhi]interface Vlan-interface 56 [AC-KongZhi-Vlan-interface56]ip address 192.168.56.55 24 4 在AC控制器与Host主机的接口上能通关vlan 5…

高等数学重难点突破:高阶导数的计算

写在最前 文章目录 写在最前方法一&#xff1a;找规律方法二&#xff1a;牛顿莱布尼茨公式方法三&#xff1a;泰勒公式方法四&#xff1a; 数学归纳法 本文重点讨论总结面对高阶导数&#xff0c;我们可以使用哪些方法(工具&#xff09;来解决计算高阶导数问题 方法概述&#xf…

【入门教程一】基于DE2-115的My First FPGA 工程

1.1. 概述 这是一个简单的练习&#xff0c; 可以帮助初学者开始了解如何使用Intel Quartus 软件进行 FPGA 开发。 在本章节中&#xff0c;您将学习如何编译 Verilog 代码&#xff0c;进行引脚分配&#xff0c;创建时序约束&#xff0c;然后对 FPGA 进行编程&#xff0c;驱动开…

【Redis】主从复制分析-基础

1 主从节点运行数据的存储 在主从复制中, 对于主节点, 从节点就是自身的一个客户端, 所以和普通的客户端一样, 会被组织为一个 client 的结构体。 typedef struct client {// 省略 } client;同时无论是从节点, 还是主节点, 在运行中的数据都存放在一个 redisServer 的结构体中…

求职学习day8

7/21回顾&#xff1a; 用面试鸭的意义可能就在于将知识点用问答的形式具象化在脑海&#xff0c;不然可能只停留在听说过的感觉 7.21 玩了一天。一个很不好的信号。今天下午要试试把 mall 项目的代码运行过一遍。 项目运行问题&#xff1a; 问题 1 &#xff1a;两个门服务器…

有序充电在新型电力系统下的解决方案

摘要&#xff1a;近年来,新能源汽车的销量快速增长,相应的充电桩数量也急剧增加,这一现象可能会给电网和变压器造成负担,与此同时&#xff0c;新型电力系统下以光伏为主的分布式发电系统占比也在逐渐提高&#xff0c;新能源的不稳定性叠加充电需求的不确定性会给电网带来严峻的…