mirror of
https://github.com/jspsych/jsPsych.git
synced 2025-05-10 11:10:54 +00:00
This commit is contained in:
Becky Gilbert
parent
ce50c6710c
commit
af8d531259
@ -14,7 +14,7 @@ frame_isi | numeric | 0 | If greater than 0, then a gap will be shown between ea
|
||||
sequence_reps | numeric | 1 | How many times to show the entire sequence. There will be no gap (other than the gap specified by `frame_isi`) between repetitions.
|
||||
choices | array of keycodes | `jsPsych.ALL_KEYS` | This array contains the keys that the subject is allowed to press in order to respond to the stimulus. Keys can be specified as their [numeric key code](http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes) or as characters (e.g., `'a'`, `'q'`). The default value of `jsPsych.ALL_KEYS` means that all keys will be accepted as valid responses. Specifying `jsPsych.NO_KEYS` will mean that no responses are allowed.
|
||||
prompt | string | null | This string can contain HTML markup. Any content here will be displayed below the stimulus. The intention is that it can be used to provide a reminder about the action the subject is supposed to take (e.g., which key(s) to press).
|
||||
|
||||
render_on_canvas | boolean | true | If true, the images will be drawn onto a canvas element. This prevents a blank screen (white flash) between consecutive images in some browsers, like Firefox and Edge. If false, the image will be shown via an img element, as in previous versions of jsPsych.
|
||||
|
||||
## Data Generated
|
||||
|
||||
|
||||
@ -19,6 +19,7 @@ sequence_reps | numeric | 1 | How many times to show the entire sequence.
|
||||
allow_response_before_complete | boolean | false | If true, the subject can respond before the animation sequence finishes.
|
||||
prompt | string | null | This string can contain HTML markup. Any content here will be displayed below the stimulus. The intention is that it can be used to provide a reminder about the action the subject is supposed to take (e.g., which key to press).
|
||||
feedback_duration | numeric | 2000 | How long to show the feedback (milliseconds).
|
||||
render_on_canvas | boolean | true | If true, the images will be drawn onto a canvas element. This prevents a blank screen (white flash) between consecutive images in some browsers, like Firefox and Edge. If false, the image will be shown via an img element, as in previous versions of jsPsych.
|
||||
|
||||
## Data Generated
|
||||
|
||||
|
||||
@ -21,6 +21,7 @@ trial_duration | numeric | null | How long to wait for the subject to make a res
|
||||
margin_vertical | string | '0px' | Vertical margin of the button(s).
|
||||
margin_horizontal | string | '8px' | Horizontal margin of the button(s).
|
||||
response_ends_trial | boolean | true | If true, then the trial will end whenever the subject makes a response (assuming they make their response before the cutoff specified by the `trial_duration` parameter). If false, then the trial will continue until the value for `trial_duration` is reached. You can set this parameter to `false` to force the subject to view a stimulus for a fixed amount of time, even if they respond before the time is complete.
|
||||
render_on_canvas | boolean | true | If true, the image will be drawn onto a canvas element. This prevents a blank screen (white flash) between consecutive image trials in some browsers, like Firefox and Edge. If false, the image will be shown via an img element, as in previous versions of jsPsych.
|
||||
|
||||
## Data Generated
|
||||
|
||||
|
||||
@ -18,6 +18,7 @@ prompt | string | null | This string can contain HTML markup. Any content here w
|
||||
stimulus_duration | numeric | null | How long to show the stimulus for in milliseconds. If the value is null, then the stimulus will be shown until the subject makes a response.
|
||||
trial_duration | numeric | null | How long to wait for the subject to make a response before ending the trial in milliseconds. If the subject fails to make a response before this timer is reached, the subject's response will be recorded as null for the trial and the trial will end. If the value of this parameter is null, then the trial will wait for a response indefinitely.
|
||||
response_ends_trial | boolean | true | If true, then the trial will end whenever the subject makes a response (assuming they make their response before the cutoff specified by the `trial_duration` parameter). If false, then the trial will continue until the value for `trial_duration` is reached. You can set this parameter to `false` to force the subject to view a stimulus for a fixed amount of time, even if they respond before the time is complete.
|
||||
render_on_canvas | boolean | true | If true, the image will be drawn onto a canvas element. This prevents a blank screen (white flash) between consecutive image trials in some browsers, like Firefox and Edge. If false, the image will be shown via an img element, as in previous versions of jsPsych.
|
||||
|
||||
## Data Generated
|
||||
|
||||
|
||||
@ -24,6 +24,7 @@ prompt | string | null | This string can contain HTML markup. Any content here w
|
||||
stimulus_duration | numeric | null | How long to show the stimulus for in milliseconds. If the value is null, then the stimulus will be shown until the subject makes a response.
|
||||
trial_duration | numeric | null | How long to wait for the subject to make a response before ending the trial in milliseconds. If the subject fails to make a response before this timer is reached, the subject's response will be recorded as null for the trial and the trial will end. If the value of this parameter is null, then the trial will wait for a response indefinitely.
|
||||
response_ends_trial | boolean | true | If true, then the trial will end whenever the subject makes a response (assuming they make their response before the cutoff specified by the `trial_duration` parameter). If false, then the trial will continue until the value for `trial_duration` is reached. You can set this parameter to `false` to force the subject to view a stimulus for a fixed amount of time, even if they respond before the time is complete.
|
||||
render_on_canvas | boolean | true | If true, the image will be drawn onto a canvas element. This prevents a blank screen (white flash) between consecutive image trials in some browsers, like Firefox and Edge. If false, the image will be shown via an img element, as in previous versions of jsPsych.
|
||||
|
||||
## Data Generated
|
||||
|
||||
|
||||
@ -8,12 +8,16 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
// If render_on_canvas is false, the images will be shown via an <img> rather than <canvas> element.
|
||||
// In some browsers, the first time the images are shown, the <img> method (render_on_canvas: false) will produce a brief
|
||||
// blank screen (white flash) between images when frame_isi is 0.
|
||||
var animation_trial = {
|
||||
type: 'animation',
|
||||
stimuli: ['img/happy_face_1.jpg', 'img/happy_face_2.jpg', 'img/happy_face_3.jpg', 'img/happy_face_4.jpg'],
|
||||
sequence_reps: 3,
|
||||
frame_time: 300,
|
||||
prompt: '<p>Watch the faces.</p>'
|
||||
prompt: '<p>Watch the faces.</p>',
|
||||
//render_on_canvas: false
|
||||
};
|
||||
|
||||
|
||||
|
||||
@ -9,21 +9,29 @@
|
||||
img {
|
||||
width: 300px;
|
||||
}
|
||||
#jspsych-categorize-animation-stimulus {
|
||||
width: 300px;
|
||||
height: 225px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
// If render_on_canvas is false, the images will be shown via an <img> rather than <canvas> element.
|
||||
// In some browsers, the first time the images are shown, the <img> method (render_on_canvas: false) will produce a brief
|
||||
// blank screen (white flash) between images.
|
||||
var trials = {
|
||||
type: 'categorize-animation',
|
||||
stimuli: ['img/happy_face_1.jpg', 'img/sad_face_3.jpg'],
|
||||
key_answer: 68,
|
||||
choices: [68, 83],
|
||||
text_answer: 'different',
|
||||
feedback_duration: 500,
|
||||
feedback_duration: 1000,
|
||||
correct_text: "<p>Correct. The faces had %ANS% expressions.</p>",
|
||||
incorrect_text: "<p>Incorrect. The faces had %ANS% expressions.</p>",
|
||||
prompt: "<p>Press D if the faces had different emotional expressions. Press S if the faces had the same emotional expression.</p>",
|
||||
//render_on_canvas: false
|
||||
};
|
||||
|
||||
jsPsych.init({
|
||||
|
||||
@ -4,15 +4,37 @@
|
||||
<script src="../jspsych.js"></script>
|
||||
<script src="../plugins/jspsych-image-button-response.js"></script>
|
||||
<link rel="stylesheet" href="../css/jspsych.css">
|
||||
<style>
|
||||
img { width: 300px; }
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var timeline = [];
|
||||
|
||||
// If render_on_canvas is false, the images will be shown via an <img> rather than <canvas> element.
|
||||
// In some browsers, the first time the images are shown, the <img> method (render_on_canvas: false) will produce a brief
|
||||
// blank screen (white flash) between images that are presented consecutively with no post_trial_gap between them.
|
||||
var trial = {
|
||||
type: 'image-button-response',
|
||||
stimulus: jsPsych.timelineVariable('stim'),
|
||||
trial_duration: 1000,
|
||||
choices: ['Happy', 'Sad'],
|
||||
prompt: '<p>What emotion is this person showing?</p><p>(Consecutive images with no post_trial_gap)</p>',
|
||||
stimulus_width: 400,
|
||||
maintain_aspect_ratio: true,
|
||||
post_trial_gap: 0,
|
||||
//render_on_canvas: false
|
||||
}
|
||||
|
||||
timeline.push({
|
||||
timeline: [trial],
|
||||
timeline_variables: [
|
||||
{stim: 'img/happy_face_1.jpg'},
|
||||
{stim: 'img/happy_face_2.jpg'},
|
||||
{stim: 'img/happy_face_3.jpg'},
|
||||
{stim: 'img/happy_face_4.jpg'}
|
||||
]
|
||||
});
|
||||
|
||||
timeline.push({
|
||||
type: 'image-button-response',
|
||||
stimulus: 'img/happy_face_1.jpg',
|
||||
@ -39,8 +61,18 @@
|
||||
prompt: "<p>What emotion is this person showing? (trial ends after 2s)</p>"
|
||||
});
|
||||
|
||||
timeline.push({
|
||||
type: 'image-button-response',
|
||||
stimulus: 'img/happy_face_4.jpg',
|
||||
choices: ['Happy', 'Sad'],
|
||||
stimulus_width: 400,
|
||||
maintain_aspect_ratio: false,
|
||||
prompt: '<p>What emotion is this person showing?</p><p>(Stimulus_width set to a smaller value and maintain_aspect_ratio set to false.)</p>'
|
||||
});
|
||||
|
||||
jsPsych.init({
|
||||
timeline: timeline,
|
||||
preload_images: ['img/happy_face_1.jpg','img/happy_face_2.jpg','img/happy_face_3.jpg','img/happy_face_4.jpg'],
|
||||
on_finish: function(){jsPsych.data.displayData();}
|
||||
});
|
||||
|
||||
|
||||
@ -4,15 +4,36 @@
|
||||
<script src="../jspsych.js"></script>
|
||||
<script src="../plugins/jspsych-image-keyboard-response.js"></script>
|
||||
<link rel="stylesheet" href="../css/jspsych.css">
|
||||
<style>
|
||||
img {
|
||||
width: 300px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
// If render_on_canvas is false, the images will be shown via an <img> rather than <canvas> element.
|
||||
// In some browsers, the first time the images are shown, the <img> method (render_on_canvas: false) will produce a brief
|
||||
// blank screen (white flash) between images that are presented consecutively with no post_trial_gap between them.
|
||||
var trial = {
|
||||
type: 'image-keyboard-response',
|
||||
stimulus: jsPsych.timelineVariable('stim'),
|
||||
trial_duration: 300,
|
||||
choices: jsPsych.NO_KEYS,
|
||||
prompt: '<p>Watch the faces.</p>',
|
||||
stimulus_width: 400,
|
||||
maintain_aspect_ratio: true,
|
||||
post_trial_gap: 0,
|
||||
//render_on_canvas: false
|
||||
}
|
||||
|
||||
var trial_proc = {
|
||||
timeline: [trial],
|
||||
timeline_variables: [
|
||||
{stim: 'img/happy_face_1.jpg'},
|
||||
{stim: 'img/happy_face_2.jpg'},
|
||||
{stim: 'img/happy_face_3.jpg'},
|
||||
{stim: 'img/happy_face_4.jpg'}
|
||||
],
|
||||
repetitions: 3
|
||||
}
|
||||
|
||||
var trial_1 = {
|
||||
type: 'image-keyboard-response',
|
||||
stimulus: 'img/happy_face_1.jpg',
|
||||
@ -35,13 +56,22 @@
|
||||
trial_duration: 2000,
|
||||
prompt: '<p>No response allowed. 2s wait.</p>'
|
||||
}
|
||||
|
||||
|
||||
var trial_4 = {
|
||||
type: 'image-keyboard-response',
|
||||
stimulus: 'img/happy_face_4.jpg',
|
||||
choices: ['y','n'],
|
||||
stimulus_width: 400,
|
||||
maintain_aspect_ratio: false,
|
||||
prompt: '<p>Have you seen this face before? Y or N.</p><p>(Stimulus_width set to a smaller value and maintain_aspect_ratio set to false.)</p>'
|
||||
}
|
||||
|
||||
jsPsych.init({
|
||||
timeline: [trial_1, trial_2, trial_3],
|
||||
timeline: [trial_proc, trial_1, trial_2, trial_3, trial_4],
|
||||
preload_images: ['img/happy_face_1.jpg','img/happy_face_2.jpg','img/happy_face_3.jpg','img/happy_face_4.jpg'],
|
||||
on_finish: function() {
|
||||
jsPsych.data.displayData();
|
||||
},
|
||||
default_iti: 250
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -4,22 +4,44 @@
|
||||
<script src="../jspsych.js"></script>
|
||||
<script src="../plugins/jspsych-image-slider-response.js"></script>
|
||||
<link rel="stylesheet" href="../css/jspsych.css">
|
||||
<style>
|
||||
img {
|
||||
width: 300px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
// If render_on_canvas is false, the images will be shown via an <img> rather than <canvas> element.
|
||||
// In some browsers, the first time the images are shown, the <img> method (render_on_canvas: false) will produce a brief
|
||||
// blank screen (white flash) between images that are presented consecutively with no post_trial_gap between them.
|
||||
var trial = {
|
||||
type: 'image-slider-response',
|
||||
stimulus: jsPsych.timelineVariable('stim'),
|
||||
trial_duration: 1000,
|
||||
labels: ['1 (least happy)', '100 (most happy)'],
|
||||
prompt: '<p>How happy is this person on a scale of 1-100?</p><p>(Consecutive images with no post_trial_gap)</p>',
|
||||
response_ends_trial: false,
|
||||
slider_width: 500,
|
||||
stimulus_width: 400,
|
||||
maintain_aspect_ratio: true,
|
||||
post_trial_gap: 0,
|
||||
//render_on_canvas: false
|
||||
}
|
||||
|
||||
var trial_proc = {
|
||||
timeline: [trial],
|
||||
timeline_variables: [
|
||||
{stim: 'img/happy_face_1.jpg'},
|
||||
{stim: 'img/happy_face_2.jpg'},
|
||||
{stim: 'img/happy_face_3.jpg'},
|
||||
{stim: 'img/happy_face_4.jpg'}
|
||||
]
|
||||
}
|
||||
|
||||
var trial_1 = {
|
||||
type: 'image-slider-response',
|
||||
stimulus: 'img/happy_face_1.jpg',
|
||||
labels: ['1 (least happy)', '100 (most happy)'],
|
||||
slider_width: 500,
|
||||
require_movement: true,
|
||||
prompt: '<p>How happy is this person on a scale of 1-100?</p>'
|
||||
prompt: '<p>How happy is this person on a scale of 1-100? (Interaction with slider is required)</p>'
|
||||
}
|
||||
|
||||
var trial_2 = {
|
||||
@ -34,7 +56,7 @@
|
||||
|
||||
var trial_3 = {
|
||||
type: 'image-slider-response',
|
||||
stimulus: 'img/happy_face_2.jpg',
|
||||
stimulus: 'img/happy_face_3.jpg',
|
||||
labels: ['1 (least happy)', '100 (most happy)'],
|
||||
slider_width: 500,
|
||||
prompt: '<p>How happy is this person on a scale of 1-100? (1s stimulus duration)</p>',
|
||||
@ -42,7 +64,8 @@
|
||||
}
|
||||
|
||||
jsPsych.init({
|
||||
timeline: [trial_1, trial_2, trial_3],
|
||||
timeline: [trial_proc, trial_1, trial_2, trial_3],
|
||||
preload_images: ['img/happy_face_1.jpg','img/happy_face_2.jpg','img/happy_face_3.jpg','img/happy_face_4.jpg'],
|
||||
on_finish: function() {
|
||||
jsPsych.data.displayData();
|
||||
},
|
||||
|
||||
@ -52,6 +52,13 @@ jsPsych.plugins.animation = (function() {
|
||||
pretty_name: 'Prompt',
|
||||
default: null,
|
||||
description: 'Any content here will be displayed below stimulus.'
|
||||
},
|
||||
render_on_canvas: {
|
||||
type: jsPsych.plugins.parameterType.BOOL,
|
||||
pretty_name: 'Render on canvas',
|
||||
default: true,
|
||||
description: 'If true, the images will be drawn onto a canvas element (prevents blank screen between consecutive images in some browsers).'+
|
||||
'If false, the image will be shown via an img element.'
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -66,9 +73,34 @@ jsPsych.plugins.animation = (function() {
|
||||
var responses = [];
|
||||
var current_stim = "";
|
||||
|
||||
if (trial.render_on_canvas) {
|
||||
// first clear the display element (because the render_on_canvas method appends to display_element instead of overwriting it with .innerHTML)
|
||||
if (display_element.hasChildNodes()) {
|
||||
// can't loop through child list because the list will be modified by .removeChild()
|
||||
while (display_element.firstChild) {
|
||||
display_element.removeChild(display_element.firstChild);
|
||||
}
|
||||
}
|
||||
var canvas = document.createElement("canvas");
|
||||
canvas.id = "jspsych-animation-image";
|
||||
canvas.style.margin = 0;
|
||||
canvas.style.padding = 0;
|
||||
display_element.insertBefore(canvas, null);
|
||||
var ctx = canvas.getContext("2d");
|
||||
if (trial.prompt !== null) {
|
||||
var prompt_div = document.createElement("div");
|
||||
prompt_div.id = "jspsych-animation-prompt";
|
||||
prompt_div.style.visibility = "hidden";
|
||||
prompt_div.innerHTML = trial.prompt;
|
||||
display_element.insertBefore(prompt_div, canvas.nextElementSibling);
|
||||
}
|
||||
}
|
||||
|
||||
var animate_interval = setInterval(function() {
|
||||
var showImage = true;
|
||||
display_element.innerHTML = ''; // clear everything
|
||||
if (!trial.render_on_canvas) {
|
||||
display_element.innerHTML = ''; // clear everything
|
||||
}
|
||||
animate_frame++;
|
||||
if (animate_frame == trial.stimuli.length) {
|
||||
animate_frame = 0;
|
||||
@ -85,9 +117,23 @@ jsPsych.plugins.animation = (function() {
|
||||
}, interval_time);
|
||||
|
||||
function show_next_frame() {
|
||||
// show image
|
||||
display_element.innerHTML = '<img src="'+trial.stimuli[animate_frame]+'" id="jspsych-animation-image"></img>';
|
||||
|
||||
if (trial.render_on_canvas) {
|
||||
display_element.querySelector('#jspsych-animation-image').style.visibility = 'visible';
|
||||
var img = new Image();
|
||||
img.src = trial.stimuli[animate_frame];
|
||||
canvas.height = img.naturalHeight;
|
||||
canvas.width = img.naturalWidth;
|
||||
ctx.drawImage(img,0,0);
|
||||
if (trial.prompt !== null) {
|
||||
prompt_div.style.visibility = "visible";
|
||||
}
|
||||
} else {
|
||||
// show image
|
||||
display_element.innerHTML = '<img src="'+trial.stimuli[animate_frame]+'" id="jspsych-animation-image"></img>';
|
||||
if (trial.prompt !== null) {
|
||||
display_element.innerHTML += trial.prompt;
|
||||
}
|
||||
}
|
||||
current_stim = trial.stimuli[animate_frame];
|
||||
|
||||
// record when image was shown
|
||||
@ -96,10 +142,6 @@ jsPsych.plugins.animation = (function() {
|
||||
"time": performance.now() - startTime
|
||||
});
|
||||
|
||||
if (trial.prompt !== null) {
|
||||
display_element.innerHTML += trial.prompt;
|
||||
}
|
||||
|
||||
if (trial.frame_isi > 0) {
|
||||
jsPsych.pluginAPI.setTimeout(function() {
|
||||
display_element.querySelector('#jspsych-animation-image').style.visibility = 'hidden';
|
||||
|
||||
@ -83,6 +83,13 @@ jsPsych.plugins["categorize-animation"] = (function() {
|
||||
default: null,
|
||||
description: 'Any content here will be displayed below the stimulus.'
|
||||
},
|
||||
render_on_canvas: {
|
||||
type: jsPsych.plugins.parameterType.BOOL,
|
||||
pretty_name: 'Render on canvas',
|
||||
default: true,
|
||||
description: 'If true, the images will be drawn onto a canvas element (prevents blank screen between consecutive images in some browsers).'+
|
||||
'If false, the image will be shown via an img element.'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -97,9 +104,36 @@ jsPsych.plugins["categorize-animation"] = (function() {
|
||||
var timeoutSet = false;
|
||||
var correct;
|
||||
|
||||
if (trial.render_on_canvas) {
|
||||
// first clear the display element (because the render_on_canvas method appends to display_element instead of overwriting it with .innerHTML)
|
||||
if (display_element.hasChildNodes()) {
|
||||
// can't loop through child list because the list will be modified by .removeChild()
|
||||
while (display_element.firstChild) {
|
||||
display_element.removeChild(display_element.firstChild);
|
||||
}
|
||||
}
|
||||
var canvas = document.createElement("canvas");
|
||||
canvas.id = "jspsych-categorize-animation-stimulus";
|
||||
canvas.style.margin = 0;
|
||||
canvas.style.padding = 0;
|
||||
display_element.insertBefore(canvas, null);
|
||||
var ctx = canvas.getContext("2d");
|
||||
if (trial.prompt !== null) {
|
||||
var prompt_div = document.createElement("div");
|
||||
prompt_div.id = "jspsych-categorize-animation-prompt";
|
||||
prompt_div.style.visibility = "hidden";
|
||||
prompt_div.innerHTML = trial.prompt;
|
||||
display_element.insertBefore(prompt_div, canvas.nextElementSibling);
|
||||
}
|
||||
var feedback_div = document.createElement("div");
|
||||
display_element.insertBefore(feedback_div, display_element.nextElementSibling);
|
||||
}
|
||||
|
||||
// show animation
|
||||
var animate_interval = setInterval(function() {
|
||||
display_element.innerHTML = ''; // clear everything
|
||||
if (!trial.render_on_canvas) {
|
||||
display_element.innerHTML = ''; // clear everything
|
||||
}
|
||||
animate_frame++;
|
||||
if (animate_frame == trial.stimuli.length) {
|
||||
animate_frame = 0;
|
||||
@ -112,20 +146,45 @@ jsPsych.plugins["categorize-animation"] = (function() {
|
||||
}
|
||||
|
||||
if (showAnimation) {
|
||||
display_element.innerHTML += '<img src="'+trial.stimuli[animate_frame]+'" class="jspsych-categorize-animation-stimulus"></img>';
|
||||
if (trial.render_on_canvas) {
|
||||
display_element.querySelector('#jspsych-categorize-animation-stimulus').style.visibility = 'visible';
|
||||
var img = new Image();
|
||||
img.src = trial.stimuli[animate_frame];
|
||||
canvas.height = img.naturalHeight;
|
||||
canvas.width = img.naturalWidth;
|
||||
ctx.drawImage(img,0,0);
|
||||
} else {
|
||||
display_element.innerHTML += '<img src="'+trial.stimuli[animate_frame]+'" class="jspsych-categorize-animation-stimulus"></img>';
|
||||
}
|
||||
}
|
||||
|
||||
if (!responded && trial.allow_response_before_complete) {
|
||||
// in here if the user can respond before the animation is done
|
||||
if (trial.prompt !== null) {
|
||||
display_element.innerHTML += trial.prompt;
|
||||
if (trial.render_on_canvas) {
|
||||
prompt_div.style.visibility = "visible";
|
||||
} else {
|
||||
display_element.innerHTML += trial.prompt;
|
||||
}
|
||||
}
|
||||
if (trial.render_on_canvas) {
|
||||
if (!showAnimation) {
|
||||
canvas.remove();
|
||||
}
|
||||
}
|
||||
} else if (!responded) {
|
||||
// in here if the user has to wait to respond until animation is done.
|
||||
// if this is the case, don't show the prompt until the animation is over.
|
||||
if (!showAnimation) {
|
||||
if (trial.prompt !== null) {
|
||||
display_element.innerHTML += trial.prompt;
|
||||
if (trial.render_on_canvas) {
|
||||
prompt_div.style.visibility = "visible";
|
||||
} else {
|
||||
display_element.innerHTML += trial.prompt;
|
||||
}
|
||||
}
|
||||
if (trial.render_on_canvas) {
|
||||
canvas.remove();
|
||||
}
|
||||
}
|
||||
} else {
|
||||
@ -138,7 +197,14 @@ jsPsych.plugins["categorize-animation"] = (function() {
|
||||
} else {
|
||||
feedback_text = trial.incorrect_text.replace("%ANS%", trial.text_answer);
|
||||
}
|
||||
display_element.innerHTML += feedback_text;
|
||||
if (trial.render_on_canvas) {
|
||||
if (trial.prompt !== null) {
|
||||
prompt_div.remove();
|
||||
}
|
||||
feedback_div.innerHTML = feedback_text;
|
||||
} else {
|
||||
display_element.innerHTML += feedback_text;
|
||||
}
|
||||
|
||||
// set timeout to clear feedback
|
||||
if (!timeoutSet) {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* jspsych-image-button-response
|
||||
* Josh de Leeuw
|
||||
*
|
||||
* plugin for displaying a stimulus and getting a keyboard response
|
||||
* plugin for displaying a stimulus and getting a button response
|
||||
*
|
||||
* documentation: docs.jspsych.org
|
||||
*
|
||||
@ -92,54 +92,144 @@ jsPsych.plugins["image-button-response"] = (function() {
|
||||
default: true,
|
||||
description: 'If true, then trial will end when user responds.'
|
||||
},
|
||||
render_on_canvas: {
|
||||
type: jsPsych.plugins.parameterType.BOOL,
|
||||
pretty_name: 'Render on canvas',
|
||||
default: true,
|
||||
description: 'If true, the image will be drawn onto a canvas element (prevents blank screen between consecutive images in some browsers).'+
|
||||
'If false, the image will be shown via an img element.'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
plugin.trial = function(display_element, trial) {
|
||||
|
||||
// display stimulus
|
||||
var html = '<img src="'+trial.stimulus+'" id="jspsych-image-button-response-stimulus" style="';
|
||||
if(trial.stimulus_height !== null){
|
||||
html += 'height:'+trial.stimulus_height+'px; '
|
||||
if(trial.stimulus_width == null && trial.maintain_aspect_ratio){
|
||||
html += 'width: auto; ';
|
||||
var height, width;
|
||||
var html;
|
||||
if (trial.render_on_canvas) {
|
||||
// first clear the display element (because the render_on_canvas method appends to display_element instead of overwriting it with .innerHTML)
|
||||
if (display_element.hasChildNodes()) {
|
||||
// can't loop through child list because the list will be modified by .removeChild()
|
||||
while (display_element.firstChild) {
|
||||
display_element.removeChild(display_element.firstChild);
|
||||
}
|
||||
}
|
||||
}
|
||||
if(trial.stimulus_width !== null){
|
||||
html += 'width:'+trial.stimulus_width+'px; '
|
||||
if(trial.stimulus_height == null && trial.maintain_aspect_ratio){
|
||||
html += 'height: auto; ';
|
||||
}
|
||||
}
|
||||
html +='"></img>';
|
||||
|
||||
//display buttons
|
||||
var buttons = [];
|
||||
if (Array.isArray(trial.button_html)) {
|
||||
if (trial.button_html.length == trial.choices.length) {
|
||||
buttons = trial.button_html;
|
||||
// create canvas element and image
|
||||
var canvas = document.createElement("canvas");
|
||||
canvas.id = "jspsych-image-button-response-stimulus";
|
||||
canvas.style.margin = 0;
|
||||
canvas.style.padding = 0;
|
||||
var img = new Image();
|
||||
img.src = trial.stimulus;
|
||||
// determine image height and width
|
||||
if (trial.stimulus_height !== null) {
|
||||
height = trial.stimulus_height;
|
||||
if (trial.stimulus_width == null && trial.maintain_aspect_ratio) {
|
||||
width = img.naturalWidth * (trial.stimulus_height/img.naturalHeight);
|
||||
}
|
||||
} else {
|
||||
console.error('Error in image-button-response plugin. The length of the button_html array does not equal the length of the choices array');
|
||||
height = img.naturalHeight;
|
||||
}
|
||||
} else {
|
||||
if (trial.stimulus_width !== null) {
|
||||
width = trial.stimulus_width;
|
||||
if (trial.stimulus_height == null && trial.maintain_aspect_ratio) {
|
||||
height = img.naturalHeight * (trial.stimulus_width/img.naturalWidth);
|
||||
}
|
||||
} else if (!(trial.stimulus_height !== null & trial.maintain_aspect_ratio)) {
|
||||
// if stimulus width is null, only use the image's natural width if the width value wasn't set
|
||||
// in the if statement above, based on a specified height and maintain_aspect_ratio = true
|
||||
width = img.naturalWidth;
|
||||
}
|
||||
canvas.height = height;
|
||||
canvas.width = width;
|
||||
// create buttons
|
||||
var buttons = [];
|
||||
if (Array.isArray(trial.button_html)) {
|
||||
if (trial.button_html.length == trial.choices.length) {
|
||||
buttons = trial.button_html;
|
||||
} else {
|
||||
console.error('Error in image-button-response plugin. The length of the button_html array does not equal the length of the choices array');
|
||||
}
|
||||
} else {
|
||||
for (var i = 0; i < trial.choices.length; i++) {
|
||||
buttons.push(trial.button_html);
|
||||
}
|
||||
}
|
||||
var btngroup_div = document.createElement('div');
|
||||
btngroup_div.id = "jspsych-image-button-response-btngroup";
|
||||
html = '';
|
||||
for (var i = 0; i < trial.choices.length; i++) {
|
||||
buttons.push(trial.button_html);
|
||||
var str = buttons[i].replace(/%choice%/g, trial.choices[i]);
|
||||
html += '<div class="jspsych-image-button-response-button" style="display: inline-block; margin:'+trial.margin_vertical+' '+trial.margin_horizontal+'" id="jspsych-image-button-response-button-' + i +'" data-choice="'+i+'">'+str+'</div>';
|
||||
}
|
||||
btngroup_div.innerHTML = html;
|
||||
// add canvas to screen and draw image
|
||||
display_element.insertBefore(canvas, null);
|
||||
var ctx = canvas.getContext("2d");
|
||||
ctx.drawImage(img,0,0,width,height);
|
||||
// add buttons to screen
|
||||
display_element.insertBefore(btngroup_div, canvas.nextElementSibling);
|
||||
// add prompt if there is one
|
||||
if (trial.prompt !== null) {
|
||||
var prompt_div = document.createElement("div");
|
||||
prompt_div.innerHTML = trial.prompt;
|
||||
display_element.insertBefore(prompt_div, btngroup_div.nextElementSibling);
|
||||
}
|
||||
}
|
||||
html += '<div id="jspsych-image-button-response-btngroup">';
|
||||
|
||||
for (var i = 0; i < trial.choices.length; i++) {
|
||||
var str = buttons[i].replace(/%choice%/g, trial.choices[i]);
|
||||
html += '<div class="jspsych-image-button-response-button" style="display: inline-block; margin:'+trial.margin_vertical+' '+trial.margin_horizontal+'" id="jspsych-image-button-response-button-' + i +'" data-choice="'+i+'">'+str+'</div>';
|
||||
}
|
||||
html += '</div>';
|
||||
} else {
|
||||
|
||||
//show prompt if there is one
|
||||
if (trial.prompt !== null) {
|
||||
html += trial.prompt;
|
||||
}
|
||||
// display stimulus as an image element
|
||||
html = '<img src="'+trial.stimulus+'" id="jspsych-image-button-response-stimulus">';
|
||||
//display buttons
|
||||
var buttons = [];
|
||||
if (Array.isArray(trial.button_html)) {
|
||||
if (trial.button_html.length == trial.choices.length) {
|
||||
buttons = trial.button_html;
|
||||
} else {
|
||||
console.error('Error in image-button-response plugin. The length of the button_html array does not equal the length of the choices array');
|
||||
}
|
||||
} else {
|
||||
for (var i = 0; i < trial.choices.length; i++) {
|
||||
buttons.push(trial.button_html);
|
||||
}
|
||||
}
|
||||
html += '<div id="jspsych-image-button-response-btngroup">';
|
||||
|
||||
display_element.innerHTML = html;
|
||||
for (var i = 0; i < trial.choices.length; i++) {
|
||||
var str = buttons[i].replace(/%choice%/g, trial.choices[i]);
|
||||
html += '<div class="jspsych-image-button-response-button" style="display: inline-block; margin:'+trial.margin_vertical+' '+trial.margin_horizontal+'" id="jspsych-image-button-response-button-' + i +'" data-choice="'+i+'">'+str+'</div>';
|
||||
}
|
||||
html += '</div>';
|
||||
// add prompt
|
||||
if (trial.prompt !== null){
|
||||
html += '<div>'+trial.prompt+'</div>';
|
||||
}
|
||||
// update the page content
|
||||
display_element.innerHTML = html;
|
||||
|
||||
// set image dimensions after image has loaded (so that we have access to naturalHeight/naturalWidth)
|
||||
var img = display_element.querySelector('#jspsych-image-button-response-stimulus');
|
||||
if (trial.stimulus_height !== null) {
|
||||
height = trial.stimulus_height;
|
||||
if (trial.stimulus_width == null && trial.maintain_aspect_ratio) {
|
||||
width = img.naturalWidth * (trial.stimulus_height/img.naturalHeight);
|
||||
}
|
||||
} else {
|
||||
height = img.naturalHeight;
|
||||
}
|
||||
if (trial.stimulus_width !== null) {
|
||||
width = trial.stimulus_width;
|
||||
if (trial.stimulus_height == null && trial.maintain_aspect_ratio) {
|
||||
height = img.naturalHeight * (trial.stimulus_width/img.naturalWidth);
|
||||
}
|
||||
} else if (!(trial.stimulus_height !== null & trial.maintain_aspect_ratio)) {
|
||||
// if stimulus width is null, only use the image's natural width if the width value wasn't set
|
||||
// in the if statement above, based on a specified height and maintain_aspect_ratio = true
|
||||
width = img.naturalWidth;
|
||||
}
|
||||
img.style.height = height.toString() + "px";
|
||||
img.style.width = width.toString() + "px";
|
||||
}
|
||||
|
||||
// start timing
|
||||
var start_time = performance.now();
|
||||
@ -202,8 +292,6 @@ jsPsych.plugins["image-button-response"] = (function() {
|
||||
jsPsych.finishTrial(trial_data);
|
||||
};
|
||||
|
||||
|
||||
|
||||
// hide image if timing is set
|
||||
if (trial.stimulus_duration !== null) {
|
||||
jsPsych.pluginAPI.setTimeout(function() {
|
||||
|
||||
@ -74,34 +74,100 @@ jsPsych.plugins["image-keyboard-response"] = (function() {
|
||||
default: true,
|
||||
description: 'If true, trial will end when subject makes a response.'
|
||||
},
|
||||
render_on_canvas: {
|
||||
type: jsPsych.plugins.parameterType.BOOL,
|
||||
pretty_name: 'Render on canvas',
|
||||
default: true,
|
||||
description: 'If true, the image will be drawn onto a canvas element (prevents blank screen between consecutive images in some browsers).'+
|
||||
'If false, the image will be shown via an img element.'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
plugin.trial = function(display_element, trial) {
|
||||
|
||||
// display stimulus
|
||||
var html = '<img src="'+trial.stimulus+'" id="jspsych-image-keyboard-response-stimulus" style="';
|
||||
if(trial.stimulus_height !== null){
|
||||
html += 'height:'+trial.stimulus_height+'px; '
|
||||
if(trial.stimulus_width == null && trial.maintain_aspect_ratio){
|
||||
html += 'width: auto; ';
|
||||
var height, width;
|
||||
if (trial.render_on_canvas) {
|
||||
// first clear the display element (because the render_on_canvas method appends to display_element instead of overwriting it with .innerHTML)
|
||||
if (display_element.hasChildNodes()) {
|
||||
// can't loop through child list because the list will be modified by .removeChild()
|
||||
while (display_element.firstChild) {
|
||||
display_element.removeChild(display_element.firstChild);
|
||||
}
|
||||
}
|
||||
}
|
||||
if(trial.stimulus_width !== null){
|
||||
html += 'width:'+trial.stimulus_width+'px; '
|
||||
if(trial.stimulus_height == null && trial.maintain_aspect_ratio){
|
||||
html += 'height: auto; ';
|
||||
// create canvas element and image
|
||||
var canvas = document.createElement("canvas");
|
||||
canvas.id = "jspsych-image-keyboard-response-stimulus";
|
||||
canvas.style.margin = 0;
|
||||
canvas.style.padding = 0;
|
||||
var img = new Image();
|
||||
img.src = trial.stimulus;
|
||||
// determine image height and width
|
||||
if (trial.stimulus_height !== null) {
|
||||
height = trial.stimulus_height;
|
||||
if (trial.stimulus_width == null && trial.maintain_aspect_ratio) {
|
||||
width = img.naturalWidth * (trial.stimulus_height/img.naturalHeight);
|
||||
}
|
||||
} else {
|
||||
height = img.naturalHeight;
|
||||
}
|
||||
if (trial.stimulus_width !== null) {
|
||||
width = trial.stimulus_width;
|
||||
if (trial.stimulus_height == null && trial.maintain_aspect_ratio) {
|
||||
height = img.naturalHeight * (trial.stimulus_width/img.naturalWidth);
|
||||
}
|
||||
} else if (!(trial.stimulus_height !== null & trial.maintain_aspect_ratio)) {
|
||||
// if stimulus width is null, only use the image's natural width if the width value wasn't set
|
||||
// in the if statement above, based on a specified height and maintain_aspect_ratio = true
|
||||
width = img.naturalWidth;
|
||||
}
|
||||
canvas.height = height;
|
||||
canvas.width = width;
|
||||
// add canvas and draw image
|
||||
display_element.insertBefore(canvas, null);
|
||||
var ctx = canvas.getContext("2d");
|
||||
ctx.drawImage(img,0,0,width,height);
|
||||
// add prompt if there is one
|
||||
if (trial.prompt !== null) {
|
||||
var prompt_div = document.createElement("div");
|
||||
prompt_div.innerHTML = trial.prompt;
|
||||
display_element.insertBefore(prompt_div, canvas.nextElementSibling);
|
||||
}
|
||||
}
|
||||
html +='"></img>';
|
||||
|
||||
// add prompt
|
||||
if (trial.prompt !== null){
|
||||
html += trial.prompt;
|
||||
}
|
||||
} else {
|
||||
|
||||
// render
|
||||
display_element.innerHTML = html;
|
||||
// display stimulus as an image element
|
||||
var html = '<img src="'+trial.stimulus+'" id="jspsych-image-keyboard-response-stimulus">';
|
||||
// add prompt
|
||||
if (trial.prompt !== null){
|
||||
html += '<div>'+trial.prompt+'</div>';
|
||||
}
|
||||
// update the page content
|
||||
display_element.innerHTML = html;
|
||||
|
||||
// set image dimensions after image has loaded (so that we have access to naturalHeight/naturalWidth)
|
||||
var img = display_element.querySelector('#jspsych-image-keyboard-response-stimulus');
|
||||
if (trial.stimulus_height !== null) {
|
||||
height = trial.stimulus_height;
|
||||
if (trial.stimulus_width == null && trial.maintain_aspect_ratio) {
|
||||
width = img.naturalWidth * (trial.stimulus_height/img.naturalHeight);
|
||||
}
|
||||
} else {
|
||||
height = img.naturalHeight;
|
||||
}
|
||||
if (trial.stimulus_width !== null) {
|
||||
width = trial.stimulus_width;
|
||||
if (trial.stimulus_height == null && trial.maintain_aspect_ratio) {
|
||||
height = img.naturalHeight * (trial.stimulus_width/img.naturalWidth);
|
||||
}
|
||||
} else if (!(trial.stimulus_height !== null & trial.maintain_aspect_ratio)) {
|
||||
// if stimulus width is null, only use the image's natural width if the width value wasn't set
|
||||
// in the if statement above, based on a specified height and maintain_aspect_ratio = true
|
||||
width = img.naturalWidth;
|
||||
}
|
||||
img.style.height = height.toString() + "px";
|
||||
img.style.width = width.toString() + "px";
|
||||
}
|
||||
|
||||
// store response
|
||||
var response = {
|
||||
|
||||
@ -117,55 +117,157 @@ jsPsych.plugins['image-slider-response'] = (function() {
|
||||
default: true,
|
||||
description: 'If true, trial will end when user makes a response.'
|
||||
},
|
||||
render_on_canvas: {
|
||||
type: jsPsych.plugins.parameterType.BOOL,
|
||||
pretty_name: 'Render on canvas',
|
||||
default: true,
|
||||
description: 'If true, the image will be drawn onto a canvas element (prevents blank screen between consecutive images in some browsers).'+
|
||||
'If false, the image will be shown via an img element.'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
plugin.trial = function(display_element, trial) {
|
||||
|
||||
var html = '<div id="jspsych-image-slider-response-wrapper" style="margin: 100px 0px;">';
|
||||
html += '<div id="jspsych-image-slider-response-stimulus">';
|
||||
html += '<img src="'+trial.stimulus+'" style="';
|
||||
if(trial.stimulus_height !== null){
|
||||
html += 'height:'+trial.stimulus_height+'px; '
|
||||
if(trial.stimulus_width == null && trial.maintain_aspect_ratio){
|
||||
html += 'width: auto; ';
|
||||
var height, width;
|
||||
var html;
|
||||
if (trial.render_on_canvas) {
|
||||
// first clear the display element (because the render_on_canvas method appends to display_element instead of overwriting it with .innerHTML)
|
||||
if (display_element.hasChildNodes()) {
|
||||
// can't loop through child list because the list will be modified by .removeChild()
|
||||
while (display_element.firstChild) {
|
||||
display_element.removeChild(display_element.firstChild);
|
||||
}
|
||||
}
|
||||
}
|
||||
if(trial.stimulus_width !== null){
|
||||
html += 'width:'+trial.stimulus_width+'px; '
|
||||
if(trial.stimulus_height == null && trial.maintain_aspect_ratio){
|
||||
html += 'height: auto; ';
|
||||
// create wrapper div, canvas element and image
|
||||
var content_wrapper = document.createElement('div');
|
||||
content_wrapper.id = "jspsych-image-slider-response-wrapper";
|
||||
content_wrapper.style.margin = "100px 0px";
|
||||
var canvas = document.createElement("canvas");
|
||||
canvas.id = "jspsych-image-slider-response-stimulus";
|
||||
canvas.style.margin = 0;
|
||||
canvas.style.padding = 0;
|
||||
var img = new Image();
|
||||
img.src = trial.stimulus;
|
||||
// determine image height and width
|
||||
if (trial.stimulus_height !== null) {
|
||||
height = trial.stimulus_height;
|
||||
if (trial.stimulus_width == null && trial.maintain_aspect_ratio) {
|
||||
width = img.naturalWidth * (trial.stimulus_height/img.naturalHeight);
|
||||
}
|
||||
} else {
|
||||
height = img.naturalHeight;
|
||||
}
|
||||
}
|
||||
html += '"></img>';
|
||||
html += '</div>';
|
||||
html += '<div class="jspsych-image-slider-response-container" style="position:relative; margin: 0 auto 3em auto; ';
|
||||
if(trial.slider_width !== null){
|
||||
html += 'width:'+trial.slider_width+'px;';
|
||||
}
|
||||
html += '">';
|
||||
html += '<input type="range" value="'+trial.slider_start+'" min="'+trial.min+'" max="'+trial.max+'" step="'+trial.step+'" style="width: 100%;" id="jspsych-image-slider-response-response"></input>';
|
||||
html += '<div>'
|
||||
for(var j=0; j < trial.labels.length; j++){
|
||||
var width = 100/(trial.labels.length-1);
|
||||
var left_offset = (j * (100 /(trial.labels.length - 1))) - (width/2);
|
||||
html += '<div style="display: inline-block; position: absolute; left:'+left_offset+'%; text-align: center; width: '+width+'%;">';
|
||||
html += '<span style="text-align: center; font-size: 80%;">'+trial.labels[j]+'</span>';
|
||||
html += '</div>'
|
||||
}
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
if (trial.stimulus_width !== null) {
|
||||
width = trial.stimulus_width;
|
||||
if (trial.stimulus_height == null && trial.maintain_aspect_ratio) {
|
||||
height = img.naturalHeight * (trial.stimulus_width/img.naturalWidth);
|
||||
}
|
||||
} else if (!(trial.stimulus_height !== null & trial.maintain_aspect_ratio)) {
|
||||
// if stimulus width is null, only use the image's natural width if the width value wasn't set
|
||||
// in the if statement above, based on a specified height and maintain_aspect_ratio = true
|
||||
width = img.naturalWidth;
|
||||
}
|
||||
canvas.height = height;
|
||||
canvas.width = width;
|
||||
// create container with slider and labels
|
||||
var slider_container = document.createElement('div');
|
||||
slider_container.classList.add("jspsych-image-slider-response-container");
|
||||
slider_container.style.position = "relative";
|
||||
slider_container.style.margin = "0 auto 3em auto";
|
||||
if(trial.slider_width !== null){
|
||||
slider_container.style.width = trial.slider_width.toString()+'px';
|
||||
}
|
||||
// create html string with slider and labels, and add to slider container
|
||||
html ='<input type="range" value="'+trial.slider_start+'" min="'+trial.min+'" max="'+trial.max+'" step="'+trial.step+'" style="width: 100%;" id="jspsych-image-slider-response-response"></input>';
|
||||
html += '<div>'
|
||||
for(var j=0; j < trial.labels.length; j++){
|
||||
var label_width = 100/(trial.labels.length-1);
|
||||
var left_offset = (j * (100 /(trial.labels.length - 1))) - (label_width/2);
|
||||
html += '<div style="display: inline-block; position: absolute; left:'+left_offset+'%; text-align: center; width: '+label_width+'%;">';
|
||||
html += '<span style="text-align: center; font-size: 80%;">'+trial.labels[j]+'</span>';
|
||||
html += '</div>'
|
||||
}
|
||||
html += '</div>';
|
||||
slider_container.innerHTML = html;
|
||||
// add canvas and slider to content wrapper div
|
||||
content_wrapper.insertBefore(canvas, content_wrapper.firstElementChild);
|
||||
content_wrapper.insertBefore(slider_container, canvas.nextElementSibling);
|
||||
// add content wrapper div to screen and draw image on canvas
|
||||
display_element.insertBefore(content_wrapper, null);
|
||||
var ctx = canvas.getContext("2d");
|
||||
ctx.drawImage(img,0,0,width,height);
|
||||
// add prompt if there is one
|
||||
if (trial.prompt !== null) {
|
||||
var prompt_div = document.createElement("div");
|
||||
prompt_div.innerHTML = trial.prompt;
|
||||
display_element.insertBefore(prompt_div, slider_container.nextElementSibling);
|
||||
}
|
||||
// add submit button
|
||||
var submit_btn = document.createElement('button');
|
||||
submit_btn.id = "jspsych-image-slider-response-next";
|
||||
submit_btn.classList.add("jspsych-btn");
|
||||
submit_btn.disabled = (trial.require_movement) ? true : false;
|
||||
submit_btn.innerHTML = trial.button_label;
|
||||
display_element.insertBefore(submit_btn, display_element.nextElementSibling);
|
||||
|
||||
if (trial.prompt !== null){
|
||||
html += trial.prompt;
|
||||
} else {
|
||||
|
||||
html = '<div id="jspsych-image-slider-response-wrapper" style="margin: 100px 0px;">';
|
||||
html += '<div id="jspsych-image-slider-response-stimulus">';
|
||||
html += '<img src="'+trial.stimulus+'">';
|
||||
html += '</div>';
|
||||
html += '<div class="jspsych-image-slider-response-container" style="position:relative; margin: 0 auto 3em auto; ';
|
||||
if(trial.slider_width !== null){
|
||||
html += 'width:'+trial.slider_width+'px;';
|
||||
}
|
||||
html += '">';
|
||||
html += '<input type="range" value="'+trial.slider_start+'" min="'+trial.min+'" max="'+trial.max+'" step="'+trial.step+'" style="width: 100%;" id="jspsych-image-slider-response-response"></input>';
|
||||
html += '<div>'
|
||||
for(var j=0; j < trial.labels.length; j++){
|
||||
var label_width = 100/(trial.labels.length-1);
|
||||
var left_offset = (j * (100 /(trial.labels.length - 1))) - (label_width/2);
|
||||
html += '<div style="display: inline-block; position: absolute; left:'+left_offset+'%; text-align: center; width: '+label_width+'%;">';
|
||||
html += '<span style="text-align: center; font-size: 80%;">'+trial.labels[j]+'</span>';
|
||||
html += '</div>'
|
||||
}
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
|
||||
if (trial.prompt !== null){
|
||||
html += '<div>'+trial.prompt+'</div>';
|
||||
}
|
||||
|
||||
// add submit button
|
||||
html += '<button id="jspsych-image-slider-response-next" class="jspsych-btn" '+ (trial.require_movement ? "disabled" : "") + '>'+trial.button_label+'</button>';
|
||||
|
||||
display_element.innerHTML = html;
|
||||
|
||||
// set image dimensions after image has loaded (so that we have access to naturalHeight/naturalWidth)
|
||||
var img = display_element.querySelector('img');
|
||||
if (trial.stimulus_height !== null) {
|
||||
height = trial.stimulus_height;
|
||||
if (trial.stimulus_width == null && trial.maintain_aspect_ratio) {
|
||||
width = img.naturalWidth * (trial.stimulus_height/img.naturalHeight);
|
||||
}
|
||||
} else {
|
||||
height = img.naturalHeight;
|
||||
}
|
||||
if (trial.stimulus_width !== null) {
|
||||
width = trial.stimulus_width;
|
||||
if (trial.stimulus_height == null && trial.maintain_aspect_ratio) {
|
||||
height = img.naturalHeight * (trial.stimulus_width/img.naturalWidth);
|
||||
}
|
||||
} else if (!(trial.stimulus_height !== null & trial.maintain_aspect_ratio)) {
|
||||
// if stimulus width is null, only use the image's natural width if the width value wasn't set
|
||||
// in the if statement above, based on a specified height and maintain_aspect_ratio = true
|
||||
width = img.naturalWidth;
|
||||
}
|
||||
img.style.height = height.toString() + "px";
|
||||
img.style.width = width.toString() + "px";
|
||||
}
|
||||
|
||||
// add submit button
|
||||
html += '<button id="jspsych-image-slider-response-next" class="jspsych-btn" '+ (trial.require_movement ? "disabled" : "") + '>'+trial.button_label+'</button>';
|
||||
|
||||
display_element.innerHTML = html;
|
||||
|
||||
var response = {
|
||||
rt: null,
|
||||
response: null
|
||||
|
||||
Loading…
Reference in New Issue
Block a user