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 trialJonathan Leon
18,813 PointsGreat course! I have a question about the UI.js
I made the code shorter, probably not re-usable as yours Chalkley :\ If someone could look into my code and see what I could do better, and explain me this :
when I defined the button0 and button1 variables, I couldn't use them to call the checkAnswer function I defined onClick in the seperate quiz-ui.js file, it displayed in the console that button0\1 aren't defined. Why does this happen? When I moved the onClick calls to the app.js file it worked fine. this is my code:
quiz.js
function Quiz() {
this.questions = [];
this.currentQuestion = 0;
};
Quiz.prototype.add = function(question) {
this.questions.push(question);
};
Quiz.prototype.checkAnswer = function(inputValue) {
if (inputValue === this.questions[this.currentQuestion].correct) {
correctCounter += 1;
}
quiz.nextQuestion();
};
Quiz.prototype.nextQuestion = function() {
this.currentQuestion++;
if (this.currentQuestion === this.questions.length) {
quiz.endQuiz();
} else {
quiz.renderToHtml();
};
};
Quiz.prototype.renderToHtml = function() {
questionheader.innerHTML = this.questions[this.currentQuestion].question;
choice0.innerHTML = this.questions[this.currentQuestion].option0;
choice1.innerHTML = this.questions[this.currentQuestion].option1;
progress.innerHTML = "Question " + (this.currentQuestion + 1) + " of " + this.questions.length
}
Quiz.prototype.endQuiz = function() {
quizDiv.innerHTML = "";
quizDiv.innerHTML = "<h1>Game over!</h1><h2>Your score is : " + correctCounter + "</h2>"
};
question.js
function Question(question , option0 , option1 ,correct) {
this.question = question;
this.option0 = option0;
this.option1 = option1;
this.correct = correct;
}
app.js
////element selectors
var quizDiv = document.getElementById("quiz");
var questionheader = document.getElementById("question");
var choice0 = document.getElementById("choice0");
var choice1 = document.getElementById("choice1");
var button0 = document.getElementById("guess0");
var button1 = document.getElementById("guess1");
var progress = document.getElementById("progress");
//questions list:
var question0 = new Question("What is the name of Berry Saharof's long time partner?" , "Maor Cohen", "Rami Fortis" , 1);
var question1 = new Question("Which of these is a famous song of Shalom Hanoch?" , "Hatuna Levana" , "Sa Le'at" , 0);
var question2 = new Question("What is the name of Mercedes Band's lead singer?" , "Dan Toren" , "Gal Toren" , 1);
//new quiz
var quiz = new Quiz();
//add questions
quiz.add(question0);
quiz.add(question1);
quiz.add(question2);
//render to html call
quiz.renderToHtml();
//correct counter
var correctCounter = 0;
//buttons onclick send value to checkAnswer function
button0.onclick = function () {
quiz.checkAnswer(0);
}
button1.onclick = function () {
quiz.checkAnswer(1);
}
Jonathan Leon
18,813 PointsOfcourse, my bad, didn't know how to do it. Fixed it =)
Christian Andersson
8,712 PointsSorry for posting this off-topic, but I'm helping Treehouse investigate a potential issue with their webserver. Please follow this link and leave a comment saying if you have experienced this webserver issue or not.
https://teamtreehouse.com/forum/attention-treehouse-webserver-issues-please-read
Thank you.
3 Answers
gregsmith5
32,615 PointsAh, I think I've got it. Assuming you haven't changed the index.html file at all, look at the order of the script tags.
<script src="quiz.js"></script>
<script src="question.js"></script>
<script src="quiz_ui.js"></script>
<script src="app.js"></script>
quiz_ui.js gets loaded before app.js, but you create the quiz variable in app.js. So, when quiz_ui.js is included and evaluated, it doesn't have a reference to 'quiz'.
Jonathan Leon
18,813 PointsGreat, thanks! so basically the variables scope for all the scripts are in that descending order? I should from now on define all of the variables used on the next scripts before? if I would declare the variables inside the function itself it'd okay?
gregsmith5
32,615 PointsYup, descending order is how the interpreter processes the files. Think of all your included JS as being in one big file - in fact, when you have finished writing code for a real, live site, you'll want to copy all of your separate files into one while keeping the same order.
I'm not certain what best practice is just yet as I'm not too long into programming JavaScript myself, but what I'm thinking is this:
- All objects should be defined in library files (in this case, quiz.js, quiz_ui.js, question.js)
- Variables should be stored in objects as much as possible
- Code should be executed in app.js, after all of the library script has been loaded and variables defined.
This keeps everything encapsulated, organized and readily defined for use in the site. I'm not sure if that answers your question, but then I don't think I'm the most qualified or capable person to answer it.
Jonathan Leon
18,813 PointsThat's a great answer that makes alot of sense, thank you and goodluck to you too :-)
gregsmith5
32,615 Pointsgregsmith5
32,615 PointsIs there any way you could edit your post to include syntax highlighting? If you wrap the code in your post with
that should help.