0

Muy buenas compañeros, tengo tengo este problema, muestro preguntas traídas de un archivo JSON, con las preguntas no tengo problemas, pero con las respuestas necesito mostrar aleatoriamente mostrar de 3 a 8 preguntas cree una función para que me trajera números aleatorios y las utilicé en el for pero no funciono aún me falta aterrizar del todo bien la lógica.

function getRndInteger(min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
}

Este es mi código original donde muestro mis preguntas relacionadas con mis respuestas, pero este ultimo requisito aun no lo cumplo.

const preguntas = JSON.parse(data);
const respuestas = JSON.parse(res);

if (preguntas.length !== 0) {
    if (respuestas.length !== 0) {
        for (var w = 0; w < preguntas.length; w++) { //preguntas
            $("#lists").append(
                '<div class="list">' +
                '<ul>' +
                '  <li>' +
                '    <label class="item-checkbox item-content">' +
                '      <input type="checkbox" name="' + preguntas[w].idFinal + '" disabled  checked/>' +
                '      <i class="icon icon-checkbox"></i>' +
                '      <div class="item-inner">' +
                '        <div class="item-title">' + preguntas[w].pregunta + '</div>' +
                '      </div>' +
                '    </label>' +
                '    <div id="respuestasList' + w + '"></div>' +
                '  </li>' +
                '</ul>' +
                '</div>'
            );

            for (var r = 0; r < respuestas.length; r++) { //respuestas
                if (preguntas[w].idFinal == respuestas[r].evail_final_id) {
                    $("#respuestasList" + w).append(
                        '<ul>' +
                        '  <li>' +
                        '    <label class="item-checkbox item-content">' +
                        '      <input type="checkbox" onchange="EvaluacionFinal(' + respuestas[r].evail_final_id + ', ' + respuestas.length + ', this, ' + respuestas[w].idRespuestaFinal+')" ' +
                        '        name="' + respuestas[r].evail_final_id + '" value="' + respuestas[r].answer_correct + '"/>' +
                        '      <i class="icon icon-checkbox"></i>' +
                        '      <div class="item-inner">' +
                        '        <div class="item-title">' + respuestas[r].respuesta_final + '</div>' +
                        '      </div>' +
                        '    </label>' +
                        '  </li>' +
                        '</ul>'
                    );
                }
            }
        }
    // falta un }
// falta un }

Alguna sugerencia?

La estructura deberia quedar mas o menos asi

JSON de Respuestas

Preguntas

JSON RESPUESTAS

3
  • He organizado el código un poco mejor y, aunque no creo que sea el problema, faltan dos llaves de cierre al final. Commented el 5 oct. 2020 a las 7:25
  • No me queda claro qué necesitas mostrar aleatoriamente. Todas las respuestas? Solo una? Solo entre 3 y 8 preguntas? Por favor, clarifica qué quieres obtener y muestra un ejemplo del JSON con el que trabajas. Commented el 5 oct. 2020 a las 7:27
  • tengo al menos 78 respuestas en el json, con el if comparo que pertenezcan a la misma pregunta, ahora lo que pretendo es: mostrar aleatoriamente respuestas ligadas a cada una de las preguntas de manera aleatoria siendo que puede a ver o no respuestas correctas. siguiento que : Pregunta 1 - Respuesta 1, Respuesta 2, Respuesta 3 etc.. Pregunta 2 - Respuesta 1, Respuesta 2, Respuesta 3 etc.. si necesitas un ejemplo grafico lo puedo hacer y añado el json
    – Dohko19
    Commented el 5 oct. 2020 a las 7:39

2 respuestas 2

2

La función para tener un numero aleatorio entre un mínimo y un máximo, ambos inclusive, es:

function getRndIntegerInc(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

Suponiendo que la propiedad que "enlaza" una respuesta con su pregunta sea evail_final_id, yo haría:

var html = [];

preguntas.forEach((pregunta, pregunta_idx) => {
    // generas el HTML línea a línea, no lo voy  aponer todo
    html.push('<div class="list">');
    html.push('<ul>');
    html.push('<li>');

    // ...así hasta que tengas que meter las respuestas

    html.push('<div id="respuestasList' + pregunta_idx + '">');

    // nos quedamos únicamente con las repuestas de esta pregunta
    var respuestas = respuestas.filter(function (respuesta) {
        return respuesta.evail_final_id == pregunta.idFinal;
    });

    // elegimos cuántas repuestas queremos
    var num_respuestas = getRndIntegerInc(3, 8);
    
    while (respuestas.length > num_respuestas) {
        // esto elimina un elemento aleatorio del array
        respuestas.splice(getRndIntegerInc(0, respuestas.length - 1), 1);
    }

    // ahora metemos las repuestas
    respuestas.forEach((respuesta, respuesta_idx) => {
        html.push('<ul>');
        html.push('<li>');
        html.push('<label class="item-checkbox item-content">');
        html.push('<input type="checkbox" onchange="EvaluacionFinal(' + respuesta.evail_final_id + ', ' + respuestas.length + ', this, ' + respuesta.idRespuestaFinal+')" name="' + respuesta.evail_final_id + '" value="' + respuesta.answer_correct + '"/>');
        html.push('<i class="icon icon-checkbox"></i>');
        html.push('<div class="item-inner">');
        html.push('<div class="item-title">' + respuesta.respuesta_final + '</div>');
        html.push('</div>');
        html.push('</label>');
        html.push('</li>');
        html.push('</ul>');
    });

    html.push('</div>');

    // y continúas con el código de la pregunta

    html.push('</li>');
    html.push('</ul>');
    html.push('</div>');
});

$("#lists").append(html.join("\n"));
1
  • Esta respuesta me ha ayudado, gracias. Commented el 15 oct. 2020 a las 21:56
0

Básicamente lo que haces es reordenar las respuestas antes de mostrarlas, en el ejemplo se usa el algoritmo de barajar ( o shuffle ) "Fisher–Yates Shuffle" en la versión Richard Durstenfeld.

Al tener las respuestas ya en orden aleatorio limitas el número a imprimir por cada pregunta.

Es conveniente también armar primero el HTML completo y luego insertarlo donde vaya.

Algo mejor sería ya tener las preguntas y respuestas filtradas desde el backend así nadie hace trampa espiando el source.

// https://bost.ocks.org/mike/shuffle/
// Mike Bostock
// Fisher–Yates Shuffle versión Richard Durstenfeld
// https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle#The_modern_algorithm
function shuffle(array) {
  var m = array.length,
    t, i;

  // While there remain elements to shuffle…
  while (m) {

    // Pick a remaining element…
    i = Math.floor(Math.random() * m--);

    // And swap it with the current element.
    t = array[m];
    array[m] = array[i];
    array[i] = t;
  }

  return array;
}

// helper marca tareas
const marcarTareaFinalizada = function(numT, msg) {
  let tarea = document.querySelector('#tareasInicio .tarea' + numT)
  if (tarea) {
    tarea.classList.add('finalizada')
    if (typeof undefined !== typeof msg)
      tarea.innerHTML += msg
  }
}

async function cargarCuestionario() {
  const urelePreguntas = 'https://next.json-generator.com/api/json/get/NyOp63m8K'
  const ureleRespuestas = 'https://next.json-generator.com/api/json/get/VJGKpnXUF'

  const [preguntasResponse, respuestasResponse] = await Promise.all([
    fetch(urelePreguntas),
    fetch(ureleRespuestas)
  ])
  const lasPreguntas = await preguntasResponse.json()
  marcarTareaFinalizada(1, `<br/> ( ${lasPreguntas.length} )`)

  const lasRespuestas = await respuestasResponse.json()
  marcarTareaFinalizada(2, `<br/> ( ${lasRespuestas.length} )`)

  return {
    lasPreguntas,
    lasRespuestas
  }
}

async function armarCuestionario() {
  const c = await cargarCuestionario().then(
    ({
      lasPreguntas,
      lasRespuestas
    }) => {
      let nP = lasPreguntas.length
      let cuestionario = {
        'info': ` ( p:${nP}, r:${lasRespuestas.length})`,
        'preguntas': []
      }

      while (nP--) { // recorremos preguntas
        cuestionario.preguntas[nP] = lasPreguntas[nP]
        cuestionario.preguntas[nP].respuestas = []
        let nR = lasRespuestas.length
        while (nR--) { // asociamos respuesta ( y la sacamos de las respuestas )
          if (lasPreguntas[nP].idFinal == lasRespuestas[nR].evail_final_id) {
            let laRespuesta = lasRespuestas.splice(nR, 1).shift()
            cuestionario.preguntas[nP].respuestas.push(laRespuesta)
          }
        }
        // aquí podríamos hacer el shuffle, pero lo dejo separado 
        // para no repetir todo el asunto de asociar preguntas y respuestas

        // aquí se podría armar el html 
        // salvo que se quiera shufflear el orden de las preguntas también
      }
      return cuestionario
    })

  marcarTareaFinalizada(3, '<br/>' + c.info)

  let nP, nR, mR
  nP = c.preguntas.length
  while (nP--) { // recorremos preguntas
    // shuffle modifica el array asi que lo clonamos para comparar
    let rRand = shuffle([...c.preguntas[nP].respuestas])
    c.preguntas[nP].respuestasRand = rRand
  }
  marcarTareaFinalizada(4)

  // para limitar el numero de respuestas a mostrar por cada pregunta, definimos un máximo
  // poner un número ridículamente alto para deshabilitar
  mR = 2

  let cuestionarioHTML = '';
  nP = c.preguntas.length
  while (nP--) { // recorremos preguntas
    cuestionarioHTML += '<li class=pregunta>'
    cuestionarioHTML += `<p class=preguntaTitulo>${c.preguntas[nP].pregunta}</p>`

    cuestionarioHTML += '<ul class=respuestas>'
    nR = c.preguntas[nP].respuestas.length
    while (nR--) { // recorremos respuestas
      cuestionarioHTML += `<li class=respuesta>${c.preguntas[nP].respuestas[nR].respuesta_final}</li>`
    }
    cuestionarioHTML += '</ul>'

    cuestionarioHTML += '<ul class=respuestasRand>'

    // aquí elegimos el numero mas pequeño: limite de respuestas o cantidad de respuestas
    nR = Math.min(c.preguntas[nP].respuestasRand.length, mR)
    while (nR--) { // recorremos respuestas
      cuestionarioHTML += `<li class=respuesta>${c.preguntas[nP].respuestasRand[nR].respuesta_final}</li>`
    }
    cuestionarioHTML += '</ul>'
    cuestionarioHTML += '</li>'
  }
  marcarTareaFinalizada(5)

  const cuestionarioDOMel = document.querySelector('#cuestionario')
  cuestionarioDOMel.innerHTML += cuestionarioHTML

  marcarTareaFinalizada(6)
}
armarCuestionario()
li {
  list-style-position: inside;
}

ul {
  margin: 0;
  padding: 0;
}

p,
ol,
li {
  padding: 5px;
  margin: 2px 2px;
  display: flex
}

#tareasInicio,
.cuestionario {
  display: flex;
  border: 1px solid #ccc;
}

.cuestionario .pregunta {
  border-bottom: 1px dashed #333;
}

.cuestionario .pregunta>.preguntaTitulo {
  width: 20%
}

.cuestionario .pregunta>.respuestas,
.cuestionario .pregunta>.respuestasRand {
  width: 40%
}

.cuestionario .pregunta .respuesta {
  background: #fafafa
}

#tareasInicio,
.cuestionario>li {
  flex-flow: row;
  display: flex
}

.cuestionario,
.cuestionario li>ul {
  flex-flow: column;
  list-style: none
}

#tareasInicio>li {
  background: #f00;
  padding: 5px;
  margin: 2px 2px;
  list-style-position: inside;
  border: 1px dashed #000;
  font-size: 12px;
  font-family: sans-serif;
}

#tareasInicio>li.finalizada {
  background: #0f0
}
<ol id=tareasInicio>
  <li class=tarea1>Carga Preguntas</li>
  <li class=tarea2>Carga Respuestas</li>
  <li class=tarea3>Asocia preguntas y respuestas</li>
  <li class=tarea4>Randomiza orden de respuestas</li>
  <li class=tarea5>Arma HTML Cuestionario</li>
  <li class=tarea6>Imprime HTML Cuestionario</li>
</ol>

<ul id=cuestionario class=cuestionario>
  <li class=pregunta>
    <p class=preguntaTitulo>pregunta:</p>
    <ul class=respuestas>
      <li class=respuestaTitulo>respuestas orden json</li>
    </ul>
    <ul class=respuestasRand>
      <li class=respuestaTitulo>respuestas random</li>
    </ul>
  </li>
</ul>

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.