Feeling pretty stuck at the moment.
Here's what I have visually right now:
I added a caption in Comic Sans and an arrow using MS Paint.
Each line with color swatches is wrapped in a p tag. The goal is to center these p tags on the page (as they are by default in jspsych). However, I also want all lines to align left, starting at the same x-coordinate.
The screenshot above illustrates my ideal outcome. Everything is centered, but each line of text starts at the same x-coordinate.
This is the code for the current page I'm debugging (first screenshot). Replace the image path "/static/images/test.png" as needed. The JavaScript file is named debugjspsych.js, and the HTML file is known as debug.html.
Javascript:
timeline_arr = [];
var instructions2 = {
type: "html-keyboard-response",
choices: 13,
stimulus: function() {
var example_stimuli_html = "<div style='width:800px;height:200px;margin:0 auto;'>" + "<div style='float: left;margin-left:200px; margin-top:43px;'><p style='font-size:14px;'>" + "</p><img src='Neuroethics_Behavioral_Task/static/images/test.png' style='width:150px;height:95px;'></img><p class='small'><strong>Option 1</strong></p></div...
...
ideal_trial_obj = {
type: 'html-keyboard-response',
stimulus: function() {
return "<div style='margin:auto 0;top:0px;margin-top:50px;text-align:left;'>" + "<p align='center'>" + "Domain: <strong>" + condition_var + "</strong>" + "<br>Chance that the treatment...</p>" +
"<p><div style='display:inline-block;background-color:#ed713a;height:27px; width:40px;margin-right: 5px;'></div><b>Worsens</b> the deficit. The person becomes <b>unable</b> to sustai...
}
A lot of details have been omitted from the above code snippet. The key takeaway is using margin: auto 0; to achieve the desired behavior in the trial object. However, replicating this behavior in the actual example has proved challenging.