Visible y ocultar div

[ceaped]

Hola
Este código me lo facilitó Alexis88:

Código Javascript:

document.addEventListener("DOMContentLoaded", function(){
    var button = document.querySelector(".boton_avanzar"),
        divs = document.querySelectorAll(".pregunta"),
        total = divs.length,
        count = 0;
    
    //Solo la primera vez
    divs[count].style.opacity = 1;  
    
    
    //Al pulsar el botón
    button.addEventListener("click", function(){
        if (count++ < total - 1){
            divs[count - 1].style.opacity = 1;
            divs[count].style.opacity = 1;
            
            //Pinta y bloquea las preguntas
            $('input[name=a]').attr("disabled",true);
            $("#1").css("background-color", "#60CB00");
        }
        else{
            alert("Has llegado al final");
        }
    }, false);
}, false);
 

Mi HTML es:

Código HTML:

<div class="pregunta" id="1">
<h3>Pregunta 1</h3>
<ul>
<li><input name="a" type="radio" onclick="Alert.render('Respuesta 1')" >a. Respuesta</li>
<li><input name="a" type="radio" onclick="Alert.render('Respuesta 2')" >b. Respuesta</li>
<li><input name="a" type="radio" onclick="Alert.render('Respuesta 3')" >c. Respuesta</li>
<li><input name="a" type="radio" onclick="Alert.render('Respuesta 4')" >d. Respuesta</li>
</ul>
</div>
 
<div class="pregunta" id="2">
<h3>Pregunta 2</h3>
<ul>
<li><input name="b" type="radio" onclick="Alert.render('Respuesta 1')" >a. Respuesta</li>
<li><input name="b" type="radio" onclick="Alert.render('Respuesta 2')" >b. Respuesta</li>
<li><input name="b" type="radio" onclick="Alert.render('Respuesta 3')" >c. Respuesta</li>
<li><input name="b" type="radio" onclick="Alert.render('Respuesta 4')" >d. Respuesta</li>
</ul>
</div>
 
<div class="pregunta" id="3">
<h3>Pregunta 3</h3>
<ul>
<li><input name="c" type="radio" onclick="Alert.render('Respuesta 1')" >a. Respuesta</li>
<li><input name="c" type="radio" onclick="Alert.render('Respuesta 2')" >b. Respuesta</li>
<li><input name="c" type="radio" onclick="Alert.render('Respuesta 3')" >c. Respuesta</li>
<li><input name="c" type="radio" onclick="Alert.render('Respuesta 4')" >d. Respuesta</li>
</ul>
</div>
 

Yo lo que intento hacer es que cuando seleccione alguna de las opciones de la pregunta 1 se pinte de rojo o de verde (Buena o mala) y que la bloquee.
Que cuando le al botón avanzar aparezca al pregunta 2 y la misma dinámica de la 1 me indique si esta buena o mala y que la bloquee y así para la tres.

Código Javascript:

$('input[name=a]').attr("disabled",true);
$("#1").css("background-color", "#60CB00");
 

Solo logro hacerlo para la primera pregunta. ¿Cómo hago para que funcione para las demás?

Gracias por su ayuda