Chart

Description

The Chart question allows students to create or modify Bar Charts, Line Charts, Histograms, Dot Plots and Line Plots. Authors have the option to pre-populate the chart with as much, or as little, data as desired.

Figure 1 - Chart question example.


Watch the following tutorial which shows how to author a Chart question type.


Create a Question

Enter the question stem into the Compose question area. Below you will see the Chart section where you can specify basic chart parameters:

You can add a chart title by inserting it in the Name field. The Max Y Axis value defines the maximum height of the Y axis of the chart. This is mandatory if you are requiring stacked fractions to render in the Y tick marks. See Snap to grid under More options below for how to set the fraction value.

In the Chart Data section you can add a name for the chart and add data for each individual point. In the Data section click on +Add for each point on the chart and specify the details:

You can then add label names for the X and Y axis in the X axis label and Y axis label fields.

Below you will see the Points section where you can add data for each point in the chart.

  • Label - add a label for chart bars.
  • Value - insert a value for the point. This is the initial value the point will be set to when the student sees the question.
  • Enable Interactive if you want the students to interact with the point.

Click on +Add to add more points to the chart. Click on the delete icon beside a point if you want to remove it.

Figure 2 - Adding data to the Chart question.


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 chart you just created. In order to validate the question you must provide correct data for each point in the chart. Drag each point in the chart to its correct value. See example in Figure 3.
  • Figure 3 - Question validation.

  • Charts are scored only by Exact Match.

Only Exact Match scoring is available in Chart questions.


More Options

You can watch the video tutorial here.

Under More Options you will find additional layout settings. You can select chart type. There are various types to choose from:

Bar Chart Line Chart Histogram Chart
Dot Plot Line Plot

Snap To Grid option defines how the data point is placed on the nearest grid line when the student is moving the data point.

You can also set a Threshold, distance a point can be from the valid score and still be marked as correct.

For rendering stacked fractions in the Y ticks, enter the fraction using a slash as the fraction line, in the Snap to Grid field. This will also require a Max Y value to render.

For example, entering ‘1/2’ will render tick distances at one half increments on the Y scale. Alternately, ‘2 1/25’ will render tick distances every 2.25 increments up to the Max Y value.

Author can allow students to add points to the chart and interact with them. When Add Point in enabled students will see an Add Data button on the left side of the chart toolbar. By clicking on it they will be able to add a new bar.

Ignore Order option should be enabled when points order can be ignored.

Authors can set additional options that can be available for students when interacting with points:

  • New Point Name - Enables the author to specify the default name of all new data points added by the student.
  • Resize Point - this allows students to resize points on the chart.
  • Edit Point Label - Allows students to edit the data point labels.
  • Delete Point - Allows the student to delete a data point.
  • Order Point - Allows the student to re-order the data points.

Multicolour Bars - Enable this if you want bars to have different colours. The option is currently only supported for histograms and is enabled by default. Order Point has to be disabled.

Show Axis Gridlines - Determines whether axis gridlines should be displayed on the chart.

Example 1 - Bar Chart question with chart heading and axis labels. Theater and Dance bars are interactive, Cinema and Opera bars are non-interactive.

Source
{
    "chart_data": {
        "data": [
            {
                "x": "Theatre",
                "y": 50
            },
            {
                "x": "Cinema",
                "y": 45,
                "interactive": false
            },
            {
                "x": "Dance",
                "y": 10
            },
            {
                "x": "Opera",
                "y": 25,
                "interactive": false
            }
        ],
        "name": "Attendance at Events"
    },
    "instant_feedback": true,
    "max_y_value": 50,
    "stimulus": "<p><strong>Use the data in the table to complete the bar chart.<\/strong><\/p><table class=\"lrn_width_auto table table-bordered table-condensed\"><thead><tr><th scope=\"col\">Event<\/th><th scope=\"col\">Attendance<\/th><\/tr><\/thead><tbody><tr><td>Theatre<\/td><td>25<\/td><\/tr><tr><td>Cinema<\/td><td>45<\/td><\/tr><tr><td>Dance<\/td><td>35<\/td><\/tr><tr><td>Opera<\/td><td>25<\/td><\/tr><\/tbody><\/table>",
    "type": "simplechart",
    "ui_style": {
        "chart_type": "bar"
    },
    "validation": {
        "scoring_type": "exactMatch",
        "valid_response": {
            "score": 1,
            "value": [
                {
                    "x": "Theatre",
                    "y": 25
                },
                {
                    "x": "Cinema",
                    "y": 45
                },
                {
                    "x": "Dance",
                    "y": 35
                },
                {
                    "x": "Opera",
                    "y": 25
                }
            ]
        }
    },
    "x_axis_label": "Event",
    "y_axis_label": "Number of people attending"
}


