Hello
Can anyone tell me what CSS to add and where so that Multiple Choice radio buttons align horizontally?
I'm using Moodle 3.9 Theme: Boost
Thanks very much in advance!
Hello N W,
The Embedded Answers (Cloze) question type has a multiple choice sub-question type with a horizontal row of radio-buttons (MULTICHOICE_H or MCH).
The Embedded Answers (Cloze) question type has a multiple choice sub-question type with a horizontal row of radio-buttons (MULTICHOICE_H or MCH).
Hello Dominique
Thanks for your reply.
I'm trying to change the display for multichoice question type. This code used to work in older versions of Moodle
.que.multichoice .answer div.r0,
.que.multichoice .answer div.r1 {
padding: 0.3em;
display: inline;
}
but doesn't work in version 3.9.
Do you have any suggestions?
Thanks in advance
I'm trying to change the display for multichoice question type. This code used to work in older versions of Moodle
.que.multichoice .answer div.r0,
.que.multichoice .answer div.r1 {
padding: 0.3em;
display: inline;
}
but doesn't work in version 3.9.
Do you have any suggestions?
Thanks in advance
Hello N W,
It works if, in addition, you remove classes "d-flex w-100" and "flex-fill", which were added recently for formatting purposes only and which can be removed safely (if I am not mistaken):
.d-flex{display:flex!important}
.w-100{width:100%!important}
.flex-fill{flex:1 1 auto!important}
To remove classes, check here or here.
It works if, in addition, you remove classes "d-flex w-100" and "flex-fill", which were added recently for formatting purposes only and which can be removed safely (if I am not mistaken):
.d-flex{display:flex!important}
.w-100{width:100%!important}
.flex-fill{flex:1 1 auto!important}
To remove classes, check here or here.
Hello Dominique
Thanks for taking the time to reply and thank you for your help.
Unfortunately I'm not a programmer and I've no idea how to remove classes in moodle or where to put the removeClass code.
I've modified the CSS styles for multichoice, but that is the limit of my capability!!
.que.multichoice .answer div.r0,
.que.multichoice .answer div.r1 {
display: flex;
margin: 0.25rem 0;
align-items: flex-start;
}
NW
Thanks for taking the time to reply and thank you for your help.
Unfortunately I'm not a programmer and I've no idea how to remove classes in moodle or where to put the removeClass code.
I've modified the CSS styles for multichoice, but that is the limit of my capability!!
.que.multichoice .answer div.r0,
.que.multichoice .answer div.r1 {
display: flex;
margin: 0.25rem 0;
align-items: flex-start;
}
NW
Not trying to be blunt or rude, but it appears that so far, you have two choices:
1) Learn how to do what Dominique suggests.
2) Do not change the layout. Stick with the default appearance.
You might also want to create (or search for one that has been created) a Moodle Tracker item and suggest to add a feature to easily change the arrangement of multiple-choice answers.
1) Learn how to do what Dominique suggests.
2) Do not change the layout. Stick with the default appearance.
You might also want to create (or search for one that has been created) a Moodle Tracker item and suggest to add a feature to easily change the arrangement of multiple-choice answers.
In reply to Rick Jerz
Re: Radio Buttons horizontal in Multiple Choice questions
by Dominique Bauer -
Hello N W,
To arrange the radio buttons horizontally, place the code below either in the text of a question in order to modify all the multiple choice questions on the same page, or in "Site administration / Appearance / Additional HTML / Before BODY is closed" in order to modify
all the multiple choice questions on your site :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { // Arrange the radio buttons horizontally in the core multiple choice question. // The space between choices can be adjusted with the "padding-right"value. $(".que.multichoice .answer .r0").css("display", "inline-block"); $(".que.multichoice .answer .r0").css("padding-right", "15px"); $(".que.multichoice .answer .r0 .d-flex .flex-fill").css("display", "inline-block"); $(".que.multichoice .answer .r0 .d-flex").css("display", "inline-block"); $(".que.multichoice .answer .r0 .d-flex .flex-fill").removeClass("flex-fill"); $(".que.multichoice .answer .r0 .w-100").removeClass("w-100"); $(".que.multichoice .answer .r0 .d-flex").removeClass("d-flex"); $(".que.multichoice .answer .r1").css("display", "inline-block"); $(".que.multichoice .answer .r1").css("padding-right", "15px"); $(".que.multichoice .answer .r1 .d-flex .flex-fill").css("display", "inline-block"); $(".que.multichoice .answer .r1 .d-flex").css("display", "inline-block"); $(".que.multichoice .answer .r1 .d-flex .flex-fill").removeClass("flex-fill"); $(".que.multichoice .answer .r1 .w-100").removeClass("w-100"); $(".que.multichoice .answer .r1 .d-flex").removeClass("d-flex"); }); </script>
The above code is just a workaround. Please consider Rick's other suggestions.
In reply to Dominique Bauer
Re: Radio Buttons horizontal in Multiple Choice questions
by Rick Jerz -
Dominique, I forgot the suggestion to "Wait for Dominique to provide the code." Sorry about that. 😀
There is absolutely no reason for an answer like that. What purpose does it serve? Does it help in any way? No. Saying that you don't mean to be rude or blunt, doesn't change the fact that the comment is rude or blunt.
The purpose of these forums is for people to learn ... not to be told to figure it out yourself, or not try something new. If you don't have anything constructive to add, fine ... but don't belittle a question.
It all takes us time to learn and figure things out ... as you well know as an educator. I myself am still learning moodleformulas, and it is not all trivial, and it is not all as well documented as we would like it to be. To find answers to questions is not always trivial. In fact I wanted to know how to do horizontal radio buttons and that is how I arrived here. On the moodleformulas site it is mentioned, and an example is shown, but no XML code is given. So how are you supposed to figure it out ... you ask.
Don't knock someone down for asking. Instead ... explain how to do it, or better yet post an XML example of how YOU would do horizontal radio buttons in a question. I would really appreciate that.
Thanks for your support Ton!
I must admit I feel that the forum is for Moodle IT administrators rather than struggling teachers. I sense a certain fatigue from the 'experts' when answering 'obvious' questions.
BTW, Dominique's clear explanation and his workaround code works - I sent him a private message thanking him for his help.
I must admit I feel that the forum is for Moodle IT administrators rather than struggling teachers. I sense a certain fatigue from the 'experts' when answering 'obvious' questions.
BTW, Dominique's clear explanation and his workaround code works - I sent him a private message thanking him for his help.
Ton and N W,
Rick Jerz is one of the best moodlers on forums and being rough with younger teachers is definitely not his intention - quite the contrary.
Try to temper your comments that could be interpreted as offensive.
Rick Jerz is one of the best moodlers on forums and being rough with younger teachers is definitely not his intention - quite the contrary.
Try to temper your comments that could be interpreted as offensive.
In reply to Dominique Bauer
Re: Radio Buttons horizontal in Multiple Choice questions
by Ton Boerkoel -
If that is the case: great! But I hope that the last sentence was addressed to Rick Jerz, not to us.
If someone says something inappropriately, or acts unkindly on a forum like this, towards people who are just asking questions, he/she should be made aware of it, whoever it is. When you got snappy with me when I asked a question and suggested improvements, I mentioned that to you too. I understand that answering the same basic questions over and over again might get tiresome. But those basic questions are new to those who just started learning this. It is easy to forget that once you know things they become 'easy', but that when you are not there yet, it is all pretty hard. So if a seasoned forum contributor forgets that we are spending lots of time in our busy schedules trying to master something that is not trivial, and posts something that is not very kind, nor helpful, he or she should take a step back ... and realize "yep, that was not good, sorry".
So back to the question ... I still don't know how to get horizontal radio buttons in a moodleformulas question. I tried the script that you wrote, and inserted it in several places to try if it would work, and it didn't. I realize it might have been just for the cloze type questions. On the Moodleformulas site it gives an example, but no XML file to look at. Can you provide a XML sample problem or direct me to one on the site? Thanks.
If someone says something inappropriately, or acts unkindly on a forum like this, towards people who are just asking questions, he/she should be made aware of it, whoever it is. When you got snappy with me when I asked a question and suggested improvements, I mentioned that to you too. I understand that answering the same basic questions over and over again might get tiresome. But those basic questions are new to those who just started learning this. It is easy to forget that once you know things they become 'easy', but that when you are not there yet, it is all pretty hard. So if a seasoned forum contributor forgets that we are spending lots of time in our busy schedules trying to master something that is not trivial, and posts something that is not very kind, nor helpful, he or she should take a step back ... and realize "yep, that was not good, sorry".
So back to the question ... I still don't know how to get horizontal radio buttons in a moodleformulas question. I tried the script that you wrote, and inserted it in several places to try if it would work, and it didn't. I realize it might have been just for the cloze type questions. On the Moodleformulas site it gives an example, but no XML file to look at. Can you provide a XML sample problem or direct me to one on the site? Thanks.
In reply to Dominique Bauer
Re: Radio Buttons horizontal in Multiple Choice questions
by Rick Jerz -
I am a professor, not an IT admin And I am not affiliated with the Moode organization in any way. And I too struggle to get Moodle to do things as I prefer. I agree, it's not trivial. It's a never-ending job.
Actually, N W did what I suggested in #2 reported that it works. Great, N W!
Dominque goes beyond the call of duty quite often and continues to amaze me.
Someone can still see if Tracker has a feature request for this, and if not, create one.
Tom, no offense taken by your posts and no offense intended by mine. Please accept my apology. I understand your frustration. I did not intend to be rough with (newer) teachers (thanks, Dominique for your kind words.)
Tom, I am not sure if the code that Dominque provided is only for the Boost theme, and I don't see you mentioning what theme you have. Sometimes these kinds of code suggestions will not work in some themes. N W does mention that he is using Moodle 3.9 Theme: Boost. How about you?
Actually, N W did what I suggested in #2 reported that it works. Great, N W!
Dominque goes beyond the call of duty quite often and continues to amaze me.
Someone can still see if Tracker has a feature request for this, and if not, create one.
Tom, no offense taken by your posts and no offense intended by mine. Please accept my apology. I understand your frustration. I did not intend to be rough with (newer) teachers (thanks, Dominique for your kind words.)
Tom, I am not sure if the code that Dominque provided is only for the Boost theme, and I don't see you mentioning what theme you have. Sometimes these kinds of code suggestions will not work in some themes. N W does mention that he is using Moodle 3.9 Theme: Boost. How about you?
Hi Rick,
Thanks for your reply, I appreciate it!. My school is still not using the current Moodle version. I think they are using Version 3.1.5. but they tell me they are working their way up to the newest version.
I don't know how to get horizontal radio buttons in the moodleformulas. Do you have a sample problem where you got it working? There is an example on the moodleformulas.org website, but it doesn't include an XML.
Right now I am generating a database of question for my Linear Algebra class. I learned a lot in the past two months. I have been working on this nearly full time. I have been trying to create most of the type of questions I need. But I still have many questions about moodleformulas and other Qtypes.
Anyway if you have an XLM example that would be great.
Thanks,
By the way, my name is really Ton (not Tom)
Sorry about the "Tom," Ton.
If your questions are about the Formulas question type, which is a plugin, then Dominique is the one to help. From what I know, he is the developer of this plugin. I don't use the Formulas question plugin, yet, so I have no example. Perhaps N W can post before and after screenshots showing his results.
I think N W's question was about the built-in Multiple Choice question type. From what I can see, a solution to N W's need was satisfied with the solution that Dominique provided. Since your school is on an old version of Moodle, I have no idea if Dominque's code will work. Most programmers, I believe, prefer to be working on improvements to the current or new Moodle than on improvements to old versions of Moodle. Moodle 3.1 happened back in 2017. Yes, time to upgrade.
You have probably already imported T/F, Mulitple Choice, and Fill-in-the-Blank questions for your textbook's question bank. If not, explore this. It's a lot easier than creating questions from scratch.
Somewhere along the way, Moodle now allows the ability to export a single question, in Moodle XML format. But I think that you might need Moodle 3.9 for this feature. Maybe N W, or Dominque, will post an example.
Be a little careful about using plugin question types. Sometimes they die due to developers spending their time on other things in life. The Formulas question type, as I recently recall seeing, has been around for 10 years. And Dominque is very active with Moodle.
Moodle has the most powerful quiz engine of all major LMSs, so you are in the right place.
If your questions are about the Formulas question type, which is a plugin, then Dominique is the one to help. From what I know, he is the developer of this plugin. I don't use the Formulas question plugin, yet, so I have no example. Perhaps N W can post before and after screenshots showing his results.
I think N W's question was about the built-in Multiple Choice question type. From what I can see, a solution to N W's need was satisfied with the solution that Dominique provided. Since your school is on an old version of Moodle, I have no idea if Dominque's code will work. Most programmers, I believe, prefer to be working on improvements to the current or new Moodle than on improvements to old versions of Moodle. Moodle 3.1 happened back in 2017. Yes, time to upgrade.
You have probably already imported T/F, Mulitple Choice, and Fill-in-the-Blank questions for your textbook's question bank. If not, explore this. It's a lot easier than creating questions from scratch.
Somewhere along the way, Moodle now allows the ability to export a single question, in Moodle XML format. But I think that you might need Moodle 3.9 for this feature. Maybe N W, or Dominque, will post an example.
Be a little careful about using plugin question types. Sometimes they die due to developers spending their time on other things in life. The Formulas question type, as I recently recall seeing, has been around for 10 years. And Dominque is very active with Moodle.
Moodle has the most powerful quiz engine of all major LMSs, so you are in the right place.
Incidentally, if you want to get a jump on what your school is planning for upgrades, you can always install the current Moodle on your computer, in a Sandbox. Then you can experiment as much as you want.
In reply to Rick Jerz
Re: Radio Buttons horizontal in Multiple Choice questions
by Dominique Bauer -
Rick,
Thanks for your posts. You do things that I will never be able to do, even if I try, and you all have my respect.
Ton,
I would like to mention that I too am a teacher, not in IT, that I am not an IT administrator, that I am in no way affiliated with Moodle.org. In short, that I am just an ordinary user like you.
I created the moodleformulas.org site to help fellow teachers like you. The site is far from perfect, I agree, but I hope that it still has some use. I work on it regularly to improve it. I also have my share of frustration. I don't always have the time to devote myself to it as I would like. Recently all of my MathML equations have gone haywire and are showing incorrectly. I haven't figured out why yet. All people are busy and it is becoming rare to find help.
I am not a developer either. The solutions I offer are mostly "user" workarounds to help other users. Some have certain values as they are, but others are just temporary fixes until improvements are made to the question code.
Jean-Michel Védrine was the previous maintainer. For ten years he did all the updates and upgrades and made many improvements to the code. I took over the role of maintainer because Jean-Michel retired and, for a year and a half, even the basic updates had not been made. I should be able to take on this role properly. To do this, I will have to invest more time in code development and therefore devote less time to the forum. There are several improvements that I personally would like to see happen.
Anyway, coming back to your question, by defaut the radio buttons don't display horizontally in the Formulas question. I could modify the PHP code of the question to do so or offer you a temporary solution in JavaScript. The last choice is faster. The solution I proposed above for the core multiple choice question should be applicable to the formulas multiple choice question with minor modifications. I don't remember having done it yet, but I may have forgotten. You are talking about an example without an XML file. I don't know which example you're talking about, could you point me to the page it's on?
Thanks for your posts. You do things that I will never be able to do, even if I try, and you all have my respect.
Ton,
I would like to mention that I too am a teacher, not in IT, that I am not an IT administrator, that I am in no way affiliated with Moodle.org. In short, that I am just an ordinary user like you.
I created the moodleformulas.org site to help fellow teachers like you. The site is far from perfect, I agree, but I hope that it still has some use. I work on it regularly to improve it. I also have my share of frustration. I don't always have the time to devote myself to it as I would like. Recently all of my MathML equations have gone haywire and are showing incorrectly. I haven't figured out why yet. All people are busy and it is becoming rare to find help.
I am not a developer either. The solutions I offer are mostly "user" workarounds to help other users. Some have certain values as they are, but others are just temporary fixes until improvements are made to the question code.
Jean-Michel Védrine was the previous maintainer. For ten years he did all the updates and upgrades and made many improvements to the code. I took over the role of maintainer because Jean-Michel retired and, for a year and a half, even the basic updates had not been made. I should be able to take on this role properly. To do this, I will have to invest more time in code development and therefore devote less time to the forum. There are several improvements that I personally would like to see happen.
Anyway, coming back to your question, by defaut the radio buttons don't display horizontally in the Formulas question. I could modify the PHP code of the question to do so or offer you a temporary solution in JavaScript. The last choice is faster. The solution I proposed above for the core multiple choice question should be applicable to the formulas multiple choice question with minor modifications. I don't remember having done it yet, but I may have forgotten. You are talking about an example without an XML file. I don't know which example you're talking about, could you point me to the page it's on?
In reply to Dominique Bauer
Re: Radio Buttons horizontal in Multiple Choice questions
by Dominique Bauer -
Rick,
N W does mention that he is using...
According to the profile, N W is Nyree Williams. Nyree is usually a woman's name, so it should probably be N W does mention that she is using...
N W does mention that he is using...
According to the profile, N W is Nyree Williams. Nyree is usually a woman's name, so it should probably be N W does mention that she is using...
In reply to Dominique Bauer
Re: Radio Buttons horizontal in Multiple Choice questions
by Dominique Bauer -
Ton,
If you will allow me, I would like to give you a kind suggestion.
Avoid bold type in your posts. The reader is able to read all the words even in ordinary characters.
The problem is that the bold type can sometimes make you look like you are raising your tone. We wonder then if you are angry or impatient. There is no body language in the posts. So it's generally recommended not to use words in capital letters and
perhaps bold type as you do.
If you will allow me, I would like to give you a kind suggestion.
Avoid bold type in your posts. The reader is able to read all the words even in ordinary characters.
Author: Davidvraju (_cropped.jpg)
)
)The dhole is listed as endangered by the International Union for Conservation of Nature (IUCN) as populations are decreasing and are estimated at fewer than 2,500 adults. Factors contributing to this decline include habitat loss, loss of prey, competition
with other species, persecution due to livestock predation and disease transfer from domestic dogs. (Ref. Wikipedia)
In reply to Dominique Bauer
Re: Radio Buttons horizontal in Multiple Choice questions
by Ton Boerkoel -
Believe me I appreciate all your contributions. I'd be happy to contribute too, but I have to learn much more first.
About the horizontal radio buttons: I went to moodleformulas.org.; one of the items under Home (in the column on the left) is multiple choice; when I click that, a menu with 4 items appears (on the right); the last item is 'horizontal radio button'; it gives an example without XML.
But I guess that item is strictly speaking not part of the Qtype formulas.
About the horizontal radio buttons: I went to moodleformulas.org.; one of the items under Home (in the column on the left) is multiple choice; when I click that, a menu with 4 items appears (on the right); the last item is 'horizontal radio button'; it gives an example without XML.
But I guess that item is strictly speaking not part of the Qtype formulas.
Ton (and others), I will ask a question about this horizontal button arrangement that I don't understand. Let's say a student is doing the quiz from their small and narrow smartphone. What happens if answers are laid out horizontally?
For example, Below is a question shown vertically, and my understanding of what a horizontal layout might appear. The horizontal layout is hard to read, isn't it? Might it be that your multiple choices are all very short answers?
For example, Below is a question shown vertically, and my understanding of what a horizontal layout might appear. The horizontal layout is hard to read, isn't it? Might it be that your multiple choices are all very short answers?
Here it is vertically...
When a class interval is expressed as 100 up to 200, _________________________.
Select one:
a. Observations with values of 100 are excluded from the class
b. Observations with values of 200 are included in the class
c. The class interval is 99
d. Observations with values of 200 are excluded from the class
Here it is horizontally...
When a class interval is expressed as 100 up to 200, _________________________.
Select one:
a. Observations with values of 100 are excluded from the class. b. Observations with values of 200 are included in the class. c. The class interval is 99. d. Observations with values of 200 are excluded from the class
When a class interval is expressed as 100 up to 200, _________________________.
Select one:
a. Observations with values of 100 are excluded from the class. b. Observations with values of 200 are included in the class. c. The class interval is 99. d. Observations with values of 200 are excluded from the class
In reply to Rick Jerz
Re: Radio Buttons horizontal in Multiple Choice questions
by Dominique Bauer -
Rick,
I guess the persons asking for horizontal radio buttons have a good reason for wanting to use them and I just try to help them. As you say, obviously radio buttons only lend themselves to short answers.
I think the Formulas question cannot be used on the Moodle app, as many other third-party question types, so the problem does not arise. However, the script is fairly straightforward JavaScript and the answers behave in a responsive fashion, at least on a desktop computer, i.e. the answer choices rearrange themselves vertically as you reduce the window size.
Ton,
The workaround is to simply include a short script in the HTML of the question text. Here's what is looks like:
I guess the persons asking for horizontal radio buttons have a good reason for wanting to use them and I just try to help them. As you say, obviously radio buttons only lend themselves to short answers.
I think the Formulas question cannot be used on the Moodle app, as many other third-party question types, so the problem does not arise. However, the script is fairly straightforward JavaScript and the answers behave in a responsive fashion, at least on a desktop computer, i.e. the answer choices rearrange themselves vertically as you reduce the window size.
Ton,
The workaround is to simply include a short script in the HTML of the question text. Here's what is looks like:
You can try it at https://moodleformulas.org/course/view.php?id=22§ion=19 ↗ (last example at the bottom of the page)
In reply to Dominique Bauer
Re: Radio Buttons horizontal in Multiple Choice questions
by Rick Jerz -
You bring up a good point, Dominique, which I have never thought about, that one must be careful about plugins that might not work on the Moodle App.
I was thinking more about using Moodle through the smartphone's browser. My guess is that a smartphone's browser would support the Forumula question-type, right?
Yep, your example perfectly illustrates where a horizontal display works well, whereas my example might show when it does not. In "responsive" web pages, when something (like a horizontal table) doesn't fit in the width of the screen, the technique is to automatically switch to a vertical arrangement. This would probably be a little tricky to do for questions, but should be possible. No, I am not asking you to do this, just pointing it out as a possible solution.
And yep, we sometimes do things without asking why, but I was just thinking that there could be problems with some of these ideas in that they will not work on student's smartphones.
Well, Ton has some things to think about. Thanks for the discussion.
I was thinking more about using Moodle through the smartphone's browser. My guess is that a smartphone's browser would support the Forumula question-type, right?
Yep, your example perfectly illustrates where a horizontal display works well, whereas my example might show when it does not. In "responsive" web pages, when something (like a horizontal table) doesn't fit in the width of the screen, the technique is to automatically switch to a vertical arrangement. This would probably be a little tricky to do for questions, but should be possible. No, I am not asking you to do this, just pointing it out as a possible solution.
And yep, we sometimes do things without asking why, but I was just thinking that there could be problems with some of these ideas in that they will not work on student's smartphones.
Well, Ton has some things to think about. Thanks for the discussion.
In reply to Dominique Bauer
Re: Radio Buttons horizontal in Multiple Choice questions
by Rick Jerz -
Oops, I messed up by not seeing who N W is. Incidentally, my photo and my name do suggest that I am a guy, which I am. 👨 But, you really never know. (Sorry Nyree.)