Rating System

[Serihon]

Good afternoon,

I am currently working on a website that has a rating system. There are four questions that the user is asked and then an average rating is created and stored in the database.

Currently the rating and storage system is working but the system is not changing the image for the rating when the user clicks on the stars to rate it. The previous programmer was trying to change the star image by calling different classes but it isn't working.

HTML Code

	 <div class="rating-option">
		 1. Music: How good is <strong><?php echo $vdo['username']; ?> </strong>music<strong>?</strong>
        <br />
		 <div class="rating-wrap">
			 <span class="star-empty" onclick="javascript:vote(1,1);"><em class="accessibly-hidden">1</em></span>
			 <span class="star-empty" onclick="javascript:vote(2,1);"><em class="accessibly-hidden">2</em></span>
			 <span class="star-empty" onclick="javascript:vote(3,1);"><em class="accessibly-hidden">3</em></span>
			 <span class="star-empty" onclick="javascript:vote(4,1);"><em class="accessibly-hidden">4</em></span>
			 <span class="star-empty" onclick="javascript:vote(5,1);"><em class="accessibly-hidden">5</em></span>
		 </div>
	 </div>
	 <div class="rating-option">
		 2. Likeability: How engaging and likeable is <strong><?php echo $vdo['username']; ?></strong>?
        <br />
		 <div class="rating-wrap">
			 <span class="star-empty" onclick="javascript:vote(1,2);"><em class="accessibly-hidden">1</em></span>
			 <span class="star-empty" onclick="javascript:vote(2,2);"><em class="accessibly-hidden">2</em></span>
			 <span class="star-empty" onclick="javascript:vote(3,2);"><em class="accessibly-hidden">3</em></span>
			 <span class="star-empty" onclick="javascript:vote(4,2);"><em class="accessibly-hidden">4</em></span>
			 <span class="star-empty" onclick="javascript:vote(5,2);"><em class="accessibly-hidden">5</em></span>
		 </div>
	 </div>
	 
	 <div class="rating-option">
		3. Uniqueness: How unique is the musical style, video, and performance of <strong><?php echo $vdo['username']; ?></strong>?
        <br />
		 <div class="rating-wrap">							
			 <span class="star-empty" onclick="javascript:vote(1,3);"><em class="accessibly-hidden">1</em></span>
			 <span class="star-empty" onclick="javascript:vote(2,3);"><em class="accessibly-hidden">2</em></span>
			 <span class="star-empty" onclick="javascript:vote(3,3);"><em class="accessibly-hidden">3</em></span>
			 <span class="star-empty" onclick="javascript:vote(4,3);"><em class="accessibly-hidden">4</em></span>
			 <span class="star-empty" onclick="javascript:vote(5,3);"><em class="accessibly-hidden">5</em></span>
		 </div>
	 </div>
	 
	 <div class="rating-option">
		 4. Stage  Presence: How entertaining, and engaging is <strong><?php echo $vdo['username']; ?></strong>?
        <br />
         <div class="rating-wrap"> 
             <span class="star-empty" onclick="javascript:vote(1,4);"><em class="accessibly-hidden">1</em></span>
             <span class="star-empty" onclick="javascript:vote(2,4);"><em class="accessibly-hidden">2</em></span>
             <span class="star-empty" onclick="javascript:vote(3,4);"><em class="accessibly-hidden">3</em></span>
             <span class="star-empty" onclick="javascript:vote(4,4);"><em class="accessibly-hidden">4</em></span>
             <span class="star-empty" onclick="javascript:vote(5,4);"><em class="accessibly-hidden">5</em></span>
        </div>
	</div>

Javascript

function setFullStar(categoryId, childId)
{
$('.rating-wrap')[categoryId].children[childId].className='star-full';
}

function setHalfStar(categoryId, childId)
{
$('.rating-wrap')[categoryId].children[childId].className='star-half';
}

function setNoStar(categoryId, childId)
{
$('.rating-wrap')[categoryId].children[childId].className='star-empty';
}

function vote(rating, categoryId)
{
votesDone[categoryId-1] = rating;

// Draw the stars
for(var i = 0; i<rating; i++) setFullStar(categoryId, i);

// Set the array so we know when to submit the final score
if(isComplete())
{
	var totalRating = 0
	
	for(var i = 0; i<votesDone.length; i++)
	totalRating += votesDone[i];
	totalRating = totalRating / 4;
	

	// Draw the total stars
	for(var i = 0; i<totalRating; i++) 
	if(parseInt(i) == i) setFullStar(5, i); else setHalfStar(5, i);
	
	var dataString = 'action=rate_video&type=video&obj_id=<?php echo $vdo["videoid"]; ?>&rating=' + totalRating;
	
	$.ajax({
		type: "POST",
		url: "ajax.php",
		data: dataString,
		success: function(data) {
			updateRating();
			alert('rated');

			<?php

			if(!hasBeenCredited(userid(), 'rate', $vkey)) 
			{
				//recordCredit(userid(),  'rate', $vkey);
				echo "Badgeville.credit('rate');";
			}
			?>
		}
	});	
}

return false;

}

Any assistance with this would be greatly appreciated.

[Old Pedant]

If you care, here is how I do it:
http://mywhizbang.com/rating.html

As written, that code doesn't allow a change in a rating once set.

Trivial to change it so that the rating can't be changed once it has been sent to the server via AJAX, of course.

[Serihon]

Thanks for the reply Old Pedant. I actually have seen a few pre-built such as yours which is nifty. Just was hoping for a quick fix to get the graphics working on the one that was already done so not a lot of time would have to be spent on it. Oh well! Thanks again.

[Old Pedant]

But see, there is a problem with yours, right off the bat:

function vote(rating, categoryId)
{
    votesDone[categoryId-1] = rating;
    // Draw the stars
    for(var i = 0; i<rating; i++) setFullStar(categoryId, i);
    ...

Say the user clicks on a rating of 5.

Then say the user changes his/her mind and gives a rating of 3.

The first time he/she votes, you will set all 5 stars to "full".

The second time, you will set 3 of the stars to "full" (redundantly) but you won't change the other two stars, so it will *STILL* show a rating of 5 stars!

The code is just fundamentally flawed. It needs a full re-write, anyway.

[Serihon]

Actually it turns out that there wasn't anything wrong with the original code at all. The previous programmer was calling it twice and since they were both hidden when you clicked on the second one it changed the first one which was still hidden. After removing the duplicated code he had it works perfectly.