Game Interface

Positioning and Styles

Are you up for a challenge?

Use the graphic located at "" and Build a Bear.  The bear.png file is a sheet filled with body parts. Choose parts of the body and put each on a layer and reposition them using z-index, absolute positioning and build a bear!

You can use the following document for some assistance in helping you figure out how to put the pieces together.  Refer to style documentation (through google) to understand what the properties can do.

Read more: Positioning and Styles


Most of your game will be done as a basic text webpage.  You will need to be able to understand and work with basic concepts in HTML, including struture and syntax an understand how tags work.  Once you are familiar with those ideas, you will be adding in forms, which are ways to pass information from your web browser (client) to the websige (server) where all of the calcualtions and results will be done using the information that you send.  The results will then be presented in a new webpage.  If you want to be able to adjust how the display looks, then Cascading Style Sheets (CSS) is a good way to format your page.

Read more: Overview

Basic HTML

In order to present your output to the user, you will need to develop dynamic web pages.  This means that you will actually generate your webpage from sections and present certain sections to the user.  Imagine that all of your dispaly is created on pieces of paper and you will decide which pieces that the user will see at any given time.  This is how we are going to dynamically create our web pages; we will have certain sections of code that we will present to the user depending on what they need to see at any given time.  In order to do this, we need to be able to decide what we will show to the user and include it in our page as necessary.

Are you unsure of how basic HTML tags work?  You might want to visit some of the following websites:

Modify the following text:



Lorem Ipsum "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu ex imperdiet, tincidunt lectus sed, ultrices nisl. Sed in magna eget justo porttitor feugiat nec ut leo. Vivamus a tellus vel nibh venenatis viverra dignissim vitae nisl. Morbi condimentum vitae quam eget dapibus. Proin feugiat orci sed tellus elementum, eu congue risus tempor. Duis varius velit quis suscipit gravida. Donec pretium eleifend dolor. Nunc mattis odio nec nunc dictum porta. Quisque hendrerit mollis quam sit amet tristique. Fusce auctor libero eu leo lobortis viverra. Nullam pulvinar dui et mauris varius cursus. Duis porta fringilla dolor. Vivamus condimentum placerat ullamcorper. Integer tristique lorem eros, sit amet convallis massa porta sed. Aenean lobortis leo nibh, bibendum facilisis enim sodales ut. Maecenas justo augue, aliquam sed tincidunt eget, ullamcorper ac mi. Suspendisse potenti. Curabitur eget mauris lorem. Shape Cras sit amet ullamcorper eros, sit amet suscipit lorem. Cras sed varius ante, vitae dignissim justo. Aenean dictum orci eu aliquet congue. Sed facilisis magna eu turpis tempus, ac fringilla odio imperdiet. Sed lacinia orci id auctor euismod. Cras accumsan urna vel efficitur sollicitudin. Morbi egestas diam sit amet nulla porta, id convallis ligula maximus. Donec porta posuere ipsum commodo molestie. Proin id eros ipsum. In tincidunt ligula et risus pharetra placerat. Duis eros sem, posuere non nunc vitae, commodo iaculis sapien. Shape Nullam varius pharetra metus et convallis. Maecenas quis tellus posuere, blandit tellus sed, luctus ipsum. Phasellus in felis arcu. Donec nunc neque, vestibulum efficitur porttitor eu, finibus a orci. Mauris vehicula, arcu et vestibulum vulputate, lectus velit dictum metus, sed dapibus magna mi a massa. Maecenas libero quam, consequat sit amet augue quis, sagittis lacinia dolor. Vestibulum mollis, leo sit amet egestas scelerisque, neque dolor ornare orci, non porta ligula velit sed nibh. Nullam luctus, mauris vel tincidunt maximus, sapien risus tempor tellus, nec venenatis nisl libero ac nisl. Nam gravida faucibus felis, ac finibus turpis ornare in. Ut fermentum egestas felis Nullam ante sapien, pretium sit amet euismod vitae, scelerisque ut leo Sed sollicitudin sem at massa dignissim fermentum Sed vitae rhoncus sapien, s

The FORM tag

The most important HTML element for our game is the form tag.  The FORM is basically an HTML element that allows you to pass information from your webpage to the server. Note that you can have more than 1 form on a page! Each form has 2 main parts:

Read more: The FORM tag

HTML Sandbox

A sandbox is a place to play, and there are many virtual sandboxes online.  These are also places to play with specific kinds of code.  An HTML sandbox is a website that allows you to type in some code, and then you can test to see how it looks.  This allows you to experiment with some HTML without having to host any of your files.

A couple of good places to find HTML Sandboxes are: - Strictly HTML only. This will also show you the general structure of a page.  Your HTML will go in between the <body> and </body> tags. - Alows you to experiment with HTML, CSS and Javascript all at the same time.  No page templates have been provided for you, but you can still experiment with the basic tags. - Another bare bones sandbox like JFiddle.  This is strictly for trying out code and will not give you the whole page template.


Login Form