how do i add 5 star voting/rating to a form?

Me again..

How do i add a user friendly 5 star rating as part of a form?? this would then obviously add the value to the database..

Hi ecopure,

A group of 5 radio buttons - possibly with fancy added JavaScript like this

Bob

Hmm, thanks for that, ive implented the code but can only see the radio boxes😟

As an update.. still not working.. heres what i did:

HTML

<p style="background: none repeat scroll 0% 0% #FFC3CE; height: 30px; border-radius: 5px 5px 5px 5px; margin: 0 0 10px; padding: 5px;"><label class="cf_label" style="width: 150px; float: left; margin: 0 10px 0 0; width: 45%;">Sales Lead Rating</label>
    <input type="radio" name="leadrating" value="0.5">
    <input type="radio" name="leadrating" value="1.0">
    <input type="radio" name="leadrating" value="1.5">
    <input type="radio" name="leadrating" value="2.0">
    <input type="radio" name="leadrating" value="2.5" checked="checked">
    <input type="radio" name="leadrating" value="3.0">
    <input type="radio" name="leadrating" value="3.5">
    <input type="radio" name="leadrating" value="4.0">
    <input type="radio" name="leadrating" value="4.5">
    <input type="radio" name="leadrating" value="5.0">
  <span id="htmlTip"></span></p>

JAVASCRIPT

   
// Default images folder definition. You will use your own.
MooStarRatingImages.defaultImageFolder =
    'http://www.grippatank.co.uk/images';


var simpleRating = new MooStarRating({
    form: 'ChronoContact_companysalesleads',
    imageEmpty: 'star_boxed_empty.png', // Different image
    imageFull:  'star_boxed_full.png',  // Different image
    imageHover: 'star_boxed_hover.png', // Different image
    width: 17,                          // One pixel bigger
    tip: 'Rate [VALUE]/[COUNT]',        // Mouse rollover tip
    tipTarget: $('simpleTip')           // Tip element
});

var MooStarRatingImages = {
	defaultImageFolder: '',
	defaultImageEmpty:  'star_empty.png',
	defaultImageFull:   'star_full.png',
	defaultImageHover:  null
};

