Solved
How to reduce number of column in multiple choice question in mobile phones?
+6Hi community,
I have a multiple choice question with choices arranged in several columns. It looks great on computers, but unfortunately terrible on devices with small screen sizes. Would anyone know, whether and how to get different number of columns at different devices according to their screen size?
Thanks in advance
Best answer by TomG
@fleb,
The underlying structure of a column MC question is an html table. So, there isn't going to be any magic css that rearranges the columns based on screen size. You would be better off starting with a vertical MC question then use css to arrange into columns based on screen size.
You could use the mobile friendly option under matrix questions. Or if you are looking to hide the columns using display logic: something like if devicetype is not mobile display
+6> @gwrightiv said:
> You could use the mobile friendly option under matrix questions. Or if you are looking to hide the columns using display logic: something like if devicetype is not mobile display
Hi @gwrightiv ,
thank you very much for your answer. However, I don't use matrix question, but multiple choice question. I don't want to hide anything, I just want different layout for the same question depending on the screen size. I think that in using display logic I would have two different question or am I wrong?
Hi @fleb
My bad, I kept reading it as matrix because of the columns. I'm not aware of a way to reduce number of columns without it being a secondary question.
+27@fleb,
The underlying structure of a column MC question is an html table. So, there isn't going to be any magic css that rearranges the columns based on screen size. You would be better off starting with a vertical MC question then use css to arrange into columns based on screen size.
+6Hi @TomG,
thank you very much for your genius answer, I was thinking about my problem in a wrong way. I have never used CSS for styling. I used flex and it works quite nicely, but I have two problems with formatting. It would be great if you'd be able to give me some quick hints how to solve them.
1) I'd like to have the height of `.MultipleAnswer` the same as the height of `.Selection`, but not fixed. `.Selection` has the same height in each row, but particular rows have different height according to its "highest text" (see the image). I really like this, but I didin't found a way how to force `.MultipleAnswer` to act in the same way.
!
2) How to center the text vertically? I've tried `vertical-align: middle;` and `justify-content: center;`, but it didn't help...
The code is here:
Qualtrics.SurveyEngine.addOnload(function()
{
var that = "#"+this.questionId;
var chs = that + " .ChoiceStructure";
var s = that + " .Selection";
var ma = that + " .MultipleAnswer";
jQuery(chs).css("display","flex");
jQuery(chs).css("flex-wrap","wrap");
jQuery(chs).css("justify-content","center");
jQuery(s).css("width","200px");
jQuery(s).css("margin","10px");
jQuery(s).css("border-style","solid");
});
2) How to center the text vertically? I've tried `vertical-align: middle;` and `justify-content: center;`, but it didn't help...
The code is here:
Qualtrics.SurveyEngine.addOnload(function()
{
var that = "#"+this.questionId;
var chs = that + " .ChoiceStructure";
var s = that + " .Selection";
var ma = that + " .MultipleAnswer";
jQuery(chs).css("display","flex");
jQuery(chs).css("flex-wrap","wrap");
jQuery(chs).css("justify-content","center");
jQuery(s).css("width","200px");
jQuery(s).css("margin","10px");
jQuery(s).css("border-style","solid");
});+6So I've finally managed to write some working functions to deal with this. There is still one problem - the height is increasing when user resizes the window by dragging and I have no idea why.
However, I'll share my functions here as inspiration for others:
function addCSS_MC(that){
var Q = "#"+that.questionId;
var chs = Q + " .ChoiceStructure";
var s = Q + " .Selection";
var ma = Q + " .MultipleAnswer";
jQuery(chs).css("display","flex");
jQuery(chs).css("flex-wrap","wrap");
jQuery(chs).css("justify-content","center");
jQuery(s).css("width","222px");
jQuery(s).css("max-height","100px");
jQuery(s).css("margin","0px");
jQuery(s).css("padding","0px");
jQuery(s).css("padding-right","10px");
jQuery(ma).css("padding","10px");
jQuery(ma).css("margin","0px");
}
function updateMCheights (that){
var Q = "#"+that.questionId;
var chs = document.querySelector(Q + ' ul.ChoiceStructure');
var n =chs.getElementsByTagName("Li").length;
document.querySelector(Q + ' li.Selection:nth-child('+n+')').style.height = 58 + "px";
var heights = [];
for (var i = 1; i <= n; i++) {
var el = document.querySelector(Q + ' li.Selection:nth-child('+i+')');
var my_height = el.clientHeight;
heights.push(my_height); }
for (var i = 0; i < n; i++) {
var j = i +1;
var el = document.querySelector(Q + ' li.Selection:nth-child('+j+')');
el.getElementsByClassName("MultipleAnswer")[0].style.height = heights[i] - 10 + "px";}}
function MCillness(that){
var resizeTimer;
addCSS_MC(that);
updateMCheights(that);
window.addEventListener("resize", function(ev){clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
updateMCheights (that);
}, 500)});}
Usage: `MCillness(this);`
+27@fleb,
I've gotten around to implementing responsive columns myself. I experimented with three different approaches: columns, flex, and grid. What I found:
Columns - would have been ideal because it would work with just CSS. Unfortunately, they don't work correctly in Firefox (to the point of sometimes having choices that can't be selected). That was unacceptable.
Flex - As you found, you can't use straight CSS because there isn't a generic way to constrain the height to force the columns to wrap. I found cross-browser height constraint solutions too messy and the resulting format less than ideal.
Grid - This produces the best result, and what I went with. Like flex, you can't use straight CSS due to the need to calculate the number of rows. However, the code is relatively straight-forward compared to flex and the result looks better. The one downside is it is only supported in browser versions from 2017 forward.
Screen shots at different widths:
Wide:
!
Medium:
!
Narrow:
!
Medium:
!
Narrow:
!+6Hi @TomG,
thank you very much for reminding this question and sharing your experience. Would you be willing to share some basic code here when you already have implemented it? I was thinking about implementing this using grid too, however I didn't manage to find out how to do it. (I have never implemented web pages. I'm learning HTML, CSS and JS just because of our surveys.)
+27> @fleb said:
> Hi @TomG,
> thank you very much for reminding this question and sharing your experience. Would you be willing to share some basic code here when you already have implemented it? I was thinking about implementing this using grid too, however I didn't manage to find out how to do it. (I have never implemented web pages. I'm learning HTML, CSS and JS just because of our surveys.)
Grid settings where ul is a jQuery object containing the ul element and rows and cols are variables:
```
ul.css({"display":"grid",
"grid-auto-flow":"column",
"grid-template":"repeat("+rows+", auto) / repeat("+cols+", 1fr)",
"grid-gap":"1px 10px",
"align-items":"center"
});
```
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.