Virtual Materials Toolset: Tutorial 2: Editing Cards – UnitusTI Help Center

Introduction

Initial design

Creating the cards

Editing a Card

Changing the background color

Updating the label position, color, and font

Inserting an additional Label

Adding content to the back of the Card

Adding a Picture to the back of the card

Duplicating pictures

Edit the other Cards

Create the slide

Enabling animation effects

Preview the Slide

Final Considerations

Additional resources

Introduction

In Tutorial 1 you learned how to create Cards using the wizards.

In this tutorial, you will learn how to edit the Cards by changing background colors, adding more labels and pictures, and putting content on both sides of a card.

Initial design

As we did the previous tutorial, we began with a draft of the design that we want to achieve:

We want to implement an activity where the client sees a set of five cards containing multiple pictures of animals (from one to five).

The goal is to ask the learner questions like “Pick the card with THREE animals”.

Once the learner clicks a card, the card will flip to display the symbol and the name of the associated number on the other side.

We will place the cards in unaligned positions within the slide.

Creating the cards

You can use the wizard to create each card; for example, select the layout with only a label. Then, you can edit each card to add the additional content in another step.

Visit the “Cards” option in the pack to do this exercise (It is recommended to create a new Pack).
Select the “New” button in the Cards area to launch the new Card Wizard.
Provide a name for the card. Example: “One”.
Select a layout with only a label on it.
Provide a text for the label. Example: “One”.
Close the card editor screen to go back to the “Cards” screen.

Repeat this process for the five cards. In the end, the Cards screen will look like this:

Editing a Card

Now that all the cards are created, it is time to edit each to match the design.

Click on the Card you want to edit. We are going to show the process for the card “Two”, and the process is similar for the rest.
Once the card is selected, the button “Edit” will be enabled at the bottom (if not, be sure that there is only one card selected).

Click on Edit to open the Card Editor Screen:

Changing the background color

The Card Editor will present the card properties on the left, a set of options that apply to the card as a whole. Here we are interested in editing only the background color. Click on the white rectangle under “Background Color” to pick the color of your preference. See the gif below for a demonstration.

Updating the label position, color, and font

By clicking on any element within the card, a set of controls will appear over the label(small colored squares). Also, the menu on the left present the properties of the selected label:

Note: you can go back to display the general card properties by clicking on the background area of the editor or by selecting the option “Card -> Information” in the top menu.

Click and drag the squares to rotate or move the label. T he blue square rotates the element; the red square changes the element’s position. For pictures, an additional green square allows resizing the image. For fonts, there is a slider on the left to resize the label.

We will move the label to the bottom of the card, to make room for the other labels that are in the design. In addition, we will change the color of the Label. The following gif shows a demonstration:

Press the “Save” option to store your changes.

Inserting an additional Label

You can insert multiple elements into a Card (either Labels or Pictures). We are going to insert an additional label for the symbol of the number two.

Select “insert - label” in the top menu.
Provide the text for the label. Example: “2”
Change the size, position and color as desired.
Press “save” to preserve your changes.

Adding content to the back of the Card

There are two options at the bottom of the card properties called “Front” and “Back”. “Front” is enabled by default, so all the content we added is on the card’s front side.

By clicking on the buttons “Front” and “Back”, you can flip the card to add or edit the content on the desired side.

Adding a Picture to the back of the card

With the Card’s Back Side selected, we click on the menu option “Insert - Picture” and browse for an animal picture to intert into the Card:

Note: you can also upload your pictures.

Duplicating pictures

At this point, the back of the Card will look like this:

If you select the picture you just added, you can view three control squares on their corners. Also, on the left, you can see options to duplicate and remove the selected picture.

As this card has the number “Two”, we will display two dogs. To do that, we should first resize and relocate our current dog to make room for the other one and then use the “duplicate” button to add a new copy of the picture. See the gif below for a demonstration:

Note: You can also add other pictures, not necessarily duplicate the same one.

Edit the other Cards

We need to repeat the previous steps for each one of the other cards. The screenshot below shows how they look at the end:

Create the slide

With all the cards finished, it is time to add them to a Slide.

Go to the “Slide” options in the top menu of the pack.
Click on the “New” button at the bottom.
Enter the name and the description for the slide.
Select a Layout. Example: “Four in a Row” [1]
Select the cards one to four for each one of the items in the layout wizard.

Note [1]: We don’t have a “five in a row” layout but we can manually insert the last card.

The following screenshot shows the current aspect of the slide:

Similar to the Cards Editor, the Slide Editor presents on the left common properties for the slide.

We can also insert additional elements into the slide.

We are going to insert the last card:

Click on “Objects - Insert Card”
Select the Card Five.
Use the control icons (red squares in each selected card) to reorganize their positions.

Enabling animation effects

Our design demands that the cards change positions randomly each time the slide is loaded (so the Learner doesn’t get used to identifying the correct answer by their place rather than by the card’s content).

Also, we want that each time a card is clicked, it flips, revealing the content on the other side.

To achieve these effects, first, we need to set the Selection Mode as Single in the slide properties and check the Shuffle on load option. The screenshot below shows how it will look:

Now, we have to click on each card to complete the configuration on each card:

Verify that Anchored is unchecked (if you check it, the card will be excluded from the shuffle effect and stay stationary).
Uncheck Selectable . When it is checked, the application will highlight the card when selected, but it doesn’t play well with the flip effect.
Check Auto Flip . This option makes the card flip when it is clicked.

Preview the Slide

Save all your changes and click the Preview option in the top menu. Notice how every time you press “Reload” the positions of the cards change.

Final Considerations

Cards can be created and managed outside a Slide because, in a larger project, you may want to reuse the same card in multiple slides.
Creating preliminary designs of your Slides and Cards is essential to help you to identify the best way to implement your project.
Did you know that the VM Toolset offers more tools to implement on your slides, adding more variation in the content with less effort? Visit the next tutorial to learn about Random Cards and their relation with Decks .