CODEWITHSUNDEEP
javascripthtmlcssjspsych
CapsLock
CapsLock

Reputation: 11

Bottom margins for buttons in jsPsychHtmlButtonResponse

I am using the jsPsychHtmlButtonResponse plugin to present buttons to the participants for response selection. However, I am facing an issue with the layout of the buttons. The buttons appear very close to the bottom of the HTML page, and I would like to add some bottom margins to create more space between the buttons and the end/bottom of the page. This is how the instruction page looks:

enter image description here

I have already tried adding custom CSS styles to the HTML elements, but it seems that the jsPsychHtmlButtonResponse plugin may be overriding those styles. I have also checked the official documentation and searched through online resources, but I could not find any specific instructions on how to add bottom margins to the buttons.

Here is an example of how I am using the jsPsychHtmlButtonResponse plugin:

var trial = {type: jsPsychHtmlButtonResponse, stimulus: '<p> Stimulus Text </p>', choices: ['I agree to the terms and conditions of participation and would like to take part in the study.', 'I do not wish to participate in the study.'], };

Is there a way to implement bottom margins for the buttons in the jsPsychHtmlButtonResponse plugin to create space between the buttons and the bottom of the HTML page? Any guidance or examples on how to achieve this would be greatly appreciated. Thank you!

Upvotes: 0

Views: 68

Answers (1)

Josh
Josh

Reputation: 2360

You can use CSS to add a margin below the buttons. The <div> element that contains the buttons for that plugin is called jspsych-html-button-response-btngroup. Adding this to the <head> section of your .html page should do the trick:

<head>
    <!-- other stuff in your head section may be here -->
    <style>
        #jspsych-html-button-response-btngroup { 
            margin-bottom: 20px;
        }
    </style>
</head>

Upvotes: 0

Related Questions