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

More

7 months 5 hours 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

Please Log in to join the conversation.

Joffm
Offline
LimeSurvey Community Team

More

6 months 4 weeks ago #250729 by Joffm

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"

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

More

6 months 4 weeks ago #250742 by holch

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 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

More

6 months 4 weeks ago #250747 by Joffm

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.

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

More

6 months 4 weeks 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.