Clickable Image as Answer - change label

  • TwentyTwo
  • Avatar de TwentyTwo Autor del tema
  • Invitado
  • Invitado
7 años 1 mes antes - 7 años 1 mes antes #80171 por TwentyTwo
I have once received a nice script from Tpartner for having the functionality of clickable images as answers (no radio buttons and the option to click on the image).

This is just working fine in LS 1.91, but in 1.92 it is not working.
I know there is no support on workarounds but just wondering if someone sees why this is not working anymore.

I have the example here
The link for a working example is here (screen 3)

Maybe I just miss a small thing what is different in 1.92?



And otherwise this is the code:


 
 
<script type="text/javascript" charset="utf-8"> 
 
function Custom_On_Load(){ 
 
    $(document).ready(function() { 
 
        // Insert the images into the labels 
        $( 'label[for="answer65848X42X146A1"]' ).html('<img title="Option 1" src="../plaatjes/smile.jpg"/>'); 
        $( 'label[for="answer65848X42X146A2"]' ).html('<img title="Option 2" src="../plaatjes/smile.jpg"/>'); 
 
        // A function to handle the behavior of images in select/radio questions 
        function labelImageEffects(qid) { 
 
            ////////// Set your border colors here ///////// 
            var uncheckedBorder = '#fff'; 
            var checkedBorder = '#0F0'; 
            var hoverBorder = '#066'; 
            /////////////////////////////////////////////// 
 
            // Find the initial state of the radio buttons and style labels accordingly 
            $( '#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 + ''}); 
                } 
            }); 
 
            // Hide the radio buttons 
            $( '#question' + qid + ' input.radio' ).hide(); 
 
            // 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 + ''}); 
                } 
 
            }); 
 
            // Checked label border styles 
            $( '#question' + qid + ' td.answer label.answertext' ).click(function (event) { 
 
                $( '#question' + qid + ' td.answer label.answertext' ).css({'border':'10px solid ' + uncheckedBorder + ''}); 
                $( this ).css({'border':'10px solid ' + checkedBorder + ''}); 
 
                // IE hack to check the affiliated radio button 
                var id = $( this ).attr('for'); 
                $( '#question' + qid + ' td.answer input#' + id + '' ).attr('checked', true); 
 
            }); 
 
        } 
 
        // Call the image effects function 
        labelImageEffects(146); 
 
    }); 
} 
</script>
 
 
Última Edición: 7 años 1 mes antes por TwentyTwo.

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

LimeSurvey Partners
Más
7 años 1 mes antes #80193 por Mazi
Respuesta de Mazi sobre el tema Clickable Image as Answer - change label
Can you also post a link to the non working example?

BTW: There are quite some helpful blog posts at your website such as: www.22surveys.com/blog/?p=258

^- Can you help us by extending the manual and adding some of these examples there?

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

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

  • TwentyTwo
  • Avatar de TwentyTwo Autor del tema
  • Invitado
  • Invitado
7 años 1 mes antes #80201 por TwentyTwo
Respuesta de TwentyTwo sobre el tema Clickable Image as Answer - change label
thanks Mazi,

I have 1.92 only running on a local webserver.

But it is exact the same script and template I am using at 1.91.
The non working example just shows me the text I have added in the labels.
Seems the following is just not working anymore:
 $( 'label[for="answer65848X42X146A1"]' ).html('<img title="Option 1" src="../plaatjes/smile.jpg"/>'); 
        $( 'label[for="answer65848X42X146A2"]' ).html('<img title="Option 2" src="../plaatjes/smile.jpg"/>'); 
 


I will add some examples soon to the manual!

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

Más
7 años 1 mes antes #80210 por Mazi
Respuesta de Mazi sobre el tema Clickable Image as Answer - change label
Sorry, but without being able to compare the different source codes, it is hard to help from here.

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

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

  • TwentyTwo
  • Avatar de TwentyTwo Autor del tema
  • Invitado
  • Invitado
7 años 1 mes antes #80212 por TwentyTwo
Respuesta de TwentyTwo sobre el tema Clickable Image as Answer - change label
yeah you are right, I realized it too when writing.
in the meantime I have installed 1.92.

Hereby the link:
(at screen3 you will see the images are not loaded)

link 1.92

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

Más
7 años 1 mes antes #80213 por Mazi
Respuesta de Mazi sobre el tema Clickable Image as Answer - change label
It works fine here using the latest Google Chrome version. I can click the image and the radio button gets ticked.

Which browser did you test?

Did you try clearing your cache?

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

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

  • TwentyTwo
  • Avatar de TwentyTwo Autor del tema
  • Invitado
  • Invitado
7 años 1 mes antes #80214 por TwentyTwo
Respuesta de TwentyTwo sobre el tema Clickable Image as Answer - change label
I have tested it as well with all browsers, also Chrome.
Please note - it is the third screen/question, the first is just fine.
The second screen doesn't matter.

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

Más
7 años 1 mes antes - 7 años 1 mes antes #80236 por Mazi
Respuesta de Mazi sobre el tema Clickable Image as Answer - change label
Thanks for clarifying. Indeed, only the first question works fine.

Hard to say why at the first one it works fine. Maybe it's just some wrong IDs or the like, I can't say. Tony (tpartner) is the JavaScript expert, maybe he can help you out.

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
Última Edición: 7 años 1 mes antes por Mazi.

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

Más
7 años 1 mes antes - 7 años 1 mes antes #80298 por tpartner
Expression Manager in 1.92 is screwing up your (perfectly valid)JavaScript.

With EM, you need a space after all opening curly braces and before all closing curly braces.

So, for example, this:
$(this).css({'border':'10px solid ' + checkedBorder + ''});

Needs to be this this:
$(this).css({ 'border':'10px solid ' + checkedBorder + '' });

Try this to you script supplied above:
<script type="text/javascript" charset="utf-8">
 
	$(document).ready(function() { 
 
        // Insert the images into the labels 
        $( 'label[for="answer65848X42X146A1"]' ).html('<img title="Option 1" src="../plaatjes/smile.jpg"/>'); 
        $( 'label[for="answer65848X42X146A2"]' ).html('<img title="Option 2" src="../plaatjes/smile.jpg"/>'); 
 
        // A function to handle the behavior of images in select/radio questions 
        function labelImageEffects(qid) { 
 
            ////////// Set your border colors here ///////// 
            var uncheckedBorder = '#fff'; 
            var checkedBorder = '#0F0'; 
            var hoverBorder = '#066'; 
            /////////////////////////////////////////////// 
 
            // Find the initial state of the radio buttons and style labels accordingly 
            $( '#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 + '' }); 
                } 
            }); 
 
            // Hide the radio buttons 
            $( '#question' + qid + ' input.radio' ).hide(); 
 
            // 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 + '' }); 
                } 
 
            }); 
 
            // Checked label border styles 
            $( '#question' + qid + ' td.answer label.answertext' ).click(function (event) { 
 
                $( '#question' + qid + ' td.answer label.answertext' ).css({ 'border':'10px solid ' + uncheckedBorder + '' }); 
                $( this ).css({ 'border':'10px solid ' + checkedBorder + '' }); 
 
                // IE hack to check the affiliated radio button 
                var id = $( this ).attr('for'); 
                $( '#question' + qid + ' td.answer input#' + id + '' ).attr('checked', true); 
 
            }); 
 
        } 
 
        // Call the image effects function 
        labelImageEffects(146); 
 
    }); 
 
</script>

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com
Última Edición: 7 años 1 mes antes por tpartner.
El siguiente usuario dijo gracias: TwentyTwo

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

Más
7 años 1 mes antes #80304 por Mazi
Respuesta de Mazi sobre el tema Clickable Image as Answer - change label

tpartner escribió: Expression Manager in 1.92 is screwing up your (perfectly valid)JavaScript.

With EM, you need a space after all opening curly braces and before all closing curly braces.

Tony, I think we should either put a warning at the JavaScript workarounds page or overwork the Workarounds listed there (or both)!?

What do you think?

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

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

Más
7 años 1 mes antes #80308 por tpartner
I will go through my workarounds but I would prefer that well-formed, valid JavaScript worked.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

Más
7 años 1 mes antes #80311 por mkb
Respuesta de mkb sobre el tema Clickable Image as Answer - change label
Hi,

I would be very interested in this.... are there instructions for multiple choice. Once the bug they found from my survey gets fixed I would like to implement this.

Thanks,
M

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

Más
7 años 1 mes antes #80312 por Mazi
Respuesta de Mazi sobre el tema Clickable Image as Answer - change label

tpartner escribió: I will go through my workarounds but I would prefer that well-formed, valid JavaScript worked.

I agree, especially since valid but not working JS is irritating ad frustrating for the users.
How about showing a warning on save if the "<script" + "type=javascript" is detected to let the users know they have to add spaces?

I think that's the least we should do?!

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

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

  • TwentyTwo
  • Avatar de TwentyTwo Autor del tema
  • Invitado
  • Invitado
7 años 1 mes antes #80331 por TwentyTwo
Respuesta de TwentyTwo sobre el tema Clickable Image as Answer - change label
Many thanks tpartner!
You once helped me providing this Javascript and now with the solution for have it working again in 1.92!!
Much appreciated!!

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

  • TwentyTwo
  • Avatar de TwentyTwo Autor del tema
  • Invitado
  • Invitado
7 años 1 mes antes #80424 por TwentyTwo
Respuesta de TwentyTwo sobre el tema Clickable Image as Answer - change label
@mkb
I have changed the css a bit for multi response
screen 4 in the example: demolink
you can download the lss here

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

¡Comenzar ahora!

Simplemente cree una cuenta y comience a usar LimeSurvey hoy mismo.

Registrarse ahora
¡Únase a nuestro boletín informativo!

Iniciar sesión