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

Posted by Faddah Wolf
Faddah Wolf
12,811 Points

cannot get code to work - questions and choices not displaying!

hi Andrew Chalkley, et al.,

i'm doing your Object-Oriented JavaScript final quiz project, and like a couple others here, i cannot get my code to work or anything, besides the HTML & buttons to display on the screen. The questions and the choices never show on the screen and the buttons don't work. i've also put console.log() messages throughout my code to debug & see where it's at, and no errors or the console.log() messages ever show in the browser developer tools/javascript console.

here is the snapshot of my treehouse workspace for this project

i did a couple things a little different — i combined the QuizUI.displayQuestion() and QuizUI.displayChoices() all into QuizUI.displayQuestion(), and created a Quiz.prototype.randomizeWhichQuestion() function to switch up the order in which the question are shown each time.

it's just really weird that none of my console.log() messages show up, even the ones at the top of app.js.

i have even downloaded the workspace and tried running it locally in my Atom editor to check for any coding errors with my linter — it found no errors. but jsut like the workspace, the code in the Atom editor when run still never displays in the HTML and no errors and none of the console.log() messages ever show in the JavaScript console.

any help from anyone would be appreciated.

best,

— faddah

 portland, oregon, u.s.a.

3 Answers

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

I did not completely debug your program, but perhaps these things will get you started:

First, what browser are you using? I was previewing in Google Chrome, and it's console displayed your messages just fine.

Now to the code: in quiz.js, function getCurrentQuestion, you have this line:

  var i = this.randomizeWhichQuestion;

...which assigns i as a function variable. But I think you intended to call the function, like this:

  var i = this.randomizeWhichQuestion();

Then, in the randomizeWhichQuestion function, you create the index like this:

  var i = Math.random() * (this.questions.length);

But that generates a floating number which doesn't work well as an index. I think you want just the integer part, like this:

  var i = Math.floor(Math.random() * (this.questions.length));

And then, over in quiz_ui.js, function displayQuestion, you have this:

    var options = theQandA.options;
    for(var i = 0; i < choices.length; i++) {

...but choices is undefined. I think you meant to say:

    var options = theQandA.options;
    for(var i = 0; i < options.length; i++) {

At this point, the questions appear, and the buttons respond (but there are still errors). Hopefully you can take it from here and finish debugging.

Andrew Chalkley
STAFF
Andrew Chalkley
Treehouse Guest Teacher
Andrew Chalkley
Andrew Chalkley
Treehouse Guest Teacher

I looked in the log and theQandA is undefined. If you look where it gets set q is undefined so it explodes.

Why is that? The reason i is a function in your code not the return value you were expecting. :)

Hope that's enough to help :)

Faddah Wolf
Faddah Wolf
12,811 Points
Faddah Wolf
Faddah Wolf
12,811 Points

hi folks,

thanx to both of you, Andrew Chalkley and Steven Parker! i really appreciate the prompt help. that was it — in all my iterations of looking at Chalkers' code and mixing his var/function names with my own, things got confusing and, as you point out, i left out things like changing all instances of "choices" to "options" or remembering to put a "()" after a function call. oh well.

i also re-did the randomizing of question order - i made a separate function to randomize the array of question objects in the "Quiz" object literal and invoke it right after putting all the questions into the "quiz" instance of the "Quiz" object. then i put the code in "Quiz.prototype.getCurrentQuestion()," "Quiz.prototype.guess()" and "QuizUI.displayQuestion()" back closer to how you originally had it.

all working now! see — here.

thank you again for all the help!

best,

— faddah

portland, oregon, u.s.a.