1

Necesito hacer que las preguntas junto con sus respuestas (opciones) se cargen de manera aleatoria.

Ya puse las preguntas con sus opciones, lo único que necesito hacer es que cada vez que recarge la página las preguntas junto con sus opciones se cambien de lugar de manera aleatoria y también que las preguntas no se repitan.

Ya intente varias cosas pero no se cómo lo podría hacer, vi que para poder hacerlo se utilizaba Math.random() pero no tengo la menor idea de dónde ponerlo o qué hacer.

Este es mi código:

<!DOCTYPE html>
<html lang="es">
<head>  
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Evament JavaScript</title>
    <link rel="stylesheet" type="text/css" href="css(cliente)/o.css">
    <h1>Examen de JavaScript</h1>
    <script>
        var questions=[
        {
            quetion:"pregunta1",
            choiceA:"res1a",
            choiceB:"res2a",
            choiceC:"res3a",
            correct:"B",
        },{
            quetion:"pregunta2",
            choiceA:"res1b",
            choiceB:"res2",
            choiceC:"res3b",
            correct:"C",
        },{
            quetion:"pregunta3",
            choiceA:"res1c",
            choiceB:"res2c",
            choiceC:"res3c",
            correct:"A",
        }
        ];
        function startq(){
            for (i=0;i<questions.length;i++){
                document.getElementById("questions").innerHTML+='<form id="quetion">';
                document.forms[i].innerHTML+=(i+1)+'.-'+questions[i].quetion;
                document.forms[i].innerHTML+='<label>'+questions[i].choiceA+'<input type="radio" value="A" name="p'+i+'"><span></span></label>';
                document.forms[i].innerHTML+='<label>'+questions[i].choiceB+'<input type="radio" value="B" name="p'+i+'"><span></span></label>';
                document.forms[i].innerHTML+='<label>'+questions[i].choiceC+'<input type="radio" value="C" name="p'+i+'"><span></span></label>';
                document.getElementById("questions").innerHTML+="</form><br><br>"
                }
            document.getElementById("questions").innerHTML+='<button onclick="result()">Evaluar</button>';
            }
            function result(){
                var aciertos=0;
                var x;
                var puntaje=10/3;
                var calificacion=0;
                for(i=0;i< document.forms.length;i++){
                    x=document.forms[i];
                    console.log(x);
                for(j=0;j<x.length;j++){
                    if (x[j].checked) {
                        console.log(x[j].value);
                        if (x[j].value==questions[i].correct) {
                            aciertos+=1;
                            calificacion=calificacion+puntaje;
                        }
                    }
                }
            }
            console.log("Numero de aciertos:"+ aciertos);
            console.log("Tu calificacion es: "+calificacion);
        }
    </script>
    
</head>
<body>
    <button onclick="startq()">Iniciar</button>
    <div id="questions">
    </div>
</body>
</html>

2 respuestas 2

0

En la parte más básica, puedes valerte de Math.random() para generar números aleatorios. Esta función te devuelve un número entre 0.0 y 0.9999999999999->, por lo que, para seleccionar un elemento de una lista, la técnica utilizada multiplicar su resultado por la cantidad de elementos de la lista.

Dado que quieres que las preguntas no se repitan, la forma más práctica de hacerlo es ir eliminando los elementos seleccionados del arreglo original, de manera que en dicho arreglo solamente tenga los elementos que aún se pueden seleccionar.

Finalmente, ya que necesitas procesar el resultado, yo sugiero tener un arreglo a donde se trasladen las preguntas que ya se seleccionaron.

Esto nos obliga a hacer varios cambios a tu código, los he colocado todos en un ejemplo mínimo y verificable de manera que puedas probar la solución aquí mismo en el navegador.

Para hacerlo más real, he agrandado el arreglo de preguntas, de las cuales cada ejecución selecciona y muestra aleatoriamente 3 al usuario. He ajustado el programa de manera que la validación de las respuestas se hace de manera correcta.

