Creating the layout
In the newly created folder Chapter1, create a file named index.html and another .js file named quiz.js inside the js folder of Chapter1. The quiz.js file will contain all the code that we need to make the quiz functional.
Markup for the quiz page
Open the index.html file for editing using your favorite text editor, and write the following code in it:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Designing a simple quiz application</title>
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.10.4.custom.min.css">
</head>
<body>
<div class="container">
<span id="score"></span>
<button id="reset" type="button">Reset</button>
<div class="clear"></div>
<hr/>
<div id="leftCol">
<ul id="source">
</ul>
</div>
<div id="rightCol">
<ul id="target">
</ul>
</div>
</div>
<div id="dialog-complete" title="Well Done!">
<p><span class="ui-icon ui-icon-check"></span>
Well done. You have completed the quiz successfully.</p>
</div>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="js/quiz.js"></script>
</body>
</html>Tip
Downloading the example code
You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
In the preceding code, inside the head section, we referenced the jQuery UI .css file. If you have placed the .css file elsewhere, make sure to correct the path accordingly. The path can either be an absolute path or a relative path.
Inside the body, we have a div element named container that wraps our entire markup. Inside container, we have created two span elements. The first span has the id value score and it will be used to show the score of the user. The second span has the id value reset and it will be used to reset the quiz to its initial state.
After this, we have to create two more div elements having the id value leftCol and rightCol, respectively. leftCol has an ul element with the id value source inside it. This ul element will contain the names of countries as list items. Similarly, rightCol has another ul element with the id value target inside it. It will have the names of capitals as list items.
After the container element, we have created yet another div element with the id value dialog-complete, which will be displayed once the user has completed the quiz successfully. Inside the dialog-complete element, we have placed a success message.
Finally, at the bottom of the page, reference the jQuery, jQuery UI, and quiz.js files.
Note
Make sure that jQuery is included first before jQuery UI, and that any other JavaScript file or custom jQuery code is included or written.
Styling elements
We will also need some CSS styling to make the elements look good. In the head section of the index.html file, write the following code:
<style type="text/css">
body{
font-family:arial,verdana;
font-size:12px;
margin: 0px auto;
width: 600px;
}
div.container{
border: 1px solid #000;
float:left;
margin:0 auto;
padding:10px;
width: 100%;
}
#leftCol{
float:left;
}
#rightCol{
float:right;
}
ul{
list-style:none;
margin:0;
padding:0;
width:50%;
}
li{
border:1px solid #000;
font-weight:bold;
margin:5px 0;
padding:10px 0;
text-align:center;
width:175px;
}
#source li{
cursor:move;
}
#score{
font-weight:bold;
float:left;
color:#ff0000;
}
#reset{
color:#ff0000;
cursor:pointer;
font-weight:bold;
text-align:right;
text-decoration:underline;
float:right;
}
.clear{
clear:both;
}
#dialog-complete{
display:none;
}
#dialog-complete span{
float:left;
margin:0 7px 20px 0;
}
</style>In the preceding code, first we defined some basic styles for the body and the container elements. After that, the styles were defined for the ul element and its li items. These styles will display the list items in the form of individual boxes. CSS for the score and reset items follow next and finally some basic styling for the dialog elements.
