Skip to content
English
Customer portal
Contact us
  • There are no suggestions because the search field is empty.

Z Order - Moving Objects In Front Of Or Behind Other Objects

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

TABLE OF CONTENTS

 

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.  

Image of tree with some apples behind it and some apples off to the side.

 

 

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

 

Image of the card editing pane with a blue arrow pointing at the z-order option.

Image of the Z-order rearranging options.

 

 

  • 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.

Image of the tree and apples selected, indicated by the blue outline.

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!

Image of Z order options, showing that the rear option sends the element to the back, and the tree from earlier with the apples infront now.
 

 

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:

 

 

Image of Z-Order fill-in-the-blank-boxes explanation. 1st box is rear, 2nd box is between rear and front, 3rd box is in front.

 

Z Order is read from Top to bottom by accessibility tools

 

Image of Studio with the different elements following the Z-Order.

 

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:

 

If you have any further questions, please feel free to email us at help@boomlearning.com or call us at (833) WOW-BOOM. A real human will happily help you!