Font size #3266

g-porta · 2024-04-02T14:30:07Z

g-porta
Apr 2, 2024

Hi!
I'm having a (tiny) problem with the font size for my experiment (acceptability judgement).
I made the font larger so that the it could be easier to read from mobile phones:

(from the .css file)

.jspsych-display-element {
  font-family: 'Open Sans', 'Arial', sans-serif;
  font-size: 16px;
  line-height: 1.6em;
}

/* Form elements like input fields and buttons */

.jspsych-display-element input[type="text"] {
  font-family: 'Open Sans', 'Arial', sans-serif;
  font-size: 16px;

And this is in the html:

<style>
  
.sv_main  {
font-size: 16pt;
    }

</style>

And then I also modified a bit the appearance of buttons so they'd have more padding.

However, I have a problem. When the stimulus is on two lines, the font is bigger:

The actual trial is jsPsychHtmlButtonResponse.

This does not impact only the stimulus, but also the text below the buttons (which is just "Would a native speaker say this sentence?", and it's in every trial).

I really don't know how to fix it or why it happens... It only happens on mobile phones, I tested on different computers and different browsers and everything is perfect.

It's not a huge problem, but I'd like to fix it so that the experiment can look nicer and more polished!

Thanks!

Answered by Shaobin-Jiang

Apr 5, 2024

Turns out I've been an idiot... I have been completely focusing on the jsPsych code, assuming that one must be using a generated starting template, and neglected that your html file is not, well, standard. Just forget all that I have said above, about setting max-width and width. You simply need this line after your <meta charset="UTF-8">:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Make this modification in your original code.

In case you are interested how I found out about this, I made a really simplified version of your code, removing all jsPsych from it and instead created a resembling hierarchy with the same styles applied to it. It was then that I realize…

View full answer

Shaobin-Jiang · 2024-04-03T01:26:03Z

Shaobin-Jiang
Apr 3, 2024

Could you also provide your jsPsych code?

1 reply

g-porta Apr 3, 2024
Author

Yes, absolutely.

Here is the code:

<!doctype html>
<html>

<meta charset="UTF-8">
<script src="https://unpkg.com/jspsych@7.3.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@1.1.1"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.1"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-slider-response@1.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-survey-likert@1.1.2"></script>
<script src="https://unpkg.com/@jspsych/plugin-instructions@1.1.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-survey-text@1.1.2"></script>
<script src="https://unpkg.com/@jspsych/plugin-image-button-response@1.1.2"></script>
<script src="https://unpkg.com/@jspsych/plugin-survey-multi-select@1.1.2"></script>
<script src="https://unpkg.com/@jspsych/plugin-survey@0.2.1"></script>
<script src="jatos.js"></script>
<link href="css_1/jspsych.css" rel = "stylesheet">  
<link rel="stylesheet" href="https://unpkg.com/@jspsych/plugin-survey@0.1.1/css/survey.css">

<style>
  .jspsych-content {
    max-width: 75%;
  }
  .jspsych-display-element {
      font-size: 16pt;
    }

  .left-aligned {
    text-align:left;
  }
  .jspsych-btn {
font-size: 16pt;
margin-bottom: 30px;

}

.sv_main  {
font-size: 16pt;
    }

</style>

<body> </body>
<script>

    var jsPsych = initJsPsych({
      on_finish: function () {
            var resultJson = jsPsych.data.get().json();
            jatos.endStudy(resultJson, true, "Success!", true)
      },
    });
    timeline = []



//nice buttons
var btn_html = '<button class="jspsych-btn">%choice%</button>'

//practice sentences
var trial_practice = {
  type: jsPsychHtmlButtonResponse,
  prompt:
    "<p><em>Un parlante nativo di italiano pronuncerebbe questa frase?</em></p>",
   choices: ["1", "2", "3", "4", "5", "6", "7"],
    stimulus: jsPsych.timelineVariable("sentence_practice"),
    button_html: ['<p>Pessima        <button class="jspsych-btn">%choice%</button></p>', btn_html, btn_html, btn_html, btn_html, btn_html, '<p><button class="jspsych-btn">%choice%</button>        Ottima</p>']
};

var trial_practice_1 = {
timeline: [trial_practice],
		  timeline_variables: [
      { sentence_practice:"Mario mi ha detto che non trovate più il gatto che tuo papà ti ha regalato per il tuo compleanno"},
      { sentence_practice:"Anna manda una lettera Giovanni"},
            ],
		};

timeline.push(trial_practice_1)

//final instruction screen: now they can begin
var instructions_final = {
  type: jsPsychHtmlButtonResponse,
  stimulus:'<p>Ottimo! </p><p>Ora inizia l\'esperimento. Ti ricordo che durerà circa 15 minuti.</p> <p> I dati saranno salvati solo cliccando su <b>Finito</b> al termine dell\'esperimento. </p> ',
  choices: ['Next'],
prompt: ""
};

timeline.push(instructions_final)

var trial_real = {
  type: jsPsychHtmlButtonResponse,
  prompt:
    "<p> <em>Un parlante nativo di italiano pronuncerebbe questa frase?</em></p>",
   choices: ["1", "2", "3", "4", "5", "6", "7"],
    stimulus: jsPsych.timelineVariable("sentence"),
    button_html: ['<p>Pessima        <button class="jspsych-btn">%choice%</button></p>', btn_html, btn_html, btn_html, btn_html, btn_html, '<p><button class="jspsych-btn">%choice%</button>        Ottima</p>']
};

var trial_real_stimuli = {
timeline: [trial_real],
		  timeline_variables: [
      {sentence:"Lorem ipsum dolor sit amet, consectetur."},
{sentence:"adipiscing elit. Aenean aliquam magna id gravida lobortis. Quisque iaculis lobortis porttitor. Sed facilisis vel nisl in blandit."},
{sentence:"condimentum volutpat velit in ornare. Aliquam et dictum nibh."},
{sentence:"Curabitur commodo ante massa"},
{sentence:"eu euismod ipsum feugiat ac. Cras vel elit nec ipsum scelerisque vulputate sed volutpat"},
{sentence:"Aliquam vulputate lectus eget."},
{sentence:"Maecenas dictum tempor pulvinar. Proin ac tellus sodales, tempor."},
		]};

timeline.push(trial_real_stimuli)


jatos.onLoad(() => {
  jsPsych.run(timeline);
});
    
</script>  
</html>

Also, if you'd like to take a look at the problem, here's the link.

Thanks!

Shaobin-Jiang · 2024-04-03T08:03:52Z

Shaobin-Jiang
Apr 3, 2024

I think I found a solution though I have not the faintest idea why it would work (it did work for google chrome's mobile emulator):

    #jspsych-content {
        width: 95%;
    }

Just add this to your style tag.

9 replies

g-porta Apr 4, 2024
Author

Thanks!

Even if I put the max-width: 95%; I still have the same problem:

It only happens with timeline variables. It's almost as if it adjusts the size for the longer element, and the resizes all the other things accordingly. So, the longer stimuli have the proper size, but the shorter ones have a smaller size. I don't know why that should be the case though...

So, this gives the wrong font sizes:

var trial_real = {
  type: jsPsychHtmlButtonResponse,
  prompt:
    "<p> <em>Un parlante nativo di italiano pronuncerebbe questa frase?</em></p>",
   choices: ["1", "2", "3", "4", "5", "6", "7"],
    stimulus: jsPsych.timelineVariable("sentence"),
};

var trial_real_stimuli = {
timeline: [trial_real],
		  timeline_variables: [
      {sentence:"Lorem ipsum dolor sit amet, consectetur."},
{sentence:"adipiscing elit. Aenean aliquam magna id gravida lobortis. Quisque iaculis lobortis porttitor. Sed facilisis vel nisl in blandit."},
{sentence:"condimentum volutpat velit in ornare. Aliquam et dictum nibh."},
{sentence:"Curabitur commodo ante massa"},
{sentence:"eu euismod ipsum feugiat ac. Cras vel elit nec ipsum scelerisque vulputate sed volutpat"},
{sentence:"Aliquam vulputate lectus eget."},
{sentence:"Maecenas dictum tempor pulvinar. Proin ac tellus sodales, tempor."},
		]};

While this one displays the correct font size:

var instructions_final = {
  type: jsPsychHtmlButtonResponse,
  stimulus:'<p>Ottimo! </p><p>Ora inizia l\'esperimento. Ti ricordo che durerà circa 15 minuti.</p> <p> I dati saranno salvati solo cliccando su <b>Finito</b> al termine dell\'esperimento. </p> ',
  choices: ['Next'],
prompt: ""
};

timeline.push(instructions_final)

Isn't there a way to make jsPsych css mobile friendly?

Thank you!

Shaobin-Jiang Apr 4, 2024

I cannot reproduce it.

The screenshot above comes from running your experiment via the link you have given in Google Chrome's mobile emulator (iPhone SE). You can see from the right side that I have added a width to the .jspsych-content and crossed out its max-width rule. Are you quite certain you have modified the CSS correctly, for whether it is your online copy of the experiment or my own simplified version of your code, be it run in an emulator or on a real mobile device, the issue would cease to exist when I have done these modifications?

g-porta Apr 4, 2024
Author

Hi, I'm starting to doubt my understanding of your suggestion...

I put, as you suggested

 #jspsych-content {
  width: 95%;
}

I tried both in the style tag of the html (and I tried with . and with #), and in the CSS. Nothing changed.

Here's is the code with your suggestion in the style tag:

<!doctype html>
<html>

<meta charset="UTF-8">
<script src="https://unpkg.com/jspsych@7.3.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@1.1.1"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.1"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-slider-response@1.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-survey-likert@1.1.2"></script>
<script src="https://unpkg.com/@jspsych/plugin-instructions@1.1.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-survey-text@1.1.2"></script>
<script src="https://unpkg.com/@jspsych/plugin-image-button-response@1.1.2"></script>
<script src="https://unpkg.com/@jspsych/plugin-survey-multi-select@1.1.2"></script>
<script src="https://unpkg.com/@jspsych/plugin-survey@0.2.1"></script>
<script src="jatos.js"></script>
<link href="css_1/jspsych.css" rel = "stylesheet">  


<style>

  .left-aligned {
    text-align:left;
  }
  .jspsych-btn {
margin-bottom: 30px;

}

#jspsych-content {
  width: 95%;
}

</style>

<body> </body>
<script>

    var jsPsych = initJsPsych({
      on_finish: function () {
            var resultJson = jsPsych.data.get().json();
            jatos.endStudy(resultJson, true, "Success!", true)
      },
    });
    timeline = []


//nice buttons
var btn_html = '<button class="jspsych-btn">%choice%</button>'

//final instruction screen: now they can begin
var instructions_final = {
  type: jsPsychHtmlButtonResponse,
  stimulus:'<p>Ottimo! </p><p>Ora inizia l\'esperimento. Ti ricordo che durerà circa 15 minuti.</p> <p> I dati saranno salvati solo cliccando su <b>Finito</b> al termine dell\'esperimento. </p> ',
  choices: ['Next'],
prompt: ""
};

timeline.push(instructions_final)

var trial_real = {
  type: jsPsychHtmlButtonResponse,
  prompt:
    "<p><em>Un parlante nativo di italiano pronuncerebbe questa frase?</em></p>",
   choices: ["1", "2", "3", "4", "5", "6", "7"],
    stimulus: jsPsych.timelineVariable("sentence"),
    button_html: ['<p>Pessima        <button class="jspsych-btn">%choice%</button></p>', btn_html, btn_html, btn_html, btn_html, btn_html, '<p><button class="jspsych-btn">%choice%</button>        Ottima</p>']
};

var trial_real_stimuli = {
timeline: [trial_real],
		  timeline_variables: [
      {sentence:"Lorem ipsum dolor sit amet, consectetur."},
{sentence:"adipiscing elit. Aenean aliquam magna id gravida lobortis. Quisque iaculis lobortis porttitor. Sed facilisis vel nisl in blandit."},
{sentence:"condimentum volutpat velit in ornare. Aliquam et dictum nibh."},
{sentence:"Curabitur commodo ante massa"},
{sentence:"eu euismod ipsum feugiat ac. Cras vel elit nec ipsum scelerisque vulputate sed volutpat"},
{sentence:"Aliquam vulputate lectus eget."},
{sentence:"Maecenas dictum tempor pulvinar. Proin ac tellus sodales, tempor."},
		]};

timeline.push(trial_real_stimuli)


jatos.onLoad(() => {
  jsPsych.run(timeline);
});
    
</script>  
</html>

In the CSS file I just changed to font size:

.jspsych-display-element {
  font-family: 'Open Sans', 'Arial', sans-serif;
  font-size: 20pt;
  line-height: 1.6em;
}

When I run this either on Chrome 's mobile emulator on or my phone, I still have the font problem.

Sorry for the many questions about the same topic... I have never coded before writing this experiment, so it's all quite new to me

(Also, the link I gave you now should have this code. Yesterday I was editing the code on Jatos local)

Shaobin-Jiang Apr 5, 2024

Turns out I've been an idiot... I have been completely focusing on the jsPsych code, assuming that one must be using a generated starting template, and neglected that your html file is not, well, standard. Just forget all that I have said above, about setting max-width and width. You simply need this line after your <meta charset="UTF-8">:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Make this modification in your original code.

In case you are interested how I found out about this, I made a really simplified version of your code, removing all jsPsych from it and instead created a resembling hierarchy with the same styles applied to it. It was then that I realized that the same font size, which I have set to 18px for both pages, does not look the same. The one in your experiment looks a good deal smaller, but only when I am working in an emulator. This reminds me of the viewport thing (for details, you might look here, as it had much to do with mobile devices and would cause the font to look small if not set properly. So I looked up your code, and found it was missing. I added it, and voila, things worked fine.

Answer selected by g-porta

g-porta Apr 5, 2024
Author

Thanks! It worked!

I also changed the font size from pt to vw to make it more responsive, and now things look much better!

Shaobin-Jiang Apr 9, 2024

Check out here in case anyone is wondering why missing viewport might cause this issue.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Font size #3266

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 10 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Font size #3266

g-porta Apr 2, 2024

Replies: 2 comments · 10 replies

Shaobin-Jiang Apr 3, 2024

g-porta Apr 3, 2024 Author

Shaobin-Jiang Apr 3, 2024

g-porta Apr 4, 2024 Author

Shaobin-Jiang Apr 4, 2024

g-porta Apr 4, 2024 Author

Shaobin-Jiang Apr 5, 2024

g-porta Apr 5, 2024 Author

Shaobin-Jiang Apr 9, 2024

g-porta
Apr 2, 2024

Replies: 2 comments 10 replies

Shaobin-Jiang
Apr 3, 2024

g-porta Apr 3, 2024
Author

Shaobin-Jiang
Apr 3, 2024

g-porta Apr 4, 2024
Author

g-porta Apr 4, 2024
Author

g-porta Apr 5, 2024
Author