Welcome to the LimeSurvey Community Forum

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

array with stars

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
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
10 years 4 months ago #96017 by tpartner
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.
More
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.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
10 years 4 months ago #96133 by tpartner
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}:
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" />
3) Add the following to the end of template.js
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());
  });
}
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:
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>
5) Add this script to the source of the question:
Code:
<script type="text/javascript" charset="utf-8">  
  $(document).ready(function() {
    handleRatingArrayNumeric ('{SGQ}');
  });
</script>



Here is a sample survey and template:

File Attachment:

File Name: Demo_Array...ting.zip
File Size:82 KB

File Attachment:

File Name: limesurvey...2142.lss
File Size:17 KB
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.
More
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
The topic has been locked.
  • Pete123
  • Pete123's Avatar
  • Visitor
  • 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
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
10 years 2 months ago - 10 years 2 months ago #98450 by tpartner
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
  • tpartner's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
10 years 2 months ago #98451 by tpartner
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.
More
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
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
9 years 8 months ago - 9 years 8 months ago #103076 by tpartner
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).

File Attachment:

File Name: test_star_rating.zip
File Size:84 KB

File Attachment:

File Name: limesurvey...1384.lss
File Size:15 KB
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.
More
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).
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 years 3 months ago #121526 by tpartner
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.

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source