Teacher

How do I use Content templates?

  • Updated:
    info_outline
    Created:

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

Coding required

The initial creation of Content templates (Step 1) requires coding experience (html, css, json), and should be done by a content developer with that knowledge. Once they've been created and added to Buzz, teachers and other content authors can easily edit and use them.

There's a video tutorial for this topic!

Use Content Templates to improve branding, functionality, and authoring

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

Coding required

This step requires coding experience (html, css, json), and should be done by a content developer with that knowledge. Once Content templates have been created and added to Buzz, teachers and other content authors can easily edit and use them.

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: 

<!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>
    <img data-buzz-image="Main thumbnail" src="[~]/images/jellyfish-3.jpg" alt="Jellyfish" />    
    <p>Some text</p>
    <div data-buzz-content="Content block">
      <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
      </ul>
    </div>
  </body>
</html>
Click to copy

This example is rendered like this for teachers and other content authors:

Before a teacher makes edits to this template, it is rendered like this for students:

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 for teachers:

Add replaceable images

You can add images with alt text that appear in the content template and that teachers can replace:

  • Use the data-buzz-image attribute where the value for the attribute appears for teachers as the label for the image picker.
    • In this example, the label will read Main thumbnail.
  • Use the src attribute as the path to the resource, with [~]/ at the start of the path to identify the image as an existing course resource.
    • In this example, the image is an existing course resource images/jellyfish-3.jpg.
  • Use the alt attribute to define the images alt text.
    • In this example, the alt text is Jellyfish.
<img data-buzz-image="Main thumbnail" src="[~]/images/jellyfish-3.jpg" alt="Jellyfish" />

This example is rendered like this for the teacher:

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:

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;"
  }
}
Click to copy

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 Add activity in the folder that you 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.

Additional articles

forum

Have a question or feedback? Let us know over in Discussions!

Articles in this section

See all 164 articles

Related articles