Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Arrays of Image Buttons

More
10 years 11 months ago - 10 years 11 months ago #94188 by cnsla
Arrays of Image Buttons was created by cnsla
I'm trying to make the array question without radio button (replaced with image button).
The post below

www.limesurvey.org/en/forum/can-i-do-thi...utton-and-submitting

was very helpful, but when I double the array, everything goes to totally confused...

I want to 3-line image button question like below...(hiding radio button, each line have 5 or 9 likert scale...)
Participants choose one lego head, one arrow, and one lemon...




I don't need submitting function... (In contrast to the post above)
I just need to make participant choose one answer par each line, and click next.
The core is replace radio buttons to different images... (like the post above...)

I doubled the code from above post like below, but it never works...

<a href="javascript:selectface(0);"><img class="face num0" src="URL.V01.png" width="96 height="108"/></a>

<a href="javascript:selectface(1);"><img class="face num1" src="URL.I01.png" width="50" height="108"/></a>

<a href="javascript:selectface(2);"><img class="face num2" src="URL.V02.png" width="96" height="108"/></a>

<a href="javascript:selectface(3);"><img class="face num3" src="URL.I01.png" width="50" height="108"/></a>

<a href="javascript:selectface(4);"><img class="face num4" src="URL.V03.png" width="96" height="108"/></a>

<a href="javascript:selectface(5);"><img class="face num5" src="URL.I01.png" width="50" height="108"/></a>

<a href="javascript:selectface(6);"><img class="face num6" src="URL.V04.png" width="96" height="108"/></a>

<a href="javascript:selectface(7);"><img class="face num7" src="URL.I01.png" width="50" height="108"/></a>

<a href="javascript:selectface(8);"><img class="face num8" src="URL.V05.png" width="96" height="108"/></a>

<br/>

<a href="javascript:selectarousal(0);"><img class="arousal num0" src="URL.A01.png" width="96 height="108"/></a>

<a href="javascript:selectarousal(1);"><img class="arousal num1" src="URL.I01.png" width="50" height="108"/></a>

<a href="javascript:selectarousal(2);"><img class="arousal num2" src="URL.A02.png" width="96" height="108"/></a>

<a href="javascript:selectarousal(3);"><img class="arousal num3" src="URL.I01.png" width="50" height="108"/></a>

<a href="javascript:selectarousal(4);"><img class="arousal num4" src="URL.A03.png" width="96" height="108"/></a>

<a href="javascript:selectarousal(5);"><img class="arousal num5" src="URL.I01.png" width="50" height="108"/></a>

<a href="javascript:selectarousal(6);"><img class="arousal num6" src="URL.A04.png" width="96" height="108"/></a>

<a href="javascript:selectarousal(7);"><img class="arousal num7" src="URL.I01.png" width="50" height="108"/></a>

<a href="javascript:selectarousal(8);"><img class="arousal num8" src="URL.A05.png" width="96" height="108"/></a>

<br/>

<script type="text/javascript" charset="utf-8">

function selectface(face) {

$('.face').removeClass('selectedface');
$('#question1734 input.radio:eq('+face+')').attr('checked', true);
$('.num'+face).addClass('selectedface');
}
function selectarousal(arousal) {

$('.arousal').removeClass('selectedarousal');
$('#question1734 input.radio:eq('+arousal+')').attr('checked', true);
$('.num'+arousal).addClass('selectedarousal');
}

$(document).ready(function() {

$('#question1734 .survey-question-answer ').hide();
$('#question1734 .questionhelp ').hide();

selectface($('#question1734 input.radio:checked').val() - 1);
selectarousal($('#question1734 input.radio:checked').val() - 1);

});

</script>

<style>
.face {
border:4px solid white;
}
.arousal {
border:4px solid white;
}
.selectedface {
border:4px solid #c3c3c3;
}
.selectedarousal {
border:4px solid #c3c3c3;
}
</style>


please, help me...
Attachments:
Last edit: 10 years 11 months ago by cnsla. Reason: specifying the question
The topic has been locked.
More
10 years 11 months ago #94190 by cnsla
Replied by cnsla on topic Arrays of Image Buttons
The Original code (from the post above) is below

<a href="javascript:selectface(0);"><img class="face num0" src=" yourdomain.com/upload/01.jpg " />

<a href="javascript:selectface(1);"><img class="face num1" src=" yourdomain.com/upload/02.jpg " />

<a href="javascript:selectface(2);"><img class="face num2" src=" yourdomain.com/upload/03.jpg " />


<script type="text/javascript" charset="utf-8">

function selectface(face) {

$('.face').removeClass('selected');
$('#questionID input.radio:eq('+face+')').attr('checked', true);
$('.num'+face).addClass('selected');
}

$(document).ready(function() {

$('#questionID .survey-question-answer ').hide();
$('#questionID .questionhelp ').hide();

selectface($('#questionID input.radio:checked').val() - 1);

});

</script>

<style>
.face {
border:4px solid white;
}

.selected {
border:4px solid #cc0000;
}
</style>
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose