Check out the LimeSurvey source code on GitHub!
Welcome, Guest
Username: Password:
  • Page:
  • 1
  • 2

TOPIC: array with stars

array with stars 3 years 6 months ago #96000

  • rambo
  • rambo's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 14
  • Karma: 0
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 administrator has disabled public write access.

array with stars 3 years 6 months ago #96017

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6574
  • Thank you received: 1477
  • Karma: 579
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 administrator has disabled public write access.

array with stars 3 years 6 months ago #96020

  • rambo
  • rambo's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 14
  • Karma: 0
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 administrator has disabled public write access.

array with stars 3 years 6 months ago #96133

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6574
  • Thank you received: 1477
  • Karma: 579
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}:
<!-- 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
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:
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:
<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.
The administrator has disabled public write access.

array with stars 3 years 4 months ago #98135

  • marcic
  • marcic's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 9
  • Karma: 1
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 administrator has disabled public write access.

array with stars 3 years 4 months ago #98428

  • Pete123
  • Pete123's Avatar
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 administrator has disabled public write access.

array with stars 3 years 4 months ago #98450

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6574
  • Thank you received: 1477
  • Karma: 579
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:

/* 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: 3 years 4 months ago by tpartner.
The administrator has disabled public write access.

array with stars 3 years 4 months ago #98451

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6574
  • Thank you received: 1477
  • Karma: 579
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:

<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 administrator has disabled public write access.

array with stars 2 years 11 months ago #103075

  • dweisser
  • dweisser's Avatar
  • Offline
  • Gold Lime
  • Posts: 222
  • Thank you received: 5
  • Karma: 5
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 administrator has disabled public write access.

array with stars 2 years 11 months ago #103076

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6574
  • Thank you received: 1477
  • Karma: 579
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.
Last Edit: 2 years 11 months ago by tpartner.
The administrator has disabled public write access.

array with stars 1 year 6 months ago #121500

  • surveyman
  • surveyman's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 14
  • Karma: 0
*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 administrator has disabled public write access.

array with stars 1 year 6 months ago #121526

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6574
  • Thank you received: 1477
  • Karma: 579
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 administrator has disabled public write access.

array with stars 1 year 5 months ago #121567

  • surveyman
  • surveyman's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 14
  • Karma: 0
I am using Version 2.05+ Build 141020
I cannot activate a test survey, but I tried several examples from the forum. For example your survey in post #103076. I attached a screenshot of how it looks like.
Attachments:
The administrator has disabled public write access.

array with stars 1 year 5 months ago #121569

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6574
  • Thank you received: 1477
  • Karma: 579
In jquery.rating.js of that template, remove these lines (we don't care about IE6 anymore):

	// IE6 Background Image Fix
	if ($.browser.msie) try { document.execCommand("BackgroundImageCache", false, true)} catch(e) { };
	// Thanks to http://www.visualjquery.com/rating/rating_redux.html

New template attached:

File Attachment:

File Name: test_star_...g_v2.zip
File Size:83 KB
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last Edit: 1 year 5 months ago by tpartner.
The administrator has disabled public write access.

array with stars 1 year 5 months ago #121578

  • surveyman
  • surveyman's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 14
  • Karma: 0
Thanks, I did. The problem I described is visible in Internet Explorer (a newer version) as well as in Google Chrome (I didn't test other browsers).
The administrator has disabled public write access.
  • Page:
  • 1
  • 2
Time to create page: 0.406 seconds
Imprint                   Privacy policy         General Terms & Conditions         Revocation information and revocation form