CSCI 121 - Lab 5

Lab Resources

Lab Instructions

In this lab you will be authoring a web page that provides a rudimentary tic-tac-toe game. Please read through all of the instructions below before starting.

  1. Start: Use Brackets to create a file named lab5.html.
  2. Include a title for the page with your name, class and lab, i.e. Your Name - CSCI 121, Lab 5
  3. Repeat the title text as the heading for the page.
  4. Your document must include a visible border table with 3 rows by 3 columns, each cell (TD element) having a width and height of 60px and font-size within of 30px.
  5. Use a STYLE block in the HEAD section to style the table, its rows, its cells. To stylize the table elements DO NOT specify style or set formatting attributes on individual TR, TD elements within the BODY.
  6. Add ID attributes to each of the TD elements. See "Hints" section below.
  7. Code a function entitled: clickSpace(id)
  8. The clickSpace(id) function should have the following comment before it, which explains how it should be coded:
  9.             // clickSpace
            //
            // Purpose:  This function is passed in the identifier of a space (TD element)
            //           of the tic-tac-toe board and performs the following:
            //           
            //           a. Uses document.getElementById to get the element associated with
            //              the id passed in, storing element in a variable declared and
            //              named "elem"
            //
            //           b. Check IF the element currently is empty (equal to "") and if so...
            //
            //           c. Place an "X" in the element if it is Player 1's turn, else
            //              place a "O" in the element (else Player 2's turn).
            // 
            //           d. Update the "turn" variable. If player 1 just had a turn set turn
            //              variable to "O" else set it to "X".
            //
            // Note:  Declare and initialize the turn variable outside of the function 
            //        giving it a global scope and initialize it to "X" (player 1 goes first).
  10. Wire up the onClick event of each space of the tic-tac-toe board so that it calls the clickSpace(id) function passing in the id of the TD.
  11. Extra Credit: Add a paragraph with known ID below the table and within the paragraph place text indicating which player's turn it is (e.g. "Player 1's Turn", or "Player 2's Turn" and update the text accordingly upon each turn in the clickSpace() function.
  12. At the bottom of the page include a mailto link with the following syntax (change your_email accordingly):
  13. When completed the lab should look like this:
  15. Important notes/hints:
    1. Make sure to name the file: lab5.html
    2. For the sake of easier grading please limit your lab to the single lab5.html file only.
    3. Make sure that your mailto: link uses your Millersville email address and does not include spaces anywhere.
    4. The reason for adding ID attributes to the TDs is so that those elements may be refereced within functions through the use of: document.getElementById();
    5. Use the debugger in Chrome when testing.
    6. Test "as you go".
  16. Upload the lab5.html file to Google Docs, storing in your "CSCI 121" folder.
  17. Share the lab5.html file with thomas.rogers@millersville.edu.

Lab 5 Example

Following is an example of a working lab5.html