Survey Html Form - button in card

[EmmarleneK]

Hello,

I'm new to JsPsych and it feels like my question is a bit trivial, but I couldn't find an answer so far. So, it would be great if you could help me!

I've created a trial interface as shown in the image below. Now, I want to move the 'Submit' button so it also becomes part of the purple card. However, the SurveyHtmlForm plugin doesn't seem to have any way to do this, or to even style the button (button_html as used in HtmlButtonResponse plugin does not exist in the SurveyHtmlForm plugin (shows no effect)).

How can I do this?
Any help would be great! :)

[sophief10]

Hi there! If the standard plugin parameters do not give you what you want, you may like to edit the plugin itself. That is what I generally do when I have that kind of problem.

I assume you are using jsPsych version 7.2.3.. In this version, the survey-html-form plugin seems to contain the button HTML in the following code:
a += '<input type="submit" id="jspsych-survey-html-form-next" class="jspsych-btn jspsych-survey-html-form" value="' + t.button_label + '"></input>'
You could add a style attribute to the code to change the button's appearance. For example:
a += '<input type="submit" id="jspsych-survey-html-form-next" class="jspsych-btn jspsych-survey-html-form" value="' + t.button_label + '" style="transform:translateX(30px);"></input>'

You might also consider adding a coloured div element around the form and the button to make sure they are contained in the same box:
t.autocomplete ? a += '<div style="background-color:purple;"><form id="jspsych-survey-html-form">' : a += '<form id="jspsych-survey-html-form" autocomplete="off">', a += t.html, a += '<input type="submit" id="jspsych-survey-html-form-next" class="jspsych-btn jspsych-survey-html-form" value="' + t.button_label + '"></input>', a += "</form></div>"

You can read more about plugin development on the jsPsych website.

I hope that helps!

[EmmarleneK]

Thank you very much for your reply!
That is very helpful. I thought about editing the plugin, but didn't quite dare. But I'll give it a go!
Sorry if that's a dumb question, but where would you put the code below? Before the comment "// add form HTML / input elements"? Sorry, I've never edited a plugin before. Also, I can't find the a+= - in version 7.2.1 and 7.2.3 this is an html+=. Is this an abbreviation? (sorry for this beginner mode)

Best wishes,
//Emma

[becky-gilbert]

Hi @EmmarleneK, in addition to @puzzleGuzzle's solution I just wanted to add that you should be able to modify the SurveyHtmlForm's Submit button CSS without having to edit the plugin. The existing style comes from the jspsych.css file. I suggest you try this using your own style section or CSS file, and make sure that the submit button's CSS selector is specific enough to take precedence over the default styling that comes from the jspsych.css file - the jsPsych CSS docs page has information about how to do that.

For instance, your CSS rules might work if you select the submit button using more selectors, e.g. the tag, ID and class:

input#jspsych-survey-html-form-next.jspsych-btn {
  background-color: purple;
}