Using snap with jspsych

[omfi...@gmail.com]

Hy Josh!

It's me again. I wonder, if and how I can combine jspsych with snap in a way that allows to render different svgs and present them.

Yours,
Marcel

[Josh de Leeuw]

Yes. A generated SVG has a string version of the markup like any HTML element. You can capture this string in a variable and pass it to the single-stim plugin as the stimulus parameter.

There are also plugins that use the Snap library, e.g., https://github.com/jodeleeuw/jsPsych/blob/master/plugins/jspsych-visual-search-circle.js

--
You received this message because you are subscribed to the Google Groups "jsPsych" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jspsych+u...@googlegroups.com.
To post to this group, send email to jsp...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jspsych/7372d0bf-acd9-4f6d-afa2-b5982c197aee%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Philip Quinlan]

Hi I figured out how to do this now and it is 'working' but what I am trying to do is present a sequence of these kinds of displays and if I start with a fixation dot it seems to be painted to the same screen as the ensuing displays - so my question is how do you clear the screen so the dot does not reappear?

Thanks

Philip Quinlan

[Josh de Leeuw]

Try displaying the fixation dot as a trial. You can alternate between fixation trials and stimulus trials, setting the timing_post_trial parameter for the fixation trial to 0 if you want no gap between trials.

To view this discussion on the web visit https://groups.google.com/d/msgid/jspsych/2493ed3c-8116-463a-bf07-a9ce379df7f1%40googlegroups.com.

[Philip Quinlan]

Here is a code snippet - showing what I am doing - the dot stays on.

Sorry still taking baby steps with this.

Philip. 

  var sp = Snap("#svg");

   var sp_circ = sp.circle(x_cent,y_cent,5);

   var fix_block = {
       type: "single-stim",
       is_html : true,
       timing_response: 500,
       timing_post_trial: 0,
       stimulus: sp.toString()
   };

   timeline.push(fix_block);


   var s = Snap("#svg");
   var dis1_col = [];
   dis1_col[0] = colors[0];
   for (var jp =1; jp < 4; jp++){
       dis1_col[jp] = colors[jp-1];
   }

   for (var ip=0; ip<n_el; ip++){
       var s_circ = s.circle(x_val[ip],y_val[ip],10);
       s_circ.attr({
           fill: dis1_col[ip]
       });

   }

   var presentation_block = {
       type: "single-stim",
       is_html : true,
       timing_response: 100,
       timing_post_trial: 600,
       stimulus: s.toString()
   };
timeline.push(presentation_block);

supposed to present a small simgle fixation followed by a new display containing four colored dots

Thanks

Philip.

[Josh de Leeuw]

When you create the Snap object and modify it, that probably create the stimulus on the page. You need to clear that before running the experiment. One way would be to add a couple lines after the first 2:

var sp = Snap("#svg");
var sp_circ = sp.circle(x_cent,y_cent,5);

var str = sp.toString();

$('#svg').remove(); // or other method to clear this from the DOM

To view this discussion on the web visit https://groups.google.com/d/msgid/jspsych/7c16e255-e0da-48d5-9ab5-0f826f78532c%40googlegroups.com.

[Josh de Leeuw]

(And then you can use the str variable as your stimulus, if that wasn't clear from the example...)

[Philip Quinlan]

if I use 

$('#svg').remove();

this then appears to remove '#svg' completely and so cant re-use the definition

could you suggest an alternative?

Philip.

[Josh de Leeuw]

You could try .empty() instead.

To view this discussion on the web visit https://groups.google.com/d/msgid/jspsych/9adad595-8942-4f95-9167-b58f81528d45%40googlegroups.com.

[Philip Quinlan]

Perfect

Thanks

Philp.

and thanks for this software it will revolutionize the way I now do research.

[Philip Quinlan]

Hopefully, a final question...

I am struggling to position the svg on the page - Ideally I would like it centered horizontally and vertically but I cant seem to move it from being stuck in the top left hand corner.

Any advice gratefully received,

Philip.

[Josh de Leeuw]

This will be a bit easier in the next version of jsPsych. For now, you should look up information about CSS positioning. The new(ish) CSS flex layout makes vertical centering a lot easier than it used to be. This is a good starting point: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

To view this discussion on the web visit https://groups.google.com/d/msgid/jspsych/d7bb222e-993f-4a49-ab0e-79eed42ffe43%40googlegroups.com.