The Point Graph script library supports three different types of interactions: Line Graph, Scatter Plot, and Polygon Graph. This Styleguide example demonstrates how to use the Polygon Graph option of Point Graph.

Polygon Graph interactions are triggered by specifying the following QTI Custom Interaction class attribute:
<customInteraction class="tei-pointgraph-polygon" responseIdentifier="RESPONSE">

This customInteraction contains only one element, <customOption>, which describes everything about the line graph, including its coordinate plane configuration settings. Inside the configuration object, just set the graph type to the "polygon" type; e.g., 'graphType':'polygon'. Easy!

Also, don't forget to specify the id of the html element where you want to place the Point Graph. In the following case, our item QTI markup contains a <div id="RESPONSE" />. The following is a complete <customOption> configuration object. Note the 'graphType': 'polygon':

Arrows on the Axis Lines

Please note that on four-quadrant composite graph items, the arrow heads will appear' on the axis lines, as shown below.

Arrowheads

The lines plotted by the student, or in pre-plotted lines, can be set to include arrowheads (i.e., indicating a line as opposed to a line segment with the parameter 'arrowHead'. If this particular parameter is left out, the default value of 'arrowHead': false is used.

In order for the 'arrowHead' parameter to be honored, the 'segmentMode' parameter needs to be set to false (i.e., below, the answer for Line A is a line, not a line-segment or a series of connected line-segments; thus, the arrow-heads will display for Line A.

Origin Label

There is now an option to show or hide the origin label on the graph. The code for this will be showOrigin:true or showOrigin:false.

Note: This option can only be enabled/disabled if gridType is coordinate.

Line Weights

The weights of the borders and axes of the graph can be changed separately now. The attributes for these are as follows:

• Border Weight : outerLineWeight
• Axis Weight : axisLineWeight

Add these attributes, followed by a number, to define specific weights for the borders and axes of your graph.

Point Labels

The labels for points can now be hidden on both the x-axis, y-axis or both.

Hiding the point labels is accomplished by adding 'hideLabels': true to the appropriate axis.

Below is an example of an axis with labels hidden:
{'startPoint': 0, 'increment': 1, 'title': 'Time(hr)', 'hideLabels': true}

Ignore Answer

If a polygon graph is inside a composite item there is an option to have the polygon graph be ignored when the answered status of the item is being determined.
To do this, add the class ignore-answered to the interactions class attribute.
Example: <customInteraction class="tei-pointgraph-polygon ignore-answered" responseIdentifier="RESPONSE">

minimumPoints

The minimumPoints property is added onto the pointRules object. This property specifies how many points should be plotted before the item is considered answered. It will defaut to 1 if the property is not included or is set to 0. This means that by default without the configuration one point will only need to be plotted to consider the item answered. Example: 'pointRules': { 'minimumPoints': 2, ... }

graphTitle

The optional graphTitle property is added onto the configuration object. This property adds a title to the graph centered in the passage.
Example: 'graphTitle': 'Roller Rink Use by Hour'

graphTitleCentered

The optional graphTitleCentered property is added onto the configuration object. This property specifies whether the title declared in graphTitle will be centered to the graph or the passage. This means that by default without the configuration the title will be centered to the passage. If it is set to true, the title is centered to the graph and false means the title is centered to the passage.
Example: 'graphTitleCentered': true

<customOption><![CDATA[
{
  'div': 'RESPONSE',
  'width': 600,
  'height': 450,
  'graphType': 'polygon',
  'gridType': 'coordinate',
  'closeShape': {
    'button' : 'min',
    'buttonHAlignment' : 'center',
    'buttonVPadding' : 10
  },
  'segmentMode': false,
  'vLines': 32,
  'hLines': 22,
  'outerLineWeight': 3,
  'innerLineWeight': 1,
  'plotLineWeight': 6,
  'plotLineColor': '#0000FF',
  'pointRadius': 8,
  'pointHalo': true,
  'pointColor': '#0000FF',
  'arrowHead': true,
  'pointRules': {
    'maximumPoints': 4,
    'minimumPoints': 3,
    'allowOuterH': true,
    'allowOuterV': true,
    'xSubIncrement': 2,
    'ySubIncrement': 2,
    'draggable': true
  },
  'staticPoints': {
    'pointColor': '#AA00AA',
    'lineColor': '#AA00AA',
    'showLine': true,
    'displayPoints': true,
    'points': [
      {
        'x': 0,
        'y': 0,
        'label': 'A'
      },
      {
        'x': 2,
        'y': 4,
        'label': 'B'
      },
      {
        'x': 5,
        'y': 4,
        'label': 'C'
      },
      {
        'x': 8,
        'y': 0,
        'label': 'D'
      }
    ]
  },
  'xAxis': {
    'startPoint': 0,
    'increment': 1
  },
  'yAxis': {
    'startPoint': 0,
    'increment': 1
  }
}
]]></customOption>

Get Responses:

[ Click Get Responses ]