<!DOCTYPE html>
<html lang="es">
<head>  
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Evament JavaScript</title>
    <link rel="stylesheet" type="text/css" href="css(cliente)/o.css">
    <h1>Examen de JavaScript</h1>
    <script>
        var selectedquestions = [];
        var questions=[
          {quetion:"pregunta0",choiceA:"res1a",choiceB:"res2a",choiceC:"res3a",correct:"A",
        },{quetion:"pregunta1",choiceA:"res1a",choiceB:"res2a",choiceC:"res3a",correct:"B",
        },{quetion:"pregunta2",choiceA:"res1b",choiceB:"res2",choiceC:"res3b",correct:"C",
        },{quetion:"pregunta3",choiceA:"res1c",choiceB:"res2c",choiceC:"res3c",correct:"A",
        },{quetion:"pregunta4",choiceA:"res1c",choiceB:"res2c",choiceC:"res3c",correct:"B",
        },{quetion:"pregunta5",choiceA:"res1c",choiceB:"res2c",choiceC:"res3c",correct:"C",
        },{quetion:"pregunta6",choiceA:"res1c",choiceB:"res2c",choiceC:"res3c",correct:"A",
        },{quetion:"pregunta7",choiceA:"res1c",choiceB:"res2c",choiceC:"res3c",correct:"B",
        },{quetion:"pregunta8",choiceA:"res1c",choiceB:"res2c",choiceC:"res3c",correct:"C",
        },{quetion:"pregunta9",choiceA:"res1c",choiceB:"res2c",choiceC:"res3c",correct:"A",
        },{quetion:"pregunta10",choiceA:"res1c",choiceB:"res2c",choiceC:"res3c",correct:"B",
        },{quetion:"pregunta11",choiceA:"res1c",choiceB:"res2c",choiceC:"res3c",correct:"C",
        }
        ];
        function startq() {
          for (j=0; j<3; j++) {
            i = Math.floor(Math.random() * questions.length);
            document.getElementById("questions").innerHTML+='<form id="quetion' + j + '">';
            document.forms[j].innerHTML+=(j+1) + '.- ' + questions[i].quetion;
            document.forms[j].innerHTML+='&nbsp;&nbsp;<label>' + questions[i].choiceA + '<input type="radio" value="A" name="p'+i+'"><span></span></label>';
            document.forms[j].innerHTML+='<label>'+questions[i].choiceB+'<input type="radio" value="B" name="p'+i+'"><span></span></label>';
            document.forms[j].innerHTML+='<label>'+questions[i].choiceC+'<input type="radio" value="C" name="p'+i+'"><span></span></label>';
            document.getElementById("questions").innerHTML+="</form><br><br>"
            selectedquestions.push(questions[i]);
            questions.splice(i, 1);
          }
          document.getElementById("questions").innerHTML+='<button onclick="result()">Evaluar</button>';
        }
        function result() {
          var aciertos=0;
          var x;
          var puntaje=10/3;
          var calificacion=0;
          for(i=0; i< document.forms.length; i++) {
            x = document.forms[i];
            console.log(x);
            for(j=0; j < x.length; j++) {
              if (x[j].checked) {
                console.log(x[j].value);
                if (x[j].value == selectedquestions[i].correct) {
                  aciertos += 1;
                  calificacion = calificacion + puntaje;
                }
             }
           }
         }
         console.log("Numero de aciertos:"+ aciertos);
         console.log("Tu calificacion es: "+calificacion);
       }
    </script>
    
</head>
<body>
    <button onclick="startq()">Iniciar</button>
    <div id="questions">
    </div>
</body>
</html>

1
  • 1
    muchas gracias!!
    – mia carmen
    el 19 may. 2021 a las 20:32
0

puedes usar Math.floor(Math.random() * TamañoDeTuarreglo) para que las preguntas sean en orden aleatorio, yo recomendaria un do while para remover el elemento de este y no se repita la pregunta, para el caso de las respuestas seria muy similar

do{
  indice=Math.floor(Math.random() * TamañoDeTuarreglo);
  array[indice].quetion;
  
}while (array >= 1);
3
  • me podrias decir porfavor en que parte de mi codigo tendria que ir?
    – mia carmen
    el 19 may. 2021 a las 18:28
  • en lugar de tu for que se encuentra en tu función startq, si mi explicacion te funciono agradeceria que no olvidaras marcarla como aceptada el 19 may. 2021 a las 19:31
  • @miacarmen en caso de haberte ayudado agradeceria votaras mi respuestay la marcaras como aceptada el 21 may. 2021 a las 17:35

Tu Respuesta

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

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