Submit a request
Submit a request


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 number 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 shaded 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.

You can also specify colored borders for the main canvas area to create interesting variants of the question type by providing additional context on the canvas area's orientation. 


Figure 4: Colored border options for the canvas area.

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.

More options


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 - used to turn hover effects on and off when the user hovers the mouse cursor 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.



Was this article helpful?

Did you arrive here by accident? If so, learn more about Learnosity by clicking here.