Web Winder Website Calculators: Trial Installation

Providing affordable, ready-made and custom calculators for websites since 1997

Home > Calculators > Trial Installation

Home

Free Traffic Magnets

Calculators

Why Calculators?

Why Our Calculators?

Cool Design Tool Demo

Before You Buy

Trial Installation

Browse/Search/Buy Calculators

Pricing

Help & Support

About Us

Site Map

Privacy Policy

Trial Installation

If you are using some form of "do-it-yourself" web page publishing or site-builder software, we strongly suggest that you attempt to install the little game on this page before purchasing any of our commercial calculators. Lately we've been running into instances where certain brands of "do-it-yourself" site-building software ends up corrupting the calculator code during the installation process.

Below you will find a working copy of a little "Tic-Tac-Toe" game, followed by the instructions for installing it on your website. These instructions are typical of those provided for installing our commercial calculators.

If you are unable to get this game installed and working properly (error free) on your website using the instructions below the game, the other possible option would be to create your own, separate html calculator page, upload it to your web space, and link to it from your existing pages.

If you can't get the calculator installed with the instructions on this page, you probably won't have any luck installing our commercial calculators either -- in which case you should not purchase them. Instead, we suggest you contact your software's tech support, give them the URL to this page, and ask them why this otherwise simple task is not possible using their software.

Installation Instructions

Step #1: Select and copy the script from the following text box, then paste between the <HEAD> and </HEAD> tags of the page you are installing the calculator on. If your web page building software doesn't provide you the opportunity to paste the script between the <HEAD> tags, you can try pasting the script in the same entry field as the html form code. Pasting the code between the <HEAD> tags is not the required location, it's just the preferred location.

var player_turn = 0;
var player_first_turn = 0;
var num_clicks = 0;
var Vwin_cnt_1 = 0;
var Vwin_cnt_2 = 0;

var rowBox = new Array()
rowBox[0] = new Array(0,0,0)
rowBox[1] = new Array(0,0,0)
rowBox[2] = new Array(0,0,0)
rowBox[3] = new Array(0,0,0)

function fillBox(row,col,xo) {

var fld = document.getElementById("r_" + row + "_" + col + "").value.length;

if(document.game.name_1.value.length == 0) {
   alert("Please enter a name for the X player.");
   document.game.name_1.focus();
} else
if(document.game.name_2.value.length == 0) {
   alert("Please enter a name for the O player.");
   document.game.name_2.focus();
} else
if(fld == 0) {

if(player_turn == 0 || player_turn == xo) {

if(xo == 1) {
         player_turn = 2;
      } else {
         player_turn = 1;
      }

num_clicks += 1;
      if(num_clicks == 1) {
         if(player_first_turn == 0) {
            player_first_turn = player_turn;
         } else
         if(player_first_turn == 1) {
            player_first_turn = 2;
         } else {
            player_first_turn = 1;
         }
      }

var Vxo = "";
      if(xo == 1) {
         Vxo = "X";
      } else {
         Vxo = "O";
      }

document.getElementById("r_" + row + "_" + col + "").value = Vxo;
      rowBox[row][col] = xo;

checkForWin();

} else {

if(player_turn == 1) {
         alert("Ooops! It was " + document.game.name_1.value + " turn to click an [X].");
      } else {
         alert("Ooops! It was " + document.game.name_2.value + " turn to click an [O].");
      }

}

} else {

alert("A value has already been entered into that location. Please choose another location.");
}

}

