Graph Shader Flash Applet

About the Graph Shader Applet for WeBWorK

This applet and WeBWorK problem are based upon work supported by the National Science Foundation under Grant Number DUE-0941388.

Click here to see a problem like this in action (you may login as a guest): Example WeBWorK problem

Where to find more problems like this

The graph shader Flash applet provides a graphical user interface which allows students to answer questions by shading a portion of a displayed graph. It has been designed to be easily repurposed for a variety of problems, by editing only the PG file for the WeBWorK problem.

As an example, a WeBWorK problem can be written where the graph of a function is displayed, and the student is asked to shade the portion of the graph where the first derivative of the function is positive.

To be as versatile as possible, the applet is designed only as a user interface tool. It does not do any computation of derivatives or other properties. Instead, the author must decide what function to display, what question to ask, and what portions of the graph needed to be shaded in to constitue a correct answer.

Including the Flash applet in the WeBWorK problem is done in a way similar to other problems documented on this Wiki. For example see SolidsWW_Flash_Applet_Sample_Problem_1

Customizing the WeBWorK problem

For the sake of completeness, we include at the bottom of this page the full working PG code for a problem implementing this applet, but here we will only comment on the problem setup section of the code. This section contains all of the parameters that can be altered to suit your needs as you author new WeBWorK problems using this applet.

After the tagging, description, and initialization sections of the problem, the problem is set up in a section following the comment line:
########### Problem parameters for customization here #######################
Below are the values that are used in an example problem, where a student is asked to shade in the portion of the graph of a function where the first derivative is positive. To customize the problem, change the string values within the single quotes.

Function to plot

These variables define the function to plot, and plot window:

• $functionText = 'sin(x)'; – the function to plot, entered as a string.

This is followed by four variables defining the plot window:

• $xMin = '-1';
• $xMax = '7';
• $yMin = '-1.2';
• $yMax = '1.2';

Tick marks and numerical labels

These variables define whether or not to show tick marks and labels, and control how far apart they are spaced:

• $showTicks = 'true'; – enter true or false depending on whether you want to show tick marks on the axes.
• $labelSpaceX = '1'; – how far apart tick marks should be on the x-axis.
• $labelSpaceY = '1'; – how far apart tick marks should be on the y-axis.
• $showLabels = 'true'; – whether to show numerical labels at the tick mark positions.

Grid lines

Grid lines for the plot are controlled with the following variables:

• $showGrid = 'true'; – whether to show grid lines
• $gridSpaceX = '0.5'; – spacing of grid lines in the x direction
• $gridSpaceY = '0.5'; – spacing of grid lines in the y direction

The correct answer to the problem

A correct answer is defined by appropriate beginning and ending points for the intervals which should be shaded by the student (there is no distinction made in the applet between open and closed intervals). These endpoints should combined in one list, separated by commas. For example, setting

$correctIntervalPoints = '-1, 1.5707963268, 4.71238898038, 7';

means that the correct intervals to be shaded are (-1, 1.5707963268) and (4.71238898038, 7).

Directions for the student

The next string variable contains the text directions informing the student what to do. For example:

$directions = 'Directions: Drag with your mouse to highlight the intervals where the shown function has a positive first derivative.';

Full PG source code

Below is the full PG source code for an example problem, where the student is asked to shade the portion of a graph where the derivative is positive.

<code>
##DESCRIPTION
##  Graph shading - derivatives 
##ENDDESCRIPTION

##KEYWORDS('graph shading', 'Flash applets','NSF-0941388')

## DBsubject('Calculus')
## DBchapter('Applications of Differentiation')
## DBsection('Curve sketching')
## Date('7/13/2012')
## Author('Dan Gries')
## Institution('Hopkins School')
## TitleText1('')
## EditionText1('2011')
## AuthorText1('')
## Section1('')
## Problem1('')

########################################################################

DOCUMENT();

loadMacros(
  "PGbasicmacros.pl",
  "extraAnswerEvaluators.pl",
  "AppletObjects.pl",
);
TEXT(beginproblem());
$showPartialCorrectAnswers = 1;
Context("Numeric"); 

###########   Problem parameters for customization here   ###################

# function to plot, and plot window
$functionText = 'sin(x)';
$xMin = '-1';
$xMax = '7';
$yMin = '-1.2';
$yMax = '1.2';

#whether to show tick marks on the axes, spacing of ticks, and whether to show numeric labels
$showTicks = 'true';
$labelSpaceX = '1';
$labelSpaceY = '1';
$showLabels = 'true';

#whether to show grid, and spacing of grid lines
$showGrid = 'true';
$gridSpaceX = '0.5';
$gridSpaceY = '0.5';

$correctIntervalPoints = '-1, 1.5707963268, 4.71238898038, 7';

$directions = 'Directions: Drag with your mouse to highlight the intervals
where the shown function has a positive first derivative.';

#################      End of problem customization      ####################

$ans = Compute("1");

    ###################################
    # Create  link to applet 
    ###################################
    $appletName = "graph_shading_basic";
    $applet =  FlashApplet(
       codebase              => findAppletCodebase("$appletName.swf"),
       appletName            => $appletName,
       appletId              => $appletName,
       setStateAlias         => 'setXML',
       getStateAlias         => 'getXML',
       setConfigAlias        => 'setConfig',
       getConfigAlias        => 'getConfig',
       #initializeActionAlias => 'setXML',
       maxInitializationAttempts => 5,   #number of attempts to initialize applet
       #submitActionAlias     =>  'getXML',
       answerBoxAlias        => 'answerBox',
       height                => '460',
       width                 => '520',
       bgcolor               => '#ffffff',
       debugMode             =>  0,
       submitActionScript  =>  
  qq{getQE("answerBox").value=getApplet("$appletName").getAnswer() },
     );

    ###################################
    # Configure applet
    ###################################

$configXMLString = qq{<XML>
    <func>$functionText</func>
    <window xMin='$xMin' xMax='$xMax' yMin='$yMin' yMax='$yMax' />
    <showGrid>$showGrid</showGrid>
    <showTicks>$showTicks</showTicks>
    <showLabels>$showLabels</showLabels>
    <labelSpaceX>$labelSpaceX</labelSpaceX>
    <labelSpaceY>$labelSpaceY</labelSpaceY>
    <gridSpaceX>$gridSpaceX</gridSpaceX>
    <gridSpaceY>$gridSpaceY</gridSpaceY>
    <answer>
    <intervalPoints>$correctIntervalPoints</intervalPoints>
    </answer>
</XML>};

    $applet->configuration($configXMLString);
    $applet->initialState(qq{<XML> </XML>});

TEXT( MODES(TeX=>'object code', HTML=>$applet->insertAll(
  debug=>0,
  includeAnswerBox=>1,
   )));

BEGIN_TEXT
$BR
$BR $directions
END_TEXT

Context()->normalStrings;

##############################################################
#  Answers
## answer evaluators

NAMED_ANS('answerBox'=>$ans->cmp());

ENDDOCUMENT();
</code>