teabag revisited

Question

AliHurworth 0 Light Poster

14 Years Ago

hi all.
i'm struggling with the following code - can't seem to get the variables within the function to work...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Teabag calculator</title>
<script language="javascript" type="text/javascript">
var single=0;
var dbl=80;
var total=single + dbl;
alert (total);
var i=0;
function maketea()
{
alert ("total: " + total);
//button is pressed.
/*
The variables are:	singles
					doubles
					singles + doubles
*/
//Create a random number, multiply up so it matches the total
var randomnumber=(Math.floor(Math.random()*total));
alert (randomnumber);
//set the counter
i=++i;
//Test 
if (randomnumber>single)
//low, ie single
/*if a single bag is pulled, the doubles are unaffected, the singles fall by one 
the total number falls by one, and the number of tries increases by one*/
	{
		single=--single;
		//if (single<0){single++};
		alert ("more:Singles left:" + single);
		alert ("more:Doubles left:" + dbl);
		
		total=dbl+single;
		document.getElementById('tries').innerHTML=i;
		document.getElementById('doubles').innerHTML=dbl;
		document.getElementById('singles').innerHTML=single;
		document.getElementById('total').innerHTML=total;
		document.getElementById('doubles').style.color="black";
		document.getElementById('singles').style.color="red"
	}
else //(randomnumber==1)
//high, ie double
/*if a double is pulled, the doubles fall by one, the singles increase by one, 
thetotal number left stays the same*/
	{
		dbl=--dbl;
		//if (dbl<1)	{dbl=0};
		single=++single;
		alert ("Greater: Singles left:" + single);
		alert ("Greater: Doubles left:" + dbl);
		total=dbl+single;
		document.getElementById('tries').innerHTML=i;
		document.getElementById('doubles').innerHTML=dbl;
		document.getElementById('singles').innerHTML=single;
		document.getElementById('total').innerHTML=total;
		document.getElementById('singles').style.color="black";
		document.getElementById('doubles').style.color="red";
	}
}
if ((dbl=0)&&(single=0)){
	alert('You have run out of tea!!')
	};;
</script>
<style type="text/css">
<!--
.style1 {font-size: large}
.style2 {
	font-family: "Trebuchet MS";
	background-color: #FF9933;
	text-align: center;
}
-->
</style>
</head>

<body class="style2">
<div>
This page simulates the "Dad problem", as illustrated on <a href="http://answers.yahoo.com/question/index;_ylt=AvyknayS8m5RMuoYpmoj_lPsy6IX;_ylv=3?qid=20090106022211AAr5W7Q">Yahoo! Answers</a>.
</div>
<div>
<center>
<INPUT TYPE="button" NAME="myButton" VALUE="Make the tea!" onClick="maketea()">
<table border="1" cellpadding="0" cellspacing="0" bordercolor="#CC9900" bgcolor="#FF9933">
  <caption align="top">
  <span class="style1">In the box</span>
  </caption>
  
  <tr>
    <td width="60"><strong>Number of cups made</strong></td>
    <td width="60"><strong>Doubles left</strong></td>
    <td width="60"><strong>Singles left</strong></td>
    <td width="60"><strong>Total (1's & 2's) in the box</strong></td>
  </tr>
  <tr>
    <td class="style1" id="tries">0    </td>
    <td class="style1" id="doubles">80</td>
    <td class="style1" id="singles">0</td>
    <td class="style1" id="total">80</td>
  </tr>
</table>
</div>
</body>
</html>

javascript

2 Contributors
1 Reply
89 Views
2 Days Discussion Span
Latest Post 14 Years Ago Latest Post by Airshow

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 1 · 2010-09-20T10:08:58+00:00

Alil,

The main problem is the criterion for deciding whether the chosen bag is single or double. if (randomnumber>single) will always equate to true, so only single bags can be chosen. In the absence of anything to prevent it, singles go negative!

Here's a working version (with a few tweaks):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Teabag calculator</title>
<style type="text/css">
.style1 { font-size: large }
.style2 {
	font-family: "Trebuchet MS";
	background-color: #FF9933;
	text-align: center;
}
table {
	margin: 6px 0;
}
th, td {
	background-color: #ffd205;
	border: 1px solid #663300;
}
table#log { width: 550px; }
table#log th, table#log td {
	font-size: 9pt;
}
.narrow { width: 10%; }
.wide { width: 70%; }
</style>