function checkForWin() {

var winner = 0;

if(rowBox[1][1] == 1 && rowBox[1][2] == 1 && rowBox[1][3] == 1) {
   winner = 1;
   document.game.r_1_1.value = "||| X |||";
   document.game.r_1_2.value = "||| X |||";
   document.game.r_1_3.value = "||| X |||";
} else
if(rowBox[2][1] == 1 && rowBox[2][2] == 1 && rowBox[2][3] == 1) {
   winner = 1;
   document.game.r_2_1.value = "||| X |||";
   document.game.r_2_2.value = "||| X |||";
   document.game.r_2_3.value = "||| X |||";
} else
if(rowBox[3][1] == 1 && rowBox[3][2] == 1 && rowBox[3][3] == 1) {
   winner = 1;
   document.game.r_3_1.value = "||| X |||";
   document.game.r_3_2.value = "||| X |||";
   document.game.r_3_3.value = "||| X |||";
} else
if(rowBox[1][1] == 1 && rowBox[2][1] == 1 && rowBox[3][1] == 1) {
   winner = 1;
   document.game.r_1_1.value = "||| X |||";
   document.game.r_2_1.value = "||| X |||";
   document.game.r_3_1.value = "||| X |||";
} else
if(rowBox[1][2] == 1 && rowBox[2][2] == 1 && rowBox[3][2] == 1) {
   winner = 1;
   document.game.r_1_2.value = "||| X |||";
   document.game.r_2_2.value = "||| X |||";
   document.game.r_3_2.value = "||| X |||";
} else
if(rowBox[1][3] == 1 && rowBox[2][3] == 1 && rowBox[3][3] == 1) {
   winner = 1;
   document.game.r_1_3.value = "||| X |||";
   document.game.r_2_3.value = "||| X |||";
   document.game.r_3_3.value = "||| X |||";
} else
if(rowBox[1][1] == 1 && rowBox[2][2] == 1 && rowBox[3][3] == 1) {
   winner = 1;
   document.game.r_1_1.value = "||| X |||";
   document.game.r_2_2.value = "||| X |||";
   document.game.r_3_3.value = "||| X |||";
} else
if(rowBox[3][1] == 1 && rowBox[2][2] == 1 && rowBox[1][3] == 1) {
   winner = 1;
   document.game.r_3_1.value = "||| X |||";
   document.game.r_2_2.value = "||| X |||";
   document.game.r_1_3.value = "||| X |||";
} else

if(rowBox[1][1] == 2 && rowBox[1][2] == 2 && rowBox[1][3] == 2) {
   winner = 2;
   document.game.r_1_1.value = "||| O |||";
   document.game.r_1_2.value = "||| O |||";
   document.game.r_1_3.value = "||| O |||";
} else
if(rowBox[2][1] == 2 && rowBox[2][2] == 2 && rowBox[2][3] == 2) {
   winner = 2;
   document.game.r_2_1.value = "||| O |||";
   document.game.r_2_2.value = "||| O |||";
   document.game.r_2_3.value = "||| O |||";
} else
if(rowBox[3][1] == 2 && rowBox[3][2] == 2 && rowBox[3][3] == 2) {
   winner = 2;
   document.game.r_3_1.value = "||| O |||";
   document.game.r_3_2.value = "||| O |||";
   document.game.r_3_3.value = "||| O |||";
} else
if(rowBox[1][1] == 2 && rowBox[2][1] == 2 && rowBox[3][1] == 2) {
   winner = 2;
   document.game.r_1_1.value = "||| O |||";
   document.game.r_2_1.value = "||| O |||";
   document.game.r_3_1.value = "||| O |||";
} else
if(rowBox[1][2] == 2 && rowBox[2][2] == 2 && rowBox[3][2] == 2) {
   winner = 2;
   document.game.r_1_2.value = "||| O |||";
   document.game.r_2_2.value = "||| O |||";
   document.game.r_3_2.value = "||| O |||";
} else
if(rowBox[1][3] == 2 && rowBox[2][3] == 2 && rowBox[3][3] == 2) {
   winner = 2;
   document.game.r_1_3.value = "||| O |||";
   document.game.r_2_3.value = "||| O |||";
   document.game.r_3_3.value = "||| O |||";
} else
if(rowBox[1][1] == 2 && rowBox[2][2] == 2 && rowBox[3][3] == 2) {
   winner = 2;
   document.game.r_1_1.value = "||| O |||";
   document.game.r_2_2.value = "||| O |||";
   document.game.r_3_3.value = "||| O |||";
} else
if(rowBox[3][1] == 2 && rowBox[2][2] == 2 && rowBox[1][3] == 2) {
   winner = 2;
   document.game.r_3_1.value = "||| O |||";
   document.game.r_2_2.value = "||| O |||";
   document.game.r_1_3.value = "||| O |||";
} else {

if(player_turn == 1) {
     document.game.status.value = "It's your turn to place an X " + document.game.name_1.value + "";
  } else {
     document.game.status.value = "It's your turn to place an O " + document.game.name_2.value + "";
 }

}

if(winner > 0) {
   if(winner == 1) {
      document.game.status.value = "" + document.game.name_1.value + " wins!! Click [New Game] to start the next game.";
      Vwin_cnt_1 += 1;

} else {
      document.game.status.value = "" + document.game.name_2.value + " wins!! Click [New Game] to start the next game.";
      Vwin_cnt_2 += 1;

}

document.game.win_cnt_2.value = Vwin_cnt_2;
   document.game.win_name_2.value = document.game.name_2.value;
   document.game.win_cnt_1.value = Vwin_cnt_1;
   document.game.win_name_1.value = document.game.name_1.value;

}

function newGame(form) {

num_clicks = 0;

document.game.r_1_1.value = "";
document.game.r_1_2.value = "";
document.game.r_1_3.value = "";
document.game.r_2_1.value = "";
document.game.r_2_2.value = "";
document.game.r_2_3.value = "";
document.game.r_3_1.value = "";
document.game.r_3_2.value = "";
document.game.r_3_3.value = "";

rowBox[1][1] = 0;
rowBox[1][2] = 0;
rowBox[1][3] = 0;
rowBox[2][1] = 0;
rowBox[2][2] = 0;
rowBox[2][3] = 0;
rowBox[3][1] = 0;
rowBox[3][2] = 0;
rowBox[3][3] = 0;

if(player_first_turn == 0) {
   document.game.status.value = "Enter your names and flip a coin to see who goes first."
} else {
  if(player_first_turn == 1) {
     document.game.status.value = "It's your turn to start " + document.game.name_1.value + ". Click on one of the [X] buttons in any one of the nine boxes.";
  } else {
     document.game.status.value = "It's your turn to start " + document.game.name_2.value + ". Click on one of the [O] buttons in any one of the nine boxes.";
  }
}

}

function newTournament(form) {

player_turn = 0;
player_first_turn = 0;
Vwin_cnt_1 = 0;
Vwin_cnt_2 = 0;

document.game.win_cnt_1.value = "";
document.game.win_name_1.value = "";
document.game.win_cnt_2.value = "";
document.game.win_name_2.value = "";

newGame();

}

function noEntry(form) {

alert("Please use the X and O buttons instead of making entries from your keyboard.");
   document.game.name_2.focus();

}

</script>

Step #2: Select and copy the following HTML form code, then paste in the desired location between the <BODY> and </BODY> tags of the page you are installing the calculator on. Note: If you are using FrontPage to create your calculator pages, please see our FAQ regarding FrontPage installation instructions.

<form name="game" method="post" action="#">

<table width="300" border='0' cellspacing='2' cellpadding='4'>
<tbody>
<tr bgcolor='#D3DCE3'>
<td colspan='3' align='center'>
<font face='arial'><big><strong> 2-Player Tic-Tac-Toe Game </strong></big></font>
</td>
</tr>

<tr bgcolor="#EEEEEE">
<td colspan="3">
<font face='tahoma'><small>First name of "X" player:</small></font> <input type="text" name="name_1" style='background-color:FFFFFF' size="15" />
</td>
</tr>

<tr bgcolor="#EEEEEE">
<td colspan="3">
<font face='tahoma'><small>First name of "O" player:</small></font> <input type="text" name="name_2" style='background-color:FFFFFF' size="15" />
</td>
</tr>

<tr bgcolor='#CCCCCC'> <td align='center' bgcolor='#CCCCCC'>
<input type="text" name="r_1_1" id="r_1_1" style='background-color:FFFFFF' size="3" onFocus="noEntry(this.form)" /><br />
<input type="button" value="X" onClick="fillBox(1,1,1)" />
<input type="button" value="O" onClick="fillBox(1,1,2)" />
</td>
<td align='center' bgcolor='#CCCCCC'>
<input type="text" name="r_1_2" id="r_1_2" style='background-color:FFFFFF' size="3" onFocus="noEntry(this.form)" /><br />
<input type="button" value="X" onClick="fillBox(1,2,1)" />
<input type="button" value="O" onClick="fillBox(1,2,2)" />
</td>
<td align='center' bgcolor='#CCCCCC'>
<input type="text" name="r_1_3" id="r_1_3" style='background-color:FFFFFF' size="3" onFocus="noEntry(this.form)" /><br />
<input type="button" value="X" onClick="fillBox(1,3,1)" />
<input type="button" value="O" onClick="fillBox(1,3,2)" />
</td>
</tr>

<tr bgcolor='#CCCCCC'>
<td align='center' bgcolor='#CCCCCC'>
<input type="text" name="r_2_1" id="r_2_1" style='background-color:FFFFFF' size="3" onFocus="noEntry(this.form)" /><br />
<input type="button" value="X" onClick="fillBox(2,1,1)" />
<input type="button" value="O" onClick="fillBox(2,1,2)" />
</td>
<td align='center' bgcolor='#CCCCCC'>
<input type="text" name="r_2_2" id="r_2_2" style='background-color:FFFFFF' size="3" onFocus="noEntry(this.form)" /><br />
<input type="button" value="X" onClick="fillBox(2,2,1)" />
<input type="button" value="O" onClick="fillBox(2,2,2)" />
</td>
<td align='center' bgcolor='#CCCCCC'>
<input type="text" name="r_2_3" id="r_2_3" style='background-color:FFFFFF' size="3" onFocus="noEntry(this.form)" /><br />
<input type="button" value="X" onClick="fillBox(2,3,1)" />
<input type="button" value="O" onClick="fillBox(2,3,2)" />
</td>
</tr>

<tr bgcolor='#CCCCCC'>
<td align='center' bgcolor='#CCCCCC'>
<input type="text" name="r_3_1" id="r_3_1" style='background-color:FFFFFF' size="3" onFocus="noEntry(this.form)" /><br />
<input type="button" value="X" onClick="fillBox(3,1,1)" />
<input type="button" value="O" onClick="fillBox(3,1,2)" />
</td>
<td align='center' bgcolor='#CCCCCC'>
<input type="text" name="r_3_2" id="r_3_2" style='background-color:FFFFFF' size="3" onFocus="noEntry(this.form)" /><br />
<input type="button" value="X" onClick="fillBox(3,2,1)" />
<input type="button" value="O" onClick="fillBox(3,2,2)" />
</td>
<td align='center' bgcolor='#CCCCCC'>
<input type="text" name="r_3_3" id="r_3_3" style='background-color:FFFFFF' size="3" onFocus="noEntry(this.form)" /><br />
<input type="button" value="X" onClick="fillBox(3,3,1)" />
<input type="button" value="O" onClick="fillBox(3,3,2)" />
</td>
</tr>

<tr>
<td bgcolor='#EEEEEE' COLSPAN="3"><CENTER><textarea name="status" rows="4" cols="30" wrap="virtual">Enter your names flip a coin to see who goes first.</textarea></TD>
</TR>

<tr>
<td bgcolor='silver' COLSPAN="3"><CENTER><INPUT TYPE="button" VALUE="New Game" onClick="newGame(this.form)" /></CENTER></TD>
</tr>

<tr>
<td bgcolor='#EEEEEE' COLSPAN="3"><CENTER><input type="text" name="win_cnt_1" style='background-color:FFFFFF' size="3" /> wins for <input type="text" name="win_name_1" style='background-color:FFFFFF' size="15" /></TD>
</tr>

<tr>
<td bgcolor='#EEEEEE' COLSPAN="3"><CENTER><input type="text" name="win_cnt_2" style='background-color:FFFFFF' size="3" /> wins for <input type="text" name="win_name_2" style='background-color:FFFFFF' size="15" /></TD>
</tr>

<tr> <td bgcolor='silver' COLSPAN="3"><CENTER><INPUT TYPE="button" VALUE="New Tournament" onClick="newTournament(this.form)" /></CENTER></TD>
</tr>

</tbody>
</table>
</form>

Step #3: Save and upload the page to your server and you're done!

[ Why Calculators? ]
[ Why Our Calculators? ]
[ Cool Design Tool Demo ]
[ Before You Buy ]
[ Trial Installation ]
[ Browse/Search/Buy Calculators ]

Why Our Calcs?

Reason #8
Keep Your Visitors
Once you've licensed our calculators there is no link to our website located on the user interface. 11 more reasons

Fast & Easy!

Adding our calculators to your website is as easy as ....
	Browse through Calculators & add desired calculators to your shopping cart.
	Check out.
	Customize the calculator user-interface to suit your website using our Cool Design Tool.
	Copy & paste each calculator into your web pages.

Newest Calculators

	Mortgage Payment Calculator w/Amortization V1.2
	Loan Payment Calculator with Balloon Payment
	Mortgage Payment Range Calculator
	Portfolio Rate of Return Calculator

Home > Calculators > Trial Installation

Contact: Dan Peterson
P.O. Box 11
Bemidji, MN 56619
(218) 243-2263