Teacher

How do I use Content Templates?

Follow
Ryan Richins
  • Agilix team member

During the summer of 2017, we released a new Buzz UI, giving you the same features and functionality with a cleaner, simpler user experience!

The feature(s) covered in this article are only included in the new Buzz UI. If you don't know which version you are using, review the differences and/or contact your system admin or Agilix account manager.

Content Templates make it easy to use third-party tools to create engaging activities that can be easily edited in Buzz.  

These templates allow authors to create activities using javascript tools (e.g., TextHelp, MathJax) with fields that can be opened and edited using Buzz's rich text editor. This allows teachers and other authors to use and easily make changes to these activities without losing formatting and functionality, or having to learn an external tool (or programming language).

For example, in this interactive matching activity, teachers and other course authors can use Buzz to easily edit the:

  1. Title
  2. Collapsable directions
  3. Matching options

In the simple editor, these components look like this:

Content Templates in three steps

There are three basic steps in building Content Templates that can be added to and edited in Buzz courses:

  1. Create an HTML file that, along with optional JSON and CSS files, define content areas, custom styles, editable fields, and other metadata in the template. Upload these files to Buzz as Course resources.
  2. Create a Buzz activity that references these files.
  3. Share the Content Template as an Activity Template in your domain.

1. Create your HTML, JSON, and CSS activity files

Content areas, custom styles, and other metadata are identified by your HTML file.

Depending on your familiarity with HTML, you can use the following example to see all of the supported metadata implemented in a simple Content Template HTML file. The sections below walk through each of the components shown here in greater detail.  

HTML example

In this example:

  • My Custom Template is the template's name.
  • The styles are defined by:
    • Inline data-buzz-styles meta tags
    • Inline HTML style tags
    • A CSS file (template.css)
    • A JSON file (templateStyles.json)
  • Two editable fields are defined:
    • A single-line, plain-text field labeled Page header with Content Title as initial text
    • A rich-text block field labeled Content block with One, Two, Three listed as initial text
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta data-buzz-template-name="My Custom Template" />
    <style>
      body {
        background: white;
        color: black;
      }
    </style>
    <link rel="stylesheet" type="text/css" href="template.css" />
    <meta data-buzz-styles-ref="templateStyles.json" />
    <meta data-buzz-styles='{ "paragraphStyles": { "red-para": "Red Text", "blue-para": "Blue Text" } }' />
  </head>
  <body>
    <h1 data-buzz-text="Page header">Content Title</h1>
    <p>Some text</p>
    <div data-buzz-content="Content block">
      <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
      </ul>
    </div>
  </body>
</html>				

Name your Content Template

Buzz let's you define a custom template name that appears as the activity editor's Content card sub-header.

To do so, put the desired title within a meta tag in the head of your HTML document as the data-buzz-template-name attribute. In this example, we use My Custom Template as the title.

  <meta data-buzz-template-name="My Custom Template" />

Create content blocks

For content blocks, you can define:

  • Single-line, plain-text editable fields with the data-buzz-text attribute.
<h1 data-buzz-text="Page header">Content Title</h1>
  • Editable blocks including full rich text editor tools with the data-buzz-content attribute.
  <div data-buzz-content="Content block">
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
  </div>

These examples would be rendered like this:

Define page styles

You may want to supply a list of predefined styles that the teacher, or author, can apply in rich text editors. This can help custom content fit your style guide. You can supply this list of predefined styles inline in the head of your HTML file or in an externally referenced JSON file

There are three ways to control styles with your HTML file:

  • HTML style tags
  • External CSS files
  • Predefined styles using external JSON files

Supported predefined styles

The JSON style properties described in the table are supported as predefined styles by Buzz. All predefined styles that reference CSS classes require the class to be supplied in the page CSS, otherwise no changes will be visible.

Style name Description
paragraphStyles Defines a hash object of custom styles for the selected paragraph. The key of each entry is the class name to apply to the paragraph. The value of each entry is the display name of the style.
imageStyles Defines a hash object of custom styles for the selected image. The key of each entry is the class name to apply to the image. The value of each entry is the display name of the style.
linkStyles Defines a hash object of custom styles for the selected link. The key of each entry is the class name to apply to the link. The value of each entry is the display name of the style.
tableStyles
Defines a hash object of custom styles for the selected table. The key of each entry is the class name to apply to the table. The value of each entry is the display name of the style.
tableCellStyles
Defines a hash object of custom styles for the selected table cell. The key of each entry is the class name to apply to the table cell. The value of each entry is the display name of the style.
inlineStyles Defines a hash object of custom, inline styles for the selected text. The key of each entry is the display name of the style. The value of each entry is the CSS definition of the inline style.

