How to fill a star rating?

Question

How to fill the stars of a "star rating".

The calculation is apparently working. Giving an "echo" in the variable $calc the result is displayed. Example, if the note is 3.3, it must fill 3 stars and 30% of the 4 star rating.

The question is: where should I place this variable to be displayed as stars?

HTML code

  <form id="rating" action"rating.php" method="post">
   <input type="hidden" name="id" id="idd" value="<?php $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>

Javascript (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
});

Query in 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'];
//saída do rating (pontuação)
$calc = round(($ponto/$voto),1);

Answer 1

The point is that you have a note from 1 to 5, which all indicates, in this sense, if the note is 3, you would have to make a checkbox in input number 3:

<input id="stars" class="radioo" type="radio" name="fb" value="3"<?php echo ($calc == 3) ? ' checked="checked"' : '';?>/>

jQuery will do the onload event, based on this element, by assigning an active to the class from which there is a computed input value: going through the classes: .vote label i.fa:

Seria:<i class="fa active" id="fa"></i>

So, I believe there’s no need to keep it active manually, but if not, just do the same:

 <i class="fa<?php echo ($calc == 3) ? ' active' : '';?>" id="fa"></i>