Table of Contents
Feature 1: Border Padding
What is it?
The ability to add an inside margin to your text boxes, captioned images, multi-place choice container, etc.
Where do I find it?
The "padding" value of an element can be found in the Border Properties section of the Properties Panel on the right side of the Studio screen.
What can I use it for?
You can use padding to quickly create textboxes or images with borders. Instead of making two separate objects, one for the text and one for the border, you can create a single item that can be moved or clicked as one object.
You can see a simple text box with a 1 pixel black border and 50 pixels of padding in the example below.
This can be used for more than visual decoration. You can use the 'padding' element to create an item that is functionally larger than it looks. In the following example, there are two images with padding applied to them. One of them is marked as a 'correct' answer, the other is marked as 'incorrect.'
Both image elements have 30 pixels of padding applied to them. The effect is that the bounding box for the image is much larger than the image itself. This means it's easier to click or tap on the images than it would be if there was no padding. We can see the difference this makes when the elements are small.
This screenshot is taken directly from the Deck Player. As you can see, the clickable area around the circle is much larger than the circle itself. This is a simple application of the padding property, experiment and see what ideas you can come up with!
Feature 2: Zoom to Fit Images
What is it?
Images now have three sizing options:
- Default: The image maintains its aspect ratio and scales based on the size of its container.
- Stretch to fit: Distorts the image to fill the entire container.
- Zoom to fit: Zooms the image to fill the entire container, but maintains the original aspect ration. Clips the image to fit in some situations.
Where do I find it?
You can find the setting in the Image Property panel of any image element.
What can I use it for?
The additional options can help you format your images. To show what they do there are three examples below. Each of the images uses the same picture of a green circle.
Default Sizing:
Stretch to fit:
Zoom to fit:
Feature 3: Scrollable Text
What is it?
Text boxes that can scroll.
Where do I find it?
You can make a text box scrollable using the Text Properties panel of any text box element.
What can I use it for?
You can fit more text inside of an individual card or text box using the scrollable text element.
In the example below, the text box has been given 20 pixels of padding and made to be scrollable. As you can see, the bottom of the text box appears to have no padding. This is because the text continues. The padding is applied at the end of the text content and not to the bounding box.
Before scrolling:
After scrolling:
To scroll through the text, you can use your mouse wheel or tap and drag on a phone, tablet, or other touch screen device. It might be useful to add a small caption near the scrollable text box so that students know that there is more to read!