Here is a full example of a valid, predefined style, JSON file:

{
  "paragraphStyles": {
    "red-para": "Red Text",
    "blue-para": "Blue Text"
  },
  "imageStyles": {
    "box-image": "Image Box",
    "padding-image": "Add Padding"
  },
  "linkStyles": {
    "red-para": "Red",
    "caps": "All Caps"
  },
  "tableStyles": {
    "dashed-borders": "Dashed Borders",
    "thick-borders": "Thick Borders"
  },
  "tableCellStyles": {
    "bold": "Cell Header",
    "highlight": "Highlight"
  },
  "inlineStyles": {
    "Big Green": "font-size: 20px; color: green;",
    "Small Blue": "font-size: 14px; color: blue;"
  }
}

Predefined styles using external JSON files

External JSON files referenced with a meta tag in the head of your HTML file load predefined styles into the rich text editors for teachers and other authors to use when editing content.

  • Inline style definitions are copied with the activity and become a snapshot. To define inline JSON styles, add meta tags to the head of your HTML document with the data-buzz-styles attribute. The attribute value is a JSON object that must adhere to strict JSON syntax rules, including double quotes around key names and values.
<meta data-buzz-styles='{ "paragraphStyles": { "red-para": "Red Text", "blue-para": "Blue Text" } }' />
  • External JSON files with a relative reference to another course resource is copied with the activity. Reference external JSON files by supplying one or more meta tags in the head of your HTML document with the data-buzz-styles-ref attribute.
<meta data-buzz-styles-ref="templateStyles.json" />
  • External JSON files with an absolute reference allow you to change the style definitions even after content template activities are created or copied. Reference external JSON files by supplying one or more meta tags in the head of your HTML document with the data-buzz-styles-ref attribute.
<meta data-buzz-styles-ref="http://my.server/templateStyles.json" />

External CSS files

External CSS files referenced with a link tag in the head of your HTML file are also automatically loaded into the rich text editors.

  • Inline styles are copied with the activity and become a snapshot.
  • External CSS files with a relative reference to another course resource is copied with the activity.
<link rel="stylesheet" type="text/css" href="template.css" />
  • External CSS files with an absolute reference allow you to change the page styles even after the content template activities are created or copied.
<link rel="stylesheet" type="text/css" href="http://my.server/template.css" />

HTML style tags

The style tags you include in the head of your HTML file are automatically loaded into the rich text editors. In this example, the body's background and text colors (white and black) are defined using an HTML style tag.

  <style>
    body {
      background: white;
      color: black;
    }
  </style>

Upload HTML, CSS, and JSON files as Course Resources

You and your organization will decide how you want to structure your Course Resource folders and files. However you set them up, make sure you reference the file locations correctly.

You can upload your HTML file before you set up your activity in Buzz or when you create it: How do I upload and manage course resources?

2. Add Content Templates to your Buzz course

Teachers, content authors, etc. can create Content Templates:

  1. Open the Editor from the Main Menu.
  2. Click the Add to... button in the folder that want the Content Template activity in.
  1. Choose the Custom Activity type.
  2. Select Course resource as the Content type and:
    • Click Choose a course resource to find and select the HTML file described above if you've already uploaded it.
    • Click the upload (cloud) icon to upload the HTML file described above.
  1. Convert the activity into a Content Template by checking the This activity is a content template in Custom Activity editor > Settings > Advanced activity options.
  2. Configure the other activity settings using the Custom Activity editor.
  3. Save.

3. Share Content Templates

Admins can make Content Templates available for teachers and other course authors to edit and use:

  1. Create a course and add/create the desired Content Templates.
  2. Add that course to your domain's activity templates, so it appears as a tab when adding activities to a course (see Marine Biology 1 and Spanish templates in image).
  3. Once set up, teachers and other course authors can select the tab and add the desired Content Template.

Comments

Please sign in to leave a comment.