Jspsych: Centering and aligning 3 p tags to the left on the page

Feeling pretty stuck at the moment.

Here's what I have visually right now:

https://i.sstatic.net/FUzgM.png

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.

https://i.sstatic.net/Y6I3f.png

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.

javascripthtmlcssjspsych

Answer №1

To achieve left alignment in the center for the affected p tags, consider including the minwidth attribute on each of them. Ensure that the width specified is sufficiently large.

Answer №2

Following the advice of SOReader, I have implemented the following:

          "<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 important factors for this setup to be effective are as follows:

  • The parent div should have the styling properties: 

    margin: auto 0; text-align: left;
    . It can also suffice with just margin-right: 0; margin-left: 0; (although margin: auto 0 already covers this).

  • Each p tag must include 

    display: inline-block; min-width: 37.5%
    . The value for min-width can vary and it is necessary to select what appears closest to being centered, though it may not be perfect. Additionally, display: inline-block is required for min-width to take effect.

This results in the following layout:

https://i.sstatic.net/V4GdR.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using a node module for Three.js path manipulation

Currently, I am in the process of learning Three.js and have set up a basic project that runs on a node.js server while importing Three.js as a node module. Although my setup is working fine, I find myself a little bit confused about whether this is consi ...

javascriptnode.jsnpmwebpackthree.js

Use CSS bracket attribute to conceal link with no HTML access

I am unable to modify the HTML code, but I need to find a way to hide the link (#wall). <td class="status_value"><span class="online"> - <a href="#wall"> Leave a Comment </a> <a href="#today"> ...

htmlcss

What is the best way to incorporate a new attribute into a particular CSS class?

Just to provide some context, I am relatively new to all of this. Please bear with me. I have a unique CSS class that is specifically assigned to thumbnail images on my Wordpress website. Currently, I am using a script that adds a "Pin it" hover link to a ...

jqueryhtmlcsswordpress

Unable to modify the hover color on the image or icon

After creating a circle icon with an image in the center, I wanted to make the image change colors on hover. The main focus of the icon is the circle itself. In my attempt to achieve this effect, I included the following code for the circle icon: .circle- ...

javascriptcss

Understanding the positioning of HTML elements using CSS

If you have the HTML snippet below: ... <fieldset> <div>above or below</div> <div>content</div> </fieldset> ... Is there a way to use CSS to position the <div>above or below</div> above or below the < ...

htmlcsscss-position

Unable to change background-image as intended

Here is an example of my HTML code with an initial background image: <div id="ffff" style="width: 200px; height: 200px; background-image: url('/uploads/backroundDefault.jpg')">sddsadsdsa<br>dffdsdfs</div> Everything seems to b ...

javascriptjqueryhtmlcss

What is the best way to include a character in a string if there are no instances of the same character already present?

Looking for help with a function that can determine if a string contains a period and add one if it doesn't. So far, I'm struggling to make it either continuously add periods or not add any at all. function checkPeriod() { if (inputString.indexO ...

javascriptstring

What distinguishes between using ul#test and #test ul in CSS?

Could someone help clarify the distinction between these two types of CSS declarations: ul#test { } #test ul { } Despite my searching, I am unable to pinpoint the difference, but they exhibit different behaviors when implemented on a test page. To me, i ...

csscss-selectors

Adjust the alignment and floating of text within an iframe on the same domain

Is it possible to align text on the right side of an iframe that contains a width and text inside? The iframe's src is from the same domain. If so, how can this be achieved through JavaScript? ...

javascripthtml

Matching the scope property in AngularJS directives

I am currently working on creating a custom directive that will perform regex validation on specific input fields. The goal is for the directive to determine which regex pattern to use based on an attribute provided in the input element. Here is an exampl ...

javascriptangularjsangularjs-directive

I need assistance setting up a Facebook page feed using Angular.js. I want to display the posts in a list of cards and include a fullscreen image gallery. Is

Hey there! I'm in the process of developing an app that pulls Facebook page posts and showcases them with custom CSS. The app is functioning smoothly with two controllers, DashCtrl and MainCtrl, each working fine on its own. However, when trying to tr ...

javascriptcssangularjshtmlionic-framework

Exploring Attachments in ASP.NET Core MVC Views

I have placed attachments in a Shared Folder on a server. I attempted to access them using the <a> tag <a href="file:///C:">Open Attachments</a> Unfortunately, this method did not work in ASP.NET Core MVC for unknown reasons. I ...

javascripthtmlasp.net-core

If IE's conditional comments are dysfunctional

Could this be a silly question? I feel puzzled by it. I've been using an if IE conditional statement to address some issues in IE6. In the head section, this is what I have: <!--[if lt IE 7] > <script type="text/javascript" src="js/ie6.js" ...

javascriptinternet-explorerinternet-explorer-6cross-browserconditional-comments

Guide to implementing CRUD operations on a remote MongoDB using Node.js

Recently, I delved into the world of NodeJS and discovered its server-side capabilities. My current project involves interacting with MongoDB on a remote server using the nodejs mongodb driver. With just a few lines of code, I am able to connect to the dat ...

javascriptnode.jsmongodb

Alert users before visiting external websites

Is there a way to notify users about external pages without using popups like in the first example here: Instead of the unwanted code shown above, is there an alternative solution? Is there a different approach that can be taken? For instance, check out ...

javascripthtmljquerycsshyperlink

What is the best way to prioritize loading JSON models first in three.js and declare a variable before initializing?

I am looking to efficiently load multiple JSON models and store them in global variables for easy access. This will streamline tasks like copying, translating, and more without the need to reload a model each time. After trying various methods, I have not ...

javascriptjsoncallbackthree.jsloader

invisible recaptcha with synchronous ajax

Hey, I'm trying to figure out a solution on how to obtain the token or a valid response from Recaptcha and then proceed with running the ajax call. Does anyone have any suggestions on how to achieve this in a synchronous manner? Here's the proce ...

javascriptjqueryajaxformsrecaptcha

Determine whether the JSON object has been declared

Having trouble determining if the value of values[item]['total'] is defined in a JSON object. The variable item is obtained from the select box value and I am attempting to use an if-else statement to check if values[item]['total'] is ...

javascriptjqueryjson

Only initiate the loading of the iframe within the div upon clicking a specific element

Is there a way to delay loading the content of a div until it's clicked, instead of having all data loaded at once when the page loads? I noticed that removing unnecessary divs made the page load much faster. How can I prevent all data from being loa ...

javascripthtml

json success function not being triggered

I am facing an issue with executing the success function in my code while trying to post the value of an input box and retrieve the value of a checked radio button. The objective is to perform a query based on which radio button is checked. Here is the HT ...

phphtmljquery