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 trialElvis Reinis Zeltītis
1,925 PointsAny 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
Treehouse TeacherHi 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
/*--------------
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!
edited for additional note
Patrick Mockridge has a good point. Putting repeating code in their own functions would make it a little more "modular".
Patrick Mockridge
Full Stack JavaScript Techdegree Graduate 45,611 PointsYour 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
1,925 PointsThanks for the suggestion!
I am currently watching "Introducing functions" After this one I'll see how to make the code shorter!
Larissa Röhrig
1,787 PointsHey, 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
1,925 PointsHey! 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
1,787 PointsHi! 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
1,925 PointsGlad 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!
Elvis Reinis Zeltītis
1,925 PointsElvis Reinis Zeltītis
1,925 PointsThanks for your reply :) I'll be trying to improve this code!