中山网站的建设,seo外链增加,网页设计师就业现状,免费设计企业logojspsych 介绍
jsPsych是一个非常好用的心理学实验插件#xff0c;可以用来构建心理学实验。具体的就不多介绍了#xff0c;大家可以去看官网#xff1a;https://www.jspsych.org/latest/
但是大家在使用时就会发现#xff0c;这个插件只能使用js绘制界面#xff0c;或者…
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.vueconst app createApp(App)
app.mount(#app)使用
在App.vue中使用Jspsych创建一个渲染实验的位置比如
script setup
import JsPsychVue from jsPsych-vue;
var instance;
const init e instance e;
/scripttemplateJsPsychVue :optionsoptions initinit/JsPsychVue/template这里就顺利拿到了jspsych的实例instance。下面就和jspsych原生的一样定义一个timeline然后run就可以。
import jsPsychImageKeyboardResponse from jspsych/plugin-image-keyboard-responseonMouted((){const timeline [type: jsPsychImageKeyboardResponse]jspsych.run(timeline)
})看到这里可能就有人问了我这样写和原生的jspsych有什么区别
下面就是神奇的地方你可以用一个组件代替plugin需要做的就是导出一个info就可以。
例子
template
div {{ props.hello }} /div
button clickhandleClick点击跳转/button
/template
script setup langts
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库了
最后放上仓库地址觉得有帮助的小伙伴可以点点starhttps://github.com/HGGshiwo/jspsych-vue.git
