Dashed Sentence CSS Properties

[ofargally]

Hi, I spent some time trying to get the CSS of the Dashed Sentence correctly. (I am trying to create a self-paced reading paradigm). I was trying to replicate the properties of the dashed sentences of an experiment designed on IBEX (LINK:https://farm.pcibex.net/r/MvGNNO/), but I was unable to get the CSS right. I basically want to center the dashed sentences and make the width, margins, padding, etc adjust automatically to changes in display, matching the configuration of the original IBEX experiment. Here is a link to my current PCIbex experiment (LINK: https://farm.pcibex.net/r/jscUTV/) and here is a snippet from the CSS file (named: ‘DashedSentence.css’):

.sentence {
    background-color: white;
    clear: both;
    line-height: 1;
    display: flex;
    justify-content: center;
    margin: auto;
    width: 600px;
    margin-top: 10%; /* Adjust this value as needed */

}
.ospan {
    border-bottom: 1.2px solid #9ea4b1;
    font-size:30px;
    background-color: white;
    display: inline-block; /* Make spans align in a row */
    white-space: nowrap; /* Prevents from breaking into new line */
}

(Note: I tried multiple padding, display, and width configurations and non worked so far (i.e. I was not able to fully replicate the CSS of the original experiment)

[Jeremy]

Hi,

One option is to download the Aesthetics folder of the original experiment, delete the files in the Aesthetics folder of the target experiment, and upload the ones from the original experiment there

Other than that, the two projects already look pretty similar

Jeremy

[Author]

Posts