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

Trädvy Permalänk
Medlem
Registrerad
Jun 2019

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
Trädvy Permalänk
Medlem
Plats
Helsingborg
Registrerad
Jan 2015

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.

Trädvy Permalänk
Medlem
Plats
Helsingborg
Registrerad
Jan 2015

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

Trädvy Permalänk
Hedersmedlem
Plats
Stockholm
Registrerad
Jul 2017

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.

Trädvy Permalänk
Medlem
Registrerad
Jun 2019

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

});