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

Elvis Reinis Zeltītis
Elvis Reinis Zeltītis
1,925 Points

Any room for improvements?

So this is my finished quiz app Wanted to make some features different but just could find a way to do it I feel like the code is running well and good, but I want to find ways to improve it or shorten it up. I left the questions simple and didnt mix up no and yes that still could be done. I will be happy for receiving any reply :)

-- Edit I am terrebly sorry, I just updated the code because I just realised that I havent commented it!

/*--------------
   Quiz app's
Challange rules!
----------------
1. 5 Questions
2.Track of questions
3.Results
4.Ranking
   5   = Gold
   3-4 = Silver
   2-1 = Bronze
   0   = None
--------------*/


var readyCheck;
var yes = "yes";
/* 
Made questions in variables so you can change them manually here
so you dont have to update single variable and look for it       
*/
var question;
var question_1 = 'Is snow white?';
var question_2 = 'Is grass green?';
var question_3 = 'Are bricks orange?';
var question_4 = 'Is water blue?';
var question_5 = 'Is wood brown?';
// Keeps track of the question count
var count = 1;

// qCount = Question + stores the count so it doesnt need to be hardcoded + " : "
var qCount = 'Question ' + count + " : ";
var qCorrect = 0;

// Asks player if he wants to take the quiz!
readyCheck = prompt('Are you ready to take the quiz? Yes or No');
if ( readyCheck.toLowerCase() === yes ){

  alert ('Please answer with yes or no only!');
  /* 
  Questions that will be set on colors depending on the answer
  Count += 1 adds up so i dont have to hard code the questions number in myself
  qCorrect sums up for checking how many questions have been answered correctly
  Places result in color green = correct, red = incorrect
  */

  // question 1
  question = prompt(qCount + question_1);
  // Checks if the answer is correct or not
  if ( question === yes.toLowerCase() ) {
    qCorrect += 1;
    document.write('<p  style="color:green;">Question ' + count + ' answer was : ' + question + '</p>');
  } else { document.write('<p  style="color:red;">Question ' + count + ' answer was : ' + question + '</p>'); }

  // question 2  
  count += 1;
  question = prompt(qCount + question_2);
  // Checks if the answer is correct or not  
  if ( question === yes.toLowerCase() ) {
    qCorrect += 1;
    document.write('<p  style="color:green;">Question ' + count + ' answer was : ' + question + '</p>');
  } else { document.write('<p  style="color:red;">Question ' + count + ' answer was : ' + question + '</p>'); }

  // question 3
  count += 1;
  question = prompt(qCount + question_3);
  // Checks if the answer is correct or not  
  if ( question === yes.toLowerCase() ) {
    qCorrect += 1;
    document.write('<p  style="color:green;">Question ' + count + ' answer was : ' + question + '</p>');
  } else { document.write('<p  style="color:red;">Question ' + count + ' answer was : ' + question + '</p>'); }

  // question 4
  count += 1;
  question = prompt(qCount + question_4);
  // Checks if the answer is correct or not  
  if ( question === yes.toLowerCase() ) {
    qCorrect += 1;
    document.write('<p  style="color:green;">Question ' + count + ' answer was : ' + question + '</p>');
  } else { document.write('<p  style="color:red;">Question ' + count + ' answer was : ' + question + '</p>'); }

  // question 5
  count += 1;
  question = prompt(qCount + question_5);
  // Checks if the answer is correct or not  
  if ( question === yes.toLowerCase() ) {
    qCorrect += 1;
    document.write('<p  style="color:green;">Question ' + count + ' answer was : ' + question + '</p>');
  } else { document.write('<p  style="color:red;">Question ' + count + ' answer was : ' + question + '</p>'); }

  // This will display what reward you got
  alert ('Lets see what medal you got!');
  if ( qCorrect === 5 ){
     document.write('<b><p style="color:#FFD700;"> You know all the colors! You\'ve got gold medal!</p></b>') 
  }
  else if ( qCorrect === 4 || qCorrect === 3){
     document.write('<b><p style="color:#C0C0C0;"> You know colors well! You\'ve got silver medal!</p></b>') 
  }
  else if ( qCorrect === 2 || qCorrect === 1){
     document.write('<b><p style="color:#CD7F32;"> You know atleast some colors! You\'ve got Bronze medal!</p></b>') 
  }
  else if ( qCorrect === 0 ){
     document.write('<b><p>You dont know colors at all!</p></b>') 
  }
} else { alert('Feel free to do it any other time!')}

Thanks in advance!

4 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! I think this was actually a brilliant refactor. However, there is room for improvement. Currently, if you type in "YES" or "yES" or any other variant of that, it's not counted as correct. You've defined the variable yes as equivalent to the string "yes". So there's no need to turn it into all lower case. It already is lower case. What you should be doing is converting what the user types in to lower case. I've reworked your code to show you the difference :smiley:

/*--------------
   Quiz app's
Challange rules!
----------------
1. 5 Questions
2.Track of questions
3.Results
4.Ranking
   5   = Gold
   3-4 = Silver
   2-1 = Bronze
   0   = None
--------------*/


var readyCheck;
var yes = "yes";
/* 
Made questions in variables so you can change them manually here
so you dont have to update single variable and look for it       
*/
var question;
var question_1 = 'Is snow white?';
var question_2 = 'Is grass green?';
var question_3 = 'Are bricks orange?';
var question_4 = 'Is water blue?';
var question_5 = 'Is wood brown?';
// Keeps track of the question count
var count = 1;
var qCount = 'Question ' + count + " : ";
var qCorrect = 0;

