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

Permalänk
Medlem

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"); }); });

Lagt till [code]-taggar / Mod
Permalänk
Medlem

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.

Permalänk
Medlem

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>'

Permalänk
Hedersmedlem

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.

Permalänk
Medlem

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");
});

});