Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Object-Oriented JavaScript (2015) Practice Project User Interface Code

melissa brown
melissa brown
4,670 Points
Posted by melissa brown
melissa brown
4,670 Points

loading the question on the page.

hi guys im trying to make my own quiz. And im quite lost when i comes to loading the questions on to the page. after a lot of googling i came across a solution that could fit but i want to understand it more.

allQuestions[currentQuestion].question the syntax here confuses me. i know that it is going to the object called allQuestions, getting the current question and then getting the value of questoin. but how does it know which question it is on. does it know because var i = 0 is refering to the current question?

http://codepen.io/mbrwn/pen/Kdgpao 

var currentQuestion = 0 
function render_Question() {
    $("#quiz").append('<h1>' + allQuestions[currentQuestion].question + '</h1>');
    for (var i = 0; i <= 3; i++) {
      document.getElementById('answers').innerHTML += '<input type="radio" name="choice" value='+i+'>' + allQuestions[currentQuestion].choices[i] + '<br/>';~~~

1 Answer

Gunhoo Yoon
Gunhoo Yoon
5,027 Points
Gunhoo Yoon
Gunhoo Yoon
5,027 Points

Additional problems needs to be addressed.

  1. allQuestions is not an object it is an array. What is inside allQuestions is an object.
  2. ids that you targeted does not present in your html file and you are not generating elements dynamically either.
  3. Don't use id for something that occurs multiple times. Id has to be unique within html file.
  4. currentQuestion does not increment.

Answer to your question on looping over both question and choices.

You want to loop over question and choices, so use nested loop.

// This is more like a pseudocode
// Loop over question objects
for (var i = 0; i < len(allQuestions); i += 1) {
    // Just to visually inform what's in the object.
    var currentQuestion = allQuestions[i],
        question = currentQuestion.question,
        choices = currentQuestion.choices,
        answer = currentQuestion.correctAnswer
     // Render necessary information....

    // Loop over multiple choices
    for (var j = 0; j < len(choices); j += 1) {
        var choice = choices[j]

        // Render choices in your taste....
    }
}

This logic might not be elegant but it will loop over questions corresponding choices.