The Function Graph interaction permits the user to create and edit function graphs derived from seven different functions: Linear, Absolute Value, Quadratic, Exponential, Logarithmic, Sine/Cosine, and Tan/Cotan. When authoring this interaction, simply include/exclude the buttons you want to use to create the function graph.

In addition to specifying the function buttons, Function Graph interactions are triggered by specifying the following QTI Custom Interaction class attribute:
<customInteraction class="tei-functiongraph" responseIdentifier="RESPONSE">

This customInteraction contains only one element, <customOption>, which describes everything about the Function Graph, including its coordinate plane configuration settings.

You "dock" a Function Graph interaction to a <div> element with an id specified using the div property of the configuration object. Here is an example div element: <div id="graphBox" />. Furthermore, a Function Graph interaction requires a div where the control panel is docked. The id of the panel div is specified using the panelDiv property of the configuration object. See the example configuration below.

The following is a complete <customOption> configuration object, including the html markup for all seven function creation buttons:

<!-- This is where we insert the panel and graph div -->
<div id="funcGraphTextBtns" class="btn-group btn-group-vertical functionGraphPanel">
  <a href="linear" class="btn btn-large functionGraphBtnText">Linear</a>
  <a href="absoluteValue" class="btn btn-large functionGraphBtnText">Absolute Value</a>
  <a href="quadratic" class="btn btn-large functionGraphBtnText">Quadratic</a>
  <a href="exponential"class="btn btn-large functionGraphBtnText">Exponential</a>
  <a href="logarithmic" class="btn btn-large functionGraphBtnText">Logarithmic</a>
  <a href="sineCosine" class="btn btn-large functionGraphBtnText">Sin/Cos</a>
  <a href="tangentCotangent" class="btn btn-large functionGraphBtnText">Tan/Cotan</a>
</div>
<div id="graphBox"/>

<customOption><![CDATA[
  {
    div: 'graphBox',
    panelDiv : 'funcGraphTextBtns',
    width: 400,
    height: 400,
    vLines: 20,
    hLines: 20,
    outerLineWeight: 3,
    innerLineWeight: 1,
    plotLineWeight: 6,
    plotLineColor: '#0000FF',
    pointRadius: 8,
    pointHalo: true,
    pointColor: '#0000FF',
    arrowHead: true,
    pointRules: {
      allowOuterH: true,
      allowOuterV: true,
      xSubIncrement: 2,
      ySubIncrement: 2
    },
    xAxis: {
      increment: 1
    },
    yAxis: {
      increment: 1
    }
  }
]]></customOption>

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 a line, not a line-segment or a series of connected line-segments; thus, the arrow-heads will display.

Note: for function graphs, arrrow heads will only appear on linear functions.

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.

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.

Get Responses:

[ Click Get Responses ]