Arrays of Image Buttons

Mehr
4 Jahre 7 Monate her - 4 Jahre 7 Monate her #94188 von cnsla
cnsla erstellte das Thema Arrays of Image Buttons
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...
Anhang:
Letzte Änderung: 4 Jahre 7 Monate her von cnsla. Begründung: specifying the question

Bitte Anmelden um an der Konversation teilzunehmen.

Mehr
4 Jahre 7 Monate her #94190 von cnsla
cnsla antwortete auf das Thema: 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>

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

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

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

Bitte Anmelden um an der Konversation teilzunehmen.

Jetzt loslegen!

Melden Sie sich jetzt an, und erstellen Sie in wenigen Minuten Ihre erste Umfrage.

Account einrichten

Abonnieren Sie unseren Newsletter

Abonnieren Sie unseren Newsletter für alle Neuigkeiten rund um LimeSurvey
captcha