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

i, choices[i]"); further explanation needed?

this.populateIdWithHTML("choice + i, choices[i]"); this.populateIdWithHTML("guess + i, choices[i]");

can someone better explain how the guess+i, and the choice[i] works. my understanding that the i is the number of the choice in the array, but im just confused on the syntax and how it knows which choice of the questions to get? need someone to breakdown the code and make it clearer.

1 Answer

Gunhoo Yoon
Gunhoo Yoon
5,027 Points

I need to point out one thing before I explain. It seems like you were asking these lines. Because this.populateIdWithHTML("choice + i, choices[i]"); this.populateIdWithHTML("guess + i, choices[i]"); doesn't make sense in two ways: syntax, wrong argument.

This is probably lines you are curious about.

this.populateIdWithHTML("choice" + i, choices[i]);
this.guessHandler("guess" + i, choices[i]);

To really understand what they do you need to trace stacks on different components but that's gonna be pretty long answer. Also, I assume you've understood all the material prior to this project.

populateIdWithHTML(id, text) links some text to html tag that has given id attribute. In this case,

guessHandler(id, guess) assigns guess to button tag with given id and uses Quiz.prototype.guess that handles scoring mechanism and moves quiz pointer to next. Finally, it uses QuizUI.displayNext() that is responsible for displaying next quiz.

With this in mind those functions are used in this context

var choices = quiz.getCurrentQuestion().choices;

for(var i = 0; i < choices.length; i++) {
    this.populateIdWithHTML("choice" + i, choices[i]);
    this.guessHandler("guess" + i, choices[i]);
}

Now about your second question how does it know which choice to get.

Actual choices can be found in app.js which are [ "George Washington", "Thomas Jefferson" ] for first and ["Pi","42"] for second. They are kept in Question object and its constructor is at question.js but all you need to know is choices is array and quiz.getCurrentQuestion() will point to correct Question object and retrieve it.

In a nutshell, what you end up iterating over is simply [ "George Washington", "Thomas Jefferson" ] for question1 and ["Pi","42"] for question2. I assume you know what for loop does and how it works at surface level.

So to combine all this, on first iteration "George Washington" will appear inside <p id="choice0"></p> and a click event will be assigned to <button id="guess1" class="btn--default">Select Answer</button> which will evaluate guess when clicked.

To 'fully' understand you need to keep track how each component is created and interacting with other parts. So if you are totally lost then you need to go back to where this project first started. If I explain every bit of how those two function interact with other components, this post would become too long. However, if you don't mind understanding it in a bit abstract way, you would probably just need to know what each function do and move on.