|
JavaScript - Major Help
Hi there i would be most most grateful if someone could edit this code so that it accepts the inputs from the marks fields to calculate the mean and standard deviation. thanks in advance, chris
********************************************************* <html> <head> <title>Student Result Processor</title> <style type="text/css"> body { background-image:url('Background.jpg') } .container { text-align:center; margin: 10px auto; } .content { width: 400px; } </style> <script language="javascript"> function addRow() { var newRow = document.all("tblGrid").insertRow(); var oCell = newRow.insertCell(); oCell.innerHTML = "<input type='text' name='t1' size='10'>"; oCell = newRow.insertCell(); oCell.innerHTML = "<input type='text' name='t2' size='20'>"; oCell = newRow.insertCell(); oCell.innerHTML = "<input type='text' name='t3' size='5'>"; oCell = newRow.insertCell(); oCell.innerHTML = "<input type='button' value='Delete' onclick='removeRow(this);'/>"; } function removeRow(src) { var oRow = src.parentElement.parentElement; document.all("tblGrid").deleteRow(oRow.rowIndex); } </script> </head> <body> <div class="container"> <div class="content"> <hr> <table id="tblGrid"> <tr> <td class="container">SID</td> <td class="container">NAME</td> <td class="container">MARK</td> <td></td> </tr> </table> <hr> <input type="button" value="Add Row" onClick="addRow();" /><br /> <input type="button" Value="Calculate" onClick="calc();" /> <hr> </div> </div> </body> <script type = "text/javascript"> function calc() { var data = [2,3,4,6,7]; var deviation = []; var sum = 0; var devnsum = 0; var stddevn = 0; var len = data.length; for (var i=0; i<len; i++) { sum = sum + (data[i] * 1) // ensure number } var mean = (sum/len).toFixed(6); // 6 decimal places for (i=0; i<len; i++) { deviation[i] = data[i] - mean; deviation[i] = deviation[i] * deviation[i]; devnsum = devnsum + deviation[i]; } stddevn = Math.sqrt(devnsum/(len-1)).toFixed(6); // 6 decimal places alert ("The mean is: " + mean + " The standard deviation is: " + stddevn); } </script> </html> ********************************************************* Similar TutorialsMy professor asked us to make a webpage that has a user register and login in via a xml document. We can omly use html, javascrip and css. I made a function that loads users from an xml file and authenticates them. It works only on firefox and not IE. This is a problem because i am using ActiveXobject to write to the file. Any help will greatly be appreciated. Here is my function that loads xml: Code: function ReadXML() {
try { xmlDoc = loadMyXML("xmlStudent.xml"); }
catch (objerr) { alert(objerr.description); }
xmlfile = xmlDoc.getElementsByTagName('student');
fname= xmlDoc.getElementsByTagName("firstname");
lname= xmlDoc.getElementsByTagName("lastname");
usernames = xmlDoc.getElementsByTagName("username");
passwords = xmlDoc.getElementsByTagName("password");
}
Here is the xmlfile Code: <?xml version="1.0" encoding="utf-8"?>
<!--My first xml file (^-^) -->
<CST2309>
<student>
<firstname>bob</firstname>
<lastname>harris</lastname>
<username>admin111</username>
<password>11111111</password>
</student>
<student>
<firstname>joe</firstname>
<lastname>smith</lastname>
<username>joe222</username>
<password>22222222</password>
</student>
<student>
<firstname>sarah</firstname>
<lastname>diaz</lastname>
<username>sarah333</username>
<password>33333333</password>
</student>
<student>
<firstname>katie</firstname>
<lastname>adams</lastname>
<username>katie444</username>
<password>44444444</password>
</student>
</CST2309>
i am building a graphing calculator, it works but it is slow. graph.graph(equ) is the main function it graphs. i think that this is the problomatic area. Code: var initgraph = function( canvasid )
{
var graph =
{
}
;
graph.logmsg = [];
var dlog;
graph.curlog = ( document.getElementById( "dlog" ) ) ? document.getElementById( "dlog" ) : null;
if ( graph.curlog === null ){
graph.dlog = function()
{
}
;
}
else{
graph.dlog = dlog = function( str )
{
graph.logmsg.push( str );
var temp = graph.logmsg.join( "\n" );
graph.curlog.value = temp;
return str;
}
;
}
//alert( 'debbuging log initalized' );
graph.canvas = document.getElementById( canvasid );
graph.dlog( "canvas found" );
graph.dlog( "width: " + ( graph.w = parseInt( document.defaultView.getComputedStyle( graph.canvas, null ).width, 10 ) ) );
graph.dlog( "height: " + ( graph.h = parseInt( document.defaultView.getComputedStyle( graph.canvas, null ).height, 10 ) ) );
graph.h2 = Math.round( graph.h / 2 );
graph.w2 = Math.round( graph.w / 2 );
graph.dlog( "computed styles calculated" );
graph.ctx = graph.canvas.getContext( "2d" );
graph.dlog( 'canvas context gained' );
graph.ctx.fillStyle = "#E0FFFF";
graph.dlog( 'styles set' );
graph.ctx.translate( graph.w2, graph.h2 );
graph.ctx.stroke();
graph.ctx.save();
graph.dlog( 'canvas context saved' );
graph.ctx.beginPath();
graph.dlog( 'axis postitions have been calculated' );
graph.lg = [];
graph.gs = [];
graph.dlog( 'arrays initialized' );
graph.goodsize = 1;
if( graph.h < 200 || graph.w < 200 ){
alert( "Canvas for graph is too small.\n Minimum recomended size is 200 X 200, recomended size is 500 X 500.\nSize is " + graph.h + " X " + graph.w + ".\n Graphs may be hard to see or they may be pointless." );
graph.goodsize = 0;
}
else{
graph.dlog( "graph is big enuf" );
}
if( graph.h != graph.w ){
alert( "The canvas is not square. Graph may not look right." );
graph.goodsize = 0;
}
else{
graph.dlog( 'graph is square' );
}
graph.lineTo = function( x, y ){
graph.ctx.lineTo( x, - y );
return graph;
}
;
graph.moveTo = function( x, y ){
graph.ctx.moveTo( x, - y );
return graph;
}
;
graph.dot = function( xx, yy )
{
if( ( typeof xx !== "number" || typeof yy !== "number" ) || Math.abs( xx ) > graph.w2 || Math.abs( yy ) > graph.h2 )
{
graph.dlog( "Dot (" + xx + ", " + yy + ") will not fit on the graph. Will not attempt to graph." );
return graph;
}
graph.ctx.fillStyle='#2B167B';
yy = 0 - Math.round( yy );
xx = Math.round( xx );
graph.ctx.fillRect( xx - 1, yy + 1, 3, 3 );
return graph;
}
;
graph.dlog( 'basic graphing methods created' );
graph.da = function( axes,ticks,orgin )/////////////////////////////////////////////////////////////////////////////////////////
{
// if ( clr === true )
// {
// graph.ctx.clearRect( - graph.w2, - graph.h2, graph.h, graph.w );
// } // old stuf.
graph.ctx.strokeStyle = "#2B167B";
if( axes ){
graph.moveTo( - graph.w2, 0 );
graph.lineTo( graph.w2, 0 );
graph.moveTo( 0, - graph.h2 );
graph.lineTo( 0, graph.h2 );
//alert('axes')
}
if( ticks ){
var j = - 3;
var i = - graph.w2;
for( i; i <= graph.w2; i += 10 )
{
graph.ctx.moveTo( i, j+0.5 );
graph.ctx.lineTo( i, j +5.5 );
}
j = - 3;
i = - graph.h2;
for( i; i <= graph.h2; i += 10 )
{
graph.ctx.moveTo( j+0.5, i );
graph.ctx.lineTo( j + 5.5, i );
}
// alert('ticks')
}
if( orgin ){
graph.dot( 0, 0)
// alert('orgin')
}
graph.ctx.stroke();
graph.ctx.beginPath();
return graph;
}
;
graph.dlog( 'axis drawing method initialized' );
graph.clrAll = function(){
graph.gs = [];
graph.ctx.fillStyle="#eoffff"
graph.ctx.fillRect( -graph.w2, -graph.h2, graph.w, graph.h );
graph.ctx.beginPath();
graph.dlog('graph cleared');
return graph;
}
graph.clrAll();
graph.dlog( 'axes drawn' );
graph.ec = function( /*y=*/equ ){
if( typeof equ !== "string" )
{
alert( "Equation must be a string." );
return false;
}
equ = equ.replace( /\|([^\|]+)\|/g, "Math.abs($1)" );
equ = equ.replace( /([a-z0-9\.\-]+)\s*\^\s*([a-z0-9\.\-]+)/, "Math.pow($1,$2)" );
// eventually this will allow for normal human syntax equations and not only javascript syntax ones
return equ;
}
;
graph.dlog( 'equation interpreter initialized' );
graph.graph = function( /*y=*/equ ){
equ = graph.ec( equ );
graph.ctx.strokeStyle='#800000';
if( equ === false )
{
alert( 'Pass equation as a string without the "y=", "f(x)=", "g(x)=" or similar.' );
return graph;
}
var a=graph.lg;
graph.gs[graph.gs.length] = equ;
var i = 0;
for( var x = 0 - graph.w2; x <= graph.w2; x ++ )
{
try
{ var a=graph.lg;
graph.lg[x] = eval(equ);
}
catch( e )
{
alert(graph.dlog("Bad syntax!"));
return graph
}
if( isNaN( graph.lg[x] ) || Math.abs( graph.lg[x] ) > graph.h2 )
{
if(isNaN(graph.lg[x])){
i=0}
}
else{
if( i === 0 ){
graph.moveTo( x, graph.lg[x] )
i = 1;
}
else{
graph.lineTo( x, graph.lg[x])
graph.ctx.stroke();
}
}
}
dlog('graphed '+equ);
return graph;
}
;
graph.dlog( 'main graphing object initialized. \ngraph library finished. exiting grafit.js' );
return graph;
}
// ---------------------------------------
;
it is used in this way Code:
<!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=us-ascii" />
<link rel='stylesheet' href="jsgraphcalcstyle.css" type="text/css" />
<title>Javascript graphing calculator</title>
<script type="text/javascript" src="untitled1.js">
</script>
</head>
<body>
<script type="text/javascript" src='clik.js'>
</script>
<form id="form" action='javascript:graf()' onsubmit="graf()" name="form">
<h1>Javascript Graphing Calculator</h1>
<div id="fakepad" class='back'>
<div id='back'>
<table summary="main structure">
<tr>
<td colspan="4"><canvas id="screen" class='back' title='Graph' width="500" height="500"></canvas></td>
</tr>
<tr>
<td colspan="2">
<span class="mem">f</span>(x) =
<input type="text" class='back' id="equat" accesskey="f" />
</td>
<td><button type="button" id="enter" value="Graph" onclick="graf()" accesskey="g">
<span class="mem">G</span>raph</button>
</td>
<td>
<!--
<input type="button" id="clear" value="Clear" onclick="graph.clrAll();">-->
<button type="button" id='clear' value='clear' onclick="clr();" accesskey="c">
<span class="mem">C</span>lear</button>
</td>
</tr>
<tr>
<td rowspan="2">
<input type="checkbox" id="showaxes" value="yes" checked='checked' onclick="clik()" accesskey="a" />
<label for="showaxes">Show <span class='mem'>a</span>xes</label>
<!-- results in Show axes with the a underlined-->
<br />
<input type='checkbox' id='showticks' value='yes' checked='checked' onclick='clik()' accesskey="t" />
<label for="showticks">Show <span class='mem'>t</span>ick marks</label>
<!-- results in Show tick marks with the t underlined-->
<br />
<input type="checkbox" id="showorgin" value="yes" disabled="disabled" onclick='da()' accesskey="o" />
<label for='showorgin' id='orginlab' class='dis'>Show <span class="mem">o</span>rgin</label>
<!-- results in Show orgin with the o underlined-->
<br />
</td>
<td><!--spacer--></td><!--spacer-->
<td><!--spacer--></td><!--spacer-->
</tr>
</table>
</div>
</div><!--inline div, requier <br>-->
<br />
finish the function above and press Graph to graph it.<br />
Each tick mark on the graph is 10 units.
<div id='debug' class="c2">
<textarea id='dlog' class="back" cols='70' rows="7" readonly="readonly">
</textarea><br />
<p class="c1">debugging log</p>
</div><span><br />
<input type='button' id='dbut' onclick="dis()" value="Show debugging log" /></span>
</form><script type="text/javascript" src='init.js'>
</script>
</body>
</html>
Our site has quite a few 'features' to it. One is a drop down menu at the top of the site, another is an AJAX add to cart thing that loads the product to the cart without refreshing the page. Here's the problem. If someone adds a product to the cart and goes to view the cart, the space where the cart information usually is will be empty. The sidebar, top navigation, footer, all that, is still there. The cart info itself is gone. What we have noticed is if you add say 2 different products to the cart, view the cart (empty page at this point), and then use the drop down cart summary in the header to remove a product from the cart summary, the cart info will all of a sudden appear as it should. Refresh the page and it goes away again. It seems like removing the product from the cart summary in the header forces the AJAX add to cart feature to re-load the cart bringing it back. It just isn't loading initially. We have no idea why it quit working. It has been working for nearly two months with no problem. Here is a link to the site, you can test it yourself. soundisolationstore dot com The checkout works fine, just not the cart page. Please help if you can! I have a function which allows the number of buttons selected depending on the number selected from the drop down menu. Problem is that this code works in all of the major browsers except for Internet Explorer (No Suprise). For example if user chose the number 3 from the dropdown menu, then user can only select 3 buttons. Why is it not working in Internet explorer and what can be used to make it work in Internet Explorer? Below is javascript functions: Code: function getButtons()
{
document.getElementById("answerA").class="answerBtnsOff";
document.getElementById("answerA").setAttribute("class","answerBtnsOff");
document.getElementById("answerA").setAttribute("className","answerBtnsOff");
document.getElementById("answerB").class="answerBtnsOff";
document.getElementById("answerB").setAttribute("class","answerBtnsOff");
document.getElementById("answerB").setAttribute("className","answerBtnsOff");
document.getElementById("answerC").class="answerBtnsOff";
document.getElementById("answerC").setAttribute("class","answerBtnsOff");
document.getElementById("answerC").setAttribute("className","answerBtnsOff");
document.getElementById("answerD").class="answerBtnsOff";
document.getElementById("answerD").setAttribute("class","answerBtnsOff");
document.getElementById("answerD").setAttribute("className","answerBtnsOff");
document.getElementById("answerE").class="answerBtnsOff";
document.getElementById("answerE").setAttribute("class","answerBtnsOff");
document.getElementById("answerE").setAttribute("className","answerBtnsOff");
currenttotal=0;
}
function btnclick(btn)
{
if(document.getElementById("numberDropId").value=="")
{
alert('You must first select the number of answers you require from the drop down menu');
return false;
}
if (btn.class=="answerBtnsOn")
{
btn.class="answerBtnsOff";
btn.setAttribute("class","answerBtnsOff");
btn.setAttribute("className","answerBtnsOff");
currenttotal--;
return false;
}
if(document.getElementById("numberDropId").value==currenttotal)
{
alert('You are not allowed beyond the limit of the number of answers you require, deselect other button');
return false;
}
if (btn.class=="answerBtnsOff")
{
btn.class="answerBtnsOn";
btn.setAttribute("class","answerBtnsOn");
btn.setAttribute("className","answerBtnsOn");
currenttotal++;
return false;
}
}
If you html code then this is below: Code: <form id="enter" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" onsubmit="return validateForm(this);" >
<table id="middleDetails" border="1">
<tr>
<td>Question:</td>
<td rowspan="3">
<textarea rows="5" cols="40" name="questionText"></textarea>
</td>
<td>Option Type:</td>
<td>
<select name="optionDrop" onClick="getDropDown()">
<option value="">Please Select</option>
<option value="abc">ABC</option>
<option value="abcd">ABCD</option>
<option value="abcde">ABCDE</option>
<option value="trueorfalse">True or False</option>
<option value="yesorno">Yes or No</option>
</select>
</td>
<tr>
<td colspan="2"></td>
<td>Number of Answers:</td>
<td>
<span id="na">N/A</span>
<select name="numberDrop" id="numberDropId" onChange="getButtons()">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
</table>
</form>
|
|||||||