Reputation: 607

Jspsych: Putting 3 p tags in the center of the page, aligned to the left?

Guess I'm pretty stuck.

So here's what I got visually right now.

I added that comic sans caption and the arrow in MS paint.

Each of those lines containing the color swatches is a p tag. Ideally, I want these p tags to be put in the center of the page (which is how they are positioned by default in jspsych). However, I also want all of these tags to be aligned to the left. I still want the p tags in the center, but I want to make it so that each line of text starts at the same x coordinate.

The above screencap is what I want ideally. Things are centered, but these swatches/p tags still start off at basically the same x coordinate.

So the code I currently have for the page I'm debugging on (the first screencap) is the following. Note that the one image loaded has the path of /static/images/test.png, you can just replace that with whatever you want to. The javascript file is called debugjspsych.js, ad the html is 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>" + 
        "<div style='float:right;margin-right:200px;'><div style='width: 150px; height: 95px; border: 3px solid #000000; font-size:12px; background-color: grey;margin-top:44px;'><p style='text-align: center; margin-top:25%;'>No treatment</p></div><p class='small'><strong>Option 2</strong></p></div>" +
        "</div>" + "</div>";
         return "<p>Some words go here. Look at these rectangles. Pretty rad, right?</p>" + 
          example_stimuli_html
          + "<p><br>...Then at the relative amounts of <b><font color='gray'>gray</font></b>, <b><font color='#4169e1'>blue</font></b>, and <font color='#ed713a'><b>orange</b></font> in the trial.</p>" +
          "<div style='margin: auto 0;'>" + 
              "<p align='left'><div style='display:inline-block;background-color:#ed713a;height:27px; width:40px;margin-right: 5px;'></div><b>Worsens</b> the deficit.</p>" + 
              "<p align='left'><div style='display:inline-block;background-color:#808080;height:27px; width:40px;margin-right: 5px;'></div>Has <b>no effect.</b></p>" + 
              "<p align='left'><div style='display:inline-block;background-color:#4169e1;height:27px; width:40px;margin-right: 5px;'></div><b>Cures</b> the deficit.</p>" + 
          "</div>"
          "<p>You should click the <b>\'z\' key</b> to pick Option 1, and the <b>\'m\'</b> key to pick Option 2. Sometimes the treatment will be on the left, and sometimes it will be on the right.</p> \
          <p>In any case, your task is always to choose between the two Options- to give the  treatment or not. Sometimes it will seem like the choice is more or less obvious. However, do your best  \
          to make what you think is the <i>best</i> choice in each case. There is no time limit for each treatment, but there will be many, so please do your best to make\
          good choices as quickly as you can without spoiling your response.</p>"
        },
        prompt: "Press any key to continue."
    };
    timeline_arr.push(instructions2);

     jsPsych.init({
        timeline: timeline_arr,
    });

<!DOCTYPE html>
<html>
    <head>
        <title>Debug JsPsych</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/gh/jspsych/[email protected]/jspsych.js"></script>
        <script src="https://cdn.jsdelivr.net/gh/jspsych/[email protected]/plugins/jspsych-html-keyboard-response.js"></script>
        <script src="https://cdn.jsdelivr.net/gh/jspsych/[email protected]/plugins/jspsych-html-button-response.js"></script>
        <link href="https://cdn.jsdelivr.net/gh/jspsych/[email protected]/css/jspsych.css", rel="stylesheet" type="text/css">
        <script src="debugjspsych.js"></script>
    </head>
    <body>

    </body>
</html>

The last code snippet I'm going to include is the code for the idealized screencap.

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 sustain and switch focus at all.</p>" + 
              "<p><div style='display:inline-block;background-color:#808080;height:27px; width:40px;margin-right: 5px;'></div>Has <b>no effect.</b> The person <b>still</b> has some trouble maintaining and switching focus.</p>" + 
              "<p><div style='display:inline-block;background-color:#4169e1;height:27px; width:40px;margin-right: 5px;'></div><b>Cures</b> the deficit. The person becomes <b>able</b> to sustain and switch focus as needed</p>" + 
              "</div>" + 
              jsPsych.timelineVariable('stimulus', true);
}

I ommitted a lot of parts to the above code snippet just because I didn't feel they were relevant. All that's really important here is that I'm able to use margin: auto 0; to get the behavior I desire for that trial object. But I can't seem to do it in the example.

Upvotes: 2

Answers (2)

Byron Smith

Reputation: 607

Sorta doing what SOReader said...

          "<div style='margin:auto 0;text-align:left;'>" + 
              "<p style='display:inline-block;min-width:37.5%;'><div style='display:inline-block;background-color:#ed713a;height:27px; width:40px;margin-right: 5px;'></div><b>Worsens</b> the deficit.</p>" + 
              "<p style='display:inline-block;min-width:37.5%;'><div style='display:inline-block;background-color:#808080;height:27px; width:40px;margin-right: 5px;'></div>Has <b>no effect.</b></p>" + 
              "<p style='display:inline-block;min-width:37.5%;'><div style='display:inline-block;background-color:#4169e1;height:27px; width:40px;margin-right: 5px;'></div><b>Cures</b> the deficit.</p>" + 
          "</div>"

The key things that make this work:

parent div should have styling: margin: auto 0; text-align:left;. Parent div can also get by with just margin-right:0;margin-left:0; (though margin: auto 0 already does this.
Each p tag needs to have display:inline-block;min-width:37.5%. The min-width has to be varied and you really have to choose whatever looks closest to the center to you, it's not perfect. Also you need the display:inline-block otherwise min-width has no effect.

So this comes out.

Upvotes: 1

SOReader

Reputation: 6037

Try adding minwidth attribute on each of affected p tags and you'll get them aligned to left in the center. Make sure the width is big enough.

Upvotes: 2

Jspsych: Putting 3 p tags in the center of the page, aligned to the left?

Answers (2)

Related Questions