Homework SourseI need a help to setup the table and part 3 I also post he s
I need a help to setup the table and part 3. I also post he screen shot .
here is my html file
<!--2016/11/15 by iqra khaliq-->
<!DOCTYPE html>
<html>
<head>
<title>Rolling a Die</title>
<link rel=\"stylesheet\" type=\"text/css\" href=\"p2Die.css\" />
<script src =\"p2Die.js\"> </script>
<meta charset=\"utf-8\">
</head>
<body>
<h2>Testing a Die (by iqra) </h2>
<p>
<img id=\"die1\" src=\"die1.png\" alt=\"die 1 image\"/>
<img id=\"die2\" src=\"die2.png\" alt=\"die 2 image\"/>
<img id=\"die3\" src=\"die3.png\" alt=\"die 3 image\"/>
<img id=\"die4\" src=\"die4.png\" alt=\"die 4 image\"/>
<img id=\"die5\" src=\"die5.png\" alt=\"die 5 image\"/>
<img id=\"die6\" src=\"die6.png\" alt=\"die 6 image\"/>
</p>
<p id=\"freqOut\"></p>
<script>
rollDie();
writeTable();
</script>
<body>
</html>
here is my p2Die.js
var totalRoll=900;
var freqCount=[0,0,0,0,0,0,0];
var theory= totalRoll/6;
var pctTheory= theory*100/totalRoll;
/*var strOut=\"\";
var outPut=document.getElementById(\"freqOut\"); */
function rollDie(){
for(var i=0; i<totalRoll;i++){
face = Math.floor(Math.random()*6)+1;
freqCount[face]++;
}
for(var i=1;i< freqCount.length;i++){
//strOut+= \"<p>die \"+ i + \" count: \" + freqCount[i]+ \"</p>\";
document.write(\"<p>die \"+ i + \" count: \" + freqCount[i]+\"</p>\")
}
//outPut.innerHTML = strOut;
}
function writeTable(){
document.write(\"<table>\");
for(var i =1; i<=6;i++){
document.write(\"<tr>\");
document.write(\"<td>\" + i +\"</td>\");
document.write(\"<td>\" + theory+\"</td>\");
document.write(\"<td>\" + pctTheory.toFixed(2)+\"</td>\");
document.write(\"<td>\" + freqCount[i] +\"</td>\");
document.write(\"<td>\" + (freqCount[i]*100 /totalRoll).toFixed(2) +\"</td>\");
diff=Math.abs(freqCount[i]- theory);
document.write(\"<td>\" + diff+ \"</td>\");
pctDiff=(diff*100/theory).toFixed(2);
document.write(\"<td>\" + pctDiff+ \"</td>\");
document.write(\"</tr>\");
}
document.write(\"</table>\");
}
Here is my p2Die.css
body{
margin-left:20px;
}
img{
margin-top:10px;
margin-left:10px;}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
th {
text-align: center;
}
Solution
HTML File
<!--2016/11/15 by iqra khaliq-->
<!DOCTYPE html>
<html>
<head>
<title>Rolling a Die</title>
<link rel=\"stylesheet\" type=\"text/css\" href=\"p2Die.css\" />
<script src =\"p2Die.js\"> </script>
<meta charset=\"utf-8\" />
</head>
<body>
<h2>Testing a Die (by iqra) </h2>
<p>
<img id=\"die1\" src=\"die1.png\" alt=\"die 1 image\"/>
<img id=\"die2\" src=\"die2.png\" alt=\"die 2 image\"/>
<img id=\"die3\" src=\"die3.png\" alt=\"die 3 image\"/>
<img id=\"die4\" src=\"die4.png\" alt=\"die 4 image\"/>
<img id=\"die5\" src=\"die5.png\" alt=\"die 5 image\"/>
<img id=\"die6\" src=\"die6.png\" alt=\"die 6 image\"/>
</p>
<p id=\"freqOut\"></p>
Enter Die Rolling Time: <input name=\"RollFreq\" id=\"RollFreq\" type=\"text\">
<button onclick=\"aaa\">Roll Die</button>
<script>
rollDie();
writeTable();
</script>
<body>
</html>
var totalRoll=900;
var freqCount=[0,0,0,0,0,0,0];
var theory= 0;
var pctTheory= 0;
var TotalFreqCount = 0;
var TotalPercentFreqCount = 0;
var TotalDiff = 0;
var TotalPercentDiff = 0;
var setFlag = 0;
/*var strOut=\"\";
var outPut=document.getElementById(\"freqOut\"); */
function rollDie(){
//totalRoll = document.getElementById(\'RollFreq\').value
if ((totalRoll < 600) || (totalRoll > 6000) || (totalRoll%6 != 0))
{
alert(\"Please enter value between 600 & 6000 and should perfect multiple of 6\");
setFlag = 0;
}
else
{
for(var i=0; i<totalRoll;i++){
face = Math.floor(Math.random()*6)+1;
freqCount[face]++;
}
//for(var i=1;i< freqCount.length;i++){
// document.write(\"<p>die \"+ i + \" count: \" + freqCount[i]+\"</p>\")
//}
theory= totalRoll/6;
pctTheory= theory*100/totalRoll;
setFlag = 1;
// writeFlag();
}
}
function writeTable(){
if(setFlag == 1)
{
document.write(\"<table>\");
document.write(\"<thead>\");
document.write(\"<tr>\");
document.write(\"<th>Value</th>\");
document.write(\"<th>Theory</th>\");
document.write(\"<th>% Theory</th>\");
document.write(\"<th>Actual</th>\");
document.write(\"<th>% Actual</th>\");
document.write(\"<th>Diff</th>\");
document.write(\"<th>% Diff</th>\");
document.write(\"</tr>\");
document.write(\"<thead>\");
for(var i =1; i<=6;i++){
document.write(\"<tr>\");
document.write(\"<td>\" + i +\"</td>\");
document.write(\"<td>\" + theory+\"</td>\");
document.write(\"<td>\" + pctTheory.toFixed(2)+\"</td>\");
document.write(\"<td>\" + freqCount[i] +\"</td>\");
TotalFreqCount += freqCount[i];
document.write(\"<td>\" + (freqCount[i]*100 /totalRoll).toFixed(2) +\"</td>\");
TotalPercentFreqCount += parseFloat((freqCount[i]*100 /totalRoll).toFixed(2));
diff=Math.abs(freqCount[i]- theory);
TotalDiff += diff;
document.write(\"<td>\" + diff+ \"</td>\");
pctDiff=(diff*100/theory).toFixed(2);
TotalPercentDiff += parseFloat(pctDiff);
document.write(\"<td>\" + pctDiff+ \"</td>\");
document.write(\"</tr>\");
}
document.write(\"<tr>\");
document.write(\"<td>\" + \"Summary\" +\"</td>\");
document.write(\"<td>\" + theory*6 +\"</td>\");
document.write(\"<td>\" + 100 +\"</td>\");
document.write(\"<td>\" + TotalFreqCount +\"</td>\");
document.write(\"<td>\" + TotalPercentFreqCount.toFixed(2) +\"</td>\");
document.write(\"<td>\" + TotalDiff +\"</td>\");
document.write(\"<td>\" + TotalPercentDiff.toFixed(2) +\"</td>\");
document.write(\"</tr>\");
document.write(\"<tr>\");
document.write(\"<td colspan=\\\"7\\\" align = \\\"center\\\">\" + \"(Table 1: Result of throwing the die 900 times.)\" +\"</td>\");
document.write(\"</tr>\");
document.write(\"</table>\");
}
}
Due to time constrain I have completed the 3 Part.
