## Forum archive 2000-2006

### Michael Gage - JavaScript example ### Michael Gage - JavaScript example

by Arnold Pizer -
Number of replies: 0 JavaScript example topic started 5/9/2000; 4:05:48 PMlast post 5/9/2000; 4:05:48 PM Michael Gage - JavaScript example 5/9/2000; 4:05:48 PM (reads: 6777, responses: 0)
This problem illustrates how you can embed JavaScript code in a WeBWorK example to create an interactive homework problem that could never be provided by a text book. WeBWorK can use existing javaScript and Java code to augment its capabilities. To obtain this problem
(1 pt) rochesterLibrary/setMAAtutorial/javascriptexample1.pg

JavaScript Example 1

(1 pt) rochesterLibrary/setMAAtutorial/javascriptexample1.pg
This problem requires that javaScript be enabled Find the derivative of the function f(x). The windows below will tell you the value of f for any input x. (I call this an "oracle function", since if you ask, it will tell.) =

You may want to use a calculator to find the result. You can also enter numerical expressions and have WeBWorK do the calculations for you.

WARNINGS
µ¦å{h­
Enter this code
DOCUMENT();loadMacros(           "PGbasicmacros.pl",           "PGchoicemacros.pl",           "PGanswermacros.pl",); TEXT(beginproblem(), $BR,$BBOLD, "JavaScript Example 1", $EBOLD,$BR,$BR);# define function to be evaluated$a= random(1,3,1);$b= random(-4,4,.1);$c = random(-4,4,1);$x0=random(-2,2,1);# function =${a}x^2+${b}x +${c}# This is just to provide the correct answer.# This function will be defined for javaScript below.sub fp {   # define a perl subroutine to calculate the derivative	my $x = shift; 2*$a*$x+$b;}$ans = fp($x0);## This text will be placed in the header section of the HTML page## not in the body where TEXT output is placed.## Not processing is done.HEADER_TEXT(<<EOF);<SCRIPT LANGUAGE="JavaScript"><!-- Beginfunction func(x) {return( $a*Math.pow(x,2) +$b*x +$c );} // We redefine the function for the javaScript // A savy student will be able to tell to read this // by looking at the HTML source of their window. // Later we'll see other methods that make this // difficult or impossible.// End --></SCRIPT>EOFTEXT(beginproblem());TEXT(MODES( TeX => "", Latex2HTML => "\begin{rawhtml} <NOSCRIPT> This problem requires that Java Script be enabled </NOSCRIPT> ~~n\end{rawhtml} ", HTML_tth => "<NOSCRIPT> This problem requires that javaScript be enabled </NOSCRIPT>~~n", HTML => "<NOSCRIPT> This problem requires that javaScript be enabled </NOSCRIPT>~~n"));$functionArrow = MODES(	TeX => "$$- f\rightarrow$$",	Latex2HTML => "$$- f\rightarrow$$ ",	HTML_tth => "-- f -- >   ",	HTML => '-- f -- >   ');# The following string contains a combination of HTML and javaScript# which displays the input table for the javaScript calculator$javaScript =<<ENDOFSCRIPT;<CENTER><TABLE BORDER=4><TR><TD><INPUT TYPE="text" NAME="Input1" Value = "$x0" Size="20"></TD><TD><INPUT TYPE="button" VALUE="---f-->"              OnClick="this.form.Output1.value=func(this.form.Input1.value)"></TD><TD><INPUT TYPE="text"   NAME="Output1"   Size="20"></TD></TR><TR><TD><INPUT TYPE="text"   NAME="Input2"  Value = "$x0" Size="20"></TD><TD><INPUT TYPE="button" VALUE="---f-->" OnClick="this.form.Output2.value=func(this.form.Input2.value)"></TD><TD><INPUT TYPE="text" NAME="Output2" Size="20"></TD></TR><TR><TD><INPUT TYPE="text" NAME="Input3" Value = "$x0" Size="20"></TD><TD><INPUT TYPE="button" VALUE="---f-->"              OnClick="this.form.Output3.value=func(this.form.Input3.value)"></TD><TD><INPUT TYPE="text"   NAME="Output3"   Size="20"></TD></TR></TABLE></CENTER>ENDOFSCRIPTBEGIN_TEXTFind the derivative of the function f(x).  The windows below will tellyou the value of f for any input x. (I call this an "oracle function", sinceif you ask, it will tell.)$PAR$$f '( x0 )$$ = \{ans_rule(50 ) \}$PARYou may want to use a  \{ htmlLink(alias("${htmlDirectory}calc.html"), 'calculator', qq! TARGET = "ww_calculator" ONCLICK="window.open( this.href,this.target, 'width=200, height=350, scrollbars=no, resizable=off' )"!) \} to find the result. You can also enter numerical expressions and have WeBWorK do the calculations for you.END_TEXT# Here is where we actually print the javaScript, or alternatives for printed output.TEXT(MODES( TeX => " \fbox{ The java Script calculator was displayed here }", HTML =>$javaScript,      ));ANS(num_cmp(\$ans,reltol => 1) );  #We are allowing 1 percent error for the answer.ENDDOCUMENT();