var MooStarRating = new Class({

	Implements: [Options, Events],

	options: {
		form: null,
		radios: 'leadrating',
		selector: '',
		linksClass: 'star',
		imageFolder: MooStarRatingImages.defaultImageFolder,
		imageEmpty:  MooStarRatingImages.defaultImageEmpty,
		imageFull:   MooStarRatingImages.defaultImageFull,
		imageHover:  MooStarRatingImages.defaultImageHover,
		width: 16,
		height: 16,
		half: false,
		tip: null,
		tipTarget: null,
		tipTargetType: 'text',
		disabled: false
	},
	
	radios: [],
	stars: [],
	currentIndex: -1,

	initialize: function(options) {
		
		// Setup options
		this.setOptions({
			imageFolder: MooStarRatingImages.defaultImageFolder,
			imageEmpty:  MooStarRatingImages.defaultImageEmpty,
			imageFull:   MooStarRatingImages.defaultImageFull,
			imageHover:  MooStarRatingImages.defaultImageHover });
		this.setOptions(options);
		
		// Fix image folder
		if ((this.options.imageFolder.length != 0) && (this.options.imageFolder.substr(-1) != "/")) 
			this.options.imageFolder += "/";
		
		// Hover image as full if none specified
		if (this.options.imageHover == null) this.options.imageHover = this.options.imageFull;
		
		// Preload images
		try { Asset.images([
			this.options.imageFolder + this.options.imageEmpty,
			this.options.imageFolder + this.options.imageFull,
			this.options.imageFolder + this.options.imageHover
		]); } catch (e) { };
		
		// Build radio selector
		var formQuery = this.options.form;
		this.options.form = $(formQuery);
		if (!this.options.form) this.options.form = $$('form[name=' + formQuery + "]")[0];
		if (this.options.form) {
			var uniqueId = 'star_' + String.uniqueID();
			this.options.form.addClass(uniqueId);
			this.options.selector += 'form.' + uniqueId + ' '; }
		this.options.selector += 'input[type=radio][name=' + this.options.radios + "]";
		
		// Loop elements
		var i = 0;
		var me = this;
		var lastElement = null;
		var count = $$(this.options.selector).length;
		var width = this.options.width.toInt();
		var widthOdd = width;
		var height = this.options.height.toInt();
		if (this.options.half) {
			width = (width / 2).toInt();
			widthOdd = widthOdd - width; }
		$$(this.options.selector).each(function (item) {
			
			// Add item to radio list
			this.radios[i] = item;
			if (item.get('checked')) this.currentIndex = i;
			
			// If disabled, whole star rating control is disabled
			if (item.get('disabled')) this.options.disabled = true;
			
			// Hide and replace
			item.setStyle('display', 'none');
			this.stars[i] = new Element('a').addClass(this.options.linksClass);
			this.stars[i].store('ratingIndex', i);
			this.stars[i].setStyles({
				'background-image': 'url("' + this.options.imageFolder + this.options.imageEmpty + '")',
				'background-repeat': 'no-repeat',
				'display': 'inline-block',
				'width': ((this.options.half && (i % 2)) ? widthOdd : width), 
				'height': height });
			if (this.options.half)
				this.stars[i].setStyle('background-position', ((i % 2) ? '-' + width + 'px 0' : '0 0'));
			this.stars[i].addEvents({
				'mouseenter': function () { me.starEnter(this.retrieve('ratingIndex')); },
				'mouseleave': function () { me.starLeave(); } });
			
			// Tip
			if (this.options.tip) {
				var title = this.options.tip;
				title = title.replace('[VALUE]', item.get('value'));
				title = title.replace('[COUNT]', count);
				if (this.options.tipTarget) this.stars[i].store('ratingTip', title);
				else this.stars[i].setProperty('title', title);
			}
			
			// Click event
			this.stars[i].addEvent('click', function () { 
				me.setCurrentIndex(this.retrieve('ratingIndex')); 
				me.fireEvent('click', me.getValue());
			});
			
			// Go on
			lastElement = item;
			i++;
			
		}, this);
		
		// Inject items
		$$(this.stars).each(function (star, index) {
			star.inject(lastElement, 'after');
			lastElement = star;
		}, this);
		
		// Enable / disable
		if (this.options.disabled) this.disable(); else this.enable();
		
		// Fill stars
		this.fillStars();
		
		return this;
	},
	
	setValue: function(value) {
		this.radios.each(function (radio, index) {
			if (radio.get('value') == value) this.currentIndex = index;
		}, this);
		this.refreshRadios();
		this.fillStars();
		return this;
	},
	
	getValue: function() {
		if (!this.radios[this.currentIndex]) return null;
		return this.radios[this.currentIndex].get('value');
	},
	
	setCurrentIndex: function(index) {
		this.currentIndex = index;
		this.refreshRadios();
		this.fillStars();
		return this;
	},

	enable: function() {
		this.options.disabled = false;
		this.stars.each(function (star) { star.setStyle('cursor', 'pointer'); });
		this.refreshRadios();
		return this;
	},
	
	disable: function() {
		this.options.disabled = true;
		this.stars.each(function (star) { star.setStyle('cursor', 'default'); });
		this.refreshRadios();
		return this;
	},
	
	refresh: function() {
		this.fillStars();
		this.refreshRadios();
		return this;
	},
	
	fillStars: function (hoverIndex) {
		$$(this.stars).each(function (star, index) {
			var image = this.options.imageEmpty;
			if (hoverIndex == null) if (index <= this.currentIndex) image = this.options.imageFull;
			if (hoverIndex != null) if (index <= hoverIndex) image = this.options.imageHover;
			star.setStyle('background-image', 'url("' + this.options.imageFolder + image + '")');
		}, this);
		return this;
	},

	starEnter: function (index) {
		if (this.options.disabled) return;
		this.fillStars(index);
		if (this.options.tip && this.options.tipTarget) 
			$(this.options.tipTarget).set(this.options.tipTargetType, this.stars[index].retrieve('ratingTip'));
		this.fireEvent('mouseenter', this.radios[index].get('value'));
		return this;
	},

	starLeave: function () {
		if (this.options.disabled) return;
		this.fillStars();
		if (this.options.tip && this.options.tipTarget) 
			$(this.options.tipTarget).set(this.options.tipTargetType, '');
		this.fireEvent('mouseleave');
		return this;
	},

	setCurrentIndex: function(index) {
		this.currentIndex = index;
		this.refreshRadios();
		this.fillStars();
		return this;
	},

	refreshRadios: function () {
		this.radios.each(function (radio, index) {
			radio.set('disabled', this.options.disabled);
			radio.set('checked', index == this.currentIndex);
		}, this);
		return this;
	},
	
	debug: function() {
		radioStatus = {};
		this.radios.each(function (radio) {
			eval('radioStatus.' + radio.get('value') + ' = ' + (radio.get('checked') ? 'true' : 'false') + ';'); });
		return ({
			'Current value': this.currentIndex,
			'Hidden radios status': radioStatus
		});
	}
	
});

