Web Development Project: StarRating

49 Projects
You are not logged in
Web
Development
Project
Project: StarRating
Creator:	Graphix
Project type:	Webapps
Created on:	2010-08-04 12:07:08
Last edit:	2010-11-16 20:00:48
Download:	Start download now
Introduction

On many sites, including the #3 Youtube, you have a rating system that enables users to vote how much they appreciate a part of your website, for example a video. 

In this tutorial you learn how to create such a rating system, that can be used for rating at websites. In the script, you can specify your own images for when they are selected and when not.

Interface

The interface consists out of 5 stars that the visitor can click once. When a star is clicked a form value, of which you can name yourself, is set depending on what star is clicked (0-5).

As the user of the code needs to be able to create a star rating wherever he wants, the JavaScript generates the code. The images need to be selected by the user of the code itself, so it is a global variable:

Code Snippet (Syntax highlighted) - Toggle Wrap

/* Setting global variables */

var starRatingAmount = 0; // Increments when a new star rating is created
var selectedStarRating = new Array; // If a star has been selected of a star rating, the value is true
var StarOutSrc = "images/star2.jpg"; // The image source when a star is not selected
var StarOnSrc = "images/star1.jpg"; // The image source when a star is selected

function createStarRating(ratingName) {

   document.write("<div id='starRatingNo" + starRatingAmount + "'>");
   document.write("<img src='" + StarOutSrc + "' alt='RatingStar' id='StarRating" + starRatingAmount + "-0' onmouseover='changeStars(this.id)' onmouseout='fadeStars(this.id)' onclick='selectStars(this.id)' />");
   document.write("<img src='" + StarOutSrc + "' alt='RatingStar' id='StarRating" + starRatingAmount + "-1' onmouseover='changeStars(this.id)' onmouseout='fadeStars(this.id)' onclick='selectStars(this.id)' />");
   document.write("<img src='" + StarOutSrc + "' alt='RatingStar' id='StarRating" + starRatingAmount + "-2' onmouseover='changeStars(this.id)' onmouseout='fadeStars(this.id)' onclick='selectStars(this.id)' />");
   document.write("<img src='" + StarOutSrc + "' alt='RatingStar' id='StarRating" + starRatingAmount + "-3' onmouseover='changeStars(this.id)' onmouseout='fadeStars(this.id)' onclick='selectStars(this.id)' />");
   document.write("<img src='" + StarOutSrc + "' alt='RatingStar' id='StarRating" + starRatingAmount + "-4' onmouseover='changeStars(this.id)' onmouseout='fadeStars(this.id)' onclick='selectStars(this.id)' />");
   document.write("<input type='hidden' name='" + ratingName + "' id='StarRating" + starRatingAmount + "' value='' />");
   document.write("</div>");
   selectedStarRating[starRatingAmount] = false;
   starRatingAmount++;
   
}

Programming

The first function we are going to create is called changeStars() and has one argument which contains the id of the star rating.
It is triggered by the onmouseover event and changes the source of the images depending on what star the mouse is.

Code Snippet (Syntax highlighted) - Toggle Wrap

function changeStars(starId) {

   /* Retrieving which star is hovered (0-4) */
   var starLength = starId.length;
   var startSubstr = starLength - 1;
   var starNumber = starId.substr(startSubstr, 1);
   
   /* 
   Retrieving the base id of the star rating (e.g. StarRating1) and then removing the 'StarRating', 
   leaving the starRatingAmount it got selected.
   */
   var starRating = starId.replace("-" + starNumber, "");
   var starRatingNumber = starRating.replace("StarRating", "");
   
   /* If the starrating has not yet been clicked, change the stars */
   
   if (selectedStarRating[starRatingNumber] == false) {
   
      /* First resetting all image sources */
      for (var x=0;x<=4;x++) {
         document.getElementById(starRating + "-" + x).src = StarOutSrc;
      }
	  
	  /* Only changing the images of the images below and equal to the starNumber selected */
      for (i=0;i<=starNumber;i++) {
         document.getElementById("StarRating" + starRatingNumber + "-" + i).src = StarOnSrc;
      }
   }  
   
}

If the user has moved his cursor off the star rating, the onmouseout event, all the images become the faded source. 
This is handled by this function, fadeStars(), it takes one argument which contains the id of the star.

Code Snippet (Syntax highlighted) - Toggle Wrap

function fadeStars(starId2) {

   /* Retrieving which star is hovered (0-4) */
   var starLength2 = starId2.length;
   var startSubstr2 = starLength2 - 1;
   var starNumber2 = starId2.substr(startSubstr2, 1);
   
   /* 
   Retrieving the base id of the star rating (e.g. StarRating1) and then removing the 'StarRating', 
   leaving the starRatingAmount it got selected.
   */
   var starRating2 = starId2.replace("-" + starNumber2, "");
   starRatingNumber2 = starRating2.replace("StarRating", "");
   
   /* If the starrating has not yet been clicked, change the stars */
   
   if (selectedStarRating[starRatingNumber2] == false) {
   
      /* Fading all stars */
      for (d=0;d<=4;d++) {
         document.getElementById(starRating2 + "-" + d).src = StarOutSrc;
      }
	  
   }
   
}

When a star is clicked, the stars will be selected and the selectedStarRating[x] will be turned to true, so that
fadeStars() and changeStars will not change the sources of the images. selectStars() takes one argument, which is the id of the star.

Code Snippet (Syntax highlighted) - Toggle Wrap

function selectStars(starId3) {

   /* Retrieving which star is hovered (0-4) */
   var starLength3 = starId3.length;
   var startSubstr3 = starLength3 - 1;
   var starNumber3 = starId3.substr(startSubstr3, 1);
   
   /* 
   Retrieving the base id of the star rating (e.g. StarRating1) and then removing the 'StarRating', 
   leaving the starRatingAmount it got selected.
   */
   var starRating3 = starId3.replace("-" + starNumber3, "");
   var starRatingNumber3 = starRating3.replace("StarRating", "");
   
   if (selectedStarRating[starRatingNumber3] == false) {

    /* Changing the source of the images that are below or equal to the starNumber */
    for (g=0;g<=starNumber3;g++) {
       document.getElementById("StarRating" + starRatingNumber3 + "-" + g).src = StarOnSrc;
    }
   
    /* Setting the variable, so that the stars no longer change */
    selectedStarRating[starRatingNumber3] = true;
   
    /* Setting the value of the hidden input to the value that has been clicked (1-5) */
    document.getElementById(starRating3).value = parseInt(starNumber3) + 1;

   }
   
}

This code in action

You can download the source code of this project using the following link:
http://www.webdevproject.com/zips/StarRating-v-1-01.zip

An example form:
Code Snippet (Syntax highlighted) - Toggle Wrap

<form action="" method="post" name="myForm">
What is your rating? 
<script type="text/javascript">
createStarRating("MyRating001");
</script>
</form>

And then you can easily retrieve the value, for example with PHP:
Code Snippet (Syntax highlighted) - Toggle Wrap

<?php
$star_rating = $_POST['MyRating001']; // Contains value from 1-5
?>
Comments
Options