Hi! Im really really new at this, I have tried this code to do exactly that effect, sad face, neutral face, happy face organized horizontally, and onclick response, it works great! but i can´t hide the radio buttons and text. i have a script that can hide the radio buttons but no mater where i put it it doesn´t work.
the code that i want to include is:
"// Hide the radio buttons
$( ‘#question’ + qid + ‘ input.radio’ ).hide();"
I have zero coding experience, please be patient, this is the full code that is working for me:
Code:
<div style="width:100%;">
<div style="width:30%; float:left; margin-left: 2%; margin-right:1%">
<a href="javascript:selectface(0);" onclick="$('form#limesurvey').submit();"><img class="face num0" src="https://localhost/limesurvey/imagenes/imagen1.jpeg" width="100%" /></a></div>
<div style="width:30%; float:left; margin-left: 2%; margin-right:1%">
<a href="javascript:selectface(1);" onclick="$('form#limesurvey').submit();"><img class="face num1" src="https://localhost/limesurvey/imagenes/imagen2.jpeg" width="100%" /></a></div>
<div style="width:30%; float:left; margin-left: 2%; margin-right:1%">
<a href="javascript:selectface(2);" onclick="$('form#limesurvey').submit();"><img class="face num2" src="https://localhost/limesurvey/imagenes/imagen3.jpeg" width="100%" /></a></div>
</div>
<script type="text/javascript" charset="utf-8">
function selectface(face) {
$('.face').removeClass('selected');
$('#question5 input.radio:eq('+face+')').attr('checked', true);
$('.num'+face).addClass('selected');
}
$(document).ready(function() {
$('#question5 .survey-question-answer ').hide();
$('#question5 .questionhelp ').hide();
$( ‘#question5 + qid + ‘ input.radio’ ).hide();
selectface($('#question5 input.radio:checked').val() - 1);
});
// Hide the radio buttons
$( ‘#question’ + qid + ‘ input.radio’ ).hide();
$( '#question' + qid + ' td.answer label.answertext' ).each(function(i) {
var id = $( this ).attr('for');
if ( $( '#question' + qid + ' td.answer input#' + id + '' ).attr('checked') == true ) {
$(this).css({ 'border':'10px solid ' + checkedBorder + '' });
}
else {
$(this).css({ 'border':'10px solid ' + uncheckedBorder + '' });
}
});
// Label pointer and width styles
// $( '#question' + qid + ' td.answer label.answertext' ).css({ 'cursor':'pointer', 'width':'auto' });
$( '#question' + qid + ' td.answer label.answertext' ).css({ 'cursor':'pointer', 'width':'auto', 'height':'auto', 'display':'inline-block' });
// Dennis - extra for the inline-block outline
// Fix list text-indent
$( '#question' + qid + ' li' ).css({ 'text-indent':'0' });
// Hover label border styles
$( '#question' + qid + ' td.answer label.answertext' ).hover(function () { // On mouseover
var id = $( this ).attr('for');
$(this).css({ 'border':'10px solid ' + hoverBorder + '' });
},
function () { // On mouseout
var id = $( this ).attr('for');
if ( $( '#question' + qid + ' td.answer input#' + id + '' ).attr('checked') == true ) {
$(this).css({ 'border':'10px solid ' + checkedBorder + '' });
}
else {
$(this).css({ 'border':'10px solid ' + uncheckedBorder + '' });
}
});
</script>
<style type="text/css">
.face {
border:0px solid white;
}
.selected {
border:4px solid #cc0000;
}</style>