Example 2 - Bar Chart question with Add Data option. Students are required to add data and label it in order to give the correct answer.

Source
{
    "add_point": true,
    "chart_data": {
        "data": [
            {
                "x": "Bananas",
                "y": 3
            },
            {
                "x": "Apples",
                "y": 1
            },
            {
                "x": "Pears",
                "y": 1
            }
        ],
        "name": "Fruits"
    },
    "instant_feedback": true,
    "max_y_value": 10,
    "snap_to_grid": 1,
    "stimulus": "<p>Jenny went to buy fruits. The chart below represents the fruits she got.<\/p>\n\n<p>She got&nbsp;3 bananas,<span>&nbsp;twice as many apples as bananas, 8 pears and half the amount of clementines as she&nbsp;got pears.<\/span><\/p>\n\n<p><span>Represent this on the chart. You may need to add new bars to the chart.<\/span><\/p>\n",
    "type": "simplechart",
    "ui_style": {
        "chart_type": "bar"
    },
    "validation": {
        "scoring_type": "exactMatch",
        "valid_response": {
            "score": 1,
            "value": [
                {
                    "x": "Bananas",
                    "y": 3
                },
                {
                    "x": "Apples",
                    "y": 6
                },
                {
                    "x": "Pears",
                    "y": 8
                },
                {
                    "x": "Clementines",
                    "y": 4
                }
            ]
        }
    }
}


Example 3 - Bar Chart question with Order Point option. Students are required to arrange bars on the grid in the correct order.

Source
{
    "chart_data": {
        "data": [
            {
                "x": "German",
                "y": 50,
                "interactive": false
            },
            {
                "x": "French",
                "y": 70,
                "interactive": false
            },
            {
                "x": "Italian",
                "y": 10,
                "interactive": false
            },
            {
                "x": "Swedish",
                "y": 30,
                "interactive": false
            }
        ],
        "name": "Foreign Languages Skills"
    },
    "order_point": true,
    "stimulus": "The bar chart below shows Peter&#39;s foreign languages skills. Reorder the bars to represent Peter&#39;s languages level from higher to lower.",
    "type": "simplechart",
    "ui_style": {
        "chart_type": "bar"
    },
    "instant_feedback": true,
    "validation": {
        "ignore_order": false,
        "scoring_type": "exactMatch",
        "valid_response": {
            "score": 1,
            "value": [
                {
                    "x": "French",
                    "y": 70
                },
                {
                    "x": "German",
                    "y": 50
                },
                {
                    "x": "Swedish",
                    "y": 30
                },
                {
                    "x": "Italian",
                    "y": 10
                }
            ]
        }
    },
    "x_axis_label": "Language",
    "y_axis_label": "Level"
}


Example 4 - Histogram Chart question example.

Source
{
    "chart_data": {
        "data": [
            {
                "x": "41-50",
                "y": 4
            },
            {
                "x": "51-60",
                "y": 5
            },
            {
                "x": "61-70",
                "y": 9
            },
            {
                "x": "71-80",
                "y": 1
            },
            {
                "x": "81-90",
                "y": 7
            },
            {
                "x": "91-100",
                "y": 3
            }
        ],
        "name": "Math Test Grades"
    },
    "instant_feedback": true,
    "max_y_value": 10,
    "multicolour": true,
    "stimulus": "<p>Resize <strong>71-80</strong> to 5</p>",
    "type": "simplechart",
    "ui_style": {
        "chart_type": "histogram"
    },
    "validation": {
        "scoring_type": "exactMatch",
        "valid_response": {
            "score": 1,
            "value": [
                {
                    "x": "41-50",
                    "y": 4
                },
                {
                    "x": "51-60",
                    "y": 5
                },
                {
                    "x": "61-70",
                    "y": 9
                },
                {
                    "x": "71-80",
                    "y": 5
                },
                {
                    "x": "81-90",
                    "y": 7
                },
                {
                    "x": "91-100",
                    "y": 3
                }
            ]
        }
    },
    "x_axis_label": "Test Grades",
    "y_axis_label": "Number of students"
}


