Welcome, Guest
Username: Password: Remember me

TOPIC: Arrays of Image Buttons

Arrays of Image Buttons 1 year 5 months ago #94188

  • cnsla
  • cnsla's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 3
  • Karma: 0
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...

question.jpg



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...
Last Edit: 1 year 5 months ago by cnsla. Reason: specifying the question
The administrator has disabled public write access.

Arrays of Image Buttons 1 year 5 months ago #94190

  • cnsla
  • cnsla's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 3
  • Karma: 0
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>
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.109 seconds
Donation Image