readyCheck = prompt('Are you ready to take the quiz? Yes or No');
// Asks player if he wants to take the quiz!
if ( readyCheck.toLowerCase() === yes ){

  alert ('Please answer with yes or no only!');
  /* 
  Question 1
  Places result in color green = correct, red = incorrect
  */
  question = prompt(qCount + question_1);

  if ( question.toLowerCase() === yes ) {
    qCorrect += 1;
    document.write('<p  style="color:green;">Question ' + count + ' answer was : ' + question + '</p>');
  } else { document.write('<p  style="color:red;">Question ' + count + ' answer was : ' + question + '</p>'); }

  count += 1;
  question = prompt(qCount + question_2);

  if ( question.toLowerCase() === yes ) {
    qCorrect += 1;
    document.write('<p  style="color:green;">Question ' + count + ' answer was : ' + question + '</p>');
  } else { document.write('<p  style="color:red;">Question ' + count + ' answer was : ' + question + '</p>'); }

  count += 1;
  question = prompt(qCount + question_3);

  if ( question.toLowerCase() === yes ) {
    qCorrect += 1;
    document.write('<p  style="color:green;">Question ' + count + ' answer was : ' + question + '</p>');
  } else { document.write('<p  style="color:red;">Question ' + count + ' answer was : ' + question + '</p>'); }

  count += 1;
  question = prompt(qCount + question_4);

  if ( question.toLowerCase() === yes ) {
    qCorrect += 1;
    document.write('<p  style="color:green;">Question ' + count + ' answer was : ' + question + '</p>');
  } else { document.write('<p  style="color:red;">Question ' + count + ' answer was : ' + question + '</p>'); }

  count += 1;
  question = prompt(qCount + question_5);

  if ( question.toLowerCase() === yes ) {
    qCorrect += 1;
    document.write('<p  style="color:green;">Question ' + count + ' answer was : ' + question + '</p>');
  } else { document.write('<p  style="color:red;">Question ' + count + ' answer was : ' + question + '</p>'); }

  alert ('Lets see what medal you got!');
  if ( qCorrect === 5 ){
     document.write('<b><p style="color:#FFD700;"> You know all the colors! You\'ve got gold medal!</p></b>') 
  }
  else if ( qCorrect === 4 || qCorrect === 3){
     document.write('<b><p style="color:#C0C0C0;"> You know colors well! You\'ve got silver medal!</p></b>') 
  }
  else if ( qCorrect === 2 || qCorrect === 1){
     document.write('<b><p style="color:#CD7F32;"> You know atleast some colors! You\'ve got Bronze medal!</p></b>') 
  }
  else if ( qCorrect === 0 ){
     document.write('<b><p>You dont know colors at all!</p></b>') 
  }
} else { alert('Feel free to do it any other time!')}

Essentially, your toLowerCase() is on the incorrect side. Hope this helps! :sparkles:

edited for additional note

Patrick Mockridge has a good point. Putting repeating code in their own functions would make it a little more "modular".

Elvis Reinis Zeltītis
Elvis Reinis Zeltītis
1,925 Points

Thanks for your reply :) I'll be trying to improve this code!

Patrick Mockridge
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Patrick Mockridge
Full Stack JavaScript Techdegree Graduate 45,611 Points

Your if statements are repeating a lot of code. Try wrapping your question code and your medal code up into their own functions with their own parameters. This would make it more DRY.

But overall it's good and very clear. Well done.

Elvis Reinis Zeltītis
Elvis Reinis Zeltītis
1,925 Points

Thanks for the suggestion!

I am currently watching "Introducing functions" After this one I'll see how to make the code shorter!

Larissa Röhrig
Larissa Röhrig
1,787 Points

Hey, unfortunately I can't give you any advice for improving your code but I think your code looks really great! At the moment I'm kind of stuck with this "keeping track" part of the exercise...so could you explain how you did that or rather what var count = 1; var qCount = 'Question ' + count + " : "; var qCorrect = 0; ...means ...?

That would be very helpful !

Elvis Reinis Zeltītis
Elvis Reinis Zeltītis
1,925 Points

Hey! thanks for the reply! :)

var Count = 1; is counting up the question's number so lets say you get the question right or wrong it will display You can imagine it like this:

Actual code:
var count = 1;
var qCount = 'Question ' + count + " : "; 
var qCorrect = 0; 

question = prompt(qCount + question_1);

  if ( question === yes.toLowerCase() ) {
    qCorrect += 1;
    document.write('<p  style="color:green;">Question ' + count + ' answer was : ' + question + '</p>');
  } else { document.write('<p  style="color:red;">Question ' + count + ' answer was : ' + question + '</p>'); }

  count += 1;
  question = prompt(qCount + question_2);

Explenation:  

  var count = 1;  This is keeping the number of question and is displayed in aswer
  var qCount = Question 1 : Is snow white?  this is used in the prompt question
  var qCorrect = 0; This is being used for the "crown" reward, and stores the amount of questions you got correct

I could suggest you try my code in workspace to see how it works and understand it better. If i didnt answer something feel free to re-ask, I am typing this in a hurry, and im sorry for that!

Larissa Röhrig
Larissa Röhrig
1,787 Points

Hi! Thanks for your fast reply! :) My code works now thank you very much !! No problem, I'm happy that you answered at all. I just have a few problems with understanding how I come up with the code for this "keeping track" part....

Elvis Reinis Zeltītis
Elvis Reinis Zeltītis
1,925 Points

Glad I helped! If there is anything else you want to know feel free to ask, im student my self, but I'll see what I can do!