array with stars - by: tpartner

<!-- 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" />

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());
	});
}

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>

<script type="text/javascript" charset="utf-8">	
	$(document).ready(function() {
		handleRatingArrayNumeric ('{SGQ}');
	});
</script>