Difference between revisions of "Creating a Path Finder Activity"

Latest revision as of 19:45, 31 October 2022

This section contains CLIO documentation.

This section requires photographs, illustrations or screenshots.

Overview

The Path Finder activity type is a visual activity that uses a series of multiple choice questions to chart a path from an origin to a destination. Each question’s options can have additional information that is used to provide context to the choice and help shape their answer. As the user progresses, they can view the correct answer from the previous questions to help build connections.

Read More: Pathfinder (activity type)

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.

Read More: Defining a CLIO Activity

Drafting the Content

Download the template.

This section could use more detail. You can help by expanding it.

Coding the Activity

Download the template.

Edit the template.

This section could use more detail. You can help by expanding it.

Options

Origin Configuration

These are configuration settings for this activity's origin point. This is the starting point for the Pathfinder activity, which branches out into the four options.

Property	Description	Expected Parameters
Title	The title displayed below the origin point.	Plain Text
Image	The image displayed on the origin points card.	Image File
Description	Look Closer description that is displayed when the user touches the origin card.	Rich Text

Question Configuration

These are configuration settings for each question that is displayed. There are a total of four questions that guide the user through the activity.

Property	Description	Expected Parameters
Prompt	This is the question prompt that is displayed alongside the multiple choice options.	Plain Text
Title	This is the heading for the column of options for this question.	Plain Text
Option 1 – Title	This is the title that is visible in the first option button.	Plain Text
Option 1 – Description	Look Closer description that is displayed when the user touches the Look Closer button on the question option.	Rich Text
Option 2 – Title	This is the title that is visible in the second option button.	Plain Text
Option 2 – Description	Look Closer description that is displayed when the user touches the Look Closer button on the question option.	Rich Text
Option 3 – Title	This is the title that is visible in the third option button.	Plain Text
Option 3 – Description	Look Closer description that is displayed when the user touches the Look Closer button on the question option.	Rich Text
Correct Answer	The correct answer from the available options.	"1", "2", "3", or "4"
Responses – Correct	Look Closer content displayed when the user selects the correct answer.	Rich Text
Responses – Incorrect	Look Closer content displayed when the user selects an incorrect answer.	Rich Text

Destination Configuration

These are configuration settings for this activity's destination point. This is the destination point for the Pathfinder activity, which is the end of the path.

Property	Description	Expected Parameters
Title	The title displayed below the destination point.	Plain Text
Image	The image displayed on the destination points card.	Image File
Description	Look Closer description that is displayed when the user touches the destination card.	Rich Text

Documentation
Installation	Look and Feel
Interaction Modes	Developing Activity Types
Creating an Interactive	Framework
Integrating CLIO	Contribute

@@ Line 1: / Line 1: @@
-{{NeedsDemonstration}}
+{{DocumentationPage}}{{NeedsDemonstration}}
 ==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.
+The Path Finder activity type is a visual activity that uses a series of multiple choice questions to chart a path from an origin to a destination. Each question’s options can have additional information that is used to provide context to the choice and help shape their answer. As the user progresses, they can view the correct answer from the previous questions to help build connections.
-==Options==
-====Configuration====
+{{See|Pathfinder (activity type)}}
-These are configuration settings specific to this activity type.
+==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:
+{| class="wikitable"
+! 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.{{See|Defining CLIO Audiences}}
+|-
+|Theme
+|Each Activity can have a configured theme that allows each activity's aesthetic to vary slightly from the primary interface.{{See|Creating CLIO Activity Themes}}
+|-
+|Attributions
+|Notifications for copyrighted content used within the activity.
+|-
+|Acknowledgements
+|Notifications of appreciation for content creators.
+|}{{See|Defining a CLIO Activity}}
+===Drafting the Content===
+{{Drafting Template|Activity Type=Path Finder|URL=https://cliomuseums.org/clio/templates/drafting/Path%20Finder.docx}}{{Stub}}
+===Coding the Activity===
+{{Coding Template|Download URL=https://cliomuseums.org/clio/templates/content/pathfinder.json|Edit URL=https://cliomuseums.org/jsoneditor/?file=https://cliomuseums.org/clio/templates/content/pathfinder.json}}{{Stub}}
+== Options ==
+====Origin Configuration====
+These are configuration settings for this activity's origin point.  This is the starting point for the Pathfinder activity, which branches out into the four options.
 {| class="wikitable"
 !Property
@@ Line 11: / Line 54: @@
 !Examples
 |-
-|Scale to Fit
+|Title
-|Should the image be scaled to fill the screen, or should it remain at its full size and be centered?
+|The title displayed below the origin point.
-|True or False
+|Plain Text
-|[[File:Scale to Fit - Small.png|center|300x300px|Scale to Fit - Small Screen|link=https://cliomuseums.org/wiki/index.php/File:Scale_to_Fit_-_Small.png]][[File:Scale to Fit - Large.png|center|300x300px|Scale to Fit - Large Screen|link=https://cliomuseums.org/wiki/index.php/File:Scale_to_Fit_-_Large.png]]
+|
 |-
 |Image
-|This is the image that will be annotated.
+|The image displayed on the origin points card.
 |Image File
-|[[File:Image.png|center|300x300px|Image source for the background|link=https://cliomuseums.org/wiki/index.php/File:Image.png]]
+|
 |-
-|Header
+|Description
-|''Optional.''  This can be used to display a "name plate" in the bottom right corner.
+|Look Closer description that is displayed when the user touches the origin card.
+|Rich Text
+|
+|}
+==== Question Configuration ====
+These are configuration settings for each question that is displayed.  There are a total of four questions that guide the user through the activity.
+{| class="wikitable"
+!Property
+!Description
+!Expected Parameters
+!Examples
+|-
+|Prompt
+|This is the question prompt that is displayed alongside the multiple choice options.
 |Plain Text
-|[[File:Header.png|center|300x300px|Header that is used for the "name plate".|link=https://cliomuseums.org/wiki/index.php/File:Header.png]]
+|
 |-
-|Description
+|Title
-|''Optional.''  This is the description displayed when the Header "name plate" is touched.
+|This is the heading for the column of options for this question.
+|Plain Text
+|
+|-
+|Option 1 – Title
+|This is the title that is visible in the first option button.
+|Plain Text
+|
+|-
+|Option 1 – Description
+|Look Closer description that is displayed when the user touches the Look Closer button on the question option.
+|Rich Text
+|
+|-
+|Option 2 – Title
+|This is the title that is visible in the second option button.
+|Plain Text
+|
+|-
+|Option 2 – Description
+|Look Closer description that is displayed when the user touches the Look Closer button on the question option.
+|Rich Text
+|
+|-
+|Option 3 – Title
+|This is the title that is visible in the third option button.
+|Plain Text
+|
+|-
+|Option 3 – Description
+|Look Closer description that is displayed when the user touches the Look Closer button on the question option.
 |Rich Text
-|[[File:Description.png|center|300x300px|link=https://cliomuseums.org/wiki/index.php/File:Description.png]]
+|
+|-
+|Correct Answer
+|The correct answer from the available options.
+|"1", "2", "3", or "4"
+|
 |-
-|Dimensions - Height
+|Responses – Correct
-|The pixel height of the image to be annotated.  This is used by ScaleToFit.
+|Look Closer content displayed when the user selects the correct answer.
-|Unitless integer [ 0 - 9999]
+|Rich Text
-|[[File:Height.png|center|300x300px|Height of the image|link=https://cliomuseums.org/wiki/index.php/File:Height.png]]
+|
 |-
-|Dimensions - Width
+|Responses – Incorrect
-|The pixel width of the image to be annotated.  This is used by ScaleToFit.
+|Look Closer content displayed when the user selects an incorrect answer.
-|Unitless integer [ 0 - 9999]
+|Rich Text
-|[[File:Width.png|center|300x300px|Width of the image|link=https://cliomuseums.org/wiki/index.php/File:Width.png]]
+|
 |}
-==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.
-{{See|Defining a CLIO Activity}}
+==== Destination Configuration ====
-===Drafting the Content===
+These are configuration settings for this activity's destination point. This is the destination point for the Pathfinder activity, which is the end of the path.
-{{Drafting Template|Activity Type=Path Finder|URL=https://cliomuseums.org/clio/templates/drafting/Path%20Finder.docx}}Open the provided Content Template for drafting the Annotated Image 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.
+{| class="wikitable"
+!Property
-Next, we can start to write the content needed for the Annotated Image activity type.  This activity type displays an image and provides additional context to help inform users about areas of interest.
+!Description
+!Expected Parameters
-First, we need to decide on the image we would like to use, and how to describe it. You are required to provide a location for each image, but you are not required to provide a title or description.  Entering this information will generate buttons along the bottom of the screen providing context for the image.  Finally, we should decide whether or not we want this image to scale with the window, or remain centered.
+!Examples
+|-
-Once we have the images decided, we can begin to work on the Look Closer buttons.  To help visualize the activity, it may be helpful to mark whether you are going to use fixed or invisible Look Closer buttons, or whether we want users to be able to hide them.  For each button we wish to add, we will need to duplicate the template to add additional buttons.  For this example, we’ll only need one Look Closer button.
+|Title
+|The title displayed below the destination point.
-Now that we’ve duplicated the template, we can begin filling in the missing data.  We will need a title for the Look Closer button, that is displayed within the pop-up window, as well as the gallery content we’d like to display when the button is clicked.  Additionally, we can choose which  icon to use and how to scale it within the button.
+|Plain Text
+|
-Each Look Closer button can be configured to appear at a different place on the image, so we will need to choose “x” and “y” coordinates for each button.  This position, measured in pixels, is stored as (x,y) coordinates relative to the top left corner of the screen (0,0).  Example: entering (100,100) will move the Look Closer button right and down by 100 pixels.  If you have the “fixed” option set to false, you can also set the radius of each button.
+|-
-===Coding the Activity===
+|Image
-{{Coding Template|Download URL=https://cliomuseums.org/clio/templates/content/pathfinder.json|Edit URL=https://cliomuseums.org/jsoneditor/?file=https://cliomuseums.org/clio/templates/content/pathfinder.json}}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 Annotated Image activity.  This can be done in a plain text editor, but for the purpose of this manual we will be using jsoneditoronline.org/.
+|The image displayed on the destination points card.
+|Image File
-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 one Look Closer button within our activity, so we should start by making sure we have one Look Closer buttons within the configuration file.
+|
+|-
-Within this configuration file, the first Look Closer button within the activity is labeled as ‘1’, underneath the Tooltips object.  You’ll notice that there is also a second tooltip already, titled ‘2’.  For this activity, we don’t need it and can remove it by clicking the small box beside ‘2’.  From there, we can select ‘Remove’ to delete it.
+|Description
+|Look Closer description that is displayed when the user touches the destination card.
-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 configuration information, for our image and our Look Closer buttons.
+|Rich Text
+|
-First, we can configure the image we would like to use for the activity.  If we want to display informational placards about each image, we can also enter the “Header” and “Description”.  Based on how we want to utilize the activity type, we can also set our “References Configuration”, which is used for changing how we want to display the Look Closer buttons.
+|}
+{{DocumentationNavigation}}
-Now that we’ve configured our image and decided how we want to display our Look Closer buttons, our final step will be adding them to the activity.  Previously, we removed the extra template tooltip to ensure that we just one for our activity.
-Using what we wrote in our content template, we can begin to populate these fields.  Remember: position is entered in pixels, relative to (0,0), which is defined as the upper left corner.  Radius will be ignored if you’re Look Closer buttons are configured to be “fixed”.  We also need to define a custom icon, if we want one, and how it should be scaled.
-Finally, we need to enter the images and captions that we want to use for our Look Closer pop-ups.  Within our content draft, we had chosen to use two images and our configuration file already has space for two images.
-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.