The Graphing Question type allows students to plot points, lines, and shapes on a coordinate grid. This is an auto-scored Question type.

Figure 1: Graph Question example.

 

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

 

Point 

A point is created by selecting one point on the grid. 

 

Figure 2: Example of a point in the Graphing Question type.

 

Line

A line is created by selecting two points that the line goes through.

Figure 3: Example of a line in the Graphing Question type.

 

Ray

A ray is created by selecting two points. The first point is the endpoint of the ray and the second a point on the ray.

Figure 4: Example of a ray in the Graphing Question type.

 

Segment

A segment is created by selecting two points. The points are the endpoints of the segment.

Figure 5: Example of a segment in the Graphing Question type.

 

Vector

A vector is created by selecting two points. The first point is the head of the vector and the second is the tail.

Figure 6: Example of a vector in the Graphing Question type.

 

Circle

A circle is created by selecting two points. The first point is the center of the circle and the second is any point on the circle.

Figure 7: Example of a circle in the Graphing Question type.

 

Parabola

A parabola is created by selecting two points. The first point is the vertex of the parabola and the second is another point on the parabola.

Figure 8: Example of a parabola in the Graphing Question type.

 

Sine

A sine curve is created by selecting two points. The first point is a point on the midline and the second point is either a maximum or minimum point on the curve, depending on the relative location of the two points.

Figure 9: Example of a sine curve in the Graphing Question type.

 

Polygon

A polygon is created by selecting a set of points. The points are the vertices of the polygon and will be connected by edges in the order they are plotted. For the polygon to be closed, the first and last point must coincide.  

Figure 10: Example of a sine curve in the Graphing Question type.

 

Create a Question

Enter the Question stem into the 'Compose question' area. Below you will see the Graph parameters section. Here, you can configure the Cartesian plane. Add minimum and maximum X and Y axis values as shown in Figure 11.

 

Figure 11: Graph parameters.

 

Then define graphing tools that will be available for learners. 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 learner's toolbar.

 

Figure 12: Adding a button to the toolbar.

 

To remove a button, simply click on the trashcan 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.

 

Figure 13: Tool groups in the graph toolbar.

 

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

Set correct answers

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 have set up. To set the validation, plot the correct answer using the tools, as shown in Figure 5.

 

Figure 14: Setting the Graph Question validation / correct answer.

 

Graph Questions are scored only by Exact Match. There are additional options to ignore repeated shapes created by the learner. See this article on using the repeated shapes option for more information.

More options

Layout

In this section authors can apply additional formatting options.

Width, height, margin: The 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.

Snap to: 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, with "grid" being the default. These attributes should be entered in manually. 

• For "Snap to grid", a point will snap to the nearest intersection of grid lines
• For "Snap to tick",  a point will snap to the nearest intersection between axis tick marks. For example, if ticks distance is 2 then a point can only 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. This restricts points to be plotted uniformly at positions potentially different than the intersection of gridlines or tick marks. For example, if Snap to is set to 4, a point will snap to the intersection of every 4 cells on X and Y axis: (0,0), (0,4), (4,-4), (4,0), (16,4) ect.

Note: If no value is set then the points will not snap to any intersection point. This is not advised for auto-scoring as it is difficult for the learner to select the same exact point as the author.

Display hover on 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. 
• Tick distance defines the distance of each tick on the graph for each axis.
• 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 15: 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 16: 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 in Figure 17.

 

Figure 17: Graph annotation.

 

Background image

You can also decide to use an image as a grid background. For this use the Background Imageoption. 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 18: Background shapes.

Graphing Accessibility

Learnosity graph Questions are interactive for keyboard-only and screen reader users.

Keyboard navigation

Keyboard-only users can Tab to the menu and navigate the menu entries using the arrow keys. Options in the menu can be selected with either the Space bar or the Enter key.

The Tab key will then take the user to the graph plane where they can navigate the grid using arrow keys. Points can be plotted with the Space bar or the Enter key. Pressing Shift-Tab will take the user back to the menu to select further options.

Note: at this stage, the label tool is unavailable for keyboard-only users.

Screen reader navigation

Screen reader users can use the same keyboard navigation described above.

When navigating to the graph, the screen reader user will be described the content of the graph including the axis values and any background shapes.

When navigating to the menu, the user is notified of the keyboard controls to interact with the menu. All menu options are announced to the user as they navigate through the options.

When tabbing to the graph plane, the user is notified of the keyboard controls to interact with the graph plane. As they navigate around the graph, the coordinate locations are announced. As they plot points, they are notified of the plotted point and its coordinate. 

When the user presses shift-tab to go back to the beginning of the graph, they are notified of all points or shapes plotted.