Welcome, Guest
Username: Password: Remember me

TOPIC: array with stars

array with stars 1 year 2 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 1 year 2 months ago #96017

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4069
  • Thank you received: 748
  • Karma: 341
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.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.

array with stars 1 year 2 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 1 year 2 months ago #96133

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4069
  • Thank you received: 748
  • Karma: 341
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>

Capture2_2013-05-17.JPG


Here is a sample survey and template:

File Attachment:

File Name: Demo_Array_Star_Rating.zip
File Size: 82 KB

File Attachment:

File Name: limesurvey_survey_552142.lss
File Size: 17 KB
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.

array with stars 1 year 1 week ago #98135

  • marcic
  • marcic's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 6
  • 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 1 year 5 days 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 1 year 5 days ago #98450

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4069
  • Thank you received: 748
  • Karma: 341
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.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
Last Edit: 1 year 5 days ago by tpartner.
The administrator has disabled public write access.

array with stars 1 year 5 days ago #98451

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4069
  • Thank you received: 748
  • Karma: 341
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.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.

array with stars 6 months 3 weeks ago #103075

  • dweisser
  • dweisser's Avatar
  • OFFLINE
  • Bronze Donor
  • Posts: 196
  • 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 6 months 3 weeks ago #103076

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4069
  • Thank you received: 748
  • Karma: 341
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_survey_211384.lss
File Size: 15 KB
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
Last Edit: 6 months 3 weeks ago by tpartner.
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.183 seconds
Donation Image