Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Different Smileys with imageTick2

  • Andrea01
  • Andrea01's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
8 years 5 months ago #126444 by Andrea01
Different Smileys with imageTick2 was created by Andrea01
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>
The topic has been locked.
More
8 years 5 months ago #126445 by first
Replied by first on topic Different Smileys with imageTick2
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.

Survey Designer and Programmer
The topic has been locked.
More
8 years 5 months ago - 8 years 5 months ago #126446 by first
Replied by first on topic Different Smileys with imageTick2
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

File Attachment:

File Name: limesurvey...2992.lss
File Size:16 KB

Survey Designer and Programmer
Last edit: 8 years 5 months ago by first. Reason: typo
The following user(s) said Thank You: Andrea01
The topic has been locked.
  • Andrea01
  • Andrea01's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
8 years 5 months ago #126512 by Andrea01
Replied by Andrea01 on topic Different Smileys with imageTick2
Hello OMdev!
Thanks for Your help, works perfectly for me!
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose