smiley face without radiobutton and submitting

Plus d'informations
il y a 7 ans 1 jour #70646 par toma
toma a créé le sujet : smiley face without radiobutton and submitting
Hi!

I would like to make a survey where answerer could choose one of three smiley faces. And when clicking that face it would also act like a submit button.

Images (smiley faces) should be aligned horizontally.

I can make something like this with radiobuttons or array.



On radiobuttons answers are aligned vertically and when you push image, radio button is selected. On array answers are aligned horizontally, but when pushing image, nothing is happening (so answerer have to push radiobutton).

And on both ways answerer have to push submit button after selection.

This is what i would like to have:



So only smileys would be at screen and if possible each one sceled to 30% of screen.

Is this possible? Thanks!
Pièces jointes :

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 7 ans 1 jour - il y a 7 ans 1 jour #70652 par floccs
floccs a répondu au sujet : smiley face without radiobutton and submitting
You can try with this code inserted in your question (edit ID of questionID with your question ID)
<a href="javascript:selectface(0);"><img class="face num0" src="http://yourdomain.com/upload/01.jpg" /></a>
 
<a href="javascript:selectface(1);"><img class="face num1" src="http://yourdomain.com/upload/02.jpg" /></a>
 
<a href="javascript:selectface(2);"><img class="face num2" src="http://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>
Dernière édition: il y a 7 ans 1 jour par floccs.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 7 ans 1 jour #70658 par toma
toma a répondu au sujet : smiley face without radiobutton and submitting
Thanks for answer.

How should I add that to my question? To some specific file? Or with Limesurvey when making survey?

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 7 ans 1 jour - il y a 7 ans 1 jour #70659 par floccs
floccs a répondu au sujet : smiley face without radiobutton and submitting
You have to follow this procedure using the code I've written above (editing image locations and question ID according to your needs)
Dernière édition: il y a 7 ans 1 jour par floccs.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 7 ans 1 jour #70667 par Mazi
Mazi a répondu au sujet : smiley face without radiobutton and submitting
I once saw an implementation where you could clikc an image instaed of a radio button. Maybe you find it at this forum or at manual -< workarounds.

Best regards/Beste Grüße,
Dr. Marcel Minke
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)survey-consulting.com
Want to use your survey offline -> www.offlinesurveys.com

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 7 ans 1 jour #70701 par tpartner
tpartner a répondu au sujet : smiley face without radiobutton and submitting
I'm not sure that JavaScript is needed to control the appearance of selected options if clicking an image will submit the page (assuming the respondents are not allowed to return).

1) Set up your survey to use JavaScript .

2) Add the images as the answer options of a normal radio question (as in your screenshot with blue smilies). Since these images will be in the labels for the radios, clicking them will click the radio.

3) Add the following script to the source of the question. Replace "QQ" with the question ID . The script submits the page when an image is clicked.
<script type="text/javascript" charset="utf-8">
 
	$(document).ready(function(){
 
		$('#questionQQ label img').click(function(){
			setTimeout(function() { 
				$('form#limesurvey').submit();
			}, 500);
		});
	});
 
</script>

4) Add the following to the end of template.css. Again, replace "QQ" with the question ID. These rules will align the answer options side-by-side and hide the radio buttons.
#questionQQ li {
	float: left;
}
 
#questionQQ input.radio {
	display: none;
}

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

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 7 ans 1 jour #70705 par Mazi
Mazi a répondu au sujet : smiley face without radiobutton and submitting
Do we have a workaround for this? If so, I was too stupid to find it. If I'm not that stupid, can you add it? Thanks!

Best regards/Beste Grüße,
Dr. Marcel Minke
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)survey-consulting.com
Want to use your survey offline -> www.offlinesurveys.com

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 7 ans 1 jour #70708 par tpartner
tpartner a répondu au sujet : smiley face without radiobutton and submitting
Mazi, there is no workaround for this (I think you remember something on my server).

I don't think I should add my solution to the workarounds as it is for a very specific case with the images triggering a page submit and no "selected" effects.

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

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 7 ans 18 heures #70717 par DenisChenu
DenisChenu a répondu au sujet : smiley face without radiobutton and submitting

Mazi écrit: Do we have a workaround for this? If so, I was too stupid to find it. If I'm not that stupid, can you add it? Thanks!

Maybe this one no ?

docs.limesurvey.org/tiki-index.php?page=...g#Star_Rating_System
( Star rating system )

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 7 ans 18 heures - il y a 7 ans 18 heures #70718 par toma
toma a répondu au sujet : smiley face without radiobutton and submitting
Hi,

And thanks!

Can I combine these two versions? Something like this:
<a href="javascript:selectface(0);"><img class="face num0" src="http://yourdomain.com/upload/01.jpg" /></a>
 
<a href="javascript:selectface(1);"><img class="face num1" src="http://yourdomain.com/upload/02.jpg" /></a>
 
<a href="javascript:selectface(2);"><img class="face num2" src="http://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() {
 
        $('#question66 .survey-question-answer ').hide();
        $('#question66 .questionhelp ').hide();
 
        selectface($('#question66 input.radio:checked').val() - 1);
 
 
	$('#question66 label img').click(function(){
		setTimeout(function() { 
			$('form#limesurvey').submit();
		}, 500);
	});
 
    });
</script>

That click-part doesnt work, not sure how it should be done ("label img" should be replaced with something else would be my guess)... So if anyone would have some ideas I'd like to hear.
Dernière édition: il y a 7 ans 18 heures par toma.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 7 ans 17 heures #70720 par floccs
floccs a répondu au sujet : smiley face without radiobutton and submitting
I think you can add the submit() at the end of the selectface() function

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 7 ans 17 heures - il y a 7 ans 17 heures #70721 par toma
toma a répondu au sujet : smiley face without radiobutton and submitting
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.
Dernière édition: il y a 7 ans 17 heures par toma.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 7 ans 16 heures #70723 par floccs
floccs a répondu au sujet : smiley face without radiobutton and submitting
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

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 7 ans 15 heures #70727 par toma
toma a répondu au sujet : smiley face without radiobutton and submitting
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.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 7 ans 14 heures #70730 par tpartner
tpartner a répondu au sujet : smiley face without radiobutton and submitting
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.

Connexion ou Créer un compte pour participer à la conversation.

Commencez dès maintenant !

Créez simplement un compte et commencez à utiliser LimeSurvey dès aujourd'hui.

Inscrivez-vous maintenant

Inscrivez-vous à notre Newsletter!