The Composite Graph script library supports two different types of interactions: Solution Set Graphing, and Composite Graphing. This Styleguide example demonstrates how to use the Composite Graphing option of Composite Graph.

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. Inside the configuration object, just set the solutionSetEnabled property to "false"; e.g., 'solutionSetEnabled': false.

Also, don't forget to specify the id's of the html element where you want to place the Composite Graph and the Graph Control Panel. In the following case, our item QTI markup contains the <div id="Graph_Panel"></div> and <div id="Graph_Box"></div>, respectively. The following is a complete <customOption> configuration object. Note the 'solutionSetEnabled': true:

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.

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'}

<customOption><![CDATA[
  {
    'div': 'Graph_Box',
    'panelDiv' : 'Graph_Panel',
    'width': 600,
    'height': 400,
    'gridType': 'oneQuadrant',
    'vLines': 14,
    'hLines': 7,
    'outerLineWeight': 3,
    'innerLineWeight': 1,
    'solutionSetEnabled': false,
    'graphs': [
 {
    	'id': 'lgA',
    	'lineStyleToggle': false,
    	'panelTitle': 'Line A',
    	'graphType': 'line',
    	'segmentMode': false,
    	'plotLineWeight': 3,
    	'plotLineColor': '#28a100',
    	'pointRadius': 8,
    	'pointHalo': true,
    	'pointColor': '#28a100',
    	'lineStyle': 'solid',
    	'arrowHead': true,
    	'pointRules': {
    	  'maximumPoints': 2
    	}
 },
 {
    	'id': 'lgB',
    	'lineStyleToggle': false,
    	'panelTitle': 'Line B',
    	'graphType': 'line',
    	'segmentMode': false,
    	'plotLineWeight': 3,
    	'plotLineColor': '#000099',
    	'pointRadius': 8,
    	'pointHalo': true,
    	'pointColor': '#000099',
    	'lineStyle': 'solid',
    	'arrowHead': false,
    	'pointRules': {
    	  'maximumPoints': 2
    	}
 }
    ],
    'pointRules': {
      'maximumPoints': 3,
      'allowOuterH': false,
      'allowOuterV': false,
      'xSubIncrement': 2,
      'ySubIncrement': 2,
      'draggable': true
    },
    'xAxis': {
      'startPoint': 0,
      'increment': 1,
      'axisLabel': ''
    },
    'yAxis': {
      'startPoint': 0,
      'increment': 1,
      'axisLabel': ''
    }
  }
]]></customOption>

...more description to come for describing the Coordinate Plane configuration options...

Get Responses:

[ Click Get Responses ]