This article will provide an overview of z order and how to use it when creating Boom Cards.


Z Order Basics

Z order refers to instructions for the overlapping of two-dimensional objects. In Boom Learning, this means the instructions for the stacking of widgets (text, image, container, etc). Setting the z order determines what items are in front of or behind in relation to each other. 

For example, this card uses an image of a tree and a separate image of an apple. When trying to put the apples on the tree, however, the apples "disappear" behind it. This is because the apples are further back in the z order, and the tree is in the front.  

To change this, look at the z order option in the card editing pane.

  • Rear sends the selected item(s) to the very back of the z order. They will appear behind all other elements on a card.
  • Front sends the selected item(s) to the very front of the z order. They will appear over all other elements on a card.
  • Back and Fwd send the selected item(s) backward or forward in the z order, but not to the very back or front. This can be used for layering different elements on a card.

In our example with the tree and apple images, the z order of the tree should be changed to Rear. First, click on the image to select it. It should have a blue border around it to indicate it has been selected.

Next, click Rear in the z order options. The tree image is sent to the very back of the z order, and the apples now appear on top of it!


Using Z Order with Draggable Items

Playing with the z order can be used to create some fun drag and drop answer scenarios, such as a monster eating a cookie or placing items into a shopping cart. 

Fill-In-The-Blank Navigation and Z Order

The fill-in-the-blank answer format inserts a text box onto a card that students can type an answer into. If multiple fill-in-the-blank boxes are on one card, a student can use their Tab key to move to the different boxes without using their mouse.

Tab key navigation follows the z order of the text boxes from Rear to Front. This usually is the default order when the boxes are consecutively placed onto a card, but if a student experiences issues with tab navigation seemingly moving through the boxes in a random order, you may want to double-check the z order. The below example shows the z order for the three fill-in-the-blank boxes:

This video will show how to use Z Order to Optimize for Switch or Tab Navigation. 

For more information about how to make your Boom Decks accessible check out this article: Making your Self-Made Boom Decks Accessible

Clipart Acknowledgements: