Welcome, Guest
Username: Password: Remember me

TOPIC: Image button with array type question (multiple rows issue...)

Image button with array type question (multiple rows issue...) 1 year 7 months ago #94199

  • cnsla
  • cnsla's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 3
  • Karma: 0
I'm trying to make the array type question with image buttons (replacing radio buttons-exactly, hiding and replacing them).
Like image below. My participants will be asked to choose one lego head, one arrow, one lemon, then click next.

question-1.jpg


I found the post dealing with similar problem.
www.limesurvey.org/en/forum/can-i-do-thi...utton-and-submitting

and I successed with the code below with RADIO TYPE Question.


radio.png


<a href="javascript:selectface(0);"><img class="face num0" src="https://www.limesurvey.org/media/kunena/emoticons/cool.png" /></a> 
<a href="javascript:selectface(1);"><img class="face num1" src="https://www.limesurvey.org/media/kunena/emoticons/sad.png" /></a> 
<a href="javascript:selectface(2);"><img class="face num2" src="https://www.limesurvey.org/media/kunena/emoticons/smile.png" /></a>
<a href="javascript:selectface(3);"><img class="face num3" src="https://www.limesurvey.org/media/kunena/emoticons/laughing.png" /></a>
<a href="javascript:selectface(4);"><img class="face num4" src="https://www.limesurvey.org/media/kunena/emoticons/cheerful.png" /></a>
<a href="javascript:selectface(5);"><img class="face num5" src="https://www.limesurvey.org/media/kunena/emoticons/wink.png" /></a>
<a href="javascript:selectface(6);"><img class="face num6" src="https://www.limesurvey.org/media/kunena/emoticons/tongue.png" /></a>
<a href="javascript:selectface(7);"><img class="face num7" src="https://www.limesurvey.org/media/kunena/emoticons/unsure.png" /></a>
<a href="javascript:selectface(8);"><img class="face num8" src="https://www.limesurvey.org/media/kunena/emoticons/angry.png" /></a>
<br />
<script type="text/javascript" charset="utf-8">
 
    function selectface(face) {
 
        $('.face').removeClass('selected');
        $('#question1759 input.radio:eq('+face+')').attr('checked', true);
        $('.num'+face).addClass('selected');
    }
 
    $(document).ready(function() {
 
        $('#question1759 .survey-question-answer ').hide();
        $('#question1759 .questionhelp ').hide();
 
        selectface($('#question1759 input.radio:checked').val() - 1);
 
    });
 
</script>
<style type="text/css">
.face {
border:4px solid white;
}
 
.selected {
border:4px solid #cc0000;
}</style>

However, I have to make 3 rows, and cannot find the way to change the sourcecode....
I guess I should modify

$('#question1759 input.radio:eq('+face+')').attr('checked', true);

but, the code above is for radio type question and I have no idea to specify one row in array type question with the line.

Please, somebody help me : )
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.137 seconds
Donation Image