JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<section>

<div class="pregunta" id="otra">
<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">
<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">
<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>

<button class="boton_avanzar">Avanzar</button>

</section>

CSS

section {
	font-family: Helvetica,Arial,sans-serif;
	font-size: 15px;
	color: #000000;
	line-height: 20px;
	text-align: justify;
	width: 825px;
	height: auto;
	margin: 10px auto 0 auto;
	padding: 15px;
	z-index: 999;
	background-color: #FFFFFF;
	
	/*para Firefox*/
	-moz-border-radius: 15px 15px 15px 15px;
	/*para Safari y Chrome*/
	-webkit-border-radius: 15px 15px 15px 15px;
	/* para Opera */
	border-radius: 0px 0px 15px 15px;
	/* Sombra */
	-webkit-box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.25);
	-moz-box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.25);
	box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.25);
	}

.pregunta {
	font-family: Helvetica,Arial,sans-serif;
	font-size: 15px;
	color: #000000;
	line-height: 20px;
	text-align: justify;	
	margin: 10px auto 0 auto;
	padding: 15px;	
	z-index: 2;
	background-color: #FF0000;
	opacity: 0;
	transition: .6s;
	
}

.pregunta ul {
	color: #000;
	text-decoration: none;
	display: block;
	padding: 10px 10px 10px 10px;
	z-index: 999;
}

.pregunta li {
	color: #000;
	text-decoration: none;
	display: block;
	padding: 0px 0px 10px 0px;
}

input[type=radio] {  
    margin: 0 10px 0 0;
	background-color: #FF0000;
}

.boton_avanzar {
	font-family: Helvetica,Arial,sans-serif;
	font-size: 15px;
	color: #FFFFFF;
	text-align: center;
	line-height: 50px;
	text-decoration: none;
	width: 200px;
	height: 55px;
	display: block;
	margin: 15px auto 0 625px;
	position: absolute;
	float: right;	
	background-color: #008BDB;
	cursor: pointer;
	border: none;
	
	/*para Firefox*/
	-moz-border-radius: 0 0 15px 15px;
	/*para Safari y Chrome*/
	-webkit-border-radius: 0 0 15px 15px;
	/* para Opera */
	border-radius: 0 0 15px 15px;
}

.boton_avanzar:hover {
	background-color: #004064;
}

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;
			$('input[name=a]').attr("disabled",true);
		}
		else{
			alert("Has llegado al final");
		}
	}, false);
}, false);