Skip to content

Instantly share code, notes, and snippets.

@michitheonlyone

michitheonlyone/rating.html

Created June 15, 2024 21:21
Show Gist options
  • Save michitheonlyone/4c1a85bf25129c4f6dcf40961a298a55 to your computer and use it in GitHub Desktop.
Save michitheonlyone/4c1a85bf25129c4f6dcf40961a298a55 to your computer and use it in GitHub Desktop.
Download ZIP
Star Rating HTML
Raw
rating.html
<tr>
<!--<td style="width: 100%">-->
<td>
<b>Fragetitel</b>
<br />Description frage beschreibung
</td>
<td>
<input type="hidden" value="" name="emoji-rating" id="emoji-rating" />
<div class="btn-group">
<button type="button" class="btn btn-outline-secondary btnrating" data-attr="1" id="rating-star-1">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-emoji-angry" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"></path>
<path d="M4.285 12.433a.5.5 0 0 0 .683-.183A3.5 3.5 0 0 1 8 10.5c1.295 0 2.426.703 3.032 1.75a.5.5 0 0 0 .866-.5A4.5 4.5 0 0 0 8 9.5a4.5 4.5 0 0 0-3.898 2.25.5.5 0 0 0 .183.683m6.991-8.38a.5.5 0 1 1 .448.894l-1.009.504c.176.27.285.64.285 1.049 0 .828-.448 1.5-1 1.5s-1-.672-1-1.5c0-.247.04-.48.11-.686a.502.502 0 0 1 .166-.761zm-6.552 0a.5.5 0 0 0-.448.894l1.009.504A1.94 1.94 0 0 0 5 6.5C5 7.328 5.448 8 6 8s1-.672 1-1.5c0-.247-.04-.48-.11-.686a.502.502 0 0 0-.166-.761z"></path>
</svg>
<span class="visually-hidden">Button</span>
</button>
<button type="button" class="btn btn-outline-secondary btnrating" data-attr="2" id="rating-star-2">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-emoji-astonished" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
<path d="M7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5m4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5M4.884 4.022a2 2 0 0 1 1.458-.048.5.5 0 0 0 .316-.948 3 3 0 0 0-2.167.077 3.1 3.1 0 0 0-.773.478q-.036.03-.07.064l-.002.001a.5.5 0 0 0 .707.708l-.001.002.001-.002a2 2 0 0 1 .122-.1 2 2 0 0 1 .41-.232Zm6.232 0a2 2 0 0 0-1.458-.048.5.5 0 1 1-.316-.948 3 3 0 0 1 2.168.077 3 3 0 0 1 .773.478l.07.064v.001a.5.5 0 0 1-.706.708l.002.002-.002-.002a2 2 0 0 0-.122-.1 2 2 0 0 0-.41-.232ZM8 10c-.998 0-1.747.623-2.247 1.246-.383.478.08 1.06.687.98q1.56-.202 3.12 0c.606.08 1.07-.502.687-.98C9.747 10.623 8.998 10 8 10"/>
</svg>
<span class="visually-hidden">Button</span>
</button>
<button type="button" class="btn btn-outline-secondary btnrating" data-attr="3" id="rating-star-3">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-emoji-neutral" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
<path d="M4 10.5a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 0-1h-7a.5.5 0 0 0-.5.5m3-4C7 5.672 6.552 5 6 5s-1 .672-1 1.5S5.448 8 6 8s1-.672 1-1.5m4 0c0-.828-.448-1.5-1-1.5s-1 .672-1 1.5S9.448 8 10 8s1-.672 1-1.5"/>
</svg>
<span class="visually-hidden">Button</span>
</button>
<button type="button" class="btn btn-outline-secondary btnrating" data-attr="4" id="rating-star-4">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-emoji-smile" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
<path d="M4.285 9.567a.5.5 0 0 1 .683.183A3.5 3.5 0 0 0 8 11.5a3.5 3.5 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.5 4.5 0 0 1 8 12.5a4.5 4.5 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683M7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5m4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5"/>
</svg>
<span class="visually-hidden">Button</span>
</button>
<button type="button" class="btn btn-outline-secondary btnrating" data-attr="5" id="rating-star-5">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-emoji-laughing" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
<path d="M12.331 9.5a1 1 0 0 1 0 1A5 5 0 0 1 8 13a5 5 0 0 1-4.33-2.5A1 1 0 0 1 4.535 9h6.93a1 1 0 0 1 .866.5M7 6.5c0 .828-.448 0-1 0s-1 .828-1 0S5.448 5 6 5s1 .672 1 1.5m4 0c0 .828-.448 0-1 0s-1 .828-1 0S9.448 5 10 5s1 .672 1 1.5"/>
</svg>
<span class="visually-hidden">Button</span>
</button>
</div>
<div class="star-rating">
<input type="radio" id="star5" name="star-rating" value="5" />
<label for="star5" title="text">5 stars</label>
<input type="radio" id="star4" name="star-rating" value="4" />
<label for="star4" title="text">4 stars</label>
<input type="radio" id="star3" name="star-rating" value="3" />
<label for="star3" title="text">3 stars</label>
<input type="radio" id="star2" name="star-rating" value="2" />
<label for="star2" title="text">2 stars</label>
<input type="radio" id="star1" name="star-rating" value="1" />
<label for="star1" title="text">1 star</label>
</div>
</td>
<td><span class="badge text-bg-light p-2 m-2 border lead emoji-rating" id="emoji-rating-value">Note: 0</span></td>
<td><textarea cols="3" class="form-control" type="text" style="width: 600px;"></textarea></td>
</tr>
Raw
rating.js
import './styles/rating.css';
import $ from 'jquery';
$(document).ready(function($){
// TODO add conditionals for colors danger, warning
$(".btnrating").on('click',(function(e) {
// previous
var previous_value = $("#emoji-rating").val();
// new
var selected_value = $(this).attr("data-attr");
// the input
$("#emoji-rating").val(selected_value);
// the visual number "Note"
$(".emoji-rating").empty();
$(".emoji-rating").html('Note: ' + selected_value * 20);
// $("#emoji-rating-value").toggleClass('text-bg-secondary');
switch (previous_value) {
case '1':
$(".emoji-rating").removeClass('text-bg-light text-bg-danger text-bg-warning text-bg-info text-bg-primary text-bg-success ');
$(".emoji-rating").addClass('text-bg-danger');
$("#rating-star-"+previous_value).toggleClass('btn-danger');
// $("#emoji-rating-value").toggleClass('text-bg-primary');
break;
case '2':
$(".emoji-rating").removeClass('text-bg-light text-bg-danger text-bg-warning text-bg-info text-bg-primary text-bg-success ');
$(".emoji-rating").addClass('text-bg-warning');
$("#rating-star-"+previous_value).toggleClass('btn-warning');
break;
case '3':
$(".emoji-rating").removeClass('text-bg-light text-bg-danger text-bg-warning text-bg-info text-bg-primary text-bg-success ');
$(".emoji-rating").addClass('text-bg-info');
$("#rating-star-"+previous_value).toggleClass('btn-info');
break;
case '4':
$(".emoji-rating").removeClass('text-bg-light text-bg-danger text-bg-warning text-bg-info text-bg-primary text-bg-success ');
$(".emoji-rating").addClass('text-bg-primary');
$("#rating-star-"+previous_value).toggleClass('btn-primary');
break;
case '5':
$(".emoji-rating").removeClass('text-bg-light text-bg-danger text-bg-warning text-bg-info text-bg-primary text-bg-success ');
$(".emoji-rating").addClass('text-bg-success');
$("#rating-star-"+previous_value).toggleClass('btn-success');
break;
default: // should never happen!
$(".emoji-rating").removeClass('text-bg-light text-bg-danger text-bg-warning text-bg-info text-bg-primary text-bg-success ');
$(".emoji-rating").addClass('text-bg-light');
$("#rating-star-"+previous_value).toggleClass('btn-secondary');
}
// $("#rating-star-"+previous_value).toggleClass('btn-secondary');
$("#rating-star-"+previous_value).toggleClass('btn-outline-secondary');
// for (let i = 1; i <= selected_value; ++i) {
// TODO do it with the previous value above!!!
// switch (i) {
// case 1:
// $("#rating-star-" + i).toggleClass('btn-danger');
// break;
// case 2:
// $("#rating-star-" + i).toggleClass('btn-warning');
// break;
// case 3:
// $("#rating-star-" + i).toggleClass('btn-info');
// break;
// case 4:
// $("#rating-star-" + i).toggleClass('btn-primary');
// break;
// case 5:
// $("#rating-star-" + i).toggleClass('btn-success');
// break;
// default: // should never happen!
// $("#rating-star-" + i).toggleClass('btn-warning');
// }
// $("#rating-star-"+i).toggleClass('btn-secondary');
// $("#rating-star-"+i).toggleClass('btn-outline-secondary');
// }
// for (let ix = 1; ix <= previous_value; ++ix) {
// switch (ix) {
// case 1:
// $("#rating-star-" + ix).toggleClass('btn-danger');
// break;
// case 2:
// $("#rating-star-" + ix).toggleClass('btn-warning');
// break;
// case 3:
// $("#rating-star-" + ix).toggleClass('btn-info');
// break;
// case 4:
// $("#rating-star-" + ix).toggleClass('btn-primary');
// break;
// case 5:
// $("#rating-star-" + ix).toggleClass('btn-success');
// break;
// default: // should never happen!
// $("#rating-star-" + ix).toggleClass('btn-warning');
// }
// $("#rating-star-" + ix).toggleClass('btn-secondary');
// $("#rating-star-" + ix).toggleClass('btn-outline-secondary');
// }
}));
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment