I also had to fix this issue for a client. For now i managed it this way:
First I enabled template view overrides, as described on (scroll to the bottom!):
www.limesurvey.org/manual/The_template_e...ws_.28version_2.5.29
I placed the override for (in my case) the array type question to:
/upload/templates/ergooptima/views/survey/questions/arrays/array/no_dropdown/rows/cells/answer_td.php
Next i added a <span> with class show-mobile in the label (that was empty), and added some comment tags around the piece of code that normally only was displayed on the mobile view (and when page was opened/refreshed in the mobile view).
Code:
<?php
/**
* Array, no drop down
* @var $label
* @var $ld
* @var $myfname
* @var $ld
* @var $CHECKED
* @var $checkconditionFunction
*/
?>
<!-- answer_td -->
<td data-bs-title='<?php echo $label;?>' class="answer-cell-3 answer_cell_<?php echo $ld;?> answer-item radio-item text-center radio">
<input
class="radio"
type="radio"
name="<?php echo $myfname;?>"
value="<?php echo $ld; ?>"
id="answer<?php echo $myfname;?>-<?php echo $ld; ?>"
<?php echo $CHECKED; ?>
onclick="<?php echo $checkconditionFunction; ?>(this.value, this.name, this.type)"
aria-labelledby="label-answer<?php echo $myfname;?>-<?php echo $ld; ?>"
/>
<label for="answer<?php echo $myfname;?>-<?php echo $ld; ?>" ><span class="show-mobile"><?php echo $label;?></span></label>
<!--
The label text is provided inside a div,
so final user can add paragraph, div, or whatever he wants in the subquestion text
This field is related to the input thanks to attribute aria-labelledby
-->
<?php /*
<div class="label-text" id="label-answer<?php echo $myfname;?>-<?php echo $ld; ?>">
<?php echo $label;?>
</div>
*/ ?>
</td>
<!-- end of answer_td -->
After that I added some javascript to the survey's JS file. For convenience I added a separate javascript file in my template. Even when this is my own template (based on a default template of limesurvey), for whatever future update reason! But you can also place this somewhere else.
Code:
var windowWidth = 0;
function showHideMobileDesktop(onload) {
// Run when page loaded
if(onload == 1) {
if(windowWidth > 820) {
jQuery('.show-desktop').show();
jQuery('.show-mobile').hide();
} else {
jQuery('.show-desktop').hide();
jQuery('.show-mobile').show();
}
}
// Switch from desktop to mobile
if (windowWidth > 802 && jQuery(window).width() < 802) {
jQuery('.show-desktop').hide();
jQuery('.show-mobile').show();
}
// Switch from mobile to desktop
if (windowWidth < 802 && jQuery(window).width() > 802) {
jQuery('.show-desktop').show();
jQuery('.show-mobile').hide();
}
}
After that you can call this function onload and onresize:
Code:
$(document).ready(function()
{
windowWidth = jQuery(window).width();
showHideMobileDesktop(1);
});
$(window).resize(function() {
showHideMobileDesktop(0);
windowWidth = jQuery(window).width();
});
It would be nicer if we could just use standard bootstrap classes (visible-xs, visible-sm, etc). But we are not dealing with a default bootstrap width, since the switch from desktop to mobile and visa versa is on 802px.
Hope I can help someone with this, and ofcourse you can use this technique for the other array question types!
Topic Author
