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>