Presenting audio clip and an animation together

[prajwalgatti]

Hi all,

In a particular trial/node I need to present two things --

1. An animation of a pie chart with a sector's area growing from its initial area to the resulting area (calculated from user response to the task). Is there I way I can draw the pie chart using svg to perform this animation?
2. A short audio clip

These things need to be presented together. I am unsure how I can do the same, do I need to write a custom plugin? If so is there any starting point for me to base the plugin on? Please advice.

Thanks!

[vijaymarupudi]

You can base it off the audio-*-response plugins, and include the svg in the prompt parameter.

You can include the javascript code for animation in the on_load parameter.

[prajwalgatti]

@vijaymarupudi I would like to position the centre of the pie chart's circle at the centre of the user's screen, and display some text a bit higher on top of the pie chart.

@jodeleeuw I will try that. thanks, Josh.

[vijaymarupudi]

Ah then @jodeleeuw's suggestion would be perfect for the job!

[prajwalgatti]

Thanks.
May I ask another final question?

Here is a snippet of what I am trying to do --

var feedback_phase = {
    type: 'html-keyboard-response',
    stimulus: '<svg id="svg" xmlns="http://www.w3.org/2000/svg">' +
            '<circle class="fixation-point"/>' +
            '<circle class="reward-cue-left"/>'+
            '<circle class="reward-cue-right"/>'+
            '</svg>',
    on_load: function(){ 
            var s = Snap("#svg");
            var circle = s.circle(90,120,80);
            circle.animate({r:30}, 1000);
    },
    choices: jsPsych.NO_KEYS,
    trial_duration: 200
};

I am trying to animate the circle using the Snap library for svg.
However, I think the svg element with "svg" id should be loaded/executed before the var s = Snap("#svg"); is executed.
So in my case I get an error because the svg element in stimulus is not executed before the Snap function. Any advice on how I can solve this?

[jodeleeuw]

I would expect this to work based on what you've got here. The on_load function should be called after the stimulus has been added to the DOM.

Does the error message specifically refer to a missing element?

[prajwalgatti]

Oh, my bad. I was using on_start parameter. Yes the above snippet worked.