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 Basics (Retired) Making Decisions with Conditional Statements The Conditional Challenge

Posted by Ivy DeWitt
Ivy DeWitt
10,925 Points

Feedback/Suggestions on JS Basics Quiz

Wanted to try my hand at the JS Quiz by sticking to everything we've learned so far (hence the use of conditionals/repetition instead of a loop &and/or function).

The only difference is that I included an array (which we haven't covered yet) to store the answers, but that's b/c I got tired after writing the question variables =)

Hoping to refactor it once I've refreshed myself on some of the basics of JavaScript and finish this course, but definitely interested in any feedback or suggestions on how to improve here. Thanks!

Code can be found here: https://codepen.io/ivyscripts/pen/mjVwPq

1 Answer

Matthew Lanin
seal-mask
.a{fill-rule:evenodd;}techdegree
Matthew Lanin
Full Stack JavaScript Techdegree Student 8,003 Points
Matthew Lanin
.a{fill-rule:evenodd;}techdegree
Matthew Lanin
Full Stack JavaScript Techdegree Student 8,003 Points

Look's really solid to me, easy to understand and you have helpful comments throughout. If you were going to refactor, I see some opportunities to make your code more dry by creating a helper function for your if/else statements that test if the correct answer was given, increment your scoreKeeper variable, and alert the user that on whether or not they were correct.

if (q1.toLowerCase() === answers[0]) {
  scoreKeeper++;
  alert(`Congrats, you got it right! It was ${answers[0]}`);
} else {
  alert(`No I'm sorry, it was ${answers[0]}`);
}
//fast forwarded
if (q5.toLowerCase() === answers[4]) {
  scoreKeeper++;
  alert(`Congrats, you got it right! It was ${answers[4]}`);
} else {
  alert(`No I'm sorry, it was ${answers[4]}`);
}

I'm sure you see it already, but each of these conditionals follows the same pattern. The only thing that changes is the question variable in the conditional (q1-q5) and then index in answers (answers[0]-answers[4]).

So if you can devise a function where you pass in the question number and index number, you only need to write that code block once, and just call the function, whilst passing in the appropriate arguments.

If you want to see my swing at such a function, click here. After that is out of the way, another pattern becomes visible in the question prompt, function call repetition, so you could go even further with it, but just by creating that helper function, we saved a lot of lines of code.

Ivy DeWitt
Ivy DeWitt
10,925 Points

Thank you! I really appreciate you taking a look, and I hadn't thought about passing in two parameters for a function in order to compare the function to the answer - I had initially planned to store both values in an array and loop over them in a function that compares them all so I appreciate the different solution.

I was aware that there's a lot of repetition unfortunately, but I wanted to try to keep it closer in line with the original challenge (since it covers functions in the next lesson in more detail), but I'll keep your solution in mind as I work to refactor it.