0

Estoy haciendo un quiz en donde las respuestas "a" tienen un valor de 2 puntos, las respuestas "b" tienen un valor de 1 punto y las respuestas "c" tienen un valor de 0 puntos. No hay respuesta correcta. El quiz consta de 3 preguntas y al final quisiera mostrar el score total, es decir si seleccionó puras "a" el puntaje será 6, si seleccionó "a, b y c" el puntaje será 3, etc. Pero llevo atorada mucho tiempo tratando de lograr la suma. Quisiera, por favor, ayuda con la función para sumar los puntos de cada pregunta para el score final o en su caso, si está mal en como le doy valor a cada respuesta.

Este es mi código hasta ahora. Muchas gracias!

const qData = [
    {
        question: "Question1",
        a: "Yes",
        b: "No",
        c: "Maybe",
    },
    {
        question: "Question2",
        a: "Always",
        b: "Sometimes",
        c: "Never",
    },
    {
        question: "Question3",
        a: "100%",
        b: "50%",
        c: "0%",
    }
    
]

const questionE1 = document.getElementById("question");
const a_text = document.getElementById("a-text");
const b_text = document.getElementById("b-text");
const c_text = document.getElementById("c-text");
const submitBtn = document.getElementById("nextBtn")

let currentQuiz = 0;

loadQuiz();

function loadQuiz() {
    const currentQuizData = qData[currentQuiz];

    questionE1.innerText = currentQuizData.question;
    a_text.innerText = currentQuizData.a;
    b_text.innerText = currentQuizData.b;
    c_text.innerText = currentQuizData.c;

}

submitBtn.addEventListener("click", () => {
    currentQuiz++; {
        if (currentQuiz < qData.length) {
            loadQuiz();
     }
 };
  });

var puntos = 0;

function q1a() {
    puntos+2;
}

function q1b() {
    puntos++;
}

function q1c() {
    puntos
}


document.getElementById("result").innerText = puntos;
<div class="container">
    <h2 id="question">Question text</h2>
    <ul>
        <li><input type="radio" id="a" name="answer" class="answer" onclick="q1a()"><label id="a-text" for="a">Question</label></li>
        <li><input type="radio" id="b" name="answer" class="answer" onclick="q1b()"><label id="b-text" for="b">Question</label></li>
        <li><input type="radio" id="c" name="answer" class="answer" onclick="q1c()"><label id="c-text" for="c">Question</label></li>
    </ul>
    <button id="nextBtn">Siguiente</button>
    </div> 
</div>
<p class="result">Score: <span id="result">0</span></p>

1
  • Por favor, aclara tu problema específico o proporciona detalles adicionales para resaltar exactamente lo que necesitas. Tal como está escrito, es difícil saber exactamente qué estás preguntando.
    – Comunidad Bot
    Commented el 12 jul. 2022 a las 13:58

1 respuesta 1

0

Yo haría los calculos en el addeventlistener del botón de enviar y pasaría de los onclick del radiobuton, ya que se puenden pulsar varias veces y sumaría los puntos. En el addeventlistener puedes ver que radio está checkeado y sumarle los puntos que tenga asignados como valor. Esto serían los radio button modificados.

    <ul>
        <li><input type="radio" id="a" name="answer" class="answer" value="2"><label id="a-text" for="a">Question</label></li>
        <li><input type="radio" id="b" name="answer" class="answer" value="1"><label id="b-text" for="b">Question</label></li>
        <li><input type="radio" id="c" name="answer" class="answer" value="0"><label id="c-text" for="c">Question</label></li>
    </ul>

Esto en el javascript.

const questionE1 = document.getElementById("question");
const a_text = document.getElementById("a-text");
const b_text = document.getElementById("b-text");
const c_text = document.getElementById("c-text");
const submitBtn = document.getElementById("nextBtn")
const answers = document.getElementsByClassName("answer");
var puntos = 0;

let currentQuiz = 0;

loadQuiz();

function loadQuiz() {
    const currentQuizData = qData[currentQuiz];
    questionE1.innerText = currentQuizData.question;
    a_text.innerText = currentQuizData.a;
    b_text.innerText = currentQuizData.b;
    c_text.innerText = currentQuizData.c;
}

submitBtn.addEventListener("click", (e) => {
    e.preventDefault();
    // en este bucle for, buscamos el radio button que este marcado y sumamos a puntos el valor que tenga asignado dicho boton en la propiedad value.
    if(currentQuiz < qData.length){
        for(let i = 0; i< answers.length; i++){
            if(answers[i].checked){
                puntos = puntos +Number(answers[i].value) ;
            }
       }
    }
    currentQuiz++;
    if (currentQuiz < qData.length) {
        loadQuiz();
    }else {
       // si no quedan mas preguntas, mostramos el resultado
       document.getElementById("result").innerText = puntos;
    }
});
1
  • Muchisimas gracias!!
    – Criss D
    Commented el 12 jul. 2022 a las 15:03

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.