Shading

Description

The Shading question provides a visual representation of functions and calculations, including fractions and ratios. Authors are able to format a set of cells, which are shaded by the student as their response.

Figure 1 - Shading question example.

Create a Question



Enter the question stem into the Compose question area. Then go to Canvas Options below to create the grid. Specify the amount of rows and columns of the grid by putting the number in the Row Count and Column Count fields. In the Cell Height and Cell Width fields insert values to specify cell size.

Figure 2 - Creating a grid.

Authors are also able to shade out some of the cells: they will appear highlighted when the student sees the question. For this go to the Shade cells section and shade the cells on this grid as shown in Figure 3.

Figure 3 - Author shading cells.

Note that students will be able to deselect author shaded cells. You can however prevent this by enabling Lock shaded cells.

You can also make an image appear when the user clicks on a cell. Upload an image you want to use into the Shading image field.


There are two validation methods available in Shading questions:

  • byLocation - Used when the task is to highlight specific cells on the grid. Authors will need to click on the correct cells on the grid in order to indicate the correct response.
  • Figure 5 - byLocation validation example.

  • byCount - Used when the task is to select the correct amount of cells. Authors set the amount of cells in order to validate the question. Cells position will not be considered when validating the question.
  • Figure 6 - byCount validation example.

  • Insert value in the Point(s) box to set up a mark for the question. The default value is 1.
  • In the Correct tab select validation Method from the drop down menu and set the correct response using either byLocation or ByCount methods as described above.

Scoring type menu can be found under More Options.

The following scoring types are avaialable in Shading questions:

  • Exact Match - Student must answer all parts of the question correct to receive a mark.
  • Partial Match - Each cell will be marked individually and marks will be awarded if responses are in the correct position. The overall question score will be divided between the amount of correct cells.

More Options

Layout

Some cells on the grid can also be hidden. Authors may use it in order to create custom shape with grid. The Layout section can be found under More Options. Simply click on the cells you want to hide from the grid as shown in Figure 4.

Figure 7 - Hiding cells.


Additional layout options include:

  • Max selection - By putting a value into this field authors can specify how many elements students can select when giving an answer. For unlimited amount of selections insert 0.

  • Border type specifies borders around the grid and in between cells. You can choose from the following three types:

    • None - no border will be applied
    • Outer - if you only want to have grid borders but leave out cells borders
    • Full - to keep the default setting with borders around every cell
  • Hover state toggle is used to turn on and off hover effects when the user hovers the mouse over a cell.

You can also decide to use an image as a grid background. Upload it in the Background Image section and then specify its width, height and opacity if needed.


Example 1 - Shading Question with ByCount type of validation.

Source
{
    "instant_feedback": true,
    "canvas": {
        "cell_height": 2,
        "cell_width": 2,
        "column_count": 5,
        "row_count": 5
    },
    "stimulus": "<p>Highlight 40% of the cells on the grid below.</p>",
    "type": "simpleshading",
    "validation": {
        "scoring_type": "exactMatch",
        "valid_response": {
            "score": 1,
            "value": {
                "method": "byCount",
                "value": 10
            }
        }
    }
}


Example 2 - Shading Question using math, ByCount type of validation.

Source
{
    "instant_feedback": true,
    "is_math": true,
    "canvas": {
        "cell_width": 2,
        "cell_height": 2,
        "column_count": 6,
        "row_count": 1
    },
    "stimulus": "<p><strong>Use this model to solve the problem.<\/p><p>Click parts of the model to shade \\(\\dfrac{1}{3}\\) of the whole model.<\/strong><\/p>",
    "type": "simpleshading",
    "validation": {
        "scoring_type": "exactMatch",
        "valid_response": {
            "score": 1,
            "value": {
                "method": "byCount",
                "value": 2
            }
        }
    }
}


Example 3 - Shading Question with Author Shaded cells and ByLocation type of validation.

