Inlägg

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

});

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

});

@zaibuf:Tack för att du tar din tid och hjälper mig zaibuf! jag har gjort denna uppgiften förut med javascript och fick det och fungera, tanken var då ifall jag kunde lösa det med endast Jquery denna gången.

@zaibuf: försöker att göra en login form med data från json. Lyckas hämta datan och spotta ut datan, men hur jag sedan går vidare är fortfarande ett frågetecken för mig.

@superegg: omvandlade javascript object till json string istället, känns som jag är på rätt spår... men att det fortfarande saknas något?

$(document).ready(function () {
$.ajax({
type: 'GET',
url: 'http://webbred2.utb.hb.se/~fewe/api/api.php?data=students',
success: function(data) {
var user=$("#user").val();
var password=$("#password").val();

$.each(data,function(key,value){
var apiusername=value.login.username;
var apipasswordd=value.login.password;
console.log(apipasswordd,apiusername);
var myArr=JSON.stringify(apiusername);
var myArrp=JSON.stringify(apipasswordd);
document.getElementById("demo").innerHTML=myArrp;
document.getElementById("demo1").innerHTML=myArr;
if(user==myArr && password==myArrp){
alert("välkommen");

} else{
console.log("fel användarnamn eller lösenord");
}

});
}
});
});

Förstår inte varför det inte fungera att trots matchande användarnamn och lösenord från api (angånde Api login form)

$(document).ready(function () {
$.ajax({
type: 'GET',
url: 'http://webbred2.utb.hb.se/~fewe/api/api.php?data=students',
success: function(data) {
var user=$("#user").val();
var password=$("#password").val();

$.each(data,function(key,value){
var apiusername=value.login.username;
var apipasswordd=value.login.password;
console.log(apiusername,apipasswordd);
if(user==apiusername && password==apipasswordd){
$(":submit").click(function(){
alert("rätt");
} )
} else{
console.log("fel");
}

});
}
});
});

function ol(data) {
$("p").append("<ol></ol>")

for (var i = 0; i < 4; i++) {
$("ol").append("<li></li>" + "<br/>");
}

$("li:eq(0)").append(" <input type=radio name=q1 > "+data.results[0].correct_answer);
$("li:eq(1)").append(" <input type=radio name=q1 > "+data.results[0].incorrect_answers[0]);
$("li:eq(2)").append(" <input type=radio name=q1 > "+data.results[0].incorrect_answers[1]);
$("li:eq(3)").append(" <input type=radio name=q1 > "+data.results[0].incorrect_answers[2]);

$("li:eq(4)").append(" <input type=radio name=q2 > "+data.results[1].correct_answer);
$("li:eq(5)").append(" <input type=radio name=q2 > "+data.results[1].incorrect_answers[0]);
$("li:eq(6)").append(" <input type=radio name=q2 > "+data.results[1].incorrect_answers[1]);
$("li:eq(7)").append(" <input type=radio name=q2 > "+data.results[1].incorrect_answers[2]);

$("li:eq(8)").append(" <input type=radio name=q3 > "+data.results[2].correct_answer);
$("li:eq(9)").append(" <input type=radio name=q3 > "+data.results[2].incorrect_answers[0]);
$("li:eq(10)").append(" <input type=radio name=q3 > "+data.results[2].incorrect_answers[1]);
$("li:eq(11)").append(" <input type=radio name=q3 > "+data.results[2].incorrect_answers[2]);