Moodle for mobile

How to adjust the font size of quiz in Moodle mobile app

 
Picture of Mary Shen
How to adjust the font size of quiz in Moodle mobile app
 

I added a quiz in my Moodle 3.2.1, and the font size look good in web. However, it is much smaller in Moodle Mobile app. Is there a way to make the font size bigger?

 
Average of ratings: -
Picture of Dani Palou
Re: How to adjust the font size of quiz in Moodle mobile app
Core developersMoodle HQParticularly helpful MoodlersPlugin developers

Hi Mary,

this is something that will be studied by our UX team. Using a bigger font-size can make the rest of the styles of the app look bad. We have an open issue for this:

https://tracker.moodle.org/browse/MOBILE-2050

There are 2 ways to fix this in your site:

  1. Use a remote theme (see this documentation). I recommend you to apply the changes only in the quiz player, you can use the class mm-site_mod_quiz-player to do so.

  2. Use inline styles to force the font-size. That is, edit the HTML code and do something like:

    <h4 style="font-size:16px;">My text</h4>

    The problem is that you need to apply this to ALL elements where you want to force the font-size, so it can be annoying if you have a lot of text.

Kind regards,

Dani

 
Average of ratings: -
Picture of Mary Shen
回复: Re: How to adjust the font size of quiz in Moodle mobile app
 

Hi Dani,


Thank you so much for the information. I want to try the first way, as for the second way, it will affect the font size in Web as well.


Can you please give me an example on how to write the CSS file to adjust the font of class mm-site_mod_quiz-player ? and also where I can save the file on moodle server? Thanks.

 
Average of ratings: -
Picture of Mary Shen
回复: Re: How to adjust the font size of quiz in Moodle mobile app
 

Will this work? Can I just put this css file to any folder of Moodle, and past the link into the Moodle mobile appearance?

mm-site_mod_quiz-player {
   font-size:20px;
 }

 
Average of ratings: -
Picture of Dani Palou
Re: 回复: Re: How to adjust the font size of quiz in Moodle mobile app
Core developersMoodle HQParticularly helpful MoodlersPlugin developers

Hello Mary,

that rule you posted would affect all the texts in the quiz player, and that's not what we want. Also, since CSS rules have priorities (more specific rules have more priority), it probably won't be applied to most texts.

You should use more specific rules, something like:

ion-content.site_mod_quiz-player h3 {
    font-size: 20px;
}

To apply it, it's as you said. You upload it to your Moodle site and then paste the link in Mobile appearance  > mobilecssurl.

 
Average of ratings: -
Picture of Arabinda P
Re: 回复: Re: How to adjust the font size of quiz in Moodle mobile app
 

Hi,

I had the same issue, and I applied this change for Quiz Font, but I don't see any increase in Font Size. Please guide me. Below is my Custom CSS in "mobilecssurl"

-----------------------------------------------------

/* Un-comment the following, for initial RTL UI support.

.scroll-content {

   direction: rtl; 

   text-align: right;

}

*/

 .bar-side-menu {

   background-color: black;

 }

 .bar-content {

   background-color: black;

 }

 .button.button-positive {

   border-color: red;

   background-color: red;

    color: #fff;

 } 

 .item-divider {

   background-color: #fafafa;

 }

.ion-content.site_mod_quiz-player h3 {

    font-size: 30px;

}

-------------------------------------------------------


Thank you

Arabinda

 
Average of ratings: -
Picture of Dani Palou
Re: 回复: Re: How to adjust the font size of quiz in Moodle mobile app
Core developersMoodle HQParticularly helpful MoodlersPlugin developers

Hello,

there are 2 problems in your CSS rule:

  1. ion-content is the name of the tag, not a class, so you need to remove the "."
  2. The state class is "mm-site_mod_quiz-player", not "site_mod_quiz-player".

So the rule needs to be:

ion-content.mm-site_mod_quiz-player h3 {

    font-size: 30px;

}

