Hi. I did a quiz. But when question is answered corectly , it change color to light green at all answers. And i want to change only in that answer, which is true. Any solutions?
function ukazVysledky()
{
const answerContainers = quizContainer.querySelectorAll('.odpovedi')
let pocetSpravnychOdpovedi = 0;
otazky.forEach((momentalniOtazka, cisloOtazky) => {
const answerContainer = answerContainers[cisloOtazky];
const selektor = `input[name=otazka${cisloOtazky}]:checked`;
const odpovedUzivatele = (answerContainer.querySelector(selektor) || {}).value;
if (odpovedUzivatele == momentalniOtazka.spravnaOdpoved) {
pocetSpravnychOdpovedi++;
answerContainers[cisloOtazky].style.color = "lightgreen";
}
else{
answerContainers[cisloOtazky].style.color = "red";
}
This is how I did it for my trivia game
/* Highlight correct or wrong answers */
const highlightFCN = (userAnswer, correct) => {
const highlights = d.querySelectorAll('.answerButton');
highlights.forEach(answer => {
/*
* Highlight Answers Function
*/
/*
* User answered correctly
*/
if (userAnswer === correct && userAnswer === parseInt(answer.getAttribute('data-correct'))) {
answer.style["background-color"] = myGreen;
}
/*
* User ansered incorrectly
*/
if (userAnswer !== correct && userAnswer === parseInt(answer.getAttribute('data-correct'))) {
answer.style['background-color'] = myRed;
}
if (userAnswer !== correct && correct === parseInt(answer.getAttribute('data-correct'))) {
answer.style['background-color'] = myGreen;
}
/*
* User let timer run out
*/
if (userAnswer === 5) {
answer.style['background-color'] = myRed;
}
});
};
I put the highlight in a function, but you can see it in action here (and view the source) → Trivia Game or my Github Repository
system
Closed
July 5, 2020, 4:47am
3
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.