Drawing shapes onto stimuli

[Tim]

Hi there,

First off, I’m very excited to be able to run RT experiments in qualtrics. So thanks very much for putting this package together.

I’m trying to program an experiment that requires some fairly complex stimuli. Each stimulus is a combination of text, shapes, and .jpg images. I’m fairly new to this sort of programming, but I understand I need create a ‘canvas’ object and draw the stimulus onto that. I think I’ve managed to create a function that draws onto the canvas. The following is a simple example…

————

QRTE.Stimulus ({
id: ‘Stimulus’, //Should be a unique ID, per stimulus in a trial block
onShowFn: function draw() {
var canvas = document.getElementById(“canvas”);
if (canvas.getContext) {
var ctx = canvas.getContext(“2d”);

ctx.fillStyle = “rgb(200,0,0)”;
ctx.fillRect (10, 10, 55, 50);

ctx.fillStyle = “rgba(0, 0, 200, 0.5)”;
ctx.fillRect (30, 30, 55, 50);
}
}
});

——–

However, I cannot get this to run because I don’t know where to add the code which specifies the canvas itself. I assume that somewhere, I need to add something along the lines of…

<canvas id=”canvas” width=”150″ height=”150″></canvas>

However, I’m not sure where this belongs. I would be very grateful if you could please tell me a) whether this is the best approach to adding shapes etc to stimuli, and if so, b) where to add the code the specified the canvas itself?

Many thanks in advance,
Tim

[Erwin Haasnoot]

Hi Tim,

Sounds like an interesting experiment. I think you’re onto the best way to add shapes to stimuli. I have never worked with the canvas in my experiments myself, but knowing a bit about html, you’ll need to add the canvas HTML to the HTML view of the stimulus you’re trying to add shapes to.The HTML view is used in this tutorial: http://www.qrtengine.com/tutorials/basic-tutorials/building-a-complex-experiment/ extensively, so please look there for an example!

Best regards,

Erwin

[Author]

Posts