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>