The Project: Quiz Ninja

Throughout this book we will be building an example application called "Quiz Ninja". This is a quiz application where the aim is for the player to answer questions the real names of super heores. The quiz application will run in the browswer and use many of the concepts covered in the book. At the end of each chapter we will use the skills we have covered in that chapter to develop the appliation further.

The application will adhere to the good solid principles of three separate web layers and unobtrusive JavaScript. This means that we need to keep the HTML, CSS, and JavaScript in separate files, so let’s create those files now.

Create a folder called quiz_ninja and inside create the following files and folders:

■ index.htm
■ js/scripts.js
■ css/styles.css

Add the following code to index.htm:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="A quiz game for ninjas">
<meta name="author" content="DAZ">
<title>Quiz Ninja</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
<h1>Quiz Ninja!</h1>
</header>
<script src="js/scripts.js"></script>
</body>
</html>

This is a standard HTML5 layout with a simple heading at the top of the page. We’ll add more to the page as the application develops in later chapters.
Now it’s time to style the page. Add the following code to the styles.css file in the css folder:

*{
margin: 0;
padding: 0;
}
header {
font: bold 36px/120% Arial, Helvetica, sans-serif;
background: #333;
color: #c00;
text-transform: uppercase;
}

This resets all the margins and padding to zero and styles the heading in ninja-like red and black colors.
And finally we’ll add some interactivity using JavaScript. Place the following code inside the scripts.js file in the js folder:

// welcome the user
alert("Welcome to Quiz Ninja!");

The first line uses the alert function that displays a welcome message to the player in a dialog box in the browser. alert isn’t actually part of the official ECMAScript specification, but is used by all browsers as a way of showing messages.

To give this a try, open the index.htm file in your favorite browser. You should be greeted by the welcome message alert box, such as in the screenshot shown in Figure 1.3.

Figure 1.3 Quiz Ninja

This gives us a good solid start to our project that we can build on over the course of the book as our JavaScript knowledge develops.

The Project: Quiz Ninja

0 Response to "The Project: Quiz Ninja"

Post a Comment