Still just shows the radio buttons😟

Hi ecopure,

You have to load the MooStarRating files and images too . . . after quite a struggle I've almost got this working except that I have two sets of stars and can't see what is giving me the second set :-(

Will take another look in a day or so.

Bob

Bob,

I'm also looking forward to your solution ... I was at the same point in my testing and currently stumped by two sets of the "stars"

Thanks!
Dave

Hi Dave/Bob.

I had this issue but then I fixed t, please could you post the coding you have used and I'll try and help!

Hi ecopure,

Here's the code I used.
Form HTML:

<input type="radio" name="rating" value="1" />
<input type="radio" name="rating" value="2" />
<input type="radio" name="rating" value="3" />
<input type="radio" name="rating" value="4" checked="checked" >
<input type="radio" name="rating" value="5" />
<span id="htmlTip"></span>

On Load Custom Code (to get the load order correct):

<?php
$doc = JFactory::getDocument();
$doc->addScript(JURI::base()."media/system/js/mootools-core.js");
$doc->addScript(JURI::base()."media/system/js/mootools-more.js");
$doc->addScript(JURI::base()."components/com_chronoforms/assets/MooStarRating/Source/moostarrating.js");
?>

On Load: Load JS:

// Configure the image paths
var MooStarRatingImages = {
  defaultImageFolder: "http://frances/Joomla1.6b/components/com_chronoforms/assets/MooStarRating/Graphics",
  defaultImageEmpty:  "star_empty.png",
  defaultImageFull:   "star_full.png",
  defaultImageHover:  "star_hover.png"
};
// A fake post ID for the sake of submission
var postId = 10;

// When the DOM is ready....
window.addEvent("domready",function() {  
  // Create our instance
  var starRater = new MooStarRating({
    form: "test_form_star_rating",
    radios: "rating",
    half: false,
    width: 18, 
    tip: "Rate as <i>[VALUE] / 5</i>", 
    tipTarget: $("htmlTip"),
    tipTargetType: "html"
  });
});

Bob

PS Using the latest 1.3 version of the MooStarRating files.

Thanks I have an idea of what is it.. Could you post the moostarrating js file too?

Hi ecopure,

Here it is. Remove the .txt from the name.

Bob

ecopure,

Looking for word on this ... do you have any thoughts on how to fix this?

Thanks!
Dave

Hi,

I added this FAQ on adding star ratings in CFv4.

Bob