The Composite Graph script library supports two different types of interactions: Solution Set Graphing, and Composite Graphing. This Styleguide example demonstrates how to use Composite Graphing with preplotted points and to connect those points to student supplied points when working with lines or even polygons.

Composite Graph interactions are triggered by specifying the following QTI Custom Interaction class attribute:

<customInteraction class="tei-compositegraph" responseIdentifier="RESPONSE">

This customInteraction contains only one element, <customOption>, which describes everything about the Composite Graph, including its coordinate plane configuration settings. The attribute connectToPrePlot should be set to true (e.g., 'connectToPrePlot': true). This will allow the points that are placed by the student to interact with the pre-plotted points. Pre-plotted points are considered to have been placed in the order that they are defined within the javascript (JSON) code. As such, the first point the student plots in that series will be connected to the last pre-plotted point defined — just as if these points had been plotted by the student prior.

The other configuration settings normally associated with Composite Graphs apply as normal; see the relevant examples for how those settings are used.

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 answers are actually a series of connected line-segments; thus, despite being turned on, the arrow-heads will not display.

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.

<customOption><![CDATA[
{
  "div": "Graph_Box",
  "panelDiv": "Graph_Panel",
  "width": 400,
  "height": 400,
  "gridType": "coordinate",
  "vLines": 12,
  "hLines": 12,
  "outerLineWeight": 3,
  "innerLineWeight": 1,
  "solutionSetEnabled": true,
  "solutionSetButtonText": "Solution Set",
  "graphs": [
    {
      "id": "lgA",
      "lineStyleToggle": true,
      "panelTitle": "Line A",
      "graphType": "polygon",
      "segmentMode": true,
      "plotLineWeight": 3,
      "plotLineColor": "#28a100",
      "pointRadius": 8,
      "pointHalo": true,
      "pointColor": "#28a100",
      "lineStyle": "solid",
      "closeShape": {
        "button": "min",
        "buttonHAlignment": "center",
        "buttonVPadding": 10
      },
      "arrowHead": true,
      "pointRules": {
        "maximumPoints": 2
      },
      "staticPoints": {
        "showLine": true,
        "displayPoints": true,
        "points": [
          {
            "x": 10,
            "y": -10
          },
          {
            "x": 20,
            "y": -5
          }
        ]
      }
    },
    {
      "id": "lgB",
      "lineStyleToggle": true,
      "panelTitle": "Line B",
      "graphType": "line",
      "segmentMode": true,
      "plotLineWeight": 3,
      "plotLineColor": "#000099",
      "pointRadius": 8,
      "pointHalo": true,
      "pointColor": "#000099",
      "lineStyle": "solid",
      "showLine": false,
      "arrowHead": false,
      "pointRules": {
        "maximumPoints": 2
      },
      "staticPoints": {
        "showLine": true,
        "displayPoints": true,
        "points": [
          {
            "x": -10,
            "y": 10
          },
          {
            "x": -20,
            "y": 5
          }
        ]
      }
    }
  ],
  "pointRules": {
    "maximumPoints": 3,
    "connectToPrePlot": true,
    "allowOuterH": false,
    "allowOuterV": false,
    "xSubIncrement": 2,
    "ySubIncrement": 2,
    "draggable": true
  },
  "xAxis": {
    "startPoint": 0,
    "increment": 5
  },
  "yAxis": {
    "startPoint": 0,
    "increment": 5
  }
}
]]></customOption>

Get Responses:

[ Click Get Responses ]