Difference between revisions of "FlashPointAndGraph"

From WeBWorK_wiki
Jump to navigation Jump to search
 
(13 intermediate revisions by 4 users not shown)
Line 1: Line 1:
  +
{{warning}} Flash is not supported by major browsers any more. {{historical}}
  +
 
<h2>Flash applet example: Graph and Point</h2>
  
<h2>Flash applet example: Graph and Point</h2>
   
Line 82: Line 84:
   
 
<td style="background-color:#ffffcc;padding:7px;">
  
<td style="background-color:#ffffcc;padding:7px;">
  +
<p>
  +
This snippet defines the applet <code>PointGraph</code>.
  +
This applet was designed by Doug Ensley. The applet .swf file can be obtained [http://webwork.maa.org/viewvc/system/trunk/webwork2/htdocs/applets/PointGraph/PointGraph.swf?revision=6776&view=markup here].
  +
This wiki has more information on '''[[FlashApplets| designing Flash applets]]''' for WeBWorK and a
  +
'''[[Simple_example]]''' of converting an existing flash applet for use in WeBWorK. Functional WeBWorK questions using the "PointGraph" applet can be viewed [http://hosted2.webwork.rochester.edu/webwork2/wikiExamples/PointAndGraph_AppletDemos/?login_practice_user=true here ].
  +
</p>
 
<p>
  
<p>
−
This snippet defines the applet <code>PointGraph</code>. The <code>findAppletCodebase("PointGraph.swf")</code> directs that the file <code>PointGraph.swf</code> be located in the (1) the course's html directory (reachable from the file manager) (2) the webwork sites's htdocs/applets directory -- maintained by the site administrator. The locations searched for the file <code>PointGraph.swf</code> is defined in the site's <code>global.conf</code> file.
 +
The <code>findAppletCodebase("PointGraph.swf")</code> asks that the file <code>PointGraph.swf</code> be searched for in (1) the course's html directory (accessible from WeBWorK's File Manager) (2) the webwork sites's htdocs/applets directory -- maintained by the site administrator. The locations searched for the file <code>PointGraph.swf</code> are defined in the site's <code>global.conf</code> file.
 
</p>
  
</p>
 
<p>
  
<p>
−
The aliases match names used by WeBWorK javaScript code to the subroutine and function names used by the FlashApplet. If the applet has been designed specifically to work with WeBWorK questions you will not need to change these, but if you are adapting an applet designed for other uses to a WeBWorK question then you can use these aliases to avoid making modifications to the applet.
 +
The <code>aliases</code> connect the names used by WeBWorK javaScript code to the subroutine and function names used by the FlashApplet. If the applet has been designed specifically to work with WeBWorK questions you will not need to change these, but if you are adapting an applet designed for other uses to a WeBWorK question then you can use these aliases to avoid making modifications to the applet.
 
</p>
  
</p>
 
<p>
  
<p>
Line 97: Line 105:
 
<code>debugMode</code>, when equal to 1, reveals two text boxes -- one containing the state of the applet and the other the answer that the flash applet submits to the WeBWorK question, along with some buttons for controlling the information in these boxes. When <code> debugMode</code>==2, additional alert messages are generated which detail progress through the initialization steps. This can be very helpful for debugging communication difficulties between the applet and the WeBWorK question
  
<code>debugMode</code>, when equal to 1, reveals two text boxes -- one containing the state of the applet and the other the answer that the flash applet submits to the WeBWorK question, along with some buttons for controlling the information in these boxes. When <code> debugMode</code>==2, additional alert messages are generated which detail progress through the initialization steps. This can be very helpful for debugging communication difficulties between the applet and the WeBWorK question
 
<p><code>submitActionScript</code> is a short javaScript command which is one way of customizing the behavior of the applet when the submit button is pressed. (It should not contain line breaks to satisfy javaScript requirements.)
  
<p><code>submitActionScript</code> is a short javaScript command which is one way of customizing the behavior of the applet when the submit button is pressed. (It should not contain line breaks to satisfy javaScript requirements.)
  +
</p>
  +
<p>'''[[FlashApplets | FlashApplets]]''' describes this interface from the flash applets point of view.
 
</p>
  
</p>
 
</td>
  
</td>
Line 127: Line 137:
 
Now we configure the applet. The contents of <code>configuration</code> is sent to the applet when <code>setConfig</code> is called. In this case it defines the function the student will see. The contents of <code>initialState</code> is used for <code>setState</code> if the student has never looked at the problem. After that the applet is set to the state in which the student left the flash applet in the previous session.
  
Now we configure the applet. The contents of <code>configuration</code> is sent to the applet when <code>setConfig</code> is called. In this case it defines the function the student will see. The contents of <code>initialState</code> is used for <code>setState</code> if the student has never looked at the problem. After that the applet is set to the state in which the student left the flash applet in the previous session.
 
</p>
  
</p>
−
<p> The <code>debug</code> switch is an alternate to the <code>debugMode</code> flag in the applet definition. The <code>includeAnswerBox</code> should be set to one if you are using the default answerBox. The <code>reinitialize_button</code> allows one to return the flash applet to its virgin state, before the student has ever looked at the WeBWorK question. In this example it is only showed to professors (users with permission level greater than 10) so that they can reset a student's problem if they manage to jam it in some way.
 +
<p> The <code>debug</code> switch is an alternate to the <code>debugMode</code> flag in the applet definition. The <code>includeAnswerBox</code> should be set to one if you are using the default answerBox. The <code>reinitialize_button</code> allows the flash applet to be reset to its virgin state, as if the student had ever looked at the WeBWorK question. In this example the button is only visible to professors (users with permission level greater than 10) so that they can reset a student's problem if it is stuck for some reason.
 
</p>
  
</p>
 
</td>
  
</td>
Line 139: Line 149:
 
<pre>
  
<pre>
 
BEGIN_TEXT
  
BEGIN_TEXT
−
...... question text ......
  
  +
  +
$PAR
  +
Drag the point to the inflection point of
  +
the given curve and press the submit button.
 
END_TEXT
  
END_TEXT
 
</pre>
  
</pre>
Line 154: Line 167:
 
<td style="background-color:#eeddff;border:black 1px dashed;">
  
<td style="background-color:#eeddff;border:black 1px dashed;">
 
<pre>
  
<pre>
−
ANS( $expr->cmp() );
  
  +
NAMED_ANS('answerBox'=>$answer_point
  +
->with(tolType=>"absolute",tolerance=>.05)
  +
->cmp
  +
->withPostFilter(AnswerHints(
  +
sub {
  +
my ($correct,$student,$ans) = @_;
  +
return Vector($correct-$student)->norm<.2 ;
  +
} => ["You're close. You need to position
  +
the dot more precisely.", replaceMessage=>1]
  +
)));
  +
 
</pre>
  
</pre>
 
<td style="background-color:#eeccff;padding:7px;">
  
<td style="background-color:#eeccff;padding:7px;">
 
<p>
  
<p>
−
As is the answer.
  
  +
The answer checker grabs the answer from the default <code>answerBox</code> where the applet has placed it. The answer is coordinates of the dot
  +
<code>"(x, y)"</code>. We checke it with an absolute tolerance of 0.05. If the
  +
the student's dot is within .2 of the correct position then we give an encouraging message to show they are on the right track.
 
</p>
  
</p>
 
</td>
  
</td>
Line 165: Line 190:
   
 
<p style="text-align:center;">
  
<p style="text-align:center;">
−
[[IndexOfProblemTechniques|Problem Techniques Index]]
 +
[[IndexOfProblemTechniques|Problem Techniques Index]]<br/>
  +
[[:Category:Applets | More on how to embed applets in WeBWorK Questions]]
  +
 
</p>
  
</p>
   
 
[[Category:Problem Techniques]]
  
[[Category:Problem Techniques]]
  +
[[Category:Flash Applets]]
  +
  +
  +
<ul>
  +
<li>POD documentation: [http://webwork.maa.org/pod/pg/macros/AppletObjects.html AppletObjects.pl]</li>
  +
<li>PG macro: [http://webwork.maa.org/viewvc/system/trunk/pg/macros/AppletObjects.pl?view=log AppletObjects.pl]</li>
  +
  +
</ul>

Latest revision as of 17:07, 15 June 2021

Warning : Flash is not supported by major browsers any more.

This article has been retained as a historical document. It is not up-to-date and the formatting may be lacking. Use the information herein with caution.

Flash applet example: Graph and Point


This code snippet shows the essential PG code to check student answers that are equations. Note that these are insertions, not a complete PG file. This code will have to be incorporated into the problem file on which you are working.

Problem Techniques Index

PG problem file Explanation 
  loadMacros("AppletObjects.pl",
             "answerHints.pl"
  );

In the initialization section, we need to include the macros file AppletObjects.pl and, to provide good feedback, answerHints.pl. 

  Context("Point");
  
  $a =  Real( random(-4,4,0.5) );
  $b =  Real(  random(-3,3,1) );
  $function = Formula("(x - $a)^3 + ($b/$a) * x")->reduce;	
  $x0 = $a;
  $y0= $function->eval(x=>$x0);
  $answer_point = Compute("($x0, $y0)");

In the problem set-up section of the file, we specify that the Context should be Point, and setup and define the mathematics information. (We will be asking the student to drag the dot to the inflection point of the function.) 

  ###################################
  # Create  link to applet 
  ###################################
  $appletName = "PointGraph";
  $applet =  FlashApplet(
     codebase            =>  findAppletCodebase("$appletName.swf"),
     appletName          =>  $appletName,
     appletId            =>  $appletName,
     setStateAlias       =>  'setXML',
     getStateAlias       =>  'getXML',
     setConfigAlias      =>  'setConfig',
     answerBoxAlias      =>  'answerBox',
     debugMode           =>  0,
     submitActionScript  =>  
  qq{getQE("answerBox").value=getApplet("$appletName").getAnswer() },
  );

This snippet defines the applet PointGraph. This applet was designed by Doug Ensley. The applet .swf file can be obtained here. This wiki has more information on designing Flash applets for WeBWorK and a Simple_example of converting an existing flash applet for use in WeBWorK. Functional WeBWorK questions using the "PointGraph" applet can be viewed here .

The findAppletCodebase("PointGraph.swf") asks that the file PointGraph.swf be searched for in (1) the course's html directory (accessible from WeBWorK's File Manager) (2) the webwork sites's htdocs/applets directory -- maintained by the site administrator. The locations searched for the file PointGraph.swf are defined in the site's global.conf file.

The aliases connect the names used by WeBWorK javaScript code to the subroutine and function names used by the FlashApplet. If the applet has been designed specifically to work with WeBWorK questions you will not need to change these, but if you are adapting an applet designed for other uses to a WeBWorK question then you can use these aliases to avoid making modifications to the applet.

getState and setState are used to remember the applets state between invocations of the question. Students will find their questions in the same state they left them when they last worked on the question. The state changes as the student manipulate the applet.

getConfig is one way that the applet can do one-time configuration when it is first initialized in a problem. This allows one applet to be used for several different questions. The command loads the <xml> data in the configuration variable defined below, in this case determining the function used in the question.

answerBox is the name of the default text box for returning the answer from the applet. It is revealed when debugMode is 1 or 2 and hidden otherwise.

debugMode, when equal to 1, reveals two text boxes -- one containing the state of the applet and the other the answer that the flash applet submits to the WeBWorK question, along with some buttons for controlling the information in these boxes. When debugMode==2, additional alert messages are generated which detail progress through the initialization steps. This can be very helpful for debugging communication difficulties between the applet and the WeBWorK question

submitActionScript is a short javaScript command which is one way of customizing the behavior of the applet when the submit button is pressed. (It should not contain line breaks to satisfy javaScript requirements.)

FlashApplets describes this interface from the flash applets point of view. 

  ###################################
  # Configure applet
  ###################################
  
  #data to set up the equation
  $applet->configuration(qq{<XML expr='$function' />});
  # initial points
  $applet->initialState(qq{<XML> <pt xval='0' yval='0'/></XML>});
  ###################################
  #insert applet into body
  ###################################
  
  TEXT( MODES(TeX=>'object code', HTML=>$applet->insertAll(
  debug=>0,
  includeAnswerBox=>1,
   reinitialize_button=>$permissionLevel>=10,
   )));

Now we configure the applet. The contents of configuration is sent to the applet when setConfig is called. In this case it defines the function the student will see. The contents of initialState is used for setState if the student has never looked at the problem. After that the applet is set to the state in which the student left the flash applet in the previous session.

The debug switch is an alternate to the debugMode flag in the applet definition. The includeAnswerBox should be set to one if you are using the default answerBox. The reinitialize_button allows the flash applet to be reset to its virgin state, as if the student had ever looked at the WeBWorK question. In this example the button is only visible to professors (users with permission level greater than 10) so that they can reset a student's problem if it is stuck for some reason. 

  BEGIN_TEXT

  $PAR
  Drag the point to the inflection point of 
  the given curve and press the submit button.
  END_TEXT

The problem text section of the file is as we'd expect. 

 NAMED_ANS('answerBox'=>$answer_point
   ->with(tolType=>"absolute",tolerance=>.05)
   ->cmp
   ->withPostFilter(AnswerHints(
	  sub {
			 my ($correct,$student,$ans) = @_;
			 return Vector($correct-$student)->norm<.2 ;
	  } => ["You're close.  You need to position 
		the dot more precisely.", replaceMessage=>1]
)));

The answer checker grabs the answer from the default answerBox where the applet has placed it. The answer is coordinates of the dot "(x, y)". We checke it with an absolute tolerance of 0.05. If the the student's dot is within .2 of the correct position then we give an encouraging message to show they are on the right track.

Problem Techniques Index
More on how to embed applets in WeBWorK Questions


Retrieved from "https://webwork.maa.org/mediawiki_new/index.php?title=FlashPointAndGraph&oldid=21181"