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');

//Cargamos las posibles respuestas en un array
var respua = ["Disculpa, veo que te has equivocado de respuesta, la correcta es ","Ops, esa no es la opción correcta, resulta que era la opcion ","Estimado lamento informarle que la opcion elegida no es la correcta, devió selecciona la opcion "];

//Seleccionamos aleatoriamente una respuesta
var aleatorio = Math.floor(Math.random()*(respua.length));

//Asignamos a una variable la respuesta a mostrar
var seleccion = respua[aleatorio];



			/*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(seleccion + respu);
        $("#"+des).attr('class','textoB');
				$("input[name=incorrectas]").val(parseInt($("input[name=incorrectas]").val())+1)

			};
                                                                                                                              
}