Gregory Consulting Limited - Dieroll ActiveX Control Sample

To roll both dice, left click the mouse on either of the dice or press the roll button. After each roll, the fields in the table are updated. # Rolls is increased by one and the Total is increased by the total on the two dice. The Average is calculated by dividing the Total by the # Rolls field. The box corresponding to the total on the two dice is increased by 1. For example, if one die is 3 and the other 5, the box above 8 will increase by one.

We originally designed this page using JavaScript, but could not capture the Click event from the control when it was wrapped in the NCompass plug-in. So we switched to VBScript for the plug-in. (The Explorer parts of the page still use JavaScript.) Unfortunately VBScript cannot update the fields on the form. So, if you are viewing this page from Netscape, clicking on a die rolls both dice but does not update the totals. (Or at least, it sometimes does. We're still having quite a bit of trouble getting the two dice to interact from inside the plug-in. Bear with us, please.In the meantime we found a pretty good workaround using the HTML Layout Control -- it's on a page of it's own.) Clicking the roll button rolls both dice and updates the fields in both Netscape and Explorer. We have also developed the same dieroll as a Java applet. We also summarize the issues in the decision between a Java applet and an ActiveX control.

Each die on this page is an ActiveX control. The totals fields are text input fields on a form. The text fields are updated using JavaScript whenever a die is clicked. Here is the code that is executed when the left die is pressed (the right die has similar code).

<SCRIPT LANGUAGE="JavaScript" FOR="Dieroll1" EVENT="Click()">
<!--
// Die1 was clicked so roll Die2 and update all values
if(navigator.appName != "Netscape")
{
	document.dieroll_form.Dieroll2.DoRoll();
	update_values (dieroll_form);
}
<!-- END --></SCRIPT>

Netscape does not support the FOR and EVENT attributes on the SCRIPT tag and will try to execute the code in the SCRIPT tag whenever the page is loaded. So the if statement tells Netscape to go away. When the left die is clicked it will automatically roll itself, but to get the other die to roll, we call the DoRoll() method of the other ActiveX die control. Next we call the JavaScript function update_values. This function will look at the values of the two dice and update all the forms fields, and is presented below. There is one other function needed: roll simply rolls both dice and updates the values. Both functions are in this SCRIPT tag:

<SCRIPT LANGUAGE="JavaScript">
<!--
// function to update the text input fields after each roll
function update_values(form){

// total of the two dice
var total;
var old_value;
if(navigator.appName == "Netscape")
{
	total=parseInt(document.Dieroll1.GetProperty("number"))
	 + parseInt(document.Dieroll2.GetProperty("number"));
}
else
{
	total=document.dieroll_form.Dieroll1.Number + 
		document.dieroll_form.Dieroll2.Number;
}

// add this rolls total to the total of all rolls 
old_value = parseInt(form.total.value);
if (isNaN(old_value))
{
	old_value = 0;
}
form.total.value = old_value + total;

// increment the number of rolls by one
old_value = parseInt(form.NumRolls.value);
if (isNaN(old_value))
{
	old_value = 0;
}
form.NumRolls.value = old_value+1;

// calculate the average input field rounded to 2 decimals
form.average.value = Math.round(parseFloat(form.total.value)
			  / parseFloat(form.NumRolls.value)
		*100)/100;

// total can be from 2 to 12, if it is
// 2 we want to update roll2 input field and 
// if 12 we want to update roll12
// so we create a string that has the command
// to update rollx where x is the number in total
cmd = "old_value = parseInt(form.roll" + total + ".value)";
eval(cmd);
if (isNaN(old_value))
{
	old_value = 0;
}
cmd = "form.roll" + total + ".value = old_value+1";
// execute the command in the string cmd
eval(cmd);
} 

function roll(form)
{
	if(navigator.appName == "Netscape")
	{
		document.Dieroll1.Invoke("DoRoll");
		document.Dieroll2.Invoke("DoRoll");
	}
	else
	{
		document.dieroll_form.Dieroll1.DoRoll();
		document.dieroll_form.Dieroll2.DoRoll();
	}

	update_values (form);
}
<!-- END --></SCRIPT>

This code needs a little explanation. The total is calculated differently for Netscape because we have to ask the plug-in for the number rather than asking the control directly. The checks on isNaN() are simply to ensure that parseInt wasn't asked to parse some letters rather than a number. NaN stands for Not a Number. The code that builds cmd is trying to create a command like "form.roll3.value = old_value + 1" and then to execute it. It has to be broken into two parts to check that the old value wasn't blank or letters.

The roll function makes the roll button work. Because it's outside the plug-in, it is in JavaScript and can update the form. The way you tell the plug-in to roll the dice is not the same as the way you tell the control directly.

The roll function is executed by the following HTML when the roll button is pressed

Finally, the VBScript to roll the other die rolled when one is clicked in Netscape. Put this code into dieroll.axs:

(What does axs stand for? ActiveX Script.) You connect the page to this script with the embed tag: