How to Upload Interactives

What are interactives?

Interactives are multimedia resources, such as games and activities, with which students can interact.  Interactives can be created in a flash or html format and can contain a single or multiple files.  Interactive is a variable specified in the Media Type General dropdown menu in the Metadata section of the Asset.  See an example of an Interactive

PBS LearningMedia provides ways to upload interactives that contain just one file (e.g.: an .swf file) or multiple files (html with associated files). 

How to upload multiple file interactives

Sometimes interactives are comprised of one single Flash file while other times many file types are necessary to create your interactive. Files can include anything from html to css and js. If your interactive consists of multiple files, you must download all the files using an Amazon Simple Storage Service (S3) compatible file transfer client and then paste the generated link into the PBS LearningMedia CMS as a pointer asset.  This section demonstrates how to create an interactive that contains multiple files.

What kind of files should I use?

Multiple file interactives can include an assortment of file types including html, css, jpg, js, and mp4.  View media format guidelines

A typical file structure might look like this:

Types of S3 clients

Download one of the following S3 clients to begin the file transfer process:

• http://cyberduck.ch/
• http://s3browser.com/ 
• http://www.bucketexplorer.com/
• http://www.cloudberrylab.com/free-amazon-s3-explorer-cloudfront-IAM.aspx

How to download an S3 client

• Open a search engine such as Google and type the term “S3 Client” into the search box.
• Click one of the choices presented in the search results or choose one of the following options:
  • http://cyberduck.ch/
  • http://s3browser.com/ 
  • http://www.bucketexplorer.com/
  • http://www.cloudberrylab.com/free-amazon-s3-explorer-cloudfront-IAM.aspx
• Click the download link that is provided on the site.  Sometimes there are different links for Windows and Mac so be sure to click the appropriate one.
• Follow the prompts provided.

• Open the S3 client on your computer.

Transferring files

When your interactive files are ready, transfer your files to the PBS server via the S3 compatible file transfer client.  This section demonstrates how to extract files from a .zip folder and upload your content to the PBS server.

• Open your S3 client.     
• Enter the following information into each corresponding field (Figure 1):

Figure 1

• Connect.
• Locate the folder that holds the files you want to upload and right click on the folder.
• Click WinZip.
• Click Extract to Folder C:Users/YourName/Desktop/Filename.zip (Figure 2). Choosing this option will keep all of your files in the same folder when extracted.

Figure 2

• Go to your S3 client and open the folder to which you want to add the files.  A personalized folder should have already been set up for you.
• Click the folder on your desktop that holds all of your files and drag it to the associated folder on the S3 client.
• All files upload.

How to generate URL for your pointer asset

• After you have uploaded your files, open a browser and type or copy and paste https://contrib.pbslearningmedia.org/ into the address bar.
• Append the folder name and the filename of the root file (i.e.: myfolder/index.html) to the end of the URL string.  Example (the portion in red represents what is manually appended):  https://contrib.pbslearningmedia.org/myfolder/index.html

Important Tips	Do	Don't
Write out the complete file name at the end of the URL.  Include the file extension (i.e.:.html)	http://d3tt741pwxqwm0.cloudfront.net/ myfolder/index.html	http://d3tt741pwxqwm0.cloudfront.net/ myfolder/index
Folders are case-sensitive.  Be sure to type the folder name exactly as it appears in the S3 client.	http://d3tt741pwxqwm0.cloudfront.net/ myfolder/index.html	http://d3tt741pwxqwm0.cloudfront.net/ myfolder/index.html

How to add your interactive to the CMS

When you add a multiple file interactive to the CMS you can begin with creating an asset. You do not need to add media since your media resides in the cloud.

• From the dashboard, click Assets on the left side navigation (Figure 1.1) or click the Create dropdown menu and click Asset (Figure 1.2).

Figure 1

• Type the name of the content project to which this asset belongs (Figure 2.1).  As you begin typing, a list of content projects appear.  Click the one you want.
• Click the Type dropdown menu and click Pointer (Figure 2.2).  This is very important since this tells PBS LearningMedia that the files reside outside of the CMS.
• Type the title of your asset (Figure 2.3).  To keep your files organized, this title should be the same as your resource.
• The Asset code and Slug auto-populate when you save the file (Figure 2.4).
• Click Save and continue (Figure 2.5).

Figure 2

• Click Show next to Poster Image (Figure 3).

Figure 3

• Click Browse and search your computer for the image you want to use to represent your asset.   This is the image that appears on your interactive page and in search results.
• Click Show next to Media File & Transcript (Figure 4.2).

Figure 4

• Copy and paste the URL into the External link textbox provided and append your folder and file name to the end (Figure 5.1).
• If you have an accompanying transcript file, type the full URL External transcript textbox (Figure 5.2).

Figure 5

• Type a description of your asset in the Description textbox (Figure 6.1).
• In the Asset type textbox, type Interactive (Figure 6.2).
• Click the Media type general dropdown box and click Interactive (Figure 6.3).
• Click the Media type specific dropdown menu and click the choice that best represents your asset (Figure 6.4).

Figure 6

Next steps

• The rest of the fields in the Asset section should be completed like any other asset.  Learn how to create an asset
• After you create an asset, create a resource for your interactive.
• Add multiple files to the CMS
• Create an interactive containing a single file