Graph

Description

The Graph question type requires students to plot points, lines, and shapes on a coordinate grid.

Figure 1 - Graph question example.


Authors can plot different shapes on the graph. See the variety of graph plotting tools below:

Additional options in this question type are explained here.

Plot Line Ray
Segment Vector Circle
Parabola Sine Polygon

Create a Question

Enter the question stem into the Compose question area. Below you will see the Graph parameters section. Here you configure the Cartesian plane. Add min and max X and Y axis values as shown in Figure 2.

Figure 2 - Graph parameters.


Then define graphing tools that will be available for students. In the Tools section you can add various buttons or even groups of buttons to the toolbar and create the toolbar specified for your question.

There are two options: Add Button and Add Group. To add a single button to the toolbar click on +Add Button. A drop down menu will appear below. Select the tool from this menu in order for it to appear in the student toolbar.

Figure 3 - Adding a button to the toolbar.

To remove a button simply click on the trash can icon beside it. Alternatively, you can replace the unwanted tool by selecting a new tool from the menu.

You can also decide to have a set of tools and group them into one drop down menu in the toolbar. To create a group of tools click on the +Add Group button. You will see a new section called Group below the buttons list. Click on +Add and select tools you want to add to the group.

Note: these settings only affect students, authors will be able to see all tools when validating the question.

Figure 4 - Tool groups in the graph toolbar.


You can now configure validation for your question. Follow these steps to set up score and correct response:

  • Insert value in the Point(s) box to set up a mark for the question. Default value is set to 1.
  • In the Correct tab you will see the cartesian plane you set up. To validate the question plot the correct answer as shown in Figure 5.
  • Figure 5 - Graph question validation.

  • Graph questions are scored only by Exact Match.

More Options

Layout

In this section authors can apply additional formatting options. Graph Width and Height can be specified in pixels. Authors can also add a margin around the graph. It can be applied for styling purposes only or as a container for labels that you may decide to add.

Default tool defines a plotting tool that will be enabled when the question is loaded. Select the default tool from the drop down menu.

The Snap to field defines how point will snapped to the nearest intersect on the graph. Possible values are: "grid", "ticks" or a numeric value. These attributes should be entered in manually.

  • With grid snap selected the point will stick to the nearest intersection between grid cells
  • Ticks snap is used to snap the point to the nearest intersection between axis ticks. For instance, if ticks distance is 2 then a point can be plotted on the graph every 2nd intersect from 0: (0,2),(0,4),(-2,0), (2,2) (-2,-4) etc.
  • You can also use a numeric value. For example, if Snap to is set to 4, the point can be snapped in the intersection of every 4 cells on X and Y axis.

Draw Label Zero - "0" will appear on the graph by default when both X and Y Axis are used. Draw Label Zero allows you to remove the 0. If only one axis is used the 0 cannot be removed.

Show hover position: Enable this option if you want the coordinates of a point to be displayed when hovering over a point or dragging it on the grid.


Grid

In the grid section authors can configure the X and Y axis parameters, such as hide/show arrows and ticks, add labels and define ticks distance. Each parameter should be specified for both axis:

  • x_distance represents the distance between grid lines perpendicular to the X axis and y_distance is the distance between grid lines perpendicular to the Y axis.

  • Ticks Distance defines the distance of each tick on the graph.
  • The Hide Ticks defines whether or not to render ticks of each point on the X and Y Axis of the graph.
  • Draw Labels - Enable this option if you want to add numbers under each point on the X and Y Axis.
  • Show first arrow - Displays arrow at the start of the axis.
  • Show last arrow - Displays arrow at the end of the axis.
  • Comma in label - The can be applied only if you have a labelled graph and more than 1000 labels. This will insert commas to separate thousands in a label.
  • Show axis label - Enables a label next to the axis. When turned on the label can be defined in the field below.

Figure 6 - X and Y axis parameters.


Controls

Here you can specify which control buttons should be displayed in the toolbar. Controls can be added to the toolbar the same way as Tools. To remove a control button simply click on the trash can button beside it.

Figure 7 - Controls menu.


Annotation

In the Annotation section you can add more information to your graph by adding the graph title and/or labels on the top, bottom, left, or right. See example on Figure 8.

Figure 8 - Graph annotation.


Background Image

You can also decide to use an image as a grid background. For this use the Background Image option. When you upload an image the following options can be specified:

  • X - Position on the X Axis for image centre. 0 = image centre.
  • Y - Position on the Y Axis for image centre. 0 = image centre.
  • Width (%) - Width of Image as a % of the canvas.
  • Height (%) - Height of Image as a % of the canvas.
  • Opacity (%) - % of image transparency.

You can also add background shapes onto the image background using any of our drawing tools. Note: The student cannot interact with any of the background shapes.

