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 Solution Set Graphing option of Composite Graph.

Solution Set 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 Solution Set graph, including its coordinate plane configuration settings. Inside the configuration object, just set the solutionSetEnabled property to "true"; e.g., 'solutionSetEnabled': true. Easy!

Also, don't forget to specify the id's of the html element where you want to place the Solution Set 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.

<customOption><![CDATA[
  {
    'div': 'Graph_Box',
    'panelDiv' : 'Graph_Panel',
    'width': 600,
    'height': 400,
    'gridType': 'oneQuadrant',
    'vLines': 14,
    'hLines': 7,
    'outerLineWeight': 3,
    'innerLineWeight': 1,
    'solutionSetEnabled': true,
    'solutionSetButtonText': 'Solution Set',
    'solutionSetButtonColor': '#4c4c4c',
    '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 ]