0

pude resolver el primer inconveniente, me gustaria agregarle a este codigo una verificacion para que cada pregunta tenga 1 radiobutton seleccionado y sino de una alerta de error de cual es la pregunta que falta por seleccionar, deberia ser facil, pero este form usa el method post y no consigo hacer que funcione.

el codigo es para un encuesta tipo quiz de personalidad, me gustaria poder añadirle una imagen a cada una de las personalidades en el resultado, que fue limitado a solo dos de los 10 posibles que tendria al final. Gacias!

        function computeForm(form) {
              
              var max = 4
              var html = "<ol>"
              var resultado = document.getElementById("resultado");
              var options = [
                {
                  "formNombre": "a",
                  "seccion":"amigo",
                  "puntos":0,
                  "texto": "hola"
                },{
                  "formNombre":"c",
                  "seccion":"cuidador",
                  "puntos":0, 
                  "texto": ""
                }]
                
                options = options.map(el=>{
                  var valor = (form[el.formNombre]).value;
                  el.puntos = (((valor == 0)?0:valor/max).toFixed(2)*100);
                  return el;
                });

                options.sort((x, y)=>{
                  return y.puntos - x.puntos;
                });

                options = options.map(el=>{
                  el.texto = `<li>Obtuviste ${el.puntos}% en ${el.seccion}</li>`;
                  return el;
                }).slice(0, 2);

                options.map(el=>{
                  html += el.texto;
                })

                resultado.innerHTML = html + "</ol>";
            };
<!DOCTYPE html>
<html lang="en">
<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>Document</title>

</HEAD>

<BODY>
<h1>Test </h1><br><br>
<form name="test" METHOD=POST>
    <h3>1.- Soy optimista</h3>
    <input TYPE="radio" NAME="a" VALUE="2" required><span>Siempre</span><br>
    <input TYPE="radio" NAME="a" VALUE="1" required><span>Casi siempre</span><br>
    <input TYPE="radio" NAME="a" VALUE="0" required><span>Nunca</span><br>

    <h3>2.- Tengo empatia</h3>
    <input TYPE="radio" NAME="b" VALUE="2" required><span>Siempre</span><br>
    <input TYPE="radio" NAME="b" VALUE="1" required><span>Casi siempre</span><br>
    <input TYPE="radio" NAME="b" VALUE="0" required><span>Nunca</span><br>

    <h3>3.- Apoyo a otros</h3>
    <input TYPE="radio" NAME="c" VALUE="2" required><span>Siempre</span><br>
    <input TYPE="radio" NAME="c" VALUE="1" required><span>Casi siempre</span><br>
    <input TYPE="radio" NAME="c" VALUE="0" required><span>Nunca</span><br>

    <h3>4.- Soy comprensivo</h3>
    <input TYPE="radio" NAME="d" VALUE="2" required><span>Siempre</span><br>
    <input TYPE="radio" NAME="d" VALUE="1" required><span>Casi siempre</span><br>
    <input TYPE="radio" NAME="d" VALUE="0" required><span>Nunca</span><br>

    <input class="btn" TYPE="button" VALUE="Calcular" onClick=computeForm(this.form)><br><br>

</form>

<div id="resultado"></div>

</BODY>

</html>

0

1 respuesta 1

0

RaynierL, te paso un posible código para la validación y las imágenes, aunque con esto dependerá mucho de nombres de las imágenes, etc.

1) Validación.

var validarRadioSeleccionado = function(nombre) {
    var rs = document.getElementsByName(nombre), i;
    for (i=0; i<rs.length; i++) {
        if (rs[i].checked) {
            return true;
        }
    }
    return false;
};

Y en la función de cómputo, empezar con...

function computeForm(form) {
          
    var html = "<ol>"
    var resultado = document.getElementById("resultado");
    var options = [
      {
        "formNombre": "a",
        "seccion":"amigo",
        "puntos":0,
        "texto": "hola"
      },{
        "formNombre":"c",
        "seccion":"cuidador",
        "puntos":0, 
        "texto": ""
      }];
    
    var campos_rs = ["a","b","c","d"],
        campos_error = [];
    
    campos_rs.forEach(function(campo_actual){
        if (!validarRadioSeleccionado(campo_actual)) {
            campos_error.push(campo_actual);
        }
    });

    if (campos_error.length > 0) {
        /// Hay algún error
        alert ("Hay que seleccionar los grupos de opciones ",campos_error.join(","));
    } else {
        options = options.map(el=>{
        
        ///// TODO EL CÓDIGO QUE TIENES[...]

    }
}

2) Tratamiento de imágenes Se trataría de hacerlo más estructurado y bonito, pero para que tengas una pista de la solución... Cuando empiezas a hacer el map de options, se comprobaría el nivel de puntos y se asignaría una de las imágenes que corresponda. En este ejemplo hay tres niveles, pero puedes hacer los que quieras.

options = options.map(el=>{
    var img = "";
    switch (true) {
        case (el.puntos <25) :
            img = "nivel_bajo.jpg";
            break;
        case (el.puntos <75) :
            img = "nivel_medio.jpg";
            break;
        default :
            img = "nivel_alto.jpg";
            break;
    }
    el.texto = '<li>Obtuviste ${el.puntos}% en ${el.seccion} <img src="'+img+'" /></li>';
    return el;
}).slice(0, 2);
3
  • Esta genial, muchas gracias!
    – RaynierL
    Commented el 28 jun. 2022 a las 15:19
  • Hola, al final tuve un problema, si respondo por lo menos 1 pregunta del cuestionario, el programa hace el calculo de las opciones e ignora la que me falto, si no selecciono ninguna entonces ahi si salta el error. Ademas no me dice donde esta el error, ya he sacado el array directamente del options.map por si acaso no reconocia el actual y aun asi no pude hacer que funcionase completamente.
    – RaynierL
    Commented el 28 jun. 2022 a las 16:23
  • RaynierL, tienes razón... En la primera línea de la función de validación pon var rs = document.getElementsByName(nombre), i; porque en realidad hay que trabajar con los option con ese nombre, y no lo que había puesto. Disculpa la molestia. Ahora ya te debería ir bien, con ese cambio
    – VFG
    Commented el 29 jun. 2022 a las 7:18

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.