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:
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.
Figure 4: Tool groups in the graph toolbar.
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 set up. To set the validation, plot the correct answer using the tools, as shown in Figure 5.
Figure 5: Graph question validation.
Graph questions are scored only by Exact Match. There are additional options to ignore repeated shapes inputted by the student. See this article on using the repeated shapes option for more information.
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.
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 6: X and Y axis parameters.
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.
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.
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 9: Background shapes.
Learnosity graph questions can be interacted by keyboard-only and screen reader users.
Keyboard-only users can tab to the menu and navigate the menu items using arrow keys. Options in the menu can be selected with either the spacebar 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 spacebar 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 the arrow 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 and 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.