Generate a screen layout for a two-alternative forced choice task

[holgerMitterer]

I am implementing a 2AFC task, and I want to present my alternatives (choice1, choice2) and the left and right part of the screen (both in a html-keyboard response preview and for the prompt in an audio-keyboard response) plus a feedback (html-keyboard) showing the participants which choice they made.

Something like this

Preview: BATH PATH
->
hearingAudio: BATH PATH

• after choice for,e..g, BATH

•                                             BATH
  

I thought a table would do that, but I cannot manage to present the table over the whole screen. Whether I set a table to 100% width in its own specification or I set in the style part of the header, nothing seems to stick. It seems that there are containers generated by jsPsych that are not very obvious to the user that squish the table to its minimal possible size.

I have been working on this relatively simple task for 2h now without success. I probably need to change some css setting, but I am not familiar with those. But it would seem a fairly simple task. Or do I go brute force and generate another row of the table with three large images (all in white....).

Sincerely,
Holger

[ChristopheBossens]

One approach that I can think of is to create a div for the prompt, and set the width of that div explicitly:

    const trial = {
      type: jsPsychHtmlKeyboardResponse,
      prompt: "<div id='prompt'><div>BATH</div><div>PATH</div></div>",
      stimulus: ""
    }

In the head section of your html page:

    <style>
        #prompt{
            width: 300px;
            display: flex;
            justify-content: space-between;
            
        }
    </style>