How can I use 'star ratings' in my form?

Published on Jan 17, 2013 07:24

If you are creating rating forms then it can look better and be simpler to use if you show the user a row of stars to check instead of a drop-down or a radio button group. This FAQ shows you one way to do this.

This FAQ was written after a user asked how he could add start ratings to his hotel evaluation form. He wanted to show ratings of up to five stars for each of nine service factors. The demo form {rokbox text=|here|}http://greyhead.org/index.php?option=com_chronoforms&tmpl=component&chronoform=demo_moostars{/rokbox}.shows the result of using the code below - though I only added three of the nine service factors.

This code uses the MooStars code developed by Lorenzo Stanco and available from here. You will need to download the package and upload some of the files from it to your site.

Create a new folder on your site components/com_chronoforms/extras/moostarrating/ and copy the moostarrating.js.

file to it.

Create a /graphics/ subfolder and copy the contents of the Graphics folder in the package there.

Add one or more Radio button elements to your form. They should each have a unique id and a matching name e.g. hotel_rating and the options should be like this:

1=1
2=2
3=3
4=4
5=5

Note: you can use up to 10=10 if you allow half-stars (see below).

Drag a Custom Code action into the On Load event of your form, open it and add the following code:

<?php
JHTML::_('behavior.mootools');
$doc = JFactory::getDocument();
$doc->addScript(JURI::base().'components/com_chronoforms/extras/moostarrating/moostarrating.js');
$image_url = JURI::root().'components/com_chronoforms/extras/moostarrating/graphics/';
$script = "
// Configure the image paths
var MooStarRatingImages;
MooStarRatingImages = {
  defaultImageFolder: '{$image_url}',
  defaultImageEmpty:  'star_empty.png',
  defaultImageFull:   'star_full.png',
  defaultImageHover:  'star_hover.png'
};
var starRater;
starRater = new Array;
window.addEvent('domready',function() {
  var radios;
  radios = [
    'rating_hotel',
    'rating_zimmer',
    'service_rating'
  ];
  Array.each(radios, function(item){
    addStars(item);
  });
});
function addStars(radio) {
  var labels, tip;
  // hide the option labels
  $$('#'+radio+'_container_div div label').each(function(el) {
    el.setStyle('display', 'none');
  });
  // add the tip spans
  tip = new Element('span', {
    id: radio+'htmlTip'
  });
  tip.inject($(radio+'_container_div').getChildren('div')[0]);
// Create a StarRating instance
  starRater[radio] = new MooStarRating({
    form: '{$form->form_details->name}',
    radios: radio,
    half: false,
    width: 18,
    tip: 'Stars <i>[VALUE] / 5</i>',
    tipTarget: $(radio+'htmlTip'),
    tipTargetType: 'html'
  });
}
";
$doc->addScriptDeclaration($script);
?>

Edit the radios array near the beginning to match the ids of the radio button groups that you want to add stars to.

Change the 'half' setting from false to true to allow half-stars.

Edit the tip text near the end to change the content of the tip that appears as the mouse is over the stars.

Save your form and test.

if you have problems check the folder paths carefully to make sure that they match the paths you are using.

How can I use 'star ratings' in my form?

Comments: