1

我想结合 canvas-slider-response插件和 RDK插件来创建响应试验，观察者使用滑块改变运动场的连贯性。

RDK 插件创建一个画布元素并将其附加到 DOM 以在画布上绘制点。因为我想要滑块功能，所以在 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 元素：将 HTML 元素渲染到 <canvas>。但是后来我无法使用以下方法与图像进行交互display_element.querySelector('#jspsych-canvas-slider-response-next').addEventListener('click', function () {}

2- 我也可以 insertAdjacentHTML 但使用此方法，画布元素出现在 RDK 元素出现在屏幕上之后 - 不是一起出现。 仅使用纯 JavaScript（无 jQuery）将元素添加到给定纯文本 HTML 的 DOM。

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];
    }
};

我错过了一个简单的步骤吗？

这是所需的图像：

这是想要的图像

4

1 回答 1

0

缩短画布（高度）并将 div 节点附加到 HTML，

    var div = document.createElement("div");
    div.innerHTML= html
    display_element.appendChild(div);

解决了我的问题。

于 2021-01-30T04:10:15.430 回答