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?
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:
- 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.
- 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
In reply to Dani Palou
回复: Re: How to adjust the font size of quiz in Moodle mobile app
by Mary Shen -
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.
In reply to Dani Palou
回复: Re: How to adjust the font size of quiz in Moodle mobile app
by Mary Shen -
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;
}
In reply to Mary Shen
Re: 回复: Re: How to adjust the font size of quiz in Moodle mobile app
by Dani Palou -
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.
In reply to Dani Palou
Re: 回复: Re: How to adjust the font size of quiz in Moodle mobile app
by Arabinda P -
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
In reply to Arabinda P
Re: 回复: Re: How to adjust the font size of quiz in Moodle mobile app
by Dani Palou -
Hello,
there are 2 problems in your CSS rule:
- ion-content is the name of the tag, not a class, so you need to remove the "."
- 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
In reply to Dani Palou
Re: 回复: Re: How to adjust the font size of quiz in Moodle mobile app
by Arabinda P -
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
In reply to Arabinda P
Re: 回复: Re: How to adjust the font size of quiz in Moodle mobile app
by Dani Palou -
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
In reply to Dani Palou
Re: 回复: Re: How to adjust the font size of quiz in Moodle mobile app
by Arabinda P -
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
In reply to Arabinda P
Re: 回复: Re: How to adjust the font size of quiz in Moodle mobile app
by Dani Palou -
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
In reply to Dani Palou
Re: 回复: Re: How to adjust the font size of quiz in Moodle mobile app
by Arabinda P -
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.
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
In reply to Arabinda P
Re: 回复: Re: How to adjust the font size of quiz in Moodle mobile app
by Dani Palou -
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:
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
In reply to Mary Shen
Re: How to adjust the font size of quiz in Moodle mobile app
by Sarvendra Vashistha -
I am saying that change font size in windows is not easy and help you out from such things.