Question

我正在尝试输出测验的正确答案，它会输出正确数量的正确问题，但在尝试输出问题的文本时，我得到[对象，对象]，任何人都知道为什么要这样做？

HTML

 <div id='quiz' class="text"></div>
 <div class='button' id='next'><a href='#'>Next</a></div>
 <div class='button' id='prev'><a href='#'>Prev</a></div>
 <div class='button' id='start'> <a href='#'>Start Over</a></div>

    <script type='text/javascript'  src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
    <script type="text/javascript" src='questions.json'></script>
    <script type='text/javascript' src='whatswhatquiz.js'></script>

Whatswhatquiz.js文件

(function() {
  var questions = [{
    question: "what browser feature would you use to find information on the Internet? (Click on Circle)",
    choices: ["Web Form", "Link", "Button", "Navigation Bar", "Search Bar"],
    correctAnswer: 4
  }, {
    question: "Where would you find the main links of each page on a website?",
    choices: ["Button", "Search Bar", "Web Form", "Navigation Bar"],
    correctAnswer: 3
  }, {
    question: "What feature will you use when entering personal details to a website? ",
    choices: ["Link", "Button", "Web form", "Search bar"],
    correctAnswer: 2
  }, {
    question: "What feature is used to hold a large list of information?",
    choices: ["Button", "Link", "Search Bar", "Dropdown Menu/List"],
    correctAnswer: 3
  }, {
    question: "What box are you most likely to select when giving permission to a website?",
    choices: ["Select Box", "Tick Box", "Check Box", "Grey box", ],
    correctAnswer: 2
  }];

  var questionCounter = 0; //Tracks question number
  var selections = []; //Array containing user choices
  var quiz = $('#quiz'); //Quiz div object
  var correct = [];
  var wrong = [];

  // Display initial question
  displayNext();

  // Click handler for the 'next' button
  $('#next').on('click', function(e) {
    e.preventDefault();

    // Suspend click listener during fade animation
    if (quiz.is(':animated')) {
      return false;
    }
    choose();

    // If no user selection, progress is stopped
    if (isNaN(selections[questionCounter])) {
      alert('Please make a selection!');
    } else {
      questionCounter++;
      displayNext();
    }
  });

  // Click handler for the 'prev' button
  $('#prev').on('click', function(e) {
    e.preventDefault();

    if (quiz.is(':animated')) {
      return false;
    }
    choose();
    questionCounter--;
    displayNext();
  });

  // Click handler for the 'Start Over' button
  $('#start').on('click', function(e) {
    e.preventDefault();

    if (quiz.is(':animated')) {
      return false;
    }
    questionCounter = 0;
    selections = [];
    displayNext();
    $('#start').hide();
  });

  // Animates buttons on hover
  $('.button').on('mouseenter', function() {
    $(this).addClass('active');
  });
  $('.button').on('mouseleave', function() {
    $(this).removeClass('active');
  });

  // Creates and returns the div that contains the questions and 
  // the answer selections
  function createQuestionElement(index) {
    var qElement = $('<div>', {
      id: 'question'
    });

    var header = $('<h2>Question ' + (index + 1) + ':</h2>');
    qElement.append(header);

    var question = $('<h2>').append(questions[index].question);
    qElement.append(question);

    var radioButtons = createRadios(index);
    qElement.append(radioButtons);

    return qElement;
  }

  // Creates a list of the answer choices as radio inputs
  function createRadios(index) {
    var radioList = $('<ul>');
    var item;
    var input = '';
    for (var i = 0; i < questions[index].choices.length; i++) {
      item = $('<li>');
      input = '<input type="radio" name="answer" value=' + i + ' />';
      input += questions[index].choices[i];
      item.append(input);
      radioList.append(item);
    }
    return radioList;
  }

  // Reads the user selection and pushes the value to an array
  function choose() {
    selections[questionCounter] = +$('input[name="answer"]:checked').val();
  }

  // Displays next requested element
  function displayNext() {
    quiz.fadeOut(function() {
      $('#question').remove();

      if (questionCounter < questions.length) {
        var nextQuestion = createQuestionElement(questionCounter);
        quiz.append(nextQuestion).fadeIn();
        if (!(isNaN(selections[questionCounter]))) {
          $('input[value=' + selections[questionCounter] + ']').prop('checked', true);
        }

        // Controls display of 'prev' button
        if (questionCounter === 1) {
          $('#prev').show();
        } else if (questionCounter === 0) {

          $('#prev').hide();
          $('#next').show();
        }
      } else {
        var scoreElem = displayScore();
        quiz.append(scoreElem).fadeIn();
        $('#next').hide();
        $('#prev').hide();
        $('#start').show();
      }
    });
  }

  function buildList(arr) {
    var listHTML = '<ol>';
    for (var i = 0; i < arr.length; i += 1) {
      listHTML += '<li>' + arr[i] + '</li>';
    }
    listHTML += '</ol>'
    return listHTML;
  }

  // Computes score and returns a paragraph element to be displayed
  function displayScore() {
    var score = $('<p>', {
      id: 'question'
    });

    var numCorrect = "0";
    for (var i = 0; i < selections.length; i++) {
      if (selections[i] === questions[i].correctAnswer) {
        numCorrect++;
        correct.push(questions);
      } else {
        wrong.push(questions);
      }
    }

    score.append('You got ' + numCorrect + ' questions out of ' +
      questions.length + ' right!!!' + buildList(correct));
    return score;
  }
})();

Answer 1

更新：我发现了你的问题，你正在将整个对象数组推入正确和/或错误的数组。此外，在您的buildList函数中，您将对象返回到一个位置，这就是您获取[object object]的原因。因此，请从对象中指定所需的属性。

function buildList(arr) {
    var listHTML = '<ol>';
    for (var i = 0; i < arr.length; i += 1) {
        listHTML += '<li>' + arr[i].question + '</li>';
    }
    listHTML += '</ol>'
    return listHTML;
}


var numCorrect = 0;
for (var i = 0; i < selections.length; i++) {
    if (selections[i] === questions[i].correctAnswer) {
        numCorrect++;
        correct.push(questions[i]);
    } else {
        wrong.push(questions[i]);
    }
}

JavaScript输出[object，object]而不是string

1 个答案: