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:
