smiley face without radiobutton and submitting

More
6 years 2 days ago #70731 by toma
toma replied the topic: smiley face without radiobutton and submitting
Reason is that it would be nice, if images would be links so cursor would change above them.

Please Log in to join the conversation.

More
6 years 2 days ago #70732 by tpartner
tpartner replied the topic: smiley face without radiobutton and submitting
You can do that with CSS:
#questionQQ label img {
	cursor: pointer;
}

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

More
6 years 2 days ago #70733 by toma
toma replied the topic: smiley face without radiobutton and submitting
That is so true...

Thanks!

Please Log in to join the conversation.

More
6 years 2 days ago #70735 by toma
toma replied the topic: smiley face without radiobutton and submitting
"Luckily" there is something else which doesn't work with this:
<script type="text/javascript" charset="utf-8">
 
	$(document).ready(function(){
 
		$('#question61 label img').click(function(){
			setTimeout(function() { 
				$('form#limesurvey').submit();
			}, 500);
		});
	});
 
</script>

Scaling seems to be impossible (or at least it needs something that I cannot do). But with that another method it can be done, because I can put html code to that. Maybe some more experienced person can do same with this one also.

Please Log in to join the conversation.

More
6 years 2 days ago #70736 by tpartner
tpartner replied the topic: smiley face without radiobutton and submitting

some more experienced person

????

"Scaling" has nothing to do with this. That would depend on what images you put in the labels.

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

More
6 years 2 days ago - 6 years 2 days ago #70738 by toma
toma replied the topic: smiley face without radiobutton and submitting
With "some more experienced person" I meant that maybe some one else can do these things easily, but I cannot because I am not very experienced in these stuffs.

Anyway with first method I could do something like this (I haven't check if this is proper code, but maybe idea can be seen from this):
<div>
   <div style="width:30%; background-image:url(../images/smiley1.);>
      <a href="javascript:selectface(0);"><img class="face num0" src="emptyimage" /></a>
   </div>
   <div style="width:30%; background-image:url(../images/smiley2.);>
      <a href="javascript:selectface(1);"><img class="face num1" src="emptyimage" /></a>
   </div>
   <div style="width:30%; background-image:url(../images/smiley3.);>
      <a href="javascript:selectface(2);"><img class="face num2" src="emptyimage" /></a><br/>
   </div>
</div>
 
<script>
 
    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);
 
    });
 
AND some script for submitting page after clicking smiley face...
 
</script>
 

But now is time to enjoy weekend... If you like you can/may post more ideas etc, but I will continue this task on monday. Have a nice weekend, folks!
Last Edit: 6 years 2 days ago by toma.

Please Log in to join the conversation.

More
5 years 11 months ago #70803 by toma
toma replied the topic: smiley face without radiobutton and submitting
Ok.

Now I have this:
<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="/kysely/hymio/naama3.png" 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="/kysely/hymio/naama2.png" 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="/kysely/hymio/naama.png" width="100%" /></a><br/>
</div>
</div>
 
<script type="text/javascript" charset="utf-8">
 
    function selectface(face) {
        $('.face').removeClass('selected');
        $('#question66 input.radio:eq('+face+')').attr('checked', true);
        $('.num'+face).addClass('selected');
 
    }
 
    $(document).ready(function() {
 
        $('#question69 .survey-question-answer ').hide();
        $('#question69 .questionhelp ').hide();
 
        selectface($('#question69 input.radio:checked').val() - 1);
 
    });
 
 
</script>
 
<style>
.face {
border:0px solid white;
}
 
.selected {
border:4px solid #cc0000;
}
</style>

Well I haven't tried it on real survey, but it seems work fine (images are scaled and work like submit-buttons) thanks to you.

Next problem is that questionID is different every time I import this question to new survey. Is there something to do about it?

Please Log in to join the conversation.

More
5 years 11 months ago - 5 years 11 months ago #70821 by tpartner
tpartner replied the topic: smiley face without radiobutton and submitting
One solution to get around the problem of IDs being changed in the export/import process is to add a script to identify the question div that contains the script. You can then set a variable with the question's ID for use in following scripts.

Add the following to the source of a question:
<script type="text/javascript" charset="utf-8">
 
	var thisQID = thisQuestionID();
 
	// A function to return the question ID number of a script's parent question
	function thisQuestionID() {
 
		// Identify the current script element NOTE: must be before $(document).ready(function()
		var scripts = document.getElementsByTagName('script');
		var thisScript = scripts[scripts.length - 1];
 
		// Identify the current script's parent question ID
		var scriptParent = $(thisScript).parents('div[id^="question"]:eq(0)');
		return ($(scriptParent).attr('id').substr(8)); 
 
	}
 
</script>

The var "thisQID" is now set as that question's ID .

Now you can change this:
$('#question69 .survey-question-answer ').hide();

To this:
$('#question'+thisQID+' .survey-question-answer ').hide();

And it should be fully portable to another survey.

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last Edit: 5 years 11 months ago by tpartner.

Please Log in to join the conversation.

More
5 years 11 months ago #70847 by toma
toma replied the topic: smiley face without radiobutton and submitting
Thanks! It seems to work nicely!

Please Log in to join the conversation.

More
5 years 5 months ago - 5 years 5 months ago #81914 by manueltrevilla
manueltrevilla replied the topic: smiley face without radiobutton and submitting
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:
<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="http://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="http://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="http://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>
Last Edit: 5 years 5 months ago by manueltrevilla.

Please Log in to join the conversation.