<script language="javascript" type="text/javascript">
onload = function(){
	var el_tries    = document.getElementById('tries');//table cell
	var el_doubles  = document.getElementById('doubles');//table cell
	var el_singles  = document.getElementById('singles');//table cell
	var el_total    = document.getElementById('total');//table cell
	var el_makeTea  = document.getElementById('makeTea');//button
	var el_reset    = document.getElementById('reset');//button
	var el_eventLog = document.getElementById('eventLog');//tbody

	var single, dbl, i, total;

	function makeTea(){
		if(total <= 0) { return; }
		i++;
		if (Math.random() <= (single/total)){
			//low, ie single
			// if a single bag is pulled, the doubles are unaffected, the singles fall by one
			single--;
			updateValues();
			el_singles.style.color = "red";
			el_doubles.style.color = "black";
		}
		else{
			// high, ie double
			// if a double is pulled, the doubles fall by one and the singles increase by one
			dbl--;
			single++;
			updateValues();
			el_singles.style.color = "black";
			el_doubles.style.color = "red";
		}
	}
	function updateValues(coding){
		total = 2*dbl + single;
		el_tries.innerHTML = i;
		el_doubles.innerHTML = dbl;
		el_singles.innerHTML = single;
		el_total.innerHTML = total;
		var msg = '';
		if(total <= 0){ msg = "You have run out of tea!!"; }
		else if(single == 2*dbl){ msg = 'Equal probability next teabag will be a single or one of a double'; }
		if(msg) { logEvent(msg); }
	}
	function logEvent(msg){
		var tr = document.createElement('tr');
		var td1 = document.createElement('td');
		var td2 = document.createElement('td');
		var td3 = document.createElement('td');
		var td4 = document.createElement('td');
		el_eventLog.appendChild(tr);
		tr.appendChild(td1);
		tr.appendChild(td2);
		tr.appendChild(td3);
		tr.appendChild(td4);
		td1.className = 'narrow';
		td2.className = 'narrow';
		td3.className = 'narrow';
		td4.className = 'wide';
		td1.innerHTML = i;
		td2.innerHTML = dbl;
		td3.innerHTML = single;
		td4.innerHTML = msg;
		
	}
	function clearLog(){
		while(el_eventLog.hasChildNodes()){
			el_eventLog.removeChild(el_eventLog.firstChild);
		}
	}

	function reset(coding){
		single = 0;
		dbl = 40;
		i = 0;
		updateValues();
		clearLog();
	};
	el_makeTea.onclick = makeTea;
	el_reset.onclick = reset;
	reset();
};
</script>
</head>

<body class="style2">
<div>
This page simulates the "Dad problem", as illustrated on <a href="http://answers.yahoo.com/question/index;_ylt=AvyknayS8m5RMuoYpmoj_lPsy6IX;_ylv=3?qid=20090106022211AAr5W7Q">Yahoo! Answers</a>.
</div>
<div>
<center>
<table border="0" cellpadding="2" cellspacing="2">
  <caption align="top"><span class="style1">In the box</span></caption>
  <tr>
    <th width="60"><strong>Cups made</strong></th>
    <th width="60"><strong>Doubles</strong></th>
    <th width="60"><strong>Singles</strong></th>
    <th width="60"><strong>Total teabags in the box</strong></th>
  </tr>
  <tr>
    <td class="style1" id="tries"></td>
    <td class="style1" id="doubles"></td>
    <td class="style1" id="singles"></td>
    <td class="style1" id="total"></td>
  </tr>
</table>
<input id="makeTea" type="button" value="Make the tea!">&nbsp;
<input id="reset" type="button" value="Reset">
<table id="log" border="0" cellpadding="2" cellspacing="2" width="700">
  <caption align="top">Event Log</caption>
  <tr>
    <th class="narrow">Cups made</th>
    <th class="narrow">Doubles</th>
    <th class="narrow">Singles</th>
    <th class="wide">Description</th>
  </tr>
  <tbody id="eventLog"></tbody>
</table>
</div>
</body>
</html>

Note that x++ (and ++x) increments x without needing x=....
Same for x-- (and --x).

You will see that I decided it was better to count doubles as (1xdouble = 2xbags), therefore we start with 40 doubles (80 bags) and the total is always (singles + 2*doubles).

By splitting the code into several functions, each chunk can be called from each of several places as required.

Take the effort to understand the code and you will learn from it.

With a little effort it could rival World of Warcraft and Medal of Honour combined.

By the way, I think the chosen answer to the Teabags query is only partially correct. What he says is sort of right but it does not answer the question posed.

Airshow