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.
To change this, look at the selectables list:
- To Rear sends the selected item(s) to the very back of the z order. They will appear behind all other elements on a card.
- To 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 "To 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 is usually 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 example below shows the z-order for the three fill-in-the-blank boxes:
Z Order is read from Top to bottom by accessibility tools
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!