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 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:
Clipart Acknowledgements: