- Posts: 16
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
array with stars
- rambo
-
Topic Author
- Offline
- New Member
-
Less
More
10 years 4 months ago #96000
by rambo
array with stars was created by rambo
Hi,
can stars be added on Array 5 or 10 point choice?
i follow this tutorial
manual.limesurvey.org/Workarounds:_Quest...ayout_and_templating
but i have now both stars and numericala or radio input.
i use limesurvey 2.0
THX,
Ivan
can stars be added on Array 5 or 10 point choice?
i follow this tutorial
manual.limesurvey.org/Workarounds:_Quest...ayout_and_templating
but i have now both stars and numericala or radio input.
i use limesurvey 2.0
THX,
Ivan
The topic has been locked.
- tpartner
-
- Away
- LimeSurvey Community Team
-
Less
More
- Posts: 10331
- Thank you received: 3582
10 years 4 months ago #96017
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic array with stars
In LimeSurvey 2.0, there is a built in feature for stars in the 5-point question type -
manual.limesurvey.org/Question_type_-_5_..._.28slider_rating.29
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
- rambo
-
Topic Author
- Offline
- New Member
-
Less
More
- Posts: 16
- Thank you received: 0
10 years 4 months ago #96020
by rambo
Replied by rambo on topic array with stars
Thanks for replay. i notice that option but i would like to use "half star" like this:
www.partnersinc.biz/surveys//index.php?s...86&newtest=Y&lang=en
and to add more sub-question like in 5 point array.
www.partnersinc.biz/surveys//index.php?s...86&newtest=Y&lang=en
and to add more sub-question like in 5 point array.
The topic has been locked.
- tpartner
-
- Away
- LimeSurvey Community Team
-
Less
More
- Posts: 10331
- Thank you received: 3582
10 years 4 months ago #96133
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic array with stars
Okay, here are the steps to implement the stars in an array-texts type question:
1) Upload the following files from the attached template to your template. Do not use the most current files from the star rating site - they are not compatible with LimeSurvey's version of jQuery.
- jquery.MetaData.js
- jquery.rating.css
- jquery.rating.js
- delete.gif
- star.gif
2) Add the following to startpage.pstpl after {TEMPLATEJS}:
3) Add the following to the end of template.js
4) Add your inputs to the source of the question as described in
the workaround
, except replace the class "star" with "arrayStar", so it would look like this:
5) Add this script to the source of the question:
Here is a sample survey and template:
1) Upload the following files from the attached template to your template. Do not use the most current files from the star rating site - they are not compatible with LimeSurvey's version of jQuery.
- jquery.MetaData.js
- jquery.rating.css
- jquery.rating.js
- delete.gif
- star.gif
2) Add the following to startpage.pstpl after {TEMPLATEJS}:
Code:
<!-- Star Rating Stuff --> <script type="text/javascript" src="{TEMPLATEURL}jquery.rating.js" charset="utf-8"></script> <script type="text/javascript" src="{TEMPLATEURL}jquery.MetaData.js" charset="utf-8"></script> <link rel="stylesheet" type="text/css" href="{TEMPLATEURL}jquery.rating.css" />
Code:
function handleRatingArrayNumeric (sgq) { // Identify the question var qID = sgq.split('X')[2]; var thisQuestion = $('#question'+qID+''); // Hide the numeric inputs $('input[type="text"]', thisQuestion).hide(); // Move the fake radios into the array cells and apply the star rating plugin var starContainer = $('#starContainer', thisQuestion).clone(); $('#starContainer', thisQuestion).remove(); $('td.answer-item', thisQuestion).each(function(i) { var inputID = $('input[type="text"]', this).attr('id'); $(this).append(starContainer.clone()); $('#starContainer', this).attr('id', 'starContainer-'+sgq+'-'+i).addClass('starContainer').append('<div style="clear:both" />');; $('input.arrayStar', this).each(function(i) { $(this).attr('class', $(this).attr('class').replace(/arrayStar/, 'arrayStar-'+inputID+'')); }); // Apply the stars plugin $('.arrayStar-'+inputID+'').rating(); }); // Get a previous rating (if any) and use it to initialize the star display $('input[type="text"]', thisQuestion).each(function(i) { var thisCell = $(this).closest('td'); if ($(this).val() != '') { $('input.star-rating-applied', thisCell).rating('select', $(this).val()); } }); // Listener on the star rating cancel element $('div.rating-cancel', thisQuestion).click(function(event) { var thisCell = $(this).closest('td'); // Empty the text input $('input[type="text"]', thisCell).val(''); }); // Listener on the star rating elements $('div.star-rating', thisQuestion).click(function(event) { var thisCell = $(this).closest('td'); // Load the value of the highest clicked star into the associated text input $('input[type="text"]', thisCell).val($('div.star-rating-on:last a', thisCell).text()); }); }
Code:
Some question text... <div id="starContainer"> <input type="radio" class="arrayStar { split:2 }" title="1" value="1" name="q1Rate" /> <input type="radio" class="arrayStar { split:2 }" title="2" value="2" name="q1Rate" /> <input type="radio" class="arrayStar { split:2 }" title="3" value="3" name="q1Rate" /> <input type="radio" class="arrayStar { split:2 }" title="4" value="4" name="q1Rate" /> <input type="radio" class="arrayStar { split:2 }" title="5" value="5" name="q1Rate" /> <input type="radio" class="arrayStar { split:2 }" title="6" value="6" name="q1Rate" /> <input type="radio" class="arrayStar { split:2 }" title="7" value="7" name="q1Rate" /> <input type="radio" class="arrayStar { split:2 }" title="8" value="8" name="q1Rate" /> <input type="radio" class="arrayStar { split:2 }" title="9" value="9" name="q1Rate" /> <input type="radio" class="arrayStar { split:2 }" title="10" value="10" name="q1Rate" /> </div>
Code:
<script type="text/javascript" charset="utf-8"> $(document).ready(function() { handleRatingArrayNumeric ('{SGQ}'); }); </script>
Here is a sample survey and template:
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
The topic has been locked.
- marcic
-
- Offline
- New Member
-
Less
More
- Posts: 10
- Thank you received: 1
10 years 2 months ago #98135
by marcic
Replied by marcic on topic array with stars
Thanks Tony!
Your script as always worked like a charm. I played around with changing the images behind the stars but could not manage to change the size of the star. I.e. it shows only part of the image.
Can you assist in what needs to be changed to have the area that could, for example, accomodate «a star» with 32x32px?
Thanks in advance,
Marcis
Your script as always worked like a charm. I played around with changing the images behind the stars but could not manage to change the size of the star. I.e. it shows only part of the image.
Can you assist in what needs to be changed to have the area that could, for example, accomodate «a star» with 32x32px?
Thanks in advance,
Marcis
The topic has been locked.
- Pete123
-
- Visitor
-
10 years 2 months ago #98428
by Pete123
Replied by Pete123 on topic array with stars
Hi Tony,
Thanks heaps!
I would really like a 10 point star option (eg a user to be able to give us a rating out of 10, not just 5) to be in line with the likes of the NetPromoter score.
Is this possible at all?
Cheers
Pete
Thanks heaps!
I would really like a 10 point star option (eg a user to be able to give us a rating out of 10, not just 5) to be in line with the likes of the NetPromoter score.
Is this possible at all?
Cheers
Pete
The topic has been locked.
- tpartner
-
- Away
- LimeSurvey Community Team
-
Less
More
- Posts: 10331
- Thank you received: 3582
10 years 2 months ago - 10 years 2 months ago #98450
by tpartner
Assuming your larger background images are named star_x32.gif and delete_x32.gif, these changes to jquery.rating.css should do the trick:
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic array with stars
Can you assist in what needs to be changed to have the area that could, for example, accomodate «a star» with 32x32px?
Assuming your larger background images are named star_x32.gif and delete_x32.gif, these changes to jquery.rating.css should do the trick:
Code:
/* jQuery.Rating Plugin CSS - http://www.fyneworks.com/jquery/star-rating/ */ div.rating-cancel,div.star-rating{float:left;width:33px;height:31px;text-indent:-999em;cursor:pointer;display:block;background:transparent;overflow:hidden} div.rating-cancel,div.rating-cancel a{background:url(delete_x32.gif) no-repeat 0 -32px} div.star-rating,div.star-rating a{background:url(star_x32.gif) no-repeat 0 0px} div.rating-cancel a,div.star-rating a{display:block;width:32px;height:100%;background-position:0 0px;border:0} div.star-rating-on a{background-position:0 -32px!important} div.star-rating-hover a{background-position:0 -64px} /* Read Only CSS */ div.star-rating-readonly a{cursor:default !important} /* Partial Star CSS */ div.star-rating{background:transparent!important;overflow:hidden!important} /* END jQuery.Rating Plugin CSS */
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 10 years 2 months ago by tpartner.
The topic has been locked.
- tpartner
-
- Away
- LimeSurvey Community Team
-
Less
More
- Posts: 10331
- Thank you received: 3582
10 years 2 months ago #98451
by tpartner
You can just remove the { split:2 } metadata, so the inputs inserted into the question source would look like:
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic array with stars
I would really like a 10 point star option...
You can just remove the { split:2 } metadata, so the inputs inserted into the question source would look like:
Code:
<div id="starContainer"> <input type="radio" class="arrayStar" title="1" value="1" name="q1Rate" /> <input type="radio" class="arrayStar" title="2" value="2" name="q1Rate" /> <input type="radio" class="arrayStar" title="3" value="3" name="q1Rate" /> <input type="radio" class="arrayStar" title="4" value="4" name="q1Rate" /> <input type="radio" class="arrayStar" title="5" value="5" name="q1Rate" /> <input type="radio" class="arrayStar" title="6" value="6" name="q1Rate" /> <input type="radio" class="arrayStar" title="7" value="7" name="q1Rate" /> <input type="radio" class="arrayStar" title="8" value="8" name="q1Rate" /> <input type="radio" class="arrayStar" title="9" value="9" name="q1Rate" /> <input type="radio" class="arrayStar" title="10" value="10" name="q1Rate" /> </div>
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
- dweisser
-
- Offline
- Premium Member
-
Less
More
- Posts: 153
- Thank you received: 5
9 years 8 months ago #103075
by dweisser
Replied by dweisser on topic array with stars
TPartner,
I'm trying to implement half-stars, following the workaround in the manual, but all I still get 10. All is well otherwise, all formatting is right so I know the CSS is linked), and the two JS files are in the same place. It's as though the {split:2} is not being recognized. Any thoughts?
I put up a test survey in case you had a moment to look-see. here
As always, thank you.
David
I'm trying to implement half-stars, following the workaround in the manual, but all I still get 10. All is well otherwise, all formatting is right so I know the CSS is linked), and the two JS files are in the same place. It's as though the {split:2} is not being recognized. Any thoughts?
I put up a test survey in case you had a moment to look-see. here
As always, thank you.
David
The topic has been locked.
- tpartner
-
- Away
- LimeSurvey Community Team
-
Less
More
- Posts: 10331
- Thank you received: 3582
9 years 8 months ago - 9 years 8 months ago #103076
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic array with stars
I'm not sure what the problem is there but here's a working survey and template(install the template before the survey).
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
Last edit: 9 years 8 months ago by tpartner.
The topic has been locked.
- surveyman
-
- Offline
- New Member
-
Less
More
- Posts: 12
- Thank you received: 0
8 years 3 months ago #121500
by surveyman
Replied by surveyman on topic array with stars
*Bump*
Does somebody still uses this workaround on Limesurvey 2.0 (not necessarily in an array)?
I installed the examples, but for some unknown reason they won't work (radio buttons are displayed instead of stars).
Does somebody still uses this workaround on Limesurvey 2.0 (not necessarily in an array)?
I installed the examples, but for some unknown reason they won't work (radio buttons are displayed instead of stars).
The topic has been locked.
- tpartner
-
- Away
- LimeSurvey Community Team
-
Less
More
- Posts: 10331
- Thank you received: 3582
8 years 3 months ago #121526
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic array with stars
What exact version of LimeSurvey are you using? Can you activate a test survey for us to see?
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.