Creating a Timeline Activity
Overview
The Timeline activity type creates an ordered timeline that users can navigate through, date by date.
Creating the Activity
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.
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. These are the most common settings:
| Setting | Description |
|---|---|
| Title | The name for the activity. |
| Description | The description for the activity shown to visitors. |
| Preview | The image displayed for the activity in Exhibit Mode. |
| Introduction Video | The video displayed under the Activity Menu to provide a video introduction to the activity. |
| Audience | Each Program can have custom audiences groups, which are included as a way to help sort activities for predefined demographics. When setting up the kiosk as part of their pop-up exhibit, facilitators have the power to configure which activities they think would best fit their audience and what they’re trying to achieve. Read More: Defining CLIO Audiences
|
| Theme | Each Activity can have a configured theme that allows each activity's aesthetic to vary slightly from the primary interface. Read More: Creating CLIO Activity Themes
|
| Attributions | Notifications for copyrighted content used within the activity. |
| Acknowledgements | Notifications of appreciation for content creators. |
Drafting the Content
Open the provided Content Template for drafting the Timeline 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 Timeline activity type. This activity type displays date slides, each with an optional image and rich text. Depending on the date format you choose to use, you may need to change the date width setting. For most date formats, a width of between 300 and 500 is a good starting point.
Now, we can begin to work on the date slides we want to add. For each date we wish to display, we will need to duplicate the template to add additional years. For this example, we’ll use three date slides in total.
Now that we’ve duplicated the template, we can begin filling in the missing data. We will need a designation for the date slide (such as a date, year, or other identifier), as well as an image and rich text description.
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 Timeline 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 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 date slides within our activity, so we should start by making sure we have three date slides within the configuration file.
Within this configuration file, the first date slide within the activity is labeled as ‘Year 1’, underneath the Dates object. If we click on the small box to the left of ‘Year 1’, we can choose to duplicate it as many times as we need to create enough slides.
We have three date slides we would like to add to the activity, so we will need to duplicate this field once. After this is done, we will need to rename the fields we just duplicated. Currently, it will be named “Year 2 (copy)”. It is important that these keys be unique, so we will rename it “Year 3”.
Now, we start to copy over the information we drafted earlier and provide more information to the interface about the activity we’re creating. Using JSONEditorOnline, we can simply click on the values to edit them. Copying text from your drafting template, you can paste it into the appropriate fields. Let’s start with the names for each date slide. In our example content template, we defined three different date slides. This designation, or year, can be used to replace “Year 1”, “Year 2”, “Year 3”, etc. Once we’ve replaced the year designations, we can continue by defining each year’s image and rich text content.
Options
Timeline Configuration
These are configuration settings for the timeline.
| Property | Description | Expected Parameters | Examples |
|---|---|---|---|
| Date Width | The width, measured in pixels, for each date along the bottom of the activity. | Integer; 0 - 9999. |
Event Configuration
These are configuration settings for each event within this activity. You can have an unlimited number of events.
| Property | Description | Expected Parameters | Examples |
|---|---|---|---|
| Image | The image that will be displayed on this date slide. | Image File | |
| Content | The rich text content that will be displayed on this date slide. | Rich Text |
| Documentation | |
|---|---|
| Installation | Look and Feel |
| Interaction Modes | Developing Activity Types |
| Creating an Interactive | Framework |
| Integrating CLIO | Contribute |
