Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: Rating System

  1. #1
    New Coder
    Join Date
    Mar 2009
    Posts
    55
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Rating System

    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
    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
    Code:
    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.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,550
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Serihon (12-10-2012)

  • #3
    New Coder
    Join Date
    Mar 2009
    Posts
    55
    Thanks
    9
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,550
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    But see, there is a problem with yours, right off the bat:
    Code:
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New Coder
    Join Date
    Mar 2009
    Posts
    55
    Thanks
    9
    Thanked 0 Times in 0 Posts
    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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •