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 Line Graph option of Point Graph.

Line Graph interactions are triggered by specifying the following QTI Custom Interaction class attribute:
<customInteraction class="tei-pointgraph-line" 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 "line" type; e.g., 'graphType':'line'. 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': 'line':

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 is 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.

Axis Breaks

Composite graphs now support adding breaks in the axis of the graph, which represent skipped points from the origin of the graph to the number specified on the axis. The break can be specified for the x-axis, y-axis, or both.

A break can be added to either axis with the parameter omitStartPoint and the number of desired points to be skipped. If omitStartPoint is not specified or omitStartPoint: = "", then there will be no break added to the axis.

Below is an example of an axis including a break with omitStartPoint:
{'startPoint': 0, 'increment': 1, 'title': 'Time (hr)', 'omitStartPoint': 10}

Axis Title Formatting

The title of each axis can now be formatted. The font-weight and font-style for both the x-axis and y-axis can be specified based on the available options.

For font-weight there are 14 choices: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit.
For font-style there are 4 choices: normal | italic | oblique | inherit.

Below is an example of an axis with title formatting:
{startPoint': 0, 'increment': 1, 'title': 'Time(hr)', 'title-style': 'font-weight: bold; font-style: italic'}

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}

Descending Axes

The labels for points on the x and/or y-axis can be configured to be in descending order. For example 10, 9, 8, 7, 6...

To have descending point labels, use a negative increment 'increment': -1 on the appropriate axis. Also make sure to define a start point that makes sense 'startPoint': 10

Below is an example of a axis starting at 10 and counting down:
'xAxis': { 'startPoint': 10, 'increment': -1, 'title': 'Time (hr)' }

Ignore Answer

If a line graph is inside a composite item there is an option to have the line 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-line 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': 'Culture 2 Data'

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
This item utilizes this property.

<customOption><![CDATA[
  {
    'div': 'RESPONSE',
    'width': 300,
    'height': 340,
    'graphTitle': 'Culture 2 Data'
    'graphTitleCentered': true,
    'graphType': 'line',
    'gridType': 'oneQuadrant',
    'vLines': 7,
    'hLines': 10,
    'segmentMode': true,
    'outerLineWeight': 3,
    'innerLineWeight': 1,
    'plotLineWeight': 6,
    'plotLineColor': '#0000FF',
    'pointRadius': 8,
    'pointHalo': true,
    'pointColor': '#0000FF',
    'splitScreen': true,
    'arrowHead': true,
    'pointRules': {
      'maximumPoints': 6,
      'minimumPoints': 2,
      'allowOuterH': true,
      'allowOuterV': true,
      'xSubIncrement': 2,
      'ySubIncrement': 2,
      'draggable': true
    },
    'xAxis': {
      'startPoint': 0,
      'increment': 1,
      'title': 'Time (hr)'
    },
    'yAxis': {
      'startPoint': 0,
      'increment': 10,
      'title': 'Number of Cells (x1,000,000)'
    }
  }
]]></customOption>

Get Responses:

[ Click Get Responses ]