JSFiddle - React, Tailwind, and code Playground

by Carlos Quintero

HTML

<div id="p1">¿Pregunta 3?</div>
<fieldset>
<legend>Opciones</legend>
    <input type="radio" name="R1" id="R1a-2" value="R1a" onClick="verif(this.id);"/>Respuesta 1
    <input type="radio" name="R1" id="R1b-2" value="R1b" onClick="verif(this.id);"/>Respuesta 2
    <input type="radio" name="R1" id="R1c-2" value="R1c" onClick="verif(this.id);"/>Respuesta 3
    <input type="radio" name="R1" id="R1d-2" value="R1d" onClick="verif(this.id);"/>Respuesta 4
</fieldset>
<div id="R1"></div>
<hr>
<div id="p1">¿Pregunta 2?</div>
<br>
<fieldset>
<legend>Opciones</legend>
    <input type="radio" name="R2" id="R2a-1" value="R2a" onClick="verif(this.id);"/>Respuesta 1
    <input type="radio" name="R2" id="R2b-1" value="R2b" onClick="verif(this.id);"/>Respuesta 2
    <input type="radio" name="R2" id="R2c-1" value="R2c" onClick="verif(this.id);"/>Respuesta 3
    <input type="radio" name="R2" id="R2d-1" value="R2d" onClick="verif(this.id);"/>Respuesta 4
</fieldset>
<div id="R2"></div>
<hr>
<div id="p1">¿Pregunta 3?</div>
<br>
<fieldset>
<legend>Opciones</legend>
    <input type="radio" name="R3" id="R3a-4" value="R3a" onClick="verif(this.id);"/>Respuesta 1
    <input type="radio" name="R3" id="R3b-4" value="R3b" onClick="verif(this.id);"/>Respuesta 2
    <input type="radio" name="R3" id="R3c-4" value="R3c" onClick="verif(this.id);"/>Respuesta 3
    <input type="radio" name="R3" id="R3d-4" value="R3d" onClick="verif(this.id);"/>Respuesta 4
</fieldset>
<div id="R3"></div>
<hr>
<label>Correctas</label>
<input type="text" name="correctas" value="0" readonly/>
<label>Incorrectas</label>
<input type="text" name="incorrectas" value="0" readonly/>

CSS

.texto{
	color:#FFFFFF;
	background-color:#008F19;
	padding:5px;
	width:100%;

}
.textoB{
	color:#FFFFFF;
	background-color:#B80003;
	padding:5px;
	width:100%;

}

JavaScript

function verif(X){

var A = X.split("-");
var cabe = A[0];
var respu = A[1];
console.log(cabe);


/*Respuestas Correctas*/
var	cor = ["R1b" , "R2a" , "R3d"];
/*Verificamos si la id esta en el array*/
var esta = $.inArray(cabe, cor);

/*desactivamos los radio una vez el alumno selecciona la respuesta*/
var des = $("input[id="+X+"]").attr("name");
$("input[name="+des+"]").attr('disabled','disabled');


			/*Validamos si la respuesta esta en el array y cargamos el resultado*/
			if(esta > -1 ){
				$("#"+des).html("Respuesta Correcta");
        $("#"+des).attr('class','texto');
				$("input[name=correctas]").val(parseInt($("input[name=correctas]").val())+1)

			}else{
				$("#"+des).html("Respuesta Incorrecta, la Respuesta era la opción "+respu);
        $("#"+des).attr('class','textoB');
				$("input[name=incorrectas]").val(parseInt($("input[name=incorrectas]").val())+1)

			};

}