Figure 9 - Background Shapes.

Overview

In the graph plotting question, it is easy for authors or students to plot duplicate shapes on top of each other without realising. It is impossible to tell if there are duplicate shapes from a pure visual inspection. Duplicate shapes can cause validation to fail if the Ignore repeated Shapes option is not switched on. See the below gif for an example:

To avoid this issue, authors can use the Ignore Repeated Shapes flag. This can be found in Validation.



Possible values are:
Value Result
No Repeated shapes are not ignored
Compare by slope Repeated shapes are ignored even if the points are not equal. e.g. the two lines here would be considered equivalent because the slopes of the line are equal.
These two lines would not be considered equivalent:

Compare by points Repeated shapes are ignored only if the points are equal. e.g. the two lines here would be considered equivalent because the points are equal.
These two lines would not be considered equivalent:


Impact on Validation

When the Ignore Repeated Shapes option is enabled, repeated shapes are filtered out of the valid response and the student's response. Filtering occurs independently in both contexts.
E.g. the student does not need to supply exact lines with exactly the same points as the author in compare by slope mode as long as the slopes are equivalent and the student's points are equivalent.



In this example of compare by points mode, the validation fails because the author has set three lines, two of which are identical are thus filtered. The end result is that the student must supply two lines with distinct points. They supplied two lines with identical points which are filtered into one line and thus the validation fails because a second distinct line is required.



Example 1 - Graph question with headings and labels.

Source
{
    "toolbar": {
        "default_tool": "point",
        "tools": [
            "point"
        ]
    },
    "instant_feedback": true,
    "annotation": {
        "label_bottom": "Negative Y",
        "label_left": "Negative X",
        "label_right": "Positive X",
        "label_top": "Positive Y",
        "title": "Graphing 101"
    },
    "axis_x": {
        "draw_labels": true,
        "show_first_arrow": true,
        "show_last_arrow": true,
        "ticks_distance": 1
    },
    "axis_y": {
        "draw_labels": true,
        "show_first_arrow": true,
        "show_last_arrow": true,
        "ticks_distance": 2
    },
    "canvas": {
        "show_hover_position": true,
        "snap_to": "grid",
        "x_max": 5,
        "x_min": -5,
        "y_max": 5,
        "y_min": -5
    },
    "grid": {
        "x_distance": 1,
        "y_distance": 1
    },
    "is_math": true,
    "stimulus": "Draw points at (0,0), (3,4), (2,-2)",
    "type": "graphplotting",
    "validation": {
        "scoring_type": "exactMatch",
        "valid_response": {
            "score": 1,
            "value": [
                {
                    "id": "lrn_1",
                    "type": "point",
                    "coords": {
                        "x": 0,
                        "y": 0
                    }
                },
                {
                    "id": "lrn_2",
                    "type": "point",
                    "coords": {
                        "x": 3,
                        "y": 4
                    }
                },
                {
                    "id": "lrn_3",
                    "type": "point",
                    "coords": {
                        "x": 2,
                        "y": -2
                    }
                }
            ]
        }
    }
}


Example 2 - Graph question with heading and configured toolbar.

Source
{
    "annotation": {
        "title": "Polygon Plotting"
    },
    "axis_x": {
        "draw_labels": true,
        "show_first_arrow": true,
        "show_last_arrow": true,
        "ticks_distance": 1
    },
    "axis_y": {
        "draw_labels": true,
        "show_first_arrow": true,
        "show_last_arrow": true,
        "ticks_distance": 1
    },
    "canvas": {
        "snap_to": "grid",
        "x_max": 6,
        "x_min": -6,
        "y_max": 6,
        "y_min": -6
    },
    "grid": {
        "x_distance": 1,
        "y_distance": 1
    },
    "instant_feedback": true,
    "stimulus": "<p>Create a polygon with the following vertices</p><p>A&nbsp;(2,2), B (1, -2), C (-3, -2), D (-4, 2),&nbsp;(0, 4)</p>",
    "toolbar": {
        "default_tool": "polygon",
        "tools": [
            "polygon"
        ]
    },
    "type": "graphplotting",
    "ui_style": {
        "graph_controls": "delete"
    },
    "validation": {
        "scoring_type": "exactMatch",
        "valid_response": {
            "score": 1,
            "value": [
                {
                    "id": "lrn_2",
                    "type": "point",
                    "coords": {
                        "x": 2,
                        "y": 2
                    },
                    "subElement": true
                },
                {
                    "id": "lrn_3",
                    "type": "point",
                    "coords": {
                        "x": 1,
                        "y": -2
                    },
                    "subElement": true
                },
                {
                    "id": "lrn_4",
                    "type": "point",
                    "coords": {
                        "x": -3,
                        "y": -2
                    },
                    "subElement": true
                },
                {
                    "id": "lrn_5",
                    "type": "point",
                    "coords": {
                        "x": -4,
                        "y": 2
                    },
                    "subElement": true
                },
                {
                    "id": "lrn_6",
                    "type": "point",
                    "coords": {
                        "x": 0,
                        "y": 4
                    },
                    "subElement": true
                },
                {
                    "id": "lrn_7",
                    "type": "polygon",
                    "subElementsIds": [
                        "lrn_2",
                        "lrn_3",
                        "lrn_4",
                        "lrn_5",
                        "lrn_6",
                        "lrn_2"
                    ]
                }
            ]
        }
    }
}


Example 3 - Same as above Graph question format with pre-drawn shape.

Source
{
    "annotation": {
        "title": "Polygon Plotting"
    },
    "axis_x": {
        "draw_labels": true,
        "show_first_arrow": true,
        "show_last_arrow": true,
        "ticks_distance": 1
    },
    "axis_y": {
        "draw_labels": true,
        "show_first_arrow": true,
        "show_last_arrow": true,
        "ticks_distance": 1
    },
    "background_shapes": [
        {
            "id": "lrn_1",
            "type": "point",
            "coords": {
                "x": -2,
                "y": 1
            },
            "subElement": true
        },
        {
            "id": "lrn_2",
            "type": "point",
            "coords": {
                "x": -2,
                "y": 3
            },
            "subElement": true
        },
        {
            "id": "lrn_3",
            "type": "point",
            "coords": {
                "x": -4,
                "y": 3
            },
            "subElement": true
        },
        {
            "id": "lrn_4",
            "type": "point",
            "coords": {
                "x": -4,
                "y": 1
            },
            "subElement": true
        },
        {
            "id": "lrn_5",
            "type": "polygon",
            "subElementsIds": [
                "lrn_1",
                "lrn_2",
                "lrn_3",
                "lrn_4",
                "lrn_1"
            ]
        }
    ],
    "canvas": {
        "snap_to": "grid",
        "x_max": 6,
        "x_min": -6,
        "y_max": 6,
        "y_min": -6
    },
    "grid": {
        "x_distance": 1,
        "y_distance": 1
    },
    "instant_feedback": true,
    "stimulus": "<p><strong>Plot the reflection of the pre-drawn polygon</strong></p>",
    "toolbar": {
        "default_tool": "polygon",
        "tools": [
            "polygon"
        ]
    },
    "type": "graphplotting",
    "ui_style": {
        "graph_controls": "delete"
    },
    "validation": {
        "scoring_type": "exactMatch",
        "valid_response": {
            "score": 1,
            "value": [
                {
                    "id": "lrn_6",
                    "type": "point",
                    "coords": {
                        "x": 2,
                        "y": 1
                    },
                    "subElement": true
                },
                {
                    "id": "lrn_7",
                    "type": "point",
                    "coords": {
                        "x": 4,
                        "y": 1
                    },
                    "subElement": true
                },
                {
                    "id": "lrn_8",
                    "type": "point",
                    "coords": {
                        "x": 4,
                        "y": 3
                    },
                    "subElement": true
                },
                {
                    "id": "lrn_9",
                    "type": "point",
                    "coords": {
                        "x": 2,
                        "y": 3
                    },
                    "subElement": true
                },
                {
                    "id": "lrn_10",
                    "type": "polygon",
                    "subElementsIds": [
                        "lrn_6",
                        "lrn_7",
                        "lrn_8",
                        "lrn_9",
                        "lrn_6"
                    ]
                }
            ]
        }
    }
}


Example 4 - Graph question with 20px margin and tick distance and grid lines set to 2.

Source
{
    "annotation": {
        "label_bottom": "Negative Y",
        "label_left": "Negative X",
        "label_right": "Positive X",
        "label_top": "Positive Y"
    },
    "axis_x": {
        "axis_label": "X",
        "draw_labels": true,
        "show_axis_label": true,
        "show_first_arrow": true,
        "show_last_arrow": true,
        "ticks_distance": 2
    },
    "axis_y": {
        "axis_label": "Y",
        "draw_labels": true,
        "show_axis_label": true,
        "show_first_arrow": true,
        "show_last_arrow": true,
        "ticks_distance": 2
    },
    "canvas": {
        "snap_to": "grid",
        "x_max": 8.5,
        "x_min": -8.5,
        "y_max": 8.5,
        "y_min": -8.5
    },
    "grid": {
        "x_distance": 2,
        "y_distance": 2
    },
    "instant_feedback": true,
    "is_math": true,
    "stimulus": "Plot the circle with centre co-ordinates (6,4) and a radius of 2 units.",
    "toolbar": {
        "default_tool": "circle",
        "tools": [
            "circle"
        ]
    },
    "type": "graphplotting",
    "ui_style": {
        "height": "500px",
        "margin": "30px",
        "width": "500px"
    },
    "validation": {
        "scoring_type": "exactMatch",
        "valid_response": {
            "score": 1,
            "value": [
                {
                    "id": "lrn_2",
                    "type": "point",
                    "coords": {
                        "x": 6,
                        "y": 4
                    },
                    "subElement": true
                },
                {
                    "id": "lrn_1",
                    "type": "point",
                    "coords": {
                        "x": 8,
                        "y": 4
                    },
                    "subElement": true
                },
                {
                    "id": "lrn_3",
                    "type": "circle",
                    "subElementsIds": {
                        "centrePoint": "lrn_2",
                        "radiusPoint": "lrn_1"
                    }
                }
            ]
        }
    }
}


