Question

我正在用Javascript制作一个琐事测验网页游戏！我成功地从API中检索了测验问题。不知何故，我无法在我的网页中填充API响应中的问题！虽然我可以添加自己声明的问题，如下面的代码中所做的那样！

quiz.js

function Quiz(questions) {
this.score = 0;
this.questions = questions;
this.questionIndex = 0;
}

Quiz.prototype.getQuestionIndex = function() {
return this.questions[this.questionIndex];
}

Quiz.prototype.guess = function(answer) {
if(this.getQuestionIndex().isCorrectAnswer(answer)) {
    this.score++;
}

this.questionIndex++;
}

Quiz.prototype.isEnded = function() {
return this.questionIndex === this.questions.length;
}

question.js

function Question(text, choices, answer) {
this.text = text;
this.choices = choices;
this.answer = answer;
}

Question.prototype.isCorrectAnswer = function(choice) {
return this.answer === choice;
}

app.js

function populate() {
if(quiz.isEnded()) {
    showScores();
}
else {
    // show question
    var element = document.getElementById("question");
    element.innerHTML = quiz.getQuestionIndex().text;

    // show options
    var choices = quiz.getQuestionIndex().choices;
    for(var i = 0; i < choices.length; i++) {
        var element = document.getElementById("choice" + i);
        element.innerHTML = choices[i];
        guess("btn" + i, choices[i]);
    }

    showProgress();
}
};

function guess(id, guess) {
var button = document.getElementById(id);
button.onclick = function() {
    quiz.guess(guess);
    populate();
}
};


function showProgress() {
var currentQuestionNumber = quiz.questionIndex + 1;
var element = document.getElementById("progress");
element.innerHTML = "Question " + currentQuestionNumber + " of " + 
quiz.questions.length;
};

function showScores() {
var gameOverHTML = "<h1>Result</h1>";
gameOverHTML += "<h2 id='score'> Your scores: " + quiz.score + "</h2>";
var element = document.getElementById("quiz");
element.innerHTML = gameOverHTML;
};

var getJSON = function(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'json';
xhr.onload = function() {
  var status = xhr.status;
  if (status === 200) {
    callback(null, xhr.response);
  } else {
    callback(status, xhr.response);
  }
};
xhr.send();
};

getJSON('https://opentdb.com/api.php?
amount=10&category=20&difficulty=medium&type=multiple',
function(err,data) {

alert('Your query count: ' + data.results[0].category);});

// create questions
var questions = [
new Question("Which one is not an object oriented programming language?", 
["Java", "C#","C++", "C"], "C"),
new Question("Which language is used for styling web pages?", ["HTML", 
"JQuery", "CSS", "XML"], "CSS"),
new Question("There are ____ main components of object oriented 
programming.", ["1", "6","2", "4"], "4"),
new Question("Which language is used for web apps?", ["PHP", "Python", 
"Javascript", "All"], "All"),
new Question("MVC is a ____.", ["Language", "Library", "Framework", "All"], 
"Framework")];


var quiz = new Quiz(questions);
populate();

Answer 1

您需要修改回调函数，使其工作方式与自我声明问题时的工作方式相同。像，

getJSON('https://opentdb.com/api.php?
amount=10&category=20&difficulty=medium&type=multiple',
function(err,data) {
    var results = data.results;
    var questions = [];
    results.forEach(function(result) {
        var answers = result.incorrect_answers.concat(result.correct_answer);
        var temp = new Question(result.question, answers, result.correct_answer);
        questions.push(temp);
    });
    var quiz = new Quiz(questions);
    populate();
});

从JSON中检索数据并在Javascript中填充它

1 个答案: