Creating a Visual Thinking Activity

This section requires photographs, illustrations or screenshots.

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

Content Configuration

These are configuration settings for the activity.

Property	Description	Expected Parameters	Examples
Query	The question to display with the gallery of image and list of points.	Plain Text

Media Configuration

These are configuration settings for the media displayed by the activity.

Property	Description	Expected Parameters	Examples
Image	The image we would like to add to the gallery.	Image File
Caption	The caption to be displayed below this image when it is in gallery view.	Plain Text

Observation Configuration

These are configuration settings for the observations displayed by the activity.

Property	Description	Expected Parameters	Examples
Header	The header that will be shown for this bullet point.	Plain Text
Content	The text to be displayed below this bullet point.	Rich Text

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.

Read More: Defining a CLIO Activity

Drafting the Content

Download the template.

Open the provided Content Template for drafting the Visual Thinking 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 Visual Thinking activity type.  This activity type displays a gallery of images, as well as a list of bullet points or observations that users can interact with to learn more about the images based on their interests.  Each image in the gallery can have a plain text caption to provide context.

For this activity, we can copy the template for Image 1 and create as many duplicates as we need to have enough images for our gallery.   If we want a total of three images, we can duplicate Image 1 two times.  To keep organized, we can rename these to Image 2 and Image 3.  This activity provides bullet points that the user can interact with, so we will also need to create duplicates of Bullet 1 to make sure we have enough bullet points.  If we want a total of two bullet points, we can duplicate Bullet 1 one more time.

First, we need to create a short query or a statement that can facilitate the user’s interaction.  For each image, we are required to have the location to the image we wish to display. It is optional to add descriptive captions for the images, but they can provide important context to guide their observations.  For each bullet point observation, we are required to have a title header and the rich text content we wish to display when the user clicks that title header.

Coding the Activity

This section requires a downloadable template.

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 Visual Thinking activity.  This can be done in a plain text editor, but for the purpose of this manual we will be using jsoneditoronline.org/.  

First, 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 images for our gallery and two bullet point observations, so we should start by making sure we have enough of each within the configuration file.

The first image in our gallery is labeled as ‘1’, underneath the Media 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 questions.  

For our example, we would need to duplicate it twice to have a total of three images.  After this is done, we will need to rename the fields we just duplicated.  Currently, it will be named “1 (copy)” or similar.  It is important that these keys be numeric and unique.  We will rename these two duplicates to be “2” and “3”.

We will also need to do this for our observation bullet points.   The first bullet point in our activity is labeled as ‘1’, underneath the Observations 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 bullet points.  For our example, we would need to duplicate it once to have a total of two bullet points.

After this is done, we will need to rename the fields we just duplicated.  Currently, it will be named “1 (copy)”.  It is important that these keys be numeric and unique within this object.  We will rename the duplicate to “2”.

First, we should enter our query or statement into “Query”.  We can now start filling out the empty fields for our images.  Under the first image, named “1”, we have the same information we entered into our content draft.  First, we put the relative location of our image into “Image”.  Next, we can put the plain text descriptive caption for this image into “Caption”.

Using this same technique, we can fill out the same information for the other two images, so that our gallery is complete.

Finally, we can follow a similar process to enter the data for our bullet point observations.  The first bullet point in our activity is labeled as ‘1’, underneath the Observations object.  We’ll see the same fields for the information we entered into our content draft.  First, we put the title into “Header”.  Next, we can put the descriptive content for this bullet point into “Content”.

Using this same technique, we can fill out the same information for the other observation.

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.