0

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.

2
  • Es mala idea tener la respuesta correcta visible desde el navegador, sería mejor si por medio de AJAX realizas la comprobación.
    – Triby
    Commented el 30 abr. 2020 a las 22:41
  • Si, eso lo tenia pensado implementar una vez que me funcione la verificacion de las respuestas del usuario.
    – Edgar Gc
    Commented el 1 may. 2020 a las 4:50

1 respuesta 1

1

Habías definido respuestaUsuario = []; que, en realidad, es un objeto (por los corchetes) y no array, que requiere llaves.

Estás definiendo todas las variables necesarias en el ámbito global y, sin embargo, también las estás enviando como parámetros a las funciones, no tiene caso. Para esta respuesta solo me enfoqué en tu problema, que es guardar las respuestas; ya te tocará revisar el resto del código para simplificarlo.

$('input[name="groupOfDefaultRadios"]').on('change', guardarRespuestas); Esta línea hace que cada que se seleccione una opción se ejecute la función guardarRespuestas, según vi, tenías pensado aplicarlo a cada una de las opciones, pero no es necesario.

En la función guardarRespuestas solo se necesita detectar la opción seleccionada y agregarlo a respuestaUsuario usando la pregunta actual questionCounter como índice.

En la función setQuestionContent() agregué código para marcar o desmarcar opciones, dependiendo de que haya una respuesta o no.

El CSS lo agregué solo para poder probar aquí, porque la consola ocultaba los botones Anterior / Siguiente.

/* 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]);
    // Ya se respondió la pregunta?
    // Si existe dentro de respuestaUsuario el número será de 0 a 2
    // Si no, entonces -1
    let actual = (respuestaUsuario[questionCounter]) ? respuestaUsuario[questionCounter] : -1;
    // Marcar o desmarcar radios
    $('#rbOpcion1').prop('checked', (actual == 0));
    $('#rbOpcion2').prop('checked', (actual == 1));
    $('#rbOpcion3').prop('checked', (actual == 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");    
    }               
});

// Agregar evento onchange para guardar respuesta, solo función sin argumentos
$('input[name="groupOfDefaultRadios"]').on('change', guardarRespuestas);


function guardarRespuestas() {
    // Obtener radio
    let radioButtons = $('input[name="groupOfDefaultRadios"]');
    // Obtener opción seleccionada
    let resp = radioButtons.index(radioButtons.filter(':checked'));
    // Guardar con número de pregunta actual = respuesta
    respuestaUsuario[questionCounter] = resp;
    // Comprobar
    console.log(resp, respuestaUsuario);
}
#botones {
    position:fixed;
    top:100px;
    right:20px;
}
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/a296fa0db7.js" 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://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" 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> 

    <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>

Finalmente, para activar el botón Finalizar solo necesitas revisar si la cantidad de respuestas es igual a la de preguntas.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.