- Posts: 19
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Center the selection box on a radius and multiple question.
- Vic1107
- Topic Author
- Offline
- New Member
Less
More
7 months 1 day ago #250717
by Vic1107
Center the selection box on a radius and multiple question. was created by Vic1107
Please help us help you and fill where relevant:
Your LimeSurvey version: [see right hand bottom of your LimeSurvey admin screen]
Own server or LimeSurvey hosting:
Survey theme/template:
==================
(Write here your question/remark)
Hello everyone, I hope you are fine.
I would like to ask if there is any way to move the selection circle for a radio question and multiple choice questions.
It happens that I am showing images in a question but I feel that the participant may be confused by the position of this selection circle (on the left). I would like to know if there is any way to make it centered, that is, above each image.
I know there is a select image option in my version 4.25 but I actually want this selection box to be displayed so the participant is sure they are selecting their correct option.
Does anyone know if this is possible?
Thank you very much in advance
Your LimeSurvey version: [see right hand bottom of your LimeSurvey admin screen]
Own server or LimeSurvey hosting:
Survey theme/template:
==================
(Write here your question/remark)
Hello everyone, I hope you are fine.
I would like to ask if there is any way to move the selection circle for a radio question and multiple choice questions.
It happens that I am showing images in a question but I feel that the participant may be confused by the position of this selection circle (on the left). I would like to know if there is any way to make it centered, that is, above each image.
I know there is a select image option in my version 4.25 but I actually want this selection box to be displayed so the participant is sure they are selecting their correct option.
Does anyone know if this is possible?
Thank you very much in advance
Please Log in to join the conversation.
- Joffm
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12944
- Thank you received: 3979
7 months 1 day ago #250729
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Center the selection box on a radius and multiple question.
Hi,
Here the "image-select"
I really do not see why participants couldn't be sure to select the option the want to select.
Now, trhe version you mentiened (4.25) never existed.
There is a release 4.3.25 from Nov 4, 2020.
And because version 4.x. started a bit clumpsy there were some new release candidates of 4.4.x.
Nevertheless, the "image-select" option seems still to be broken in version 5.x.
So either you update to the actual version 6.x. where the "image-select" works.
Or you may follow this thread to create a table in the question text of an "array" question and move the radio buttons into it.
[url] forums.limesurvey.org/index.php/forum/de...swer?start=24#232590 [/url]
Here an adapted example
This code in the source code of the question
At first "the table"
The script to insert the buttons
And some css
You may adapt to your needs.
Joffm
Here the "image-select"
I really do not see why participants couldn't be sure to select the option the want to select.
Now, trhe version you mentiened (4.25) never existed.
There is a release 4.3.25 from Nov 4, 2020.
And because version 4.x. started a bit clumpsy there were some new release candidates of 4.4.x.
Nevertheless, the "image-select" option seems still to be broken in version 5.x.
So either you update to the actual version 6.x. where the "image-select" works.
Or you may follow this thread to create a table in the question text of an "array" question and move the radio buttons into it.
[url] forums.limesurvey.org/index.php/forum/de...swer?start=24#232590 [/url]
Here an adapted example
This code in the source code of the question
At first "the table"
Code:
<table align="center" border="1" cellpadding="5" cellspacing="3" class="table table-responsive" style="width:1100px"> <tbody> <tr> <td class="td0 lightgreen" colspan="6">Please, select one of the images</td> </tr> <tr style="height:80px;"> <td class="td0 center yellow"><img class="img-responsive center-block" src="https://www.myServer.de/userfiles/Hamburg-Ballett_02.jpg" /></td> <td class="td0 center yellow"><img class="img-responsive center-block" src="https://www.myServer.de/userfiles/Hamburg-Ballett_03.jpg" /></td> <td class="td0 center yellow"><img class="img-responsive center-block" src="https://www.myServer.de/userfiles/Hamburg-Ballett_04.jpg" /></td> <td class="td0 center yellow"><img class="img-responsive center-block" src="https://www.myServer.de/userfiles/Hamburg-Ballett_05.jpg" /></td> <td class="td0 center yellow"><img class="img-responsive center-block" src="https://www.myServer.de/userfiles/Hamburg-Ballett_06.jpg" /></td> <td class="td0 center yellow"><img class="img-responsive center-block" src="https://www.myServer.de/userfiles/Hamburg-Ballett_07.jpg" /></td> </tr> <tr style="height:80px;"> <td class="td0 center yellow"><img class="img-responsive center-block" src="https://www.myServer.de/userfiles/Hamburg-Ballett_08.jpg" /></td> <td class="td0 center yellow"><img class="img-responsive center-block" src="https://www.myServer.de/userfiles/Hamburg-Ballett_09.jpg" /></td> <td class="td0 center yellow"><img class="img-responsive center-block" src="https://www.myServer.de/userfiles/Hamburg-Ballett_10.jpg" /></td> <td class="td0 center yellow"><img class="img-responsive center-block" src="https://www.myServer.de/userfiles/Hamburg-Ballett_16.jpg" /></td> <td class="td0 center yellow"><img class="img-responsive center-block" src="https://www.myServer.de/userfiles/Hamburg-Ballett_12.jpg" /></td> <td class="td0 center yellow"><img class="img-responsive center-block" src="https://www.myServer.de/userfiles/Hamburg-Ballett_13.jpg" /></td> </tr> </tbody> </table>
The script to insert the buttons
Code:
<script type="text/javascript" charset="utf-8"> $(document).on('ready pjax:scriptcomplete',function(){ // Identify this question var thisQuestion = $('#question{QID}'); // Move the radios $('.question-text table:eq(0) tr:eq(1) td:eq(0)', thisQuestion).prepend($('.subquestion-list .answers-list:eq(0) .answer-item:eq(0) *', thisQuestion)); $('.question-text table:eq(0) tr:eq(1) td:eq(1)', thisQuestion).prepend($('.subquestion-list .answers-list:eq(0) .answer-item:eq(1) *', thisQuestion)); $('.question-text table:eq(0) tr:eq(1) td:eq(2)', thisQuestion).prepend($('.subquestion-list .answers-list:eq(0) .answer-item:eq(2) *', thisQuestion)); $('.question-text table:eq(0) tr:eq(1) td:eq(3)', thisQuestion).prepend($('.subquestion-list .answers-list:eq(0) .answer-item:eq(3) *', thisQuestion)); $('.question-text table:eq(0) tr:eq(1) td:eq(4)', thisQuestion).prepend($('.subquestion-list .answers-list:eq(0) .answer-item:eq(4) *', thisQuestion)); $('.question-text table:eq(0) tr:eq(1) td:eq(5)', thisQuestion).prepend($('.subquestion-list .answers-list:eq(0) .answer-item:eq(5) *', thisQuestion)); $('.question-text table:eq(0) tr:eq(2) td:eq(0)', thisQuestion).prepend($('.subquestion-list .answers-list:eq(0) .answer-item:eq(6) *', thisQuestion)); $('.question-text table:eq(0) tr:eq(2) td:eq(1)', thisQuestion).prepend($('.subquestion-list .answers-list:eq(0) .answer-item:eq(7) *', thisQuestion)); $('.question-text table:eq(0) tr:eq(2) td:eq(2)', thisQuestion).prepend($('.subquestion-list .answers-list:eq(0) .answer-item:eq(8) *', thisQuestion)); $('.question-text table:eq(0) tr:eq(2) td:eq(3)', thisQuestion).prepend($('.subquestion-list .answers-list:eq(0) .answer-item:eq(9) *', thisQuestion)); $('.question-text table:eq(0) tr:eq(2) td:eq(4)', thisQuestion).prepend($('.subquestion-list .answers-list:eq(0) .answer-item:eq(10) *', thisQuestion)); $('.question-text table:eq(0) tr:eq(2) td:eq(5)', thisQuestion).prepend($('.subquestion-list .answers-list:eq(0) .answer-item:eq(11) *', thisQuestion)); // Some classes for presentation $('.question-text table:eq(0) input:radio', thisQuestion).closest('td').addClass('answer-item radio-item text-center radio'); $('.question-text table:eq(0) .radio-item label', thisQuestion).show(); // Click event on the table cells $('.question-text table:eq(0) .radio-item', thisQuestion).on('click', function(e) { $('input:radio', this).trigger('click'); }); $('.question-text table:eq(0) input:radio', thisQuestion).on('click', function(e) { e.stopPropagation(); }); // Clean-up styles $('.answer-container', thisQuestion).hide(); $('.question-text table:eq(0) .label-text', thisQuestion).remove(); $('.question-text table:eq(0) .radio-text', thisQuestion).css({ 'cursor': 'pointer' }); $('td.radio', thisQuestion).css({ 'display': 'table-cell', 'padding': '3px' }); }); </script> <style type="text/css">/* classes to display the form */ .dir-ltr .radio-item .ls-label-xs-visibility, .dir-ltr .checkbox-item .ls-label-xs-visibility { left: auto; margin-left: 0px; }
And some css
Code:
.td0 { text-align: left; vertical-align: middle; font-size:13px; color:black; padding-top:5px; padding-bottom:5px; border-left:0; border-right:0; } .lightgreen { background-color: mediumseagreen; } .yellow { background-color: #ffe699; } .center { text-align: center; } /* classes to change the size of radios */ .radio-item .ls-label-xs-visibility { width: 30px; height: 30px; } .radio-item label { padding-left: 25px; padding-top: 3px; } .radio-item label:before { width: 30px; height: 30px; border-color: #aaa; margin-right: 20px; } .radio-item label::after { background-color: #702000; width: 20px; height: 20px; left: 5px; top: 5px; } </style>
You may adapt to your needs.
Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Please Log in to join the conversation.
- holch
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 11661
- Thank you received: 2742
7 months 19 hours ago #250742
by holch
I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.
Replied by holch on topic Center the selection box on a radius and multiple question.
You should NOT run a production survey in Limesurvey LS4. It is not supported anymore. Upgrade to the latest LS5 at least.
I was not aware that image select is broken in LS5.
@Joffm: Is there a bug report somewhere?
I was not aware that image select is broken in LS5.
@Joffm: Is there a bug report somewhere?
I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.
Please Log in to join the conversation.
- Joffm
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12944
- Thank you received: 3979
7 months 18 hours ago #250747
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Center the selection box on a radius and multiple question.
I do not know exactly.
But I remembered somebody mentioning it some time ago
An a test in 5.x. showed
If you enter the path only (as it ought to be) this path is shown
If you enter with <img> tags the image is shown,
But it is the usual "list(radio)"
Joffm
BTW:
Trying to open my cloud installation right now, showed this
500: Interner Serverfehler
Das zu veröffentlichende Asset "/limeservice/instances/17/limesurvey/themes/admin/Bay_of_Many/images/logo.png" existiert nicht.
But I remembered somebody mentioning it some time ago
An a test in 5.x. showed
If you enter the path only (as it ought to be) this path is shown
If you enter with <img> tags the image is shown,
But it is the usual "list(radio)"
Joffm
BTW:
Trying to open my cloud installation right now, showed this
500: Interner Serverfehler
Das zu veröffentlichende Asset "/limeservice/instances/17/limesurvey/themes/admin/Bay_of_Many/images/logo.png" existiert nicht.
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Please Log in to join the conversation.
- Vic1107
- Topic Author
- Offline
- New Member
Less
More
- Posts: 19
- Thank you received: 0
7 months 17 hours ago #250750
by Vic1107
Replied by Vic1107 on topic Center the selection box on a radius and multiple question.
Hello joffm,
Thank you very much, this helped me a lot, I only have one question, Under each image I must show the price of each of the products, with this CSS code that I am putting all the texts it makes them white or hides them.
How can I get it to show the text below each image?
Thank you very much again for the great help.
Thank you very much, this helped me a lot, I only have one question, Under each image I must show the price of each of the products, with this CSS code that I am putting all the texts it makes them white or hides them.
How can I get it to show the text below each image?
Thank you very much again for the great help.
Please Log in to join the conversation.
- Joffm
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12944
- Thank you received: 3979
7 months 15 hours ago #250754
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Center the selection box on a radius and multiple question.
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Please Log in to join the conversation.