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 JavaScript Loops, Arrays and Objects Tracking Multiple Items with Arrays Build a Quiz Challenge, Part 1 Solution

Posted by williamkempster
williamkempster
4,524 Points

My first attempt, much less code used. Is this good coding practice?

var questionsAnswer = [
  ["What is the first name of the new royal baby?", 'CHARLOTTE'],
  ['What is the name of the babies father?', 'WILLIAM'],
  ['What is the name of the babies mother?', 'KATE'],
]; 

  var score = 0;

for ( var i = 0; i < 3; i += 1 ) {
  var answer = prompt(questionsAnswer[i][0]);
answer = answer.toUpperCase();
if ( answer === questionsAnswer[i][1] ) {
  print('<p>You got the answer right!' )
  score += 1;
}
}

print('<p>Your score was ' + score + ' out of 3.');
if ( score === 3 ) {
  print('<p>You are a boss!');
} else {
  print('<p>You are a flop...');
}

function print(message) {
  document.write(message);
}

3 Answers

Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

Hi Will,

Nice job, below are a couple of points which I think need to be highlighted:

  1. Indentation and formatting, ensure you're using consistent tabs/spaces throughout your code
  2. Ensure anything you write out to the DOM is free of errors, i.e. missing end tags for p elements

Aside from that I can't fault it, however. If you wanted to go one step further for clarity depending on your JavaScript knowledge, you could use a bit more code again but achieve an intuitive code base that anyone can pick up and use.

var quiz = [
  {
    answer    : 'CHARLOTTE',
    question  : 'What is the first name of the new royal baby?'
  },
  {
    answer    : 'WILLIAM',
    question  : 'What is the name of the babies father?'
  },
  {
    answer    : 'KATE',
    question  : 'What is the name of the babies mother?'
  }
];

var score = 0,
    answer;

for (var i = 0; i < 3; i++) {
  answer = prompt(quiz[i].question);
  answer = answer.toUpperCase();

  if (answer === quiz[i].answer) {
    print('<p>You got the answer right!</p>');
    score++;
  }
}

print('<p>Your score was ' + score + ' out of 3.</p>');
print('<p>You are a ' + (score === 3 ? 'boss!' : 'flop...') + '</p>');
So, the key differences are:

  • The questionsAnswer is now called quiz and uses objects as each value, these objects have a consistent and predictable structure as the required values can only be assigned to the specified key once eliminating the risk of a value being put in the wrong place.

  • I've changed x += 1 to x++ which is the shorthand way for doing the same thing, it doesn't have a difference in performance but it just depends on which one you prefer to look at.

  • Finally, and probably the most confusing if you haven't learned about ternary operators yet is the print statement on the final line. Instead of an IF ELSE statement with two separate print statements we can crunch it down into a print statement using a ternary operator.

Again, these are improvements I personally prefer.

Happy coding!

williamkempster
williamkempster
4,524 Points

Thanks for this Chris, I think there may be a method here for calling values from an array that I haven't come across yet, where you have written:

answer = prompt(quiz[i].question);

I am assuming from this that if i name variables inside an array I can call those variables by name rather than number, or position, within the array?

So the below method is the same as above but just a different way of writing it. Further to that, because it is within an array it is not a global variable so you are able to call each question/answer on each line without confusing the browser. Have I understood that correctly?

answer = prompt(questionsAnswer[i][0]);

John Alarcon
John Alarcon
14,458 Points
John Alarcon
John Alarcon
14,458 Points

One more thing to note... you've hard-coded a "3" into your for-loop...

for ( var i = 0; i < 3; i += 1 ) {
}

While that will get the job done for the exercise, it's a better practice to use

for ( var i = 0; i < questionsAnswer.length; i += 1 ) {
}

Of course, each method has a place. Hard coding the 3 assumes that the array will only ever have so many values. Using the length of the (outer) array allows you to add unlimited more elements (inner arrays) to the array without having to tweak any code that iterates over it.

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Hi there William.

Code looks great to me.

I did change the code to include code markdown so we could see the code a little better. Check out how to use markdown code for your forum code here. https://teamtreehouse.com/forum/my-first-attempt-much-less-code-used-is-this-good-coding-practice#

williamkempster
williamkempster
4,524 Points

Thanks Jonathan !