radioToStarRating

A plugin for LimeSurvey to set any radio list to star rating system, or use another character. You can see a demonstration on demo.sondages.pro.

Installation

This plugin need LimeSurvey 3.0 and up. This plugin was tested on 3.25 and 5.0.7.

With LimeSurvey version lesser than 3.0 : you must use legacy branch.

Via GIT

• Go to your LimeSurvey Directory
• Clone with Submodule in plugins/radioToStarRating directory : git clone https://gitlab.com/SondagesPro/QuestionSettingsType/radioToStarRating.git radioToStarRating

Via ZIP dowload

• Download http://dl.sondages.pro/radioToStarRating.zip
• Extract : unzip radioToStarRating.zip
• Move the directory to plugins/ directory inside LimeSUrvey

Documentation

The plugin can be activated for List (Radio) question type and Array question type. With Array question type: you must set 'Use dropdown presentation' to yes.

Extra options

• Adding half-stars to Css class attribute to have and half star for each choice

Adaptation

The plugin is used to show star, using FontAwesome icon. You can use css to use your own icon or character.

This plugin use different class:

• The question wrapper ({QUESTION_CLASS}) have radioToStarRating class
• The radio group have radiostars-list class
• Each start item have radiostar-rating text-info class
• No answer item have class radiostar-cancel fa fa-ban text-danger class
• Items have radiostar radiostar-value fa fa-star-o text-info class, where value is replaced by the answer code.
• Checked item have radiostar-rated fa-star text-primary radiostar-rated-on class
• Item before checked item have radiostar-rated fa-star text-primary class
• Hovered item have radiostar-drained radiostar-hover fa-star class
• Item before hovered item have radiostar-drained fa-star class

Then you can update the default style using this class, some example :

1. Add a Not-applicable item before the star (code is NA)

    .radiostar-NA:before {
      content: "#";
    }
    .radiostar-NA.radiostar,.radiostar-NA.radiostar-rated{
      color:#ccc;opacity:0.5;
    }
    .radiostar-NA.radiostar-hover{
      color:#888;opacity:1;
    }
    .radiostar-NA.radiostar-rated-on{
      color:#444;opacity:1;
    }
   

2. Use a Yes/No with thumb up and thumb down, code as YES and NO.

    .radiostar-NO:before {
      content: "\f165";
    }
    .radiostar-NO.radiostar,.radiostar-NO.radiostar-rated{
      color:#ccc;opacity:0.5;
    }
    .radiostar-NO.radiostar-hover{
      color:#888;opacity:1;
    }
    .radiostar-NO.radiostar-rated-on{
      color:#444;opacity:1;
    }
    .radiostar-YES:before {
      content: "\f164";
    }
    .radiostar-YES.radiostar,.radiostar-YES.radiostar-rated{
      color:#ccc;opacity:0.5;
    }
    .radiostar-YES.radiostar-hover{
      color:#888;opacity:1;
    }
    .radiostar-YES.radiostar-rated-on{
      color:#444;opacity:1;
    }
   

Css and javascript replacement

If you need a complete replacement of css and javascript : you can put your file in theme

• scripts/radioToStarRating.js for javascript
• css/radioToStarRating.css for css

Home page & Copyright

• HomePage http://extensions.sondages.pro/
• Copyright © 2016-2025 Denis Chenu http://www.sondages.pro- Licence : GNU General Public License https://www.gnu.org/licenses/agpl.html
• Copyright © 2016 Advantages https://advantages.fr/
• Copyright © 2017 Réseaux en scène https://www.reseauenscene.fr/
• Copyright © 2025 Code contributors https://github.com/SondagesPro/LS-radioToStarRating/graphs/contributors

Distributed under GNU AFFERO GENERAL PUBLIC LICENSE Version 3 licence

This plugin use Font Awesome by Dave Gandy - http://fontawesome.io, distributed under SIL OFL 1.1 and MIT License.