Example 5 - Line Plot Chart question example.

Source
{
    "chart_data": {
        "data": [
            {
                "x": "Birds",
                "y": 6
            },
            {
                "x": "Cats",
                "y": 4
            },
            {
                "x": "Horses",
                "y": 8
            }
        ],
        "name": "Animals at the farm"
    },
    "delete_point": true,
    "edit_label": true,
    "instant_feedback": true,
    "stimulus": "<p>Resize the chart to reflect the following: There are 5 \"Cats\", 6 \"Birds\" and 8 \"Horses\" in the farm",
    "type": "simplechart",
    "ui_style": {
        "chart_type": "line-plot"
    },
    "validation": {
        "scoring_type": "exactMatch",
        "valid_response": {
            "score": 1,
            "value": [
                {
                    "x": "Birds",
                    "y": 6
                },
                {
                    "x": "Cats",
                    "y": 5
                },
                {
                    "x": "Horses",
                    "y": 8
                }
            ]
        }
    },
    "x_axis_label": "Animals"
}


Example 6 - Dot Plot Chart question example.

Source
{
    "chart_data": {
        "data": [
            {
                "x": "1",
                "y": 2
            },
            {
                "x": "2",
                "y": 1
            },
            {
                "x": "3",
                "y": 3
            }
        ],
        "name": "Math Test Grades"
    },
    "instant_feedback": true,
    "max_y_value": 5,
    "stimulus": "<p>In this line plot, show the frequency of each number in this sequence:<\/p><p>1,1,2,3,2,1,2,3,1,1<\/p><p><span class=\"label label-info\">hint<\/span> Hover over the bar at the bottom to drag the elements<\/p>",
    "type": "simplechart",
    "ui_style": {
        "chart_type": "dot-plot"
    },
    "validation": {
        "scoring_type": "exactMatch",
        "valid_response": {
            "score": 1,
            "value": [
                {
                    "x": "",
                    "y": 5
                },
                {
                    "x": "",
                    "y": 3
                },
                {
                    "x": "",
                    "y": 2
                }
            ]
        }
    }
}


Example 7 - Line Chart question example.

Source
{
    "chart_data": {
        "data": [
            {
                "x": "2009",
                "y": 15
            },
            {
                "x": "2010",
                "y": 10
            },
            {
                "x": "2011",
                "y": 0
            }
        ],
        "name": "Sample data"
    },
    "instant_feedback": true,
    "max_y_value": 50,
    "order_point": "",
    "snap_to_grid": 5,
    "stimulus": "<p>Graph the following table:<\/p><p>&nbsp;<\/p><div class=\"row\"><div class=\"col-md-8\"><table class=\"table table-bordered table-striped\"><thead><tr><th scope=\"row\">Year<\/th><th scope=\"col\">Quantity<\/th><\/tr><\/thead><tbody><tr><th scope=\"row\">2009<\/th><td>35<\/td><\/tr><tr><th scope=\"row\">2010<\/th><td>25<\/td><\/tr><tr><th scope=\"row\">2011<\/th><td>40<\/td><\/tr><\/tbody><\/table><\/div><\/div>",
    "type": "simplechart",
    "ui_style": {
        "chart_type": "line"
    },
    "validation": {
        "scoring_type": "exactMatch",
        "valid_response": {
            "score": 1,
            "value": [
                {
                    "x": "2009",
                    "y": 35
                },
                {
                    "x": "2010",
                    "y": 25
                },
                {
                    "x": "2011",
                    "y": 40
                }
            ]
        }
    },
    "x_axis_label": "Quantity",
    "y_axis_label": "Year"
}