vengo con la siguiente duda la cual no he podido encontrar la manera de resolverla, si me pudieran echar la mano, estaría genial.
Lo que pasa es que necesito guardar en un arreglo el radioButton seleccionado por el usuario de la vista MenuAlumno.php
Sin tener exito.
Explicando un poco de contexto, les muestro mi código:
MenuAlumno.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quizz #1</title>
<!-- Si la conexion falla, aqui esta offline -->
<!--<link rel="stylesheet" type="text/css" href="../../public/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="../../public/css/style.css">
<script src="https://kit.fontawesome.com/a296fa0db7.js" crossorigin="anonymous"></script>
<script src="../../public/js/JQuery.js"></script>
<script src="../../public/js/bootstrap.js"></script>
<script src="../../public/js/JQuery.js"></script> -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/a296fa0db7.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand navbar-light">
<div class="container">
<a href="../../inicio.php" class="navbar-brand ">Bienvenido(a)</a><button data-toggle="collapse" data-target="#navcol-1" class="navbar-toggler"></button>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="navbar-nav ml-auto">
<li role="presentation" class="nav-item "><a href="" class="nav-link"><span class="fas fa-user-circle"> zS15013908 </a></span></li>
</ul>
</div>
</div>
</nav>
</div>
<nav aria-label="breadcrumb" class="col-md-6 offset-3">
<ol class="breadcrumb ">
<li class="breadcrumb-item ">Inicio</li>
<li class="breadcrumb-item active">Menu del Alumno</li>
</ol>
</nav>
<section id="main">
<div class="container">
<div class="row">
<div class="col col-md-6">
<h2 class="mt-3" id="tituloPregunta">Pregunta</h2> <!-- Mt-3 Margin-top 1 -->
<span id="preguntaInicial" class="text-justify ">¿Aqui debe de ir la pregunta?</span>
<div id="videoInstruccionPregunta" class="embed-responsive embed-responsive-16by9 mt-2 mb-3">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/kSvtVD8r-iI " frameborder="0"></iframe>
</div>
<p id="textoVideoPregunta" class="text-justify">Aqui debe ir la traduccion del video de la pregunta(anotaciones) principal </p>
</div>
<div class="col col-md-6">
<h2 class="mt-3" id="tituloRespuesta">Respuestas</h2> <!-- Mt-3 Margin-top 1 -->
<div class="row">
<div class="col col-md-6">
<span class="" id="Opcion1"> Opcion 1</span>
<div id="videoOpcion1" class="embed-responsive embed-responsive-16by9 mt-2 mb-2">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/pgTJT5YsYRY" frameborder="0"></iframe>
</div>
</div>
<div class="col col-md-6">
<!-- <div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch1">
<label class="custom-control-label" for="customSwitch1">Marcar como correcta</label>
</div> -->
<!-- Default unchecked -->
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="rbOpcion1" name="groupOfDefaultRadios">
<label class="custom-control-label" for="rbOpcion1">Marcar como correcta</label>
</div>
<div>
<p id="textoOpcion1" class="text-justify mt-2">
Aqui debe de ir la traduccion del video de la primera respuesta(acotaciones)
</p>
</div>
</div>
</div>
<div class="row">
<div class="col col-md-6">
<span id="Opcion2"> Opcion 2</span>
<div id="videoOpcion2" class="embed-responsive embed-responsive-16by9 mt-2 mb-2 ">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/RKfmyrBMLfw" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="col col-md-6">
<!-- <div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch2">
<label class="custom-control-label" for="customSwitch2">Marcar como correcta</label>
</div> -->
<!-- Default unchecked -->
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="rbOpcion2" name="groupOfDefaultRadios">
<label class="custom-control-label" for="rbOpcion2">Marcar como correcta</label>
</div>
<div>
<p id="textoOpcion2" class="text-justify mt-2">Aqui esta la traduccion del video de la segunda respuesta(sus acotaciones)
</p>
</div>
</div>
</div>
<div class="row">
<div class="col col-md-6">
<span id="Opcion3"> Opcion 3</span>
<div id="videoOpcion3" class="embed-responsive embed-responsive-16by9 mt-2 mb-2">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/RKfmyrBMLfw" frameborder="0" ></iframe>
</div>
</div>
<div class="col col-md-6">
<!-- <div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch3">
<label class="custom-control-label" for="customSwitch3">Marcar como correcta</label>
</div> -->
<!-- Default unchecked -->
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="rbOpcion3" name="groupOfDefaultRadios">
<label class="custom-control-label" for="rbOpcion3">Marcar como correcta</label>
</div>
<div>
<p id="textoOpcion3" class="text-justify mt-2">
Aqui debe de ir la traduccion del video de la tercera respuesta(sus acotaciones)
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="final">
<div class="container">
<div id="botones" class="col col-md-4 offset-9 p-5">
<a href="#!"><button class="btn btn-success mb-3" style="display:none;" id="btnIniciar"> Iniciar </button></a>
<a href="#!"><button class="btn btn-secondary mb-3" id="btnRegresar"> << Regresar</button></a>
<a href="#!"><button class="btn btn-primary mb-3" id="btnSiguiente"> Siguiente >> </button></a>
<!-- Esta boton aun no se implementa, pero sera al final del quiz -->
<a href="#!"><button class="btn btn-success mb-3" style="display:none;" id="btnFinalizar"> Terminar </button></a>
</div>
</div>
</section>
<script src="../../public/js/main.js"></script>
</body>
</html>
Y el archivo main.js
que llevo hasta ahora:
main.js
/* Para el quiz del alumno mediante JQuery*/
let solucion1 = $('#Opcion1');
let solucion2 = $('#Opcion2');
let solucion3 = $('#Opcion3');
let interrogante = $('#preguntaInicial');
let cuestionarioSize = 0;
var questionCounter = 0;
var contadorPreguntaInicial = 0; //Verificamos en cual pregunta va
var respuestaUsuario = []; //Se crea un array con las respuestas que ha seleccionado el usuario
var cuestionario = [{
preguntaInicial: "¿Cual es el nombre completo de México?",
Opciones: ["Mexico", "CDMX", "Estados Unidos Mexicanos"],
respuestaCorrecta: "Estados Unidos Mexicanos"},
{
preguntaInicial:"¿Cual es el actual presidente de Mexico?",
Opciones: ["Felipe Calderon","Enrique Peña Nieto","Andres Manuel Lopez Obrador"],
respuestaCorrecta: "Andres Manuel Lopez Obrador"},
{
preguntaInicial:"¿Que materia imparte el Dr. Rafael Rojano?",
Opciones: ["Base de datos","Sistemas web","Redes"],
respuestaCorrecta: "Sistemas web"},
{
preguntaInicial:"¿Que significa UV?",
Opciones: ["Universidad Veracruzana","Universidad Valladolid","Universidad Valencia"],
respuestaCorrecta: "Universidad Veracruzana"
}];
cuestionarioSize = Object.keys(cuestionario).length -1;
//Mostrar los elementos que tienes en el cuestionario.
function setQuestionContent(content, pregunta, csize) {
interrogante.text(content[pregunta].preguntaInicial);
solucion1.text(content[pregunta].Opciones[0]);
solucion2.text(content[pregunta].Opciones[1]);
solucion3.text(content[pregunta].Opciones[2]);
console.log(csize);
}
(function (){
setQuestionContent(cuestionario, questionCounter, cuestionarioSize);
})();
//Creacion del boton siguiente
$('#btnSiguiente').on('click',{cuestionario, questionCounter, cuestionarioSize},function (ex) {
ex.preventDefault();
questionCounter++;
if(cuestionarioSize > questionCounter){
setQuestionContent(cuestionario, questionCounter, cuestionarioSize);
}else{
console.log("llegaste al limite del arreglo");
}
});
$('#btnRegresar').on('click',{cuestionario,questionCounter,cuestionarioSize},function (ex) {
ex.preventDefault();
if(questionCounter > 0){
--questionCounter;
setQuestionContent(cuestionario, questionCounter, cuestionarioSize);
}else{
console.log("llegaste al limite del arreglo");
}
});
function guardarRespuestas(cuestionario, cuestionarioSize, questionCounter) {
respuestaUsuario = document.getElementById('rbOpcion1');
}
Hasta ahora, ya pude cargar las preguntas y respuestas en su debido lugar, sin embargo, no he podido almacenar las respuestas del usuario en un arreglo, comparar y verificar si es correcta o incorrecta. Agradecería si me pueden orientar en ello.