Replies: 1 comment 5 replies
-
|
Can you provide code for your entire setup (including html)? |
Beta Was this translation helpful? Give feedback.
-
|
of course. html: <!DOCTYPE html>
<html>
<head>
<script src="jspsych-6.1.0/jspsych.js"></script>
<script src="jspsych-6.1.0/plugins/jspsych-html-keyboard-response.js"></script>
<script src="jspsych-6.1.0/plugins/jspsych-image-keyboard-response.js"></script>
<script src="jspsych-6.1.0/plugins/jspsych-image-button-response.js"></script>
<script src="jspsych-6.1.0/plugins/jspsych-html-button-response.js"></script>
<script src="jspsych-6.1.0/plugins/jspsych-resize.js"></script>
<script src="jspsych-6.1.0/plugins/jspsych-fullscreen.js"></script>
<link href="jspsych-6.1.0/css/jspsych.css" rel="stylesheet" type="text/css"></link>
</head>
<body style="background-color:ghostwhite;"></body>
<script>
timeline_stimuli.push({stimuli: current_anim_seq , detection_image: current_detection_seq}); // push images to timeline
var preCalibInsText = [{
stimulus: ["<div class='center'>Welcome to the study!<br> \
<p>Your participation will help us investigate human precision and reaction-times.</p>\
<p>Please read the instructions carefully.</p>\
<p align='center'><i>Press the space bar to continue.</i></p></div>"],
choices: [32]
}
];
var instructionsText = [
{
stimulus: ["<p>We will now continue to the first part out of two in this experiment.</p>\
<p align='center'><i>Press the space bar to continue.</i></p>"],
choices: [32]
}
];
var introduction_procedure = {
timeline: [
{
type: 'fullscreen',
fullscreen_mode: true
},
{
type: 'html-keyboard-response',
timeline: preCalibInsText,
timing_post_trial: 400
},
{
type: 'resize',
item_width: 3 + 3/8,
item_height: 2 + 1/8,
prompt: "<p>Click and drag the lower right corner of the box until the box is the same size as a credit card held up to the screen </p>",
pixels_per_unit: 100
},
{
type: 'html-keyboard-response',
timeline: instructionsText,
timing_post_trial: 400
}
]
}
// trial procedure to be repeated for each couple of images
var trial_procedure = {
timeline: [
{
type: 'html-keyboard-response',
stimulus: '<p style="font-size: 48px;">ready?</p>',
choices: jsPsych.NO_KEYS,
trial_duration: 1500,
prompt: '<p style="font-size: 36px;">3</p>'
},
{
type: 'html-keyboard-response',
stimulus: '<p style="font-size: 48px;">ready?</p>',
choices: jsPsych.NO_KEYS,
trial_duration: 1500,
prompt: '<p style="font-size: 36px;">2</p>'
},
{
type: 'html-keyboard-response',
stimulus: '<p style="font-size: 48px;">ready?</p>',
choices: jsPsych.NO_KEYS,
trial_duration: 1500,
prompt: '<p style="font-size: 36px;">1</p>'
},
{
type: 'animation',
stimuli: jsPsych.timelineVariable('stimuli'),
choices: [32],
sequence_reps: 14,
frame_isi: 240,
frame_time: 240
},
{
type: 'image-button-response',
stimulus: jsPsych.timelineVariable('detection_image'),
choices: ['1', '2','3','4'],
prompt: '<p style="font-size: 28px;">In what <b>row</b> is the changed item located?</p>',
button_html: '<button class="jspsych-btn">%choice%</button>',
margin_horizontal: '30px'
},
{
type: 'image-button-response',
stimulus: jsPsych.timelineVariable('detection_image'),
choices: ['A', 'B', 'C', 'D'],
prompt: '<p style="font-size: 28px;">In what <b>column</b> is the changed item located?</p>',
button_html: '<button class="jspsych-btn">%choice%</button>',
margin_horizontal: '30px'
},
],
timeline_variables: timeline_stimuli
}
jsPsych.init({
timeline: [introduction_procedure,practice_procedure, trial_procedure],
on_finish: function() {
jsPsych.data.displayData();
}
});
</script>
</html>css - btn was slightly modified: .jspsych-btn { If it helps to understand the code better, this experiment is a Change blindness - Flicker paradigm task. Thank you very much |
Beta Was this translation helpful? Give feedback.
-
|
I can't seem to reproduce this unfortunately :(
|
Beta Was this translation helpful? Give feedback.
-
|
@yuvalharr What browser are you testing this in? |
Beta Was this translation helpful? Give feedback.
-
|
I'm using Chrome (version 83.0.4103.116) |
Beta Was this translation helpful? Give feedback.
-
|
Are you familiar with Inspect tool in the debugger? You can use it to view the properties and bounding boxes of elements on the page. If you can figure out which element is oversized that would be helpful information. I'm having a hard time reproducing the error. |
Beta Was this translation helpful? Give feedback.
-
Hey there,
I'm having an issue with some trials in my experiment that during them the vertical scrollbar is shown and can be scrolled without any apparent reason and even when I have minimal text presented on screen. This happens only after a trial of jspsych-resize is being run.
I'm running this on Chrome.
for example:
during this html-keyboard-response trial:
I'm also having this trouble with trials that are involving some images on the screen but thought I'd probably start with this example as it doesn't seem to be a problem of presentation that is too big.
Do you have any recommendations on how to handle this? Can I make the stimuli appear on top instead of in the center and will that solve it?
Thanks for any help
Beta Was this translation helpful? Give feedback.
All reactions