Our goal is to design a series of projects that teach how to use these tools to build websites, and web applications.
We have been experimenting with several projects on small groups of students. When our ideas are clear and have been classroom tested, we will turn them into a series of online lectures.
Here is a summary of where we are at:
- Build a static website with HTML & CSS:
In this project, students build a simple multi page website using nothing but a simple text editor. Students come prepared with some sample assignments from school including an English essay (to learn formatting of plain text) and a science or humanities assignment (to learn formatting of tables, and diagrams).
The project is developed using the student’s file system and a browser to display pages. At the end of the project, we learn how to FTP the pages to a webserver on the public Internet.
This project uses the Club Engineer HTML Cheat Sheet and Club Engineer CSS Cheat Sheet as a guide.
- Code a game of Noughts-and-Crosses:
A simple, trivial game you would think, but surprisingly complex once you start getting into the details.
- What next?
Once we have coded Noughts-and-Crosses to a high level with player vs player and player vs computer options, students will have a good understanding of the basic web application building blocks.
We will explore other ideas including:
* Mastermind game;
* Snake game;
* Pong game;
* Space Invaders game.
Some sample work-in-progress is below.
Noughts and Crosses
PHP Implementation of human-vs-human in a single browser instance.
- Empty HTML page with head, title and body blocks;
- HTML Table 3 x 3;
- Format the cell size with CSS (add style block);
- Add some Os and Xs to the table. Center text with CSS;
- Change the OnClick events to say the cell number;
- Change the HTML page to PHP with a single echo;
- Break the echo into functions writePageHeader(), writeStyle(), writeScript(), writeBody(), writePageFooter(), each containing a single echo;
- Change writeBody() to write the table with a for loop. Write empty table first, with the cell number in the cell, then change to write the OnClick event;
- Write a test stub of PHP to demonstrate a GET param. Hard wire something in the URL, display it in the page;
- Write a test stub of PHP to demonstrate a POST param using a TEXT field. Single form & text field with a submit button, write the content of the field to the page;
- Change the POST demo to use a form with a hiden field that acts as a counter. Display the nubmer of times the user clicked the submit button;
- Change the POST demo so instead of a submit button, there is an a tag that executes submit;
- Change the noughts and crosses PHP file to write the form with a hidden field for cell. Change the onClick() so it passes the cell number to the server, and returns a message on the screen "You clicked cell: X";
- Discuss the concept of game state, and how it will be held in a string of 9 char. Add a var for $gameState and hard wire it to a given sequence of Os, Xs and Spacers. Pass $gameState to the code that draws the grid and put the correct character in the corret cell;
- Initialise $gameState to replicate(" ", 9), grab the CellClicked index, insert a "X" into $gameState and display the grid;
- Pass $gameState back to the page, then from the page to the server to keep track of compounding clicks;
- Add $whosMove and toggle it with each click / post. Pass $whosMove to keep track. Display $whosMove next on the screen;
- Do not allow a user to click() on a cell that is already occupied;
- Add scanForWinner(). If winner detected, hilight the winning cells. This requires a list of winning cells to be passed around using the same data structure as $gameState;
- Turn off OnClick if a winner is detected;
- Add "Start game again" link;
- Center the game grid on the screen;
- Tidy the grid borders;
- Change the mouse cursor to 'hand' when mouse over available cells;
- Add some page header (name of the game) and footer ((c) authour, etc);
- Deploy to student's own webiste and test.
Peter's first attempt at playing the computer. Computer's move is to choose a random, empty square.
Improving the computer's logic to block moves, and scan for possible wins.
to be used as the basis of multi player noughts-and-crosses.