5 Star rating/voting with MooStarsRating

Hello,
i try to add a 5 star rating with MooStarsRating for radio buttons.
Here you can find the documentation:
http://www.chronoengine.com/forums/index.php?option=com_chronoforums&cont=posts&f=2&t=22899

It works! :-) but... i need this rating for 9 radiobutton groups (see attached file)in a row (on one site).

1. I add this to the each radio button and change the name for each to unqiue:

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

2. i upload MooStarRating v.1.3 to the server (/components/com_Chronoforms/assets/MooStarRating/)

3. i Add an Event "CustomCode" and add this:

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

4. i add an Event "Load JS" and add this:

    // Configure the image paths
    var MooStarRatingImages = {
      defaultImageFolder: "http://www.unserball.de/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_hotel",
        half: false,
        width: 18,
        tip: "Sterne <i>[VALUE] / 5</i>",
        tipTarget: $("htmlTip"),
        tipTargetType: "html"
      });
    });

But i cant see the stars. Whats wrong?

best regards,
Sascha

Hi oracle,

I got this working OK here

This is a little different from yours as it uses standard ChronoForms radio button element but you can adapt it to work with custom code. I also only added three groups . . . and I probably have different paths for the necessary files and images.

Here is the code I used in a Custom Code action in the On Load event:

<?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;
  // add the ids of the radio button groups to this array
  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: 'Sterne <i>[VALUE] / 5</i>',
    tipTarget: $(radio+'htmlTip'),
    tipTargetType: 'html'
  });
}
";
$doc->addScriptDeclaration($script);
?>

Bob

Later: I added this as a FAQ

Hello,
now it works! Many thanks...

One Little thing...in Firefox and chrome it works fine but in IE9 i see no stars, only the radiobuttons.

best regards,
Sascha

Hi Sascha,

It's working OK in IE9 here so I suspect that there is some conflict with something else on your site.

Bob

Hi again,

i try it a second time. In Firefox and Chrome it looks fine. See my screenshot from IE9.
What can be wrong here?

regards,
Sascha

Hi Sascha,

Please post a link to the form so I can take a quick look.

Bob

http://unserball.de/k2-extra-fields/k2-extra-field-groups/bewertung-abgeben.html

Page 2

Update: In IE9 the validation of the required fields is not working :-(

Hi Sascha,

It's looking OK from here - have you changed something? Validation is working too.

Bob

Hi Bob,

yes! i read in your forum and found a very good tip. The editor (JCE) add a <p> to the string:

<p>{chronoforms}name_of_form{/chronoforms}</p>

i changed it to an div

<div>{chronoforms}name_of_form{/chronoforms}</div>

now its working in IE9!

Hi oracle,

Well done !!! :-) :-)

Bob

Where do I tell CF where in the database to store the rating results?

And how can I show the already made ratings, read-only?

Hi MichielStr,

1) In the same way as any other input.

2) I don't know, there may be a 'readonly' option in the script I used; if not you could add a script to display the appropriate set of images.

Bob

Hi Bob,

I have solved the 'storing to dB' problem. It had been a while since I worked with CF, forgot how easy it is to connect a dB to a form... I have been able to change to read-only by adding 'disabled: true' to your script (RTFM😉 ).

Anyway, I do not seem able to properly load existing ratings (the average of all ratings in fact). The DB Multi Record Loader is returning the correct data, but I cannot get the script to display the information. Am hoping the original poster will reply; he seems to have accomplished this.

Brgds,

Michiel

Hi Michiel,

It works OK on my test form here. To test I just added a line of code to pre-set this to 3.

<?php
$form->data['rating_hotel'] = 3;
?>

provided that your code does the equivalent of this I'd expect it to work OK.

Bob

Hi Bob,

I have created a query manually (in Custom Code) and that is working fine. Perhaps I could have accomplished it by using the DB Multi Record Loader, but this was easier.

Thanks for your support!

Michiel