Add title to html-keyboard-response

[viviers]

How do you add a text title or header above the stimulus?

I'm trying to display a summary of the instructions as bigger text at the top of the screen.

[jodeleeuw]

Hi @viviers,

Are you hoping to do this throughout the experiment so that the text is always there, or just on particular trials?

[viviantic]

Hello @jodeleeuw ! I have a similar question as the one @viviers posted here. I am designing a self-paced reading experiment. I'd like to show a line of text, reminding my participants to press F for false and J for true when they answer a comprehension question each time. Is there a way to display this particular line under all the comprehension questions throughout the experiment? I tried to add it as an instruction to my var practice_question (see the page line below), but it didn't work. Any suggestions?

// create practice_question
	var practice_question = {
		type: "html-keyboard-response",
		stimulus: function() {
                return '<span style="font-size:30px;">' + jsPsych.timelineVariable('question', true) + '</span>';
            },
		choices: ["f", "j"],
		data: {
            trial_part: "practice_question",
            task_part: jsPsych.timelineVariable('task_part'),
            correct_response: jsPsych.timelineVariable("correct_response"),
            stimulus: jsPsych.timelineVariable("stimulus"),
            question: jsPsych.timelineVariable("question"),
            page: [F=False    J=True]
        },
		post_trial_gap: 500,
        on_finish: function(data) {
                var acc = false;
                if (data.correct_response == jsPsych.pluginAPI.convertKeyCodeToKeyCharacter(data.key_press)) {
                    acc = true;
                }
                data.accuracy = acc;
            }
            };

[jodeleeuw]

Hi @viviantic,

I think the right way to do this is to use the prompt parameter.

prompt: '<p>F=False J=True</p>'

Or if you want a little more separation:

prompt: '<p>F=False &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; J=True</p>'

[viviantic]

Using the prompt parameter worked perfectly! Thank you so much, @jodeleeuw! I feel that I always learn something new every time I am here.

[amitrozen1]

Hi @jodeleeuw , I have the same issue as viviers. I would like to add a title at the top of the screen for the Html Keyboard Response plugin on JSpsych, for particular trials only. Do you have any tips? I tried using prompt with no success to place the text on the top of the page

[amunn]

@amitrozen1 You can position the prompt using CSS (ideally you would make a separate CSS entry for this rather than put it directly into the prompt code).

prompt: '<div id="myprompt", style="position: absolute; top:10%; left: 43%;" >THIS IS THE INSTRUCTION</div>'

What I'm not quite clear on, and maybe @jodeleeuw or @becky-gilbert can explain is why choosing left:50% places the text a bit too far to the right, hence the odd 43% value that I used here.

[jodeleeuw]

Setting left: 50% positions the left edge of the div at 50%. One trick to get it centered is to then apply a transform: translateX(-50%) in the CSS to move the <div> 50% of its width to the left. This should center it.

prompt: '<div id="myprompt", style="position: absolute; top:10%; left: 50%; transform: translateX(-50%)" >THIS IS THE INSTRUCTION</div>'

[amunn]

Thanks @jodeleeuw! That works perfectly. I've learned a new CSS parameter now. :)