Cheers,

Dani

 
Average of ratings: -
Picture of Arabinda P
Re: 回复: Re: How to adjust the font size of quiz in Moodle mobile app
 
Thank you, Dani.

I tried the change. And it didn;t work.

The Quiz question MCQ choices were still old Font Size.

To aggravate the situation, I made it as follows change font size=60px

ion-content.mm-site_mod_quiz-player h3 {

    font-size: 60px;

}

I tested the other extreme. FOnt size= 5px.

ion-content.mm-site_mod_quiz-player h3 {

    font-size: 5px;

}

I saved the CSS file.

I refreshed the Quiz page in Mobile App.

Still, it is the same thing. It is not increasing or decreasing font size on my Custom App

Do I have to do any other changes? Am I missing something here?

Please guide me.

Regards
Arabinda

 
Average of ratings: -
Picture of Dani Palou
Re: 回复: Re: How to adjust the font size of quiz in Moodle mobile app
Core developersMoodle HQParticularly helpful MoodlersPlugin developers

Hello,

the previous CSS rule will only apply to <h3> elements, make sure that's what you really want to do.

Also, the remote theme doesn't update when you refresh the quiz page, that only refreshes the data displayed. To refresh the styles, restart the app or perform a login/logout in the site, that way the remote styles in the app should be updated.

Cheers,

Dani

 
Average of ratings: -
Picture of Arabinda P
Re: 回复: Re: How to adjust the font size of quiz in Moodle mobile app
 

Thank you Dani.

How do I know what is the current  font setting 

For Quiz Questions? h2,h3,h4?


Then I can try new font.

Please  guide me 

Best wishes 

Arabinda 

 
Average of ratings: -
Picture of Dani Palou
Re: 回复: Re: How to adjust the font size of quiz in Moodle mobile app
Core developersMoodle HQParticularly helpful MoodlersPlugin developers

The HTML used inside a quiz question depends on the teacher that created the question. You can see the HTML by editing the question in Moodle web and using this button in the Atto editor:


If you want to check the elements outside of the question text, then you need to run the app in a browser to inspect the DOM. Please take a look at this presentation, specially the slide 5:

https://www.slideshare.net/DaniPalouSala/creating-moodle-mobile-remote-themes-moodle-moot-us-2016

Cheers,

Dani

 
Average of ratings: -
Picture of Arabinda P
Re: 回复: Re: How to adjust the font size of quiz in Moodle mobile app
 

Hi Dani,

I edited the Quiz, Went to Quiz Answer Text using Atto editor

And clicked on below symbol. Where it will show me the "h3/h4" element being used?

I couldn't see anything there.

Screen%20Shot%202017-06-21%20at%2008.19.10.png

Please help me with the Font Setting for Quiz Answer Choices in Mobile.

It is small in Mobile and will not be much usable. 

Also, I want to make the Quiz Background color to White for all Answer choices.

Also, I want to give Solid Borders for all answer choices. 
How to achieve these in Moodle Mobile Custom CSS?

Appreciate your help.

Thank  you

Arabinda



 
Average of ratings: -
Picture of Dani Palou
Re: 回复: Re: How to adjust the font size of quiz in Moodle mobile app
Core developersMoodle HQParticularly helpful MoodlersPlugin developers

Hi,

clicking that button will show the HTML code of your answer. If the answer is empty, nothing will be shown. If you have entered some content, then you should see the HTML code of that content, something like this:

screenshot

If you don't use headers, then you won't see h3/h4.

To customize the quiz screen using a remote CSS, I recommend you to use the webapp (in Chrome or Chromium) to inspect the elements you want to customize, and then write the CSS rules you need. As I said in another post, I suggest you to add "ion-content.mm-site_mod_quiz-player" to all your rules to apply them only in the quiz player.

If you want to customize the app using a remote theme I recommend you to take a look at the presentation I linked in another post in this thread.

Kind regards,

Dani

 
Average of ratings: -