Highlight röd färg på fel svar och grön färg på rätt svar på quiz.

Highlight röd färg på fel svar och grön färg på rätt svar på quiz.

Har lyckats skapa en quiz med javascript/jquery och nu kommer det sista med finjustering som jag inte får att fungera då highlight färg på respektiv rätt/fel svar inte fungerar. Får inga fel meddelande eller något på console och vet inte hur jag ska fortsätta.

Allt tips och råd uppskattas!

$.ajax({ url: "https://opentdb.com/api.php?amount=10", method: "GET", dataType: "json" }).done(function (data) { var lista = ""; function shuffle(array) { for (var i = array.length - 1; i > 0; i--) { var j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } } data.results.forEach(function (result, index) { var correctAnswer = result.correct_answer; var wrongAnswers = result.incorrect_answers; var answers = Array.from(wrongAnswers); answers.push(correctAnswer); shuffle(answers) lista = lista + "<h2>" + result.question + "</h2>"; lista = lista + "<ul>"; answers.forEach(function (answer) { var isitCorrectAnswer = 0; if (correctAnswer == answer) { $(correctAnswer).css("color","green"); } else { $(correctAnswer).css("color","red"); } lista = lista + '<li><input type="radio" name="answer-' + index + '" data-correctanswer="' + isitCorrectAnswer + '"> ' + answer + '</li>'; }) lista = lista + "</ul>"; }); lista = lista + "<button>Show result</button>"; $("body").append(lista); $("button").on("click", function () { var countPoints = $('input:checked[data-correctanswer="1"]').length; alert(countPoints + ' / ' + "10"); }); });

Senast redigerat 2020-02-17 00:55: Lagt till [code]-taggar / Mod

Din selector i $(correctAnswer).css("color","green") är väl förmodligen fel.

Den ska peka på en typ av element på sidan, eller i ditt fall hellre ett unikt id eller klassnamn för de/det element du vill ändra css för.
I ditt fall så innehåller correctAnswer datan för rätt svar från api-anropet till opentdb.

Kan du inte göra något i stil med detta?

var coloredAnswer; if (correctAnswer == answer) { coloredAnswer = '<div style="color:green">' + answer + '</div>'; } else { coloredAnswer = '<div style="color:red">' + answer + '</div>'; } lista = lista + '<li><input type="radio" name="answer-' + index + '" data-correctanswer="' + isitCorrectAnswer + '"> ' + coloredAnswer + '</li>'

Rent generellt är det inte särskilt snyggt att hårdställa CSS-stilar direkt i javascriptkod på det sättet.

Mycket bättre är att istället använda en CSS-klass där du definierar en stilmapp till exempel enligt nedan:

div.correct { color: green; } div.wrong { color: red; }

Sedan kan du istället använda addClass("correct") på ditt element. https://www.w3schools.com/jquery/jquery_css_classes.asp (förutsatt att du gör rätt i selectorn, vilket inte du gjort, se tidigare inlägg)

På det sättet är stilinformation separerad från koden och semantik.

Försökte att lägga den under klick funktionen så att färgerna syns efter att man har klickat på knappen men får det inte och fungera, vad är det jag gör fel?

[kod][/kod]

$.ajax({
url: "http://webbred2.utb.hb.se/~fewe/api/api.php?data=quiz",
method: "GET",
dataType: "json"
}).done(function (data) {

var lista = "";

data.forEach(function (result, index) {

var correctAnswer = result.correct_answer;
var wrongAnswers = result.incorrect_answers;

var answers = Array.from(wrongAnswers);
answers.push(correctAnswer);

lista = lista + "<h4>" + result.question + "</h4>";
lista = lista + "<ul>";

answers.forEach(function (answer) {
var isitCorrectAnswer = 0;
var coloredAnswer;

lista = lista + '<li><input type="radio" name="answer-' + index + '" data-correctanswer="' + isitCorrectAnswer + '"> ' + coloredAnswer + '</li>'

})

lista = lista + "</ul>";
});

lista = lista + "<button>Show result</button>";
$("body").append(lista);

$("button").on("click", function () {
if (correctAnswer == answer) {
coloredAnswer = '<div style="color:green">' + answer + '</div>';
} else {
coloredAnswer = '<div style="color:red">' + answer + '</div>';
}
var countPoints = $('input:checked[data-correctanswer="1"]').length;
alert(countPoints + ' / ' + "10");
});

});