<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<!-- page content -->
</body>
</html>The goal is to make all of the boxes in the list on the right side of the screen turn green. In order to do this you will have to read the title of the lesson to know what type of document is being setup. The list on the left side of the screen is composed of randomized elements that form the structure of the lesson's document type. These elements are draggable and can be dropped anywhere on screen.
To Begin, click on any element from the left list. While continuing to hold the mouse click, move the item over to the list on the right and release the mouse to see if you placed the element in the correct position. If you did, the box should turn green. An alert will notify you when the document has been setup correctly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<!-- page content -->
</body>
</html>The concept of this project came from my passion to share my knowledge. I have observed students struggle with setting up basic HTML documents. I thought it would be fun to provide an interactive tutorial that reinforces basic concepts.
During devlopment I learned how to use the jQuery UI library. This was my first project using extensive jQuery. I struggled to check for the correct solution and used a method that may not be the most efficient. I plan to teach myself more jQuery this summer. Hopefully I will be able to develop more efficient ways to build a game. I am happy the way that this project turned out! Once I refine my jQuery skills I can add more lessons on topics that include PHP, jQuery, and CSS3.
Thanks for playing!
~Alan McGinnis