Possible issue when using display_element #2676

seglima · 2022-06-22T14:55:33Z

seglima
Jun 22, 2022

Hello!

I´m trying to implement an experiment with jsPsych version 7.2.1 in which participants sort words to specific categories. Therefore I want to display the options of categories on top of the screen on the actual trials - however not on instructions. The best way to implement this so far has been to create a table within the and change the css-display of the table with on_timeline_start. This actually works great.

However, I´ve come across a slight problem since I am using display_element when I initiatlize jsPsych. Whenever I click within the table or in the browser console or even when I right click anywhere within the browser element jsPsych doesn´t seem to recognize any keyboard inputs anymore. I have tested this in multiple ways and it seems to come down to display_element. When I don´t use this I can click wherever I want and have no problem at all.

I´ve tried to attach the relevant code snippets if I´ve missed anything I´ll gladly provide more.

Thank you for any help/ advice!

    <body>
        <table id="Categories">
            <tr id="Practice" style="display: none;">[...] </tr>
            <tr id="Measure" style="display: none;">[...] </tr>
        </table>
        <div id="target"></div>
    </body>

   <script>
        /* initialize jsPsych */
        const jsPsych = initJsPsych({
            display_element: 'target',
        });

    ...
        var delay = {
            type: jsPsychHtmlKeyboardResponse,
            stimulus: ' ',
            choices: "NO_KEYS",
            trial_duration: 2000,
            data: {trial: "delay"},
            save_trial_parameters: {
                rt: false,
                stimulus: false,
                response: false,
                trial_type: false,
                time_elapsed: false,
            },
        };

        var timeline = [
            {
                timeline: [delay],
                on_timeline_start: function(){
                    document.getElementById('Practice').style.display = "table-row";
                }
            },
        ];  

    </script>

seglima · 2022-06-28T15:21:55Z

seglima
Jun 28, 2022
Author

I have been quite desperately trying to find a solution to this problem as I expect at least a view participants to randomly click around the screen and then have to stop their participation. I thought I might list off the things that I have tried so far:

played around with the style (esp. width & height) of the html, body and target
tried different plugins
tried an older version of jsPsych since there are tutorials on how to use display_element for version 6

None of this has lead me to an actual solution though. It seems that since the target is not 100% the width and height of the browser clicking outside of the targets bounds will render any keyboard input useless. Funnily enough this does not happen when I am not using display_element and restricting the size of the body in the jsPsych code. In that case clicking outside of the bounds of the body doesn´t chance anything. I also can´t seem to find any reasonable explanation for this effect within the jsPsych code but maybe someone who knows the code better could find something.

I have however found a workaround that does make styling a little bit harder and is by no means optimal... but at least it works for now: I have increased the size of the target element to be the exact height and width of the browser. To not have any issue with overlapping I´ve also added a padding to the target element the exact height of the table I am displaying at the top of the page. Because I´ve basically tricked the target element into being the size of the browser any clicks within the browser do not effect the keyboard responses. I´ve also added a few added benefits like no outline on the target element and hidden overflow (in case it shows up).

This is a simplified version of the code I came up with:

<html>
    <body>
        <table id="Categories">
            <tr id="Practice">
                <td>Text</td>
                <td>Text</td>
            </tr>
        </table>
        <div id="target"></div>
    </body>
</html>

body {
   margin: 0px;
   height: 100%;
   width: 100%;
   overflow-y: hidden;
}

#Categories {
   height: 7%;
}

#target {
   height: 100%;
   width: 100%;
   padding-top: 7%;
   margin-top: -7%;
}

Since this is only a workaround I´d be super happy if anyone has any additional ideas or solutions for this problem!

Edit: Fixed the CSS with an issue that came up.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Possible issue when using display_element #2676

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

Uh oh!

Possible issue when using display_element #2676

Uh oh!

seglima Jun 22, 2022

Replies: 1 comment

Uh oh!

Uh oh!

seglima Jun 28, 2022 Author

seglima
Jun 22, 2022

seglima
Jun 28, 2022
Author