Creating a Slideshow Activity
Overview
Within our Getting Started Package, you will find a Template folder. We have provided a template for the configuration file, which is used by the CLIO interface to set up the activity. We also include a content drafting template created in Microsoft Word that can aid collaboration when creating activities as part of a development team.
Options
Creating the Activity
Define the Activity
All CLIO activities, regardless of their Activity Type, contain many of the same configuration settings. These are used to configure the screen and load the correct content. By defining this information, we can begin to draft more specific activity content. This information is included in both the drafting template and the coding template provided with each activity type.
Drafting the Content
Open the provided Content Template for drafting the Slideshow activity. First, we must decide on the basic descriptive information for the activity, such as the title, description, preview image and theme. This information is required because it is used by the CLIO interface to properly display the activity.
Next, we can start to write the content needed for the Slideshow activity type. This activity type displays horizontal slides that can be navigated by the user, as well as basement slides that exist beneath a slide, allowing the user to navigate vertically.
This activity can be configured to use one of five transitions that can be used during slide and background image changes. When you are using a low-powered computer, like a Raspberry Pi computer or our prototype kiosk, we recommend that you do not use any slide transitions as they can slow down the interface for users. The slideshow can also be configured to loop back to the first slide if a user navigates past the last slide. Enabling looping will work in both the horizontal and vertical direction.
If we are making a Slideshow activity with three slides, we can select the template for Slide 1, including Basement Slide 1, and copy the text. We are going to have a total of three slides, so we can paste the template text twice. To keep track of the slides, let’s rename them to Slide 2 and Slide 3.
We want our activity to have a title slide with our logo, so for Slide 1 we will be using a background image. The background image is dark, so we need the font color to be light; so we’ll use white, or #FFFFFF. Our title text will say “Welcome!” with a size of “3” (which equates to the CSS “em” unit) and its X position will be “50px” (move down 50px from the top of the screen). We don’t want there to be any centered text on the slide, so we will leave “content” empty. We also don’t need this slide to have any basement slides beneath it, so we can delete that section.
Now that we’ve finished our first slide, we can work on our second slide. We don’t want this slide to have a title, just rich text content, which we will enter into the “content” field. It will use the same background image and font color as our first slide.
We want our second slide to have one basement slide beneath it. This slide will use a different lightly-color background, so we’re going to want to use black text instead, or #000000. It won’t have a title, but it will contain rich text content.
We can use these same techniques to fill in the last slide, as well as any additional basement slides we’d like. After we have all of this information drafted, we can start to put it into the activity type configuration template so we can add the activity to CLIO.
Coding the Activity
The next step will be to take the content that was created in the Content template and begin to migrate it into the Configuration template. We will need to open the provided Configuration Template for drafting the Collections Objects activity. This can be done in a plain text editor, but for the purpose of this manual we will be using jsoneditoronline.org/.
This is how the configuration file will appear once opened within JSONEditorOnline. Our first step will be entering the configuration information we have previously drafted. We want our activity to disable both the slide transition and the background transition, we will set Transition to “none” and Background Transition to “none”. We want to enable looping, so we will click on the checkbox to change the option to “true”.
Next, we will be duplicating the necessary fields to ensure that we can enter all of the data that we’ve spent time drafting. In our previous example, we decided to use three slides for our activity, so we should start by making sure we have three slides within the configuration file.
The first slide within the activity is labeled as ‘1’, underneath the Slides object. If we click on the small box to the left of ‘1’, we can choose to duplicate it as many times as we need to create enough slides.
We have three slides we would like to add to the activity, so we will need to duplicate this field twice. After this is done, we will need to rename the fields we just duplicated. Currently, they will be named “1 (copy)” and “1 (copy 2)”. It is important that these keys be numeric and unique. We will rename them “2” and “3”, respectively.
We can now begin filling out the empty fields based on our draft. Under the first slide, named “1”, we will see “Configuration” and “Content”. We can begin to configure the appearance of the slide by opening the “Configuration” object.
Our content draft says we wanted to use a background image and, because it was darkly colored, we needed our font color to be white, or #FFFFFF. Our title will have a size of “3”, and its X position will be “50px”.
Now that we’re configured the appearance of the slide, we can enter the content for it. This will include the text we want to use for the title, the slide’s rich text content and any basement slides we want to add beneath this slide.
We can enter our title text, which we have drafted as “Welcome!”. We have also decided that we don’t want any rich text content for this slide.
Our content draft shows that we don’t have any basement slides beneath our first slide, so that means we’ll need to delete the basement slide template. When you view the Sub Slides object, you can see that it currently has one slide. Similar to duplicating, we can delete this slide by clicking on the box next to the slide and clicking Remove.
After deleting the basement slide from the Sub Slides object, we’ll see that it now says it is an (empty object) and lists the number of objects within it as {0}. We DO NOT want to delete the Sub Slides object, only the slide contained within it.
We can now move onto the second slide. In the same way as the first slide, we can enter all of the configuration information that we wrote in our draft. We are going to be using the same darkly-colored background that requires white text. We don’t need a title, but we would like to add rich text content, which we will enter into the “Slide” field. This second slide will also have one basement slide, which was already included in the template.
Now we can configure the basement slide that we want to have beneath this slide. When we open our first basement slide, which is named “1” underneath the “Sub Slides” object, we will see that it contains a configuration object, as well as our title and slide content.
Our content draft saw that we want to use a different lightly-color background that would require our text to be black, or #000000. This slide won’t have a title, but it will have some rich text content, which we will enter into the Content object. We can enter this information in a similar way to the top level slides.
Now, all we have left to do is create our third slide, using the techniques we learned during the first two slides. Once you are finished, you can download the finished JSON file by clicking ‘Save’ and then ‘Save to Disk’. This file can be copied to the Program’s @Activity folder, and the media can be copied to the Program’s @Media directory.
