Check out the LimeSurvey source code on GitHub!
Welcome, Guest
Username: Password:

TOPIC: smiley face without radiobutton and submitting

smiley face without radiobutton and submitting 4 years 7 months ago #70720

  • floccs
  • floccs's Avatar
  • Offline
  • Senior Lime
  • Posts: 47
  • Thank you received: 5
  • Karma: 2
I think you can add the submit() at the end of the selectface() function
The administrator has disabled public write access.

smiley face without radiobutton and submitting 4 years 7 months ago #70721

  • toma
  • toma's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 11
  • Karma: 0
Then form is submitted automatically. At least how I put it there.
    function selectface(face) {
 
        $('.face').removeClass('selected');
        $('#question66 input.radio:eq('+face+')').attr('checked', true);
        $('.num'+face).addClass('selected');
 
	$('form#limesurvey').submit();
 
    }
OR (when it will wait for a while before submitting)
    function selectface(face) {
 
        $('.face').removeClass('selected');
        $('#question66 input.radio:eq('+face+')').attr('checked', true);
        $('.num'+face).addClass('selected');
 
	setTimeout(function() { 
		$('form#limesurvey').submit();
	}, 500);
 
    }

So selectface-function goes on before actually selecting anything.
Last Edit: 4 years 7 months ago by toma.
The administrator has disabled public write access.

smiley face without radiobutton and submitting 4 years 7 months ago #70723

  • floccs
  • floccs's Avatar
  • Offline
  • Senior Lime
  • Posts: 47
  • Thank you received: 5
  • Karma: 2
You can also remove the lines with removeClass and addClass since the form is submitted automatically and you don't need styling of the selected image
The administrator has disabled public write access.

smiley face without radiobutton and submitting 4 years 7 months ago #70727

  • toma
  • toma's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 11
  • Karma: 0
I am not sure did make myself clearly. Form submits itself before user clicks on a smiley face. So right now this (combination of two alternatives) doesn't work.
The administrator has disabled public write access.

smiley face without radiobutton and submitting 4 years 7 months ago #70730

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6134
  • Thank you received: 1363
  • Karma: 535
I don't understand why you need to combine the two solutions if you want to imediately submit the form and don't need the "selected" effects.
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The administrator has disabled public write access.

smiley face without radiobutton and submitting 4 years 7 months ago #70731

  • toma
  • toma's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 11
  • Karma: 0
Reason is that it would be nice, if images would be links so cursor would change above them.
The administrator has disabled public write access.

smiley face without radiobutton and submitting 4 years 7 months ago #70732

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6134
  • Thank you received: 1363
  • Karma: 535
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.
The administrator has disabled public write access.

smiley face without radiobutton and submitting 4 years 7 months ago #70733

  • toma
  • toma's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 11
  • Karma: 0
That is so true...

Thanks!
The administrator has disabled public write access.

smiley face without radiobutton and submitting 4 years 7 months ago #70735

  • toma
  • toma's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 11
  • Karma: 0
"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.
The administrator has disabled public write access.

smiley face without radiobutton and submitting 4 years 7 months ago #70736

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6134
  • Thank you received: 1363
  • Karma: 535
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.
The administrator has disabled public write access.

smiley face without radiobutton and submitting 4 years 7 months ago #70738

  • toma
  • toma's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 11
  • Karma: 0
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: 4 years 7 months ago by toma.
The administrator has disabled public write access.

smiley face without radiobutton and submitting 4 years 7 months ago #70803

  • toma
  • toma's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 11
  • Karma: 0
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?
The administrator has disabled public write access.

smiley face without radiobutton and submitting 4 years 7 months ago #70821

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6134
  • Thank you received: 1363
  • Karma: 535
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: 4 years 7 months ago by tpartner.
The administrator has disabled public write access.

smiley face without radiobutton and submitting 4 years 7 months ago #70847

  • toma
  • toma's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 11
  • Karma: 0
Thanks! It seems to work nicely!
The administrator has disabled public write access.

smiley face without radiobutton and submitting 4 years 1 month ago #81914

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: 4 years 1 month ago by manueltrevilla.
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.308 seconds
Imprint                   Data Protection Statement                  Revocation information and revocation form