Forum archive 2000-2006

Michael Gage - JavaScript example

Michael Gage - JavaScript example

by Arnold Pizer -
Number of replies: 0
inactiveTopicJavaScript example topic started 5/9/2000; 4:05:48 PM
last post 5/9/2000; 4:05:48 PM
userMichael Gage - JavaScript example  blueArrow
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.)

f '( -1  ) =

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">
<!-- Begin

function 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>

EOF

TEXT(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>
ENDOFSCRIPT



BEGIN_TEXT

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.)
$PAR
\(f '( $x0 ) \) = \{ans_rule(50 ) \}
$PAR
You 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();



Comments:

This problem is just a demo -- it doesn't actually work if you push the submit answer button. (You can test a {linkWebworkProblem("tutorialCourse","setFirstSteps","9","live")} version of this problem.)

 

<| Post or View Comments |>