como preencher as estrelas do star rating de acordo com os votos?

[leonardo2334 0]

como faco para preencher as estrelas de um star rating já esta tudo funcionando o calculo e tudo dei um echo na variável calculo para ver o resultado que ele me retornaria e ele esta me retornando certo porem não estou conseguindo deixar ela preenchida por exemplo a nota daquele produto e 3.3 ele preencher 3 estrelas e 30% da quarta como que faco isso? aonde eu tenho que jogar minha variavel para ele mostrar nas estrelas?

<form id="rating" action"rating.php" method="post">

<input type="hidden" name="id" id="idd" value="$idprod" />

<div class="vote">

<label>

<input id="stars" class="radioo" type="radio" name="fb" value="1" />

<i class="fa" id="fa"></i>

</label>

<label>

<input id="stars" class="radioo" type="radio" name="fb" value="2" />

<i class="fa" id="fa"></i>

</label>

<label>

<input id="stars" class="radioo" type="radio" name="fb" value=\"3\" />

<i class="fa" id="fa"></i>

</label>

<label>

<input id="stars" class="radioo" type="radio" name="fb" value="4" />

<i class="fa" id="fa"></i>

</label>

<label>

<input id="stars" class="radioo" type="radio" name="fb" value="5" />

<i class="fa" id="fa"></i>

</label>

</div>

</form>

jquery:

$('.vote label i.fa').on('click mouseover',function(){

// remove classe ativa de todas as estrelas

$('.vote label i.fa').removeClass('active');

// pegar o valor do input da estrela clicada

var val = $(this).prev('input').val();

//percorrer todas as estrelas

$('.vote label i.fa').each(function(){

/* checar de o valor clicado é menor ou igual do input atual

* se sim, adicionar classe active

*/

var $input = $(this).prev('input');

if($input.val() <= val){

$(this).addClass('active');

}

});

$("#voto").html(val); // somente para teste

});

//Ao sair da div vote

$('.vote').mouseleave(function(){

//pegar o valor clicado

var val = $(this).find('input:checked').val();

//se nenhum foi clicado remover classe de todos

if(val == undefined ){

$('.vote label i.fa').removeClass('active');

} else {

//percorrer todas as estrelas

$('.vote label i.fa').each(function(){

/* Testar o input atual do laço com o valor clicado

* se maior, remover classe, senão adicionar classe

*/

var $input = $(this).prev('input');

if($input.val() > val){

$(this).removeClass('active');

} else {

$(this).addClass('active');

}

});

}

$("#voto").html(val); // somente para teste

});

php:

$id = $_GET['cod'];

$sql = mysql_query("SELECT * FROM produtos WHERE id_produto = $id");

$test = mysql_query("SELECT votos, pontos FROM produtos WHERE id_produto = $id");

$aux = mysql_fetch_array($sql);

$idprod = $aux['id_produto'];

$row = mysql_fetch_array($test);

$voto = $row['votos'];

$ponto = $row['pontos'];

$calc = round(($ponto/$voto),1);

[Helmesvs 10]

Você tera que configurar o font awesome

https://fortawesome.github.io/Font-Awesome/icons/

 

Pegue os icons de estrela e configure de acordo

<i class="fa fa-star"></i>

Essa ai é a estrela toda prenchida. Pegue todas e configure

[leonardo2334 0]

mas e o calculo como que jogo nela pra preencher tipo 3 estrelas e 30% da 4?

[Alaerte Gabriel 662]

https://www.oficinadanet.com.br/artigo/1589/jquery_rating_-_sistema_de_votacao_interativa