Dear all!

I want to use imageTick with 4 different images (= 4 smileys). In the beginning, you see the 4 different “no_tick_images”, which is perfect. (= Sceenshot_1)

When you click one of the smileys, it changes to the defined “tick_image”, which is perfect.

My problem: The other three smileys change to “no_tick_image” of the clicked one. (= Sceenshot_2)
Is there a possibility that the other three remain and do not change?

Thank you in advance for your help!
Andrea


Here is the code:

<script type="text/javascript" charset="utf-8">

$(document).ready(function(){

var templatePath = $('head link[href*="template.css"]').attr('href').replace(/template.css/, '');

// Apply images to radios

$("input#answer326531X147X2054A1").imageTick({

// Image to use as a selected state of the radio
tick_image_path: templatePath+"1green.png",
// Image to use as a non-selected state
no_tick_image_path: templatePath+"1yellow.png",
// Class to apply to all radio images that are dynamically created
image_tick_class: "radios"
});

$("input#answer326531X147X2054A2").imageTick({

// Image to use as a selected state of the radio
tick_image_path: templatePath+"2green.png",
// Image to use as a non-selected state
no_tick_image_path: templatePath+"2yellow.png",
// Class to apply to all radio images that are dynamically created
image_tick_class: "radios"
});
$("input#answer326531X147X2054A3").imageTick({

// Image to use as a selected state of the radio
tick_image_path: templatePath+"3green.png",
// Image to use as a non-selected state
no_tick_image_path: templatePath+"3yellow.png",
// Class to apply to all radio images that are dynamically created
image_tick_class: "radios"
});

$("input#answer326531X147X2054A4").imageTick({

// Image to use as a selected state of the radio
tick_image_path: templatePath+"4green.png",
// Image to use as a non-selected state
no_tick_image_path: templatePath+"4yellow.png",
// Class to apply to all radio images that are dynamically created
image_tick_class: "radios"
});


});

</script>

I guess you will need this setup at one or two questions in survey.

I suggest to use images as labels of the answer options . Hide default checkboxes(Overlay images) . This way you can avoid default functions that changes checked/unchecked images for input button interfere with your code..

Hope it will help.

Here is very similar demo at LS demo side.This link will remain active for today only . I have also attached lss. Please change URL of */slider-rating.css as per your installation after importing lss.

demo.limesurvey.org/index.php?r=survey/index&sid=332992&lang=en

Hello OMdev!
Thanks for Your help, works perfectly for me!