What follows is a series of tasks for you to perform using your own computer and a series of follow-up questions for you to answer. What you will be submitting, and graded upon, are your responses to the provided questions. Presumably, in order to compose those responses, you will have previously completed the described tasks.
Your development environment
In the previous assignment, you were asked to install and experiment with some browsers and text editors.
The code presented in the book (and most other books for that matter) won’t necessarily always work the first time you type it in. Often, you will find that you’ve made typos that prevent it from running, and occasionally you may find that even though you’ve typed it exactly as it appears in the book, the code is either incomplete or contains bugs or browser incompatibilities. In the past, some students have found this aspect of the assignments frustrating, since they feel like they are spending time fixing someone else’s problems. But that’s actually one of the primary reasons I ask you to implement the Quiz Ninja project! Fixing errors in someone else’s code tends to occupy a large percentage of a professional programmer’s time, and it’s a skillset you’ll need to develop sooner or later. For this reason, I encourage you to take the time to type the code in yourself and fight your way through the obstacles. Many books (including this one) provide code archives for readers to download, but you will learn much more by typing things yourself and working through whatever problems happen to arise as a result. So stick with it through the frustration and keep reminding yourself that you are learning something valuable through the experience!
The book uses a project named Quiz Ninja, which is discussed and expanded at the end of each chapter, in order to illustrate many of the concepts it covers. While it is relatively simplistic, it is generally a good idea to actually enter and run the code presented in the books you will read as a web developer. Often, things arise during that experience that are not explicitly covered in the book but are extremely important to the depth of your learning.
The CSS file contains a rather lengthy URL which would be tedious to type yourself, therefore, I have provided it here for you to copy and paste when needed:
It’s not a requirement, but you are strongly advised to reformat the book’s code as your enter it. In the interest of fitting things more easily onto the book’s pages, the author cuts a fair number of corners when formatting his code. If you do not take the opportunity to reformat that code into a clearer form as you enter it, the decision will likely come back to haunt you later in the course when you need to expand and debug that code!
For this assignment, follow the guidance in the Quiz Ninja sections at the ends of Chapters 1 and 2 to implement the first two phases of the Quiz Ninja project on your computer. In completing phase one, add your full name (last name first) to the content of the title element. Retain the use of your name at the start of the title for all subsequent work on the Quiz Ninja project.
main.js with the three lines indicated at the end of Chapter 2; do not add them to the existing code. That is, your phase two solution should only produce two dialog boxes, not three.Produce your screen shots for phase one before moving on to phase two (or create phase two using a separate set of files). And when completing phase two replace the single alert invocation in
Note that in some browsers the alert dialog may appear against the background of an empty browser window (rather than in front of the completed backdrop as illustrated in the book). While this would not be desirable for a production site, it is fine for our current purposes. As such, you do not need to address this issue at this time, as long as the completed backdrop appears once the alert dialog has been cleared by the user. At the completion of each phase, take a screenshot (or a clear photo) of the resulting test screen (which should look very similar to the figures in the book). Note that two screenshots will be needed at the end of each phase. At the end of phase one, you will need one screenshot that shows the alert dialog and another that shows the completed page unobstructed by the alert dialog. Using whatever extension is appropriate to the image type, name the first of these files quizninja_ch01_alert and the second quizninja_ch01_page . At the end of phase two, you will need one screenshot that shows the question being asked and one that shows the user’s response being presented to them. Name these files quizninja_ch02_question and quizninja_ch02_response , respectively.
Since there is no way to control the labels on the buttons in a confirm() dialog, you should simply treat the OK button as a true response and the Cancel button as a false response.
When you have completed the second phase (and generated the associated screenshots), modify the results to add a second question to the quiz (that appears after the first question’s answer has been displayed). This second question should be a true/false question; it should be presented to the user using the confirm() function/method; and it should display the user’s response as the word true or false . Once you have it working, take two more screenshots, one showing the question being asked and the other showing the user’s response. Name the screenshot files quizninja_ch02_tfquestion and quizninja_ch02_tfresponse (again, using whatever extension is appropriate for the image type).
The point of the questions in this section is to get you started understanding how this type coercion works with respect to Boolean values. Below are several values and the results of coercing each to a Boolean value. Examine the contents of the list closely and use it when answering the questions that follow.
b. +0 coerces to false
Soft and hard equality
sa. 0 == false is true sb. "" == false is true sc. '' == false is true sd.  == false is true se. NaN == false is false sf. NaN == true is false sg. NaN == NaN is false
sh. null == false is false
si. undefined == false is false
sj. 5 == 5 is true
sk. 5 == "5" is true
sl. 5 == "five" is false sm. 5 == false is false sn. " " == 0 is true
so. " " == "0" is false sp. "0" == false is true sq. "1" == true is true sr. "2" == true is false ss. 2 == true is false
st. "true" == true is false
su. undefined == undefined is true
sv. null == null is true
sw. null == undefined is true
sx. +0 == -0 is true
ha. 0 === false is false hb. "" === false is false hc. '' === false is false hd.  === false is false he. NaN === false is false hf. NaN === true is false hg. NaN === NaN is false hh. null === false is false
hi. undefined === false is false
hj. 5 === 5 is true
hk. 5 === "5" is false
hl. 5 === "five" is false hm. 5 === false is false hn. " " === 0 is false
ho. " " === "0" is false hp. "0" === false is false hq. "1" === true is false hr. "2" === true is false hs. 2 === true is false
ht. "true" === true is false
hu. undefined === undefined is true
hv. null === null is true
hw. null === undefined is false
hx. +0 === -0 is true
Exploring the fringes