parserGraphTool.pl

Jump to: Site Navigation

NAME

parserGraphTool.pl - Allow students to enter basic graphical answers via interactive JavaScript.

DESCRIPTION

GraphTool objects let you provide an interactive graphing tool for students to enter graphical answers.

To create a GraphTool object pass a list of graph objects (discussed below) for the students to graph to GraphTool(). For example:

        $gt = GraphTool("{line,solid,(0,0),(1,1)}", "{circle,dashed,(2,2),(4,2)}");

or

        $gt = GraphTool("{line,solid,(0,0),(1,1)}")->with(bBox => [-20, 20, 20, -20]);

Then, for standard PG use $gt->ans_rule() to insert the JavaScript graph into the problem (or a print graph when a hard copy is generated), and $gt->cmp to produce the answer checker. For example:

        BEGIN_TEXT
        Graph the line \(y = x\).
        $PAR
        \{$gt->ans_rule()\}
        END_TEXT

        ANS($gt->cmp);

For PGML you can just do

        BEGIN_PGML
        Graph the line [`y = x`].

        [_]{$gt}
        END_PGML

GRAPH OBJECTS

There are four types of graph objects that the students can graph. Lines, circles, parabolas, and fills (or shading of a region). The syntax for each of these objects to pass to the GraphTool constructor is summarized as follows. Each object must be enclosed in braces. The first element in the braces must be the name of the object. The following elements in the braces depend on the type of element.

For lines the name "line" must be followed by the word "solid" or "dashed" to indicate if the line is expected to be drawn solid or dashed. That is followed by two distinct points on the line. For example:

        "{line,dashed,(1,5),(3,4)}"

For circles the name "circle" must be followed by the word "solid" or "dashed" to indicate if the circle is expected to be drawn solid or dashed. That is followed by the point that is to be the center of circle, and then by a point on the circle. For example:

        "{circle,solid,(1,1),(4,5)}"

For parabolas the name "parabola" must be followed by the word "solid" or "dashed" to indicate if the parabola is expected to be drawn solid or dashed. The next element in the braces must be the word "vertical" for a parabola that opens up or down, or "horizontal" for a parabola that opens to the left or right. That is followed by the vertex and then another point on the parabola. For example:

        "{parabola,solid,vertical,(1,0),(3,3)}"

For fills the name "fill" must be followed by a point in the region that is to be filled. For example:

        "{fill,(5,5)}"

The student answers that are returned by the JavaScript will be a list of the list objects discussed above and will be parsed by WeBWorK and passed to the checker as such. The default grader is the default list_checker. Most of the time that will not work as desired, and you will need to provide your own list_checker. This can either be passed as part of the cmpOptions hash discussed below, or directly to the GraphTool object's cmp() method.

OPTIONS

There are a number of options that you can supply to control the appearance and behavior of the JavaScript graph, listed below. These are set as parameters to the with() method called on the GraphTool object.

bBox (Default: bBox => [-10, 10, 10, -10])

This is an array of four numbers that represent the bounding box of the graph. The first two numbers in the array are the coordinates of the top left corner of the graph, and the last two numbers are the coordinates of the bottom right corner of the graph.

gridX, gridY (Default: gridX => 1, gridY => 1)

These are the distances between successive grid lines in the x and y directions, respectively.

ticksDistanceX, ticksDistanceY (Default: ticksDistanceX => 2, ticksDistanceY => 2)

These are the distances between successive major (labeled) ticks on the x and y axes, respectively.

minorTicksX, minorTicksY (Default: minorTicksX => 1, minorTicksY => 2)

These are the number of minor (unlabeled) ticks between major ticks on the x and y axes, respectively.

JSXGraphOptions (Default: undefined)

This is an advanced option that you usually do not want to use. It is usually constructed by the macro internally using the above options. If defined it should be a single string that is formatted in javascript object notation, and will override all of the above options. It will be passed to the JavaScript graphTool method which will pass it on to the JSX graph board when it is initialized. It may consist of any of the valid attributes documented for JXG.JSXGraph.initBoard at https://jsxgraph.org/docs/symbols/JXG.JSXGraph.html#.initBoard. For example the following value for JSXGraphOptions will give the same result for the JavaScript graph as the default values for the options above:

        JSXGraphOptions => "{ boundingBox: [-10, 10, 10, -10]," .
                "defaultAxes: {" .
                        "x: { ticks: { ticksDistance: 2, minorTicks: 1} }," .
                        "y: { ticks: { ticksDistance: 2, minorTicks: 1} }" .
                "}," .
                "grid: { gridX: 1, gridY: 1 }" .
        "}"
snapSizeX, snapSizeY (Default: snapSizeX => 1, snapSizeY => 1)

These restrict the x coordinate and y coordinate of points that can be graphed to being multiples of the respective parameter. These values must be greater than zero.

availableTools (Default: availableTools => [ "LineTool", "CircleTool", "VerticalParabolaTool", "HorizontalParabolaTool", "FillTool", "SolidDashTool" ])

This is an array of tools that will be made available for students to use in the graph tool. The order the tools are listed here will also be the order the tools are presented in the graph tool button box. All of the tools that may be included are listed in the default options above. Note that the case of the tool names must match what is shown.

staticObjects (Default: staticObjects => [])

This is an array of fixed objects that will be displayed on the graph. These objects will not be able to be moved around. The format for these objects is the same as those that are passed to the GraphTool constructor as the correct answers.

printGraph (Default: undefined)

If the JSXGraphOptions option is set directly, then you will also need to provide a function that will generate the corresponding hard copy graph. Otherwise the hard copy graph will still be generated using the above options, and will not look the same as the java script graph.

cmpOptions (Default: cmpOptions => {})

This is a hash of options that will be passed to the cmp() method. These options can also be passed as parameters directly to the GraphTool object's cmp() method.

texSize (Default: texSize => 400)

This is the size of the graph that will be output when a hard copy of the problem is generated.


Site Navigation