Programming in HTML (Ethan181's question)

HowardE · Post by **HowardE** » Sat Nov 14, 2015 7:24 am

>Postby Ethan181 » Fri Nov 13, 2015 1:40 am
>I need help on html this is my first time trying it. I chose the "Teach the Computer How to Play Tic-Tac-Toe and I suck.
>This is due about 1-2 weeks from now. I am having trouble understanding it so can someone help me with this. so if >someone sees this and replies thank you so much.

Ethan, we prefer that you start a new topic for your question rather than pasting yours to someone else's completed thread.

I hadn't looked at the project before but it does look like it leads you through the steps in some detail. What about the project are you having trouble with?

I would tackle it in steps. To write the code for this you'll need a simple text editor (like Notepad or TextEdit) and a browser. When you save your file, have the file name end in .htm or .html.

Lay out an HTML page with the 9 buttons or images you want to use for the squares. The project suggests you just lay out three button in a row and then duplicate that to make three rows. Were you able to get that to work? The the procedure talked about a method to change the blank button to one containing an 'X'.

How far did you get following the procedure? I'm not sure what "trouble understanding it" means in terms of where you got stuck.

Howard

Ethan181 · Post by **Ethan181** » Fri Nov 27, 2015 5:00 pm

I got the board laid out but every thing else I am stuck on.

HowardE · Post by **HowardE** » Fri Nov 27, 2015 7:01 pm

The author of the project expected that you'd follow along with the instructions going one step at a time. You start with a blank web page which looks basically like this:

Code: Select all

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>tictactoe</title>
  </head>
  <body>
  </body>
</html>

Step 1 which you've done adds in the 9 buttons for the board so you then get this:

Code: Select all

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>tictactoe</title>
  </head>
  <body>
<INPUT TYPE="BUTTON" ID="0_0" VALUE="   ">
<INPUT TYPE="BUTTON" ID="1_0" VALUE="   ">
<INPUT TYPE="BUTTON" ID="2_0" VALUE="   ">
<BR>
<INPUT TYPE="BUTTON" ID="0_1" VALUE="   ">
<INPUT TYPE="BUTTON" ID="1_1" VALUE="   ">
<INPUT TYPE="BUTTON" ID="2_1" VALUE="   ">
<BR>
<INPUT TYPE="BUTTON" ID="0_2" VALUE="   ">
<INPUT TYPE="BUTTON" ID="1_2" VALUE="   ">
<INPUT TYPE="BUTTON" ID="2_2" VALUE="   ">
<BR>

  </body>
</html>

In step 2 you add in a javascript function to each of the buttons. At first it simply brings up a dialog box.

Code: Select all

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>tictactoe</title>
  </head>
  <body>
<INPUT TYPE="BUTTON" ID="0_0" VALUE="   " ONCLICK="alert('Hi, you clicked me!');">
<INPUT TYPE="BUTTON" ID="1_0" VALUE="   " ONCLICK="alert('Hi, you clicked me!');">
<INPUT TYPE="BUTTON" ID="2_0" VALUE="   " ONCLICK="alert('Hi, you clicked me!');">
<BR>
<INPUT TYPE="BUTTON" ID="0_1" VALUE="   " ONCLICK="alert('Hi, you clicked me!');">
<INPUT TYPE="BUTTON" ID="1_1" VALUE="   " ONCLICK="alert('Hi, you clicked me!');">
<INPUT TYPE="BUTTON" ID="2_1" VALUE="   " ONCLICK="alert('Hi, you clicked me!');">
<BR>
<INPUT TYPE="BUTTON" ID="0_2" VALUE="   " ONCLICK="alert('Hi, you clicked me!');">
<INPUT TYPE="BUTTON" ID="1_2" VALUE="   " ONCLICK="alert('Hi, you clicked me!');">
<INPUT TYPE="BUTTON" ID="2_2" VALUE="   " ONCLICK="alert('Hi, you clicked me!');">
<BR>

  </body>
</html>

Step 3 adds in a bit of javascript code that simply marks a button with an 'X' when toy click it. Follow the instructions and you end up with:

Code: Select all

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>tictactoe</title>
	<SCRIPT TYPE="TEXT/JAVASCRIPT">
function squareclicked(square)
// squareclicked is a function that is called whenever a button is clicked.
{
   square.value = 'X';
}
	</SCRIPT>

  </head>
  <body>
<INPUT TYPE="BUTTON" ID="0_0" VALUE="   " ONCLICK="squareclicked(this);">
<INPUT TYPE="BUTTON" ID="1_0" VALUE="   " ONCLICK="squareclicked(this);">
<INPUT TYPE="BUTTON" ID="2_0" VALUE="   " ONCLICK="squareclicked(this);">
<BR>
<INPUT TYPE="BUTTON" ID="0_1" VALUE="   " ONCLICK="squareclicked(this);">
<INPUT TYPE="BUTTON" ID="1_1" VALUE="   " ONCLICK="squareclicked(this);">
<INPUT TYPE="BUTTON" ID="2_1" VALUE="   " ONCLICK="squareclicked(this);">
<BR>
<INPUT TYPE="BUTTON" ID="0_2" VALUE="   " ONCLICK="squareclicked(this);">
<INPUT TYPE="BUTTON" ID="1_2" VALUE="   " ONCLICK="squareclicked(this);">
<INPUT TYPE="BUTTON" ID="2_2" VALUE="   " ONCLICK="squareclicked(this);">
<BR>

  </body>
</html>

I'm sure you can follow along from there. When you've completed all of the code in the Background section, you will have written a perfectly good Tic Tac Toe program for two human players. After that it continues on and talks about adding in a computer player.

Can you describe what you're stuck on? If you've built up a .HTML file as the procedure showed, that piece of code is mostly provided for you as the project is more about the computer player. I think that once you get the basic 2-human version working you'll know what you need to go on. Give it a try and write back.

Howard

Programming in HTML (Ethan181's question)

Programming in HTML (Ethan181's question)

Re: Programming in HTML (Ethan181's question)

Re: Programming in HTML (Ethan181's question)