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. 

Draggable items are always set as Front. You cannot change the z-order of a draggable item, but you can change the z-order of a Drop Zone. 

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:

Clipart Acknowledgements: