Consulta de variable

[lorthand]

Hola a todos!
Tengo un problema bastante simple por falta de conocimiento y necesito que me den una mano.
Estoy haciendo una web en php, pero no entiendo mucho de javascript (tampoco lo necesito mucho por ahora y con tiempo ire leyendo tutoriales).
Mi consulta es la siguiente:
Tengo un formulario hecho en php que ingresa datos a una base de datos, quiero poner un sistema de puntaje y descargué uno gratuito que me gustó mucho. (http://www.ajaxshake.com/plugin/ES/835/88fda336/sistema-de-rating-de-colores-con-css3-y-jquery-colorrating.html)
Lo descargué y ahora necesitaria que al incluirlo en el formulario, al hacerle click a uno de los 5 puntajes me lo guarde en una variable para que luego al hacer click en el boton "Enviar" se pueda ingresar en la base. Otra cosa que no se como hacer, es que al hacer click en uno de los 5, no se haga un reset de los colores, es decir, que quede pintado donde se clickeo.
Les paso el codigo que tengo:
Esta el la parte html (que esta dentro de un php)

Código:

<ul id="rating">
   <li><a href="#1">Muy malo!</a></li>
   <li><a href="#2">Malo</a></li>
   <li><a href="#3">Regular</a></li>
   <li><a href="#4">Bueno</a></li>
   <li><a href="#5">Excelente!</a></li>
</ul>

Y este es el javascript:

Código:

$(document).ready(function()
{
	// Variable to set the duration of the animation
	var animationTime = 300;
	
	// Variable to store the colours
	var colours = ["bd2c33", "e49420", "ecdb00", "3bad54", "1b7db9"];

	// Add rating information box after rating
	var ratingInfobox = $("<div />")
		.attr("id", "ratinginfo")
		.insertAfter($("#rating"));

	// Function to colorize the right ratings
	var colourizeRatings = function(nrOfRatings) {
		$("#rating li a").each(function() {
			if($(this).parent().index() <= nrOfRatings) {
				$(this).stop().animate({ backgroundColor : "#" + colours[nrOfRatings] } , animationTime);
			}
		});
	};
	
	// Handle the hover events
	$("#rating li a").hover(function() {
		
		// Empty the rating info box and fade in
		ratingInfobox
			.empty()
			.stop()
			.animate({ opacity : 1 }, animationTime);
		
		// Add the text to the rating info box
		$("<p />")
			.html($(this).html())
			.appendTo(ratingInfobox);
		
		// Call the colourize function with the given index
		colourizeRatings($(this).parent().index());
	}, function() {
		
		// Fade out the rating information box
		ratingInfobox
			.stop()
			.animate({ opacity : 0 }, animationTime);
		
		// Restore all the rating to their original colours
		$("#rating li a").stop().animate({ backgroundColor : "#333" } , animationTime);
	});
	
		  
	// Prevent the click event and show the rating
//	});
});

Podrian por favor decirme como completarlo para guardarlo en una variable en el javascript y como llamar a esa variable desde php?
Muchisimas gracias!

[PIRRUMAN]

podrias utilizar javascript para asignar el valor de lo que seleccionen a una caja de texto o si loprefieres a un campo oculto(hidden) y despues enviarlo, para enviarlo debes poner tus campos dentro de un form
para evitar que se cambie el color basta con colocarle estilos a las ligas
prueba con esto:

<STYLE type="text/css">
.ligas
{
cursor:pointer;
color:blue;
}
</STYLE>
<script languaje="javascript">
function agregarvalor(valor)
{
document.getElementById('calificacion').value=valo r;
document.getElementById('calificacionhidden').valu e=valor;
}
</script>

<?php print_r($_POST);?>
<ul id="rating">
<li><b class="ligas" onclick="agregarvalor('Muy malo!')">Muy malo!</b></li>
<li><b class="ligas" onclick="agregarvalor('Malo')">Malo</b></li>
<li><b class="ligas" onclick="agregarvalor('Regular')">Regular</b></li>
<li><b class="ligas" onclick="agregarvalor('Bueno')">Bueno</b></li>
<li><b class="ligas" onclick="agregarvalor('Excelente!')">Excelente!</b></li>
</ul>
<form name="formulario" method="post">
<input type="text" id="calificacion" name="calificacion" id="texto"/>
<input type="hidden" id="calificacionhidden" name="calificacionhidden" id="texto"/>
<input type="submit" value="enviar"/>
</form>

[lorthand]

Gracias por responder Pirruman, algo que me falto aclarar antes, es que los valores se guardan como INT del 1 al 5. Igualmente le cambie los valores que me pasaste y seria lo mismo.
Borrandole el

document.getElementById('calificacion').value=valo r;

y el

<input type="text" id="calificacion" name="calificacion" id="texto"/>

funcionaría igual pero sin mostrar en pantalla el numero? Y por ultimo, sigo sin poder hacer que si clickeo el 4to circulo se queden coloreados los 4 cuando saco el puntero.
Muchisimas gracias!

[lorthand]

Ya lo pude hacer andar perfecto con lo que me pasaron aca.
Los unicos 2 problemas que tengo ahora son que cuando hago cick no se "congela" la animacion, yo quiero que si clickeaste 4 puntos se queden pintados los 4 y no se vacíen cuando sacas el puntero. Y otra cosa, es que son tres barras de puntos una abajo de la otra, logre hacer que cada uno guarde en una variable diferente, pero cuando paso el puntero por cualquiera se pintan las 3 barras.
Alguien me da una mano?