<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section>
<div class="container">
<h2>Evaluation<small> Description </small></h2>
</div>
<div class="container">
<h3>[Name] Lorem Ipsum</h3>
<div class="row lead evaluation">
<div id="colorstar" class="starrr ratable" ></div>
<span id="count">0</span> star(s) - <span id="meaning"> </span>
<div class='indicators' style="display:none">
<div id='textwr'>What went wrong?</div>
<input id="rate[]" name="rate[]" type="text" placeholder="" class="form-control input-md" style="display:none;">
<input id="rating[]" name="rating[]" type="text" placeholder="" class="form-control input-md rateval" style="display:none;">
<span class="button-checkbox">
<button type="button" class="btn criteria" data-color="info">Punctuallity</button>
<input type="checkbox" class="hidden" />
</span>
<span class="button-checkbox">
<button type="button" class="btn criteria" data-color="info">Assistance</button>
<input type="checkbox" class="hidden" />
</span>
<span class="button-checkbox">
<button type="button" class="btn criteria" data-color="info">Knowledge</button>
<input type="checkbox" class="hidden" />
</span>
</div>
</div>
<h3>[Name] Lorem Ipsum</h3>
<div class="row lead evaluation">
<div id="colorstar" class="starrr ratable" ></div>
<span id="count">0</span> star(s) - <span id="meaning"> </span>
<div class='indicators' style="display:none">
<div id='textwr'>What went wrong?</div>
<input id="rate[]" name="rate[]" type="text" placeholder="" class="form-control input-md" style="display:none;">
<input id="rating[]" name="rating[]" type="text" placeholder="" class="form-control input-md rateval" style="display:none;">
<span class="button-checkbox">
<button type="button" class="btn" data-color="info">Punctuallity</button>
<input type="checkbox" class="hidden" />
</span>
<span class="button-checkbox">
<button type="button" class="btn" data-color="info">Assistance</button>
<input type="checkbox" class="hidden" />
</span>
<span class="button-checkbox">
<button type="button" class="btn" data-color="info">Knowledge</button>
<input type="checkbox" class="hidden" />
</span>
</div>
</div>
</div>
</section>
#colorstar { color: #ee8b2d;}
.badForm {color: #FF0000;}
.goodForm {color: #00FF00;}
.evaluation { margin-left:30px;}
// Starrr plugin (https://github.com/dobtco/starrr)
var __slice = [].slice;
(function($, window) {
var Starrr;
Starrr = (function() {
Starrr.prototype.defaults = {
rating: void 0,
numStars: 5,
change: function(e, value) {}
};
function Starrr($el, options) {
var i, _, _ref,
_this = this;
this.options = $.extend({}, this.defaults, options);
this.$el = $el;
_ref = this.defaults;
for (i in _ref) {
_ = _ref[i];
if (this.$el.data(i) != null) {
this.options[i] = this.$el.data(i);
}
}
this.createStars();
this.syncRating();
this.$el.on('mouseover.starrr', 'span', function(e) {
return _this.syncRating(_this.$el.find('span').index(e.currentTarget) + 1);
});
this.$el.on('mouseout.starrr', function() {
return _this.syncRating();
});
this.$el.on('click.starrr', 'span', function(e) {
return _this.setRating(_this.$el.find('span').index(e.currentTarget) + 1);
});
this.$el.on('starrr:change', this.options.change);
}
Starrr.prototype.createStars = function() {
var _i, _ref, _results;
_results = [];
for (_i = 1, _ref = this.options.numStars; 1 <= _ref ? _i <= _ref : _i >= _ref; 1 <= _ref ? _i++ : _i--) {
_results.push(this.$el.append("<span class='glyphicon .glyphicon-star-empty'></span>"));
}
return _results;
};
Starrr.prototype.setRating = function(rating) {
if (this.options.rating === rating) {
rating = void 0;
}
this.options.rating = rating;
this.syncRating();
return this.$el.trigger('starrr:change', rating);
};
Starrr.prototype.syncRating = function(rating) {
var i, _i, _j, _ref;
rating || (rating = this.options.rating);
if (rating) {
for (i = _i = 0, _ref = rating - 1; 0 <= _ref ? _i <= _ref : _i >= _ref; i = 0 <= _ref ? ++_i : --_i) {
this.$el.find('span').eq(i).removeClass('glyphicon-star-empty').addClass('glyphicon-star');
}
}
if (rating && rating < 5) {
for (i = _j = rating; rating <= 4 ? _j <= 4 : _j >= 4; i = rating <= 4 ? ++_j : --_j) {
this.$el.find('span').eq(i).removeClass('glyphicon-star').addClass('glyphicon-star-empty');
}
}
if (!rating) {
return this.$el.find('span').removeClass('glyphicon-star').addClass('glyphicon-star-empty');
}
};
return Starrr;
})();
return $.fn.extend({
starrr: function() {
var args, option;
option = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
return this.each(function() {
var data;
data = $(this).data('star-rating');
if (!data) {
$(this).data('star-rating', (data = new Starrr($(this), option)));
}
if (typeof option === 'string') {
return data[option].apply(data, args);
}
});
}
});
})(window.jQuery, window);
$(function() {
return $(".starrr").starrr();
});
$( document ).ready(function() {
var correspondence=["","Really Bad","Bad","Fair","Good","Excelent"];
$('.ratable').on('starrr:change', function(e, value){
$(this).closest('.evaluation').children('#count').html(value);
$(this).closest('.evaluation').children('#meaning').html(correspondence[value]);
var currentval= $(this).closest('.evaluation').children('#count').html();
var target= $(this).closest('.evaluation').children('.indicators');
target.css("color","black");
target.children('.rateval').val(currentval);
target.children('#textwr').html(' ');
if(value<3){
target.css("color","red").show();
target.children('#textwr').text('What can be improved?');
}else{
if(value>3){
target.css("color","green").show();
target.children('#textwr').html('What was done correctly?');
}else{
target.hide();
}
}
});
$('#hearts-existing').on('starrr:change', function(e, value){
$('#count-existing').html(value);
});
});
$(function () {
$('.button-checkbox').each(function () {
// Settings
var $widget = $(this),
$button = $widget.find('button'),
$checkbox = $widget.find('input:checkbox'),
color = $button.data('color'),
settings = {
on: {
icon: 'glyphicon glyphicon-check'
},
off: {
icon: 'fa fa-square-o'
}
};
// Event Handlers
$button.on('click', function () {
$checkbox.prop('checked', !$checkbox.is(':checked'));
$checkbox.triggerHandler('change');
updateDisplay();
});
$checkbox.on('change', function () {
updateDisplay();
});
// Actions
function updateDisplay() {
var isChecked = $checkbox.is(':checked');
// Set the button's state
$button.data('state', (isChecked) ? "on" : "off");
// Set the button's icon
$button.find('.state-icon')
.removeClass()
.addClass('state-icon ' + settings[$button.data('state')].icon);
// Update the button's color
if (isChecked) {
$button
.removeClass('btn-default')
.addClass('btn-' + color + ' active');
}
else {
$button
.removeClass('btn-' + color + ' active')
.addClass('btn-default');
}
}
// Initialization
function init() {
updateDisplay();
// Inject the icon if applicable
if ($button.find('.state-icon').length == 0) {
$button.prepend('<i class="state-icon ' + settings[$button.data('state')].icon + '"></i> ');
}
}
init();
});
});