Example 5 - Graph question with background image and toolbar options drop down menu.

Hint The parabola passes through points (-1,4) and (0,5).


Source
{
    "axis_x": {
        "draw_labels": true,
        "ticks_distance": 1
    },
    "axis_y": {
        "draw_labels": true,
        "ticks_distance": 1
    },
    "background_image": {
        "opacity": 35,
        "src": "\/\/assets.learnosity.com\/organisations\/1\/logo.png",
        "width": 140
    },
    "canvas": {
        "show_hover_position": true,
        "snap_to": "grid",
        "x_max": 8.5,
        "x_min": -8.5,
        "y_max": 8.5,
        "y_min": -8.5
    },
    "draw_zero": true,
    "grid": {
        "x_distance": 1,
        "y_distance": 1
    },
    "instant_feedback": true,
    "is_math": true,
    "stimulus": "<p>Plot the following quadratic equation on the graph below.<br \/><br \/>\\(y=x^2+2x+5\\)<\/p><p><em>hint:<\/em> For this question, the parabola passes through points (-1,4) and (0,5).<\/p>",
    "toolbar": {
        "default_tool": "parabola",
        "tools": [
            [
                "parabola",
                "point",
                "polygon",
                "line"
            ]
        ]
    },
    "type": "graphplotting",
    "ui_style": {
        "height": "500px",
        "width": "500px"
    },
    "validation": {
        "scoring_type": "exactMatch",
        "valid_response": {
            "score": 1,
            "value": [
                {
                    "id": "lrn_2",
                    "type": "point",
                    "coords": {
                        "x": -1,
                        "y": 4
                    },
                    "subElement": true
                },
                {
                    "id": "lrn_1",
                    "type": "point",
                    "coords": {
                        "x": 0,
                        "y": 5
                    },
                    "subElement": true
                },
                {
                    "id": "lrn_3",
                    "type": "parabola",
                    "subElementsIds": {
                        "rootPoint": "lrn_2",
                        "edgePoint": "lrn_1"
                    }
                }
            ]
        }
    }
}


Example 6 - Graph question with X ticks distance set to 90 and Y ticks distance set to 0.5, configured grid size and toolbar.

Hint Sine passes through points (0,0) and (90,1).


Source
{
    "instant_feedback": true,
    "axis_x": {
        "draw_labels": true,
        "show_first_arrow": true,
        "show_last_arrow": true,
        "ticks_distance": 90
    },
    "axis_y": {
        "draw_labels": true,
        "show_first_arrow": true,
        "show_last_arrow": true,
        "ticks_distance": 1
    },
    "canvas": {
        "snap_to": "grid",
        "x_max": 380,
        "x_min": -380,
        "y_max": 2.5,
        "y_min": -2.5
    },
    "grid": {
        "x_distance": 90,
        "y_distance": 0.5
    },
    "is_math": true,
    "stimulus": "<p>Plot a graph for \\(y=\\sin\\left(x\\right)\\)<\/p><p><em>hint:<\/em> Sine passes through points \\(\\left(-0,0\\right)\\) and \\(\\left(90,1\\right)\\).<\/p>",
    "toolbar": {
        "default_tool": "sine",
        "tools": [
            "sine"
        ]
    },
    "type": "graphplotting",
    "ui_style": {
        "height": "250px"
    },
    "validation": {
        "scoring_type": "exactMatch",
        "valid_response": {
            "score": 1,
            "value": [
                {
                    "id": "lrn_9",
                    "type": "point",
                    "coords": {
                        "x": 90,
                        "y": 1
                    },
                    "subElement": true
                },
                {
                    "id": "lrn_11",
                    "type": "point",
                    "coords": {
                        "x": 0,
                        "y": 0
                    },
                    "subElement": true
                },
                {
                    "id": "lrn_12",
                    "type": "sine",
                    "subElementsIds": {
                        "rootPoint": "lrn_11",
                        "edgePoint": "lrn_9"
                    }
                }
            ]
        }
    }
}