Source
{
    "instant_feedback": true,
    "canvas": {
        "cell_height": 1.5,
        "cell_width": 1.5,
        "column_count": 4,
        "row_count": 4,
        "shaded": [
            [
                1,
                1
            ],
            [
                2,
                1
            ],
            [
                2,
                2
            ],
            [
                1,
                4
            ],
            [
                2,
                4
            ],
            [
                3,
                4
            ],
            [
                4,
                4
            ],
            [
                3,
                3
            ],
            [
                3,
                1
            ],
            [
                4,
                1
            ],
            [
                4,
                2
            ],
            [
                4,
                3
            ]
        ]
    },
    "stimulus": "<strong>Click two squares to increase the perimeter of the figure&nbsp;</strong>",
    "type": "simpleshading",
    "validation": {
        "scoring_type": "exactMatch",
        "valid_response": {
            "score": 1,
            "value": {
                "method": "byLocation",
                "value": [
                    [
                        1,
                        1
                    ],
                    [
                        2,
                        1
                    ],
                    [
                        2,
                        2
                    ],
                    [
                        1,
                        4
                    ],
                    [
                        2,
                        4
                    ],
                    [
                        3,
                        4
                    ],
                    [
                        4,
                        4
                    ],
                    [
                        3,
                        3
                    ],
                    [
                        3,
                        1
                    ],
                    [
                        4,
                        1
                    ],
                    [
                        4,
                        2
                    ],
                    [
                        4,
                        3
                    ],
                    [
                        1,
                        2
                    ],
                    [
                        1,
                        3
                    ]
                ]
            }
        }
    }
}


Example 4 - Shading Question with cell background image.

Source
{
    "instant_feedback": true,
    "background_image": {
        "height": 30,
        "opacity": 20,
        "width": 30
    },
    "canvas": {
        "cell_height": 2,
        "cell_width": 2,
        "column_count": 10,
        "row_count": 1,
        "img_src": "//assets.learnosity.com/organisations/1/apple_201411519113.jpg"
    },
    "stimulus": "<p>Jane needs <strong>five</strong> apples to make her pie.</p><p>Click on the boxes to display the number of apples Jane needs.</p>",
    "type": "simpleshading",
    "validation": {
        "scoring_type": "exactMatch",
        "valid_response": {
            "score": 1,
            "value": {
                "method": "byCount",
                "value": 5
            }
        }
    }
}


Example 5 - Shading Question with Author Hidden and Outer Borders.

Source
{
    "instant_feedback": true,
    "border": "outer",
    "canvas": {
        "column_count": 5,
        "hidden": [
            [
                2,
                3
            ],
            [
                1,
                3
            ],
            [
                4,
                3
            ],
            [
                5,
                3
            ],
            [
                2,
                4
            ]
        ],
        "row_count": 5
    },
    "is_math": true,
    "stimulus": "Click on the cells to shade&nbsp;\\(\\frac{1}{2}\\)of the model.",
    "type": "simpleshading",
    "validation": {
        "scoring_type": "exactMatch",
        "valid_response": {
            "score": 1,
            "value": {
                "method": "byCount",
                "value": 10
            }
        }
    }
}


Example 6 - Shading Question with background image, byLocation type of validation.

Source
{
    "instant_feedback": true,
    "background_image": {
        "src": "//assets.learnosity.com/organisations/1/graph_image.png"
    },
    "canvas": {
        "cell_height": 2,
        "cell_width": 2,
        "column_count": 4,
        "row_count": 5
    },
    "stimulus": "<p>Highlight the cells under the curve.</p>",
    "type": "simpleshading",
    "validation": {
        "rounding": "none",
        "scoring_type": "partialMatchV2",
        "valid_response": {
            "score": 1,
            "value": {
                "method": "byLocation",
                "value": [
                    [
                        2,
                        1
                    ],
                    [
                        2,
                        2
                    ],
                    [
                        3,
                        3
                    ],
                    [
                        3,
                        2
                    ],
                    [
                        3,
                        1
                    ],
                    [
                        4,
                        1
                    ],
                    [
                        4,
                        2
                    ],
                    [
                        4,
                        3
                    ],
                    [
                        5,
                        3
                    ],
                    [
                        5,
                        2
                    ],
                    [
                        5,
                        1
                    ]
                ]
            }
        }
    }
}