0

I am trying to output the correct answers of the quiz it outputs the correct number of questions that are correct but when trying to output the text of the question I get [object,object] anyone know why its doing this?

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 file

(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;
  }
})();
8
  • 1
    Is var question = $('<h2>').append(questions[index].question); the line that's giving you problems? Commented Mar 27, 2017 at 23:20
  • 1
    Please be more specific. What part of your code is outputting this? Commented Mar 27, 2017 at 23:20
  • The function displayScore() is outputting this? It computes the correct answers and displays 'You got 3 answers out of 5 correct' And then underneath it displays a list of 1. [object, object] 2. [object, object] 3. [object, object] so it is recognising that it should be displaying the 3 questions that are right but not showing the question text. Commented Mar 27, 2017 at 23:27
  • Please post html so we can test this code Commented Mar 27, 2017 at 23:28
  • It likely means you're trying to output an array of objects, Commented Mar 27, 2017 at 23:31

1 Answer 1

1

UPDATE: I've found your problem, you were pushing the entire array of objects into correct and/or wrong array. Also, in your buildList function you were returning the object at a position which is why you were getting [object object]. So specify the property you want from the 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]);
    }
}
Sign up to request clarification or add additional context in comments.

7 Comments

what's the relevance of this ?
Title: JavaScript outputting [object, object] instead of string.
What he wants is to know why the code is wrong and not a way to convert the an array of objects to string.
You should judge the other guys answer.
Even after you edited it no I shouldn't. He written: "Then try to iterate myJSON." which you didn't.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.