问题描述
我想结合 canvas-slider-response plugin 和 RDK plugin 来创建响应试验,其中观察者使用滑块改变运动场的相干性。
RDK 插件创建一个画布元素并将其附加到 DOM 以在画布上绘制点。因为想要slider功能,所以在RDK插件里面加了HTML元素:
var html = '<div id="jspsych-canvas-slider-response-wrapper" style="margin: 100px 0px;">';
html += '<div id="jspsych-canvas-slider-response-stimulus">' + '<canvas id="jspsych-canvas-stimulus" height="' + trial.canvas_size[0] + '" width="' + trial.canvas_size[1] + '"></canvas>' + '</div>';
html += '<div class="jspsych-canvas-slider-response-container" style="position:relative; margin: 0 auto 3em auto; width:';
然后使用此方法将该 html 变量添加到 html 元素:
display_element.innerHTML = html;
当然,这会在画布上覆盖,显示 HTML 元素,但现在点不见了(画布被覆盖了?)。
我有点意识到出于安全原因,将 HTML 渲染到画布中受到严重限制。所以尝试了一些模拟:
1- 我可以使用创建 SVG 图像来呈现 html 元素:
Rendering HTML elements to <canvas>。但是后来我无法使用 display_element.querySelector('#jspsych-canvas-slider-response-next').addEventListener('click',function () {}
2- 我也可以 insertAdjacentHTML 但使用这种方法,画布元素出现在 RDK 元素出现在屏幕上之后——而不是一起出现。 Add elements to the DOM given plain text HTML using only pure JavaScript (no jQuery)。
3- 我认为 JsPsych 中的 HTML 渲染器可以解决我的问题。所以我尝试将 RDK 作为刺激函数包含在 canvas-slider-response 中,但我找不到在 RDK 插件对象中调用该函数的方法。这就是我试图实现的目标:
var slider_trial = {
type: 'canvas-slider-response',stimulus: function(c) {
**callRDKPlugin(c);** ////// Something here /////
},labels: ['Exactly<br>the same','Totally<br>different'],canvas_size: [200,500],prompt: '<p>How different would you say the colors of these two squares are?</p>',on_finish: function(data) {
data.color1 = colors[0];
data.color2 = colors[1];
}
};
我错过了一个简单的步骤吗?
这是所需的图像:
解决方法
缩短画布(高度)并将 div 节点附加到 HTML,
var div = document.createElement("div");
div.innerHTML= html
display_element.appendChild(div);
解决了我的问题。