Help with Awesome Quiz app code challenge

Hi there, SAMUEL LAWRENCE! I wasn't tagged to answer this question, but if you don't mind my input too much I can try and give it a whirl. Unfortunately, all your "points" are labeled with the number 1. So, I'll do my best to keep everything in order. Bear with me.

This is the text from your first point: "When selecting the elements in the DOM. We've always used getElementById and passing in the name of the id in quotes inside the parenthesis. However here, he just passed in the word id."

Yes and no. You say he passed in the word id, but what he did was pass in the variable id. Let's look at that bit of the code:

  populateIdWithHTML: function(id, text) {//the function takes 2 arguments, id and text
    var element = document.getElementById(id);//used the word id here
    element.innerHTML = text;
  },

This is a function with two parameters. When that function is called the first thing passed to it will be assigned to the local variable id and the second argument will be assigned to the variable text. When we call this function we're going to send it two strings. The first string will hold the id and the second will hold the text.

Later on you will see lines similar to this one:

this.populateIdWithHTML("quiz", gameOverHTML);

At this point we are sending in the string "quiz" when we call the function. Inside the function, id will now be equal to the string "quiz". Therefore, it is as if we had typed var element = document.getElementById("quiz");.

Now to your next point:

You want to understand the displayChoices method. So let's take a look at that:

displayChoices: function() {
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]);
} 

So first, we're going to get the choices for the current question. You don't seem to have a problem with that part so we'll move on. You also understand that it's looping through each one and performing a method on each one. The first one is the populateIdWithHTML which we just covered. So let's look at what happens in the first iteration. On the first iteration, i is equal to 0. We then run that method and send in a string. Something interesting happens in JavaScript when you use a + sign to combine a string and a number. Because it cannot tell if you mean concatenation or addition, it will always concatenate the result. You might be interested in taking a look at this thread where I explain (and show) what happens when we use the + symbol in different circumstances. In this case, we're combining the string "choice" and the number 0. The result will be the string choice0. And then we get the first choice in that array with choices[0]. We pass both of these to the populateIdWithHTML. Now in that function, id will be equal to "choice0", and text will be equal to choices[0].

To your third point:

Let's take a look at the line I suspect you have problems with:

 this.populateIdWithHTML("progress", "Question" + currenQuestionNumber + " of " + quiz.questions.length);

You say that it looks like it's looking for two ids, but again, I feel like this is a misunderstanding of what is being sent to the populateIdWithHTML function. The first thing, before the comma, will be assigned to the local variable id. Everything after the comma is the second argument. It will be assigned to the local variable text.

So again we have this:

populateIdWithHTML: function(id, text) {//the function takes 2 arguments, id and text
    var element = document.getElementById(id);//used the word id here
    element.innerHTML = text;
  },

The variable element will now contain the result of document.getElementById("progress"), because id is now equal to "progress", and the innerHTML will be set to the value stored in text which is ""Question" + currenQuestionNumber + " of " + quiz.questions.length".

And you had one more point and you're asking about the guessHandler.

So let's take a look at that:

  guessHandler: function(id, guess) {
    var button = document.getElementById(id);
    button.onclick = function() {
      quiz.guess(guess);
      QuizUI.displayNext();
    }
  }

This function says first get an element that has the id of whatever string we send to it and assign it to the variable button. When we click on that element, do whatever happens when we make a guess and then display the next. But what id does it mean? To know that we first have to find a call site.

You'll find a call the the function in the displayChoices function that we talked about previously. Remember that pesky for loop? And here's that function call:

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

So besides populating those two choice0 and choice1 with HTML, we are also adding event listeners. We do that by calling the guessHandler method. And remember, we're concatenating a string and a number together so the result will be a string which we then send in. During the first iteration of this loop, this part this.guessHandler("guess" + i, choices[i]); would be equivalent to this.guessHandler("guess0", choices[0]);. But we don't do that because then it would be hardcoded and the same at the next iteration.

So now we're calling guessHandler on the instance and sending in "guess0" and choices[0]. The variable id will be assigned the string "guess0" (on the first iteration) and guess will be equal to choices[0] on the first iteration. We would then get the element by id "guess0" and add an event listener to it.

If you still want to figure out how to restart the quiz later, I could potentially assist with that as well. Might I make a recommendation that you review how functions, parameters, and arguments work? I feel like 95% of your confusion lies in what is getting sent to where and where it's assigned. None of these should be new concepts. You've learned about strings, arrays, concatenation, functions, arguments, and parameters. I feel like somewhere in there you got it all jumbled up a bit. Don't worry, it happens to me, too. But when it does, I go back to the basics and make absolutely sure I understand it at the basic level.

I hope at least some of this has been helpful!