More
5 years 5 months ago #81998 by Mazi
Mazi replied the topic: smiley face without radiobutton and submitting
Try using '' or "" quotes only, your quotes might cause problems.

Also check that there are spaces before and after each { and } bracket.


Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)survey-consulting.com'"

Please Log in to join the conversation.

More
5 years 5 months ago - 5 years 5 months ago #82009 by manueltrevilla
manueltrevilla replied the topic: smiley face without radiobutton and submitting
Captura de pantalla 2012-06-14 a la(s) 15.05.56.png

Thanks for your fast response, i checked the ' and the space before and after { } , the code is working very good, but the radio buttons are still there, I put the hide radio buttons code but it doesn´t seems to do anything. I picked the code from another post that you contributed: www.limesurvey.org/es/forum/design-issue...-answer-change-label But when I copy that exact working code in my questions you are still able to see the radio buttons, but it organize the images vertically not horizontally, so I chose the code from this post that is perfect asides form the radio buttons.
I include a capture of the survey with the new code and still showing the radio buttons.
Hope you can help out, I have a very good 2 days coding experience so it could be just a simple rookie question I´m sorry.
<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="http://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="http://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="http://localhost/limesurvey/imagenes/imagen3.jpeg" width="100%" /></a></div>
</div>
<script type="text/javascript" charset="utf-8">
 
    function selectface(face) {
        $('.face').removeClass('selected');
        $('#question4 input.radio:eq('+face+')').attr('checked', true);
        $('.num'+face).addClass('selected');
        $( '#question' + qid + ' input.radio' ).hide();
 
    }
 
    $(document).ready(function() {
 
        $('#question4 .survey-question-answer ').hide();
        $('#question4 .questionhelp ').hide();
 
        selectface($('#question69 input.radio:checked').val() - 1);
 
    } );
 
 
</script>
<style type="text/css">
.face {
border:0px solid white; 
 }
 
.selected {
border:4px solid #cc0000;
 }</style>
Last Edit: 5 years 5 months ago by manueltrevilla.

Please Log in to join the conversation.

More
5 years 5 months ago #82048 by tpartner
tpartner replied the topic: smiley face without radiobutton and submitting
Manuel, I think the code you are using may be over-complicated.

Do you want a click on the image to set a hidden radio AND submit the page or just set a hidden radio and give the respondent some indication that it has been set?

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

More
5 years 5 months ago #82441 by manueltrevilla
manueltrevilla replied the topic: smiley face without radiobutton and submitting
Hi tpartner, the first choice is perfect, clickable images with auto submit it would be perfect. Again sorry for the trouble i´m a huge rookie.

Please Log in to join the conversation.

More
5 years 5 months ago - 5 years 5 months ago #82460 by tpartner
tpartner replied the topic: smiley face without radiobutton and submitting
Okay, this code will auto-submit the page but you can just comment out that line if you don't want it to.

Add the following to the source of the question and Replace "QQ" with the question ID :
<div style="width:100%;">
	<div style="float:left; margin-left: 2%; margin-right:1%">
		<img src="http://localhost/limesurvey/imagenes/imagen1.jpeg" />
	</div>
	<div style="float:left; margin-left: 2%; margin-right:1%">
		<img src="http://localhost/limesurvey/imagenes/imagen2.jpeg" />
	</div>
	<div style="float:left; margin-left: 2%; margin-right:1%">
		<img src="http://localhost/limesurvey/imagenes/imagen3.jpeg" />
	</div>
</div>
<script type="text/javascript" charset="utf-8">
 
	$(document).ready(function(){
 
		// Call the radioImages function with the question ID
		radioImages(QQ);
 
		function radioImages(qID) {
			// Hide radio list
			$('#question'+qID+' li[id^="javatbd"]:first').parent().hide();
 
			// Add some IDs and classes
			$('#question'+qID+' img').each(function(i){
				$(this).attr('id','img-'+qID+'-'+i).addClass('clickableImage');
			});
 
			// Set initial "selected" classe (in case a respondent returns to the page)
			if($('#question'+qID+' input.radio:checked').length > 0) {
				var radioIndex = $('#question'+qID+' input.radio:checked').index('input.radio');
				$('#question'+qID+' .clickableImage:eq('+radioIndex+')').addClass('clickableImageSelected');
			}
 
			// Hover effects
			$('#question'+qID+' img').hover(
				function () {
					$(this).addClass('clickableImageHover');
				}, 
				function () {
					$(this).removeClass('clickableImageHover');
				}
			);
 
			// Click events
			$('#question'+qID+' .clickableImage').click(function(){
				$('#question'+qID+' .clickableImageSelected').removeClass('clickableImageSelected');
				$(this).addClass('clickableImageSelected');
				var imgIndex = $(this).attr('id').split(qID+'-')[1];
				$('#question'+qID+' input.radio:eq('+imgIndex+')').click();
				// Submit the page
				if($('#movesubmitbtn').length > 0) {
					document.limesurvey.move.value = 'movesubmit';
				}
				else {
					document.limesurvey.move.value = 'movenext';
				}
				document.limesurvey.submit();
			});
		}
	});
 
</script>

Then add this to the end of template.css (your code had styles embedded in the <body> of the page which is a no-no):
.clickableImage {
	border: 2px solid transparent;
}
 
.clickableImageHover {
	border-color: #66FF66;
}
 
.clickableImageSelected {
	border-color: #009900;
}

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last Edit: 5 years 5 months ago by tpartner.

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!