Centre stimulus vertically + inter-trial stimulus

[david....@gmail.com]

Hi there,

I am programming an experiment based on the single-stim plugin. I haven’t yet managed to find a way to adapt the plugin to perform the two following things:

1) I want the stimulus (a simple image of known dimensions) to be displayed at the centre of the browser. Centering it horizontally is straight-forward, but I haven’t managed to centre it vertically. I tried using a table, with window.innerHeight as its height attribute, and then vertically aligning the image inside the only cell, but the table starts too low, so the stimulus appears too low as well… Any idea?

2) I also need to add a fixation point between trials. What would be the easiest way to do this?

Many thanks for your ideas,

David

[Josh de Leeuw]

Hi, David.

You could try using this technique to vertically center stimuli: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

If you are using the jspsych CSS file, then you may need to override some of the default values for the .jspsych-display-element class: https://github.com/jodeleeuw/jsPsych/blob/master/css/jspsych.css#L99. You could either edit the jspsych stylesheet directly or add in overriding styles in a <style> tag in the head section of the document.

The way that I typically add a fixation point is by using a single-stim trial with a + sign as the stimulus. You can interleave fixation trials with the image trials:

var image_stimuli = ['imgA.jpg', 'imgB.jpg', 'imgC.jpg'];

var timeline = [];

var fixation_trial = {

  type: 'single-stim',

  stimuli: ['<p style="font-size:32px; text-align:center">+</p>'],

  timing_response: 500, // how long to show the fixation for in ms

  response_ends_trial: false,

  choices: 'none', // no valid keys

  timing_post_trial: 0, // no gap between fixation and image

  is_html: true

}

for(var i=0; i<image_stimuli.length; i++){

 

  timeline.push(fixation_trial);

  timeline.push({

    type: 'single-stim',

    stimuli: [image_stimuli[i]],

    // other parameters for your image trial

  });

}

jsPsych.init({

  experiment_structure: timeline

});

--
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/c7ea33b6-9b90-4330-a89f-49cfee0c4379%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[David Acunzo]

Hi Josh,

Many thanks for your quick reply.

As you suggested, I modified the CSS. I used the technique proposed here, which suits my purposes for now: http://stackoverflow.com/questions/16688484/vertically-align-a-div-in-the-browser-window-not-within-another-element

Your method for the inter-trial stimulus works nicely.

Best,

David

[Philip Quinlan]

Hi
I am really struggling with this and wondered if you might provide a code snippet that provides an example of how to vertically center a text string for example.

With thanks in anticipation,

Philip.

[Josh de Leeuw]

The latest (not yet released) version of jsPsych centers all content vertically by default. You could download the library from the master branch of GitHub and have vertical centering that way.

There's a nice code snippet on this page that walks through the explanation if you want to write the HTML for version 5.x

https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

[taylor...@gmail.com]

Hi Josh,

I took the approach of downloading the unreleased version. This worked very well for vertically centering the stimuli, but now a bit of my code that calculates subject accuracy no longer works. I'm getting the error that 'jsPsych.data.getTrialsOfType is not a function'. Does interacting with the data work differently in the unreleased version?

Thanks!
Taylor

[Josh de Leeuw]

Yes, the data module has been overhauled. This is the equivalent to the old getTrialsOfType() command:

//OLD (version 5)

jsPsych.data.getTrialsOfType('single-stim');

// NEW (version 6)

jsPsych.data.get().filter({trial_type: 'single-stim'}).values()

To view this discussion on the web visit https://groups.google.com/d/msgid/jspsych/b0e62da2-a7c9-4bfe-8530-fdf1de40f6df%40googlegroups.com.

[taylor...@gmail.com]

That worked, thank you!!