Help
Content Frames

This feature is currently in BETA. Changes may occur before the final release.

Content Frames allow developers to change the visual and functional aspects of adornments around course content in the Content Player, ActivityPlayer, and CoursePlayer components. The image below shows the CoursePlayer rendering an assessment. The area of the content frame is between the red and green rectangles.

Specifying a Content Frame

You can override the default content frame for one item, for all items in a course, or for all courses in your domain.

Item

Set the contentframe element of the Item Data to the resource in the course for the content frame. You must call DLAP's PutItems command directly as there is currently no BrainHoney UI to set this value.

Course

Add a contentframe element to the Course Data with the appropriate itemtype attribute and the content frame's course resource path. You must call DLAP's UpdateCourses command directly as there is currently no BrainHoney UI to set this value.

Domain

Add a contentframe element to the <contentframes> element in the Customization XML. Set the itemtype attribute to the type, and the path attribute to the location of the resource.

Creating a Content Frame

A content frame is a VHTML file with a couple of special replacement tags:

<%ContentFrameContent%>

The ContentFrameContent replacement tag indicates the location of the course content. Because the content controls its own scrolling, this tag should be placed in a div with non-default positioning. See Components for a positioning example.

<%ContentFrameAPI%>

BrainHoney replaces the ContentFrameAPI tag with a Javascript object that contains methods and properties that allow you to access data about the content, render appropriate controls for the content (such as buttons and time limits for timed assessments), and manage the content in response to end-user interaction with the controls. For example, you can use the API to render a "Details" button, and when the end-user clicks it, direct BrainHoney to show grade details for the current user viewing the content.

You use this tag in a Javascript assignment statement like this:

<script type="text/javascript">
    var api = <%ContentFrameAPI%>;
    // TODO: Perform your frame-specific code right here
</script>

See ContentFrame API for a description of the properties and methods.

Standard Frame

You can download BrainHoney's standard content frames for assessment and homework item types below:

Sample Custom Frame

This VHTML page generates a frame with header and footer areas surrounding the content.

<div style="background-color:Green;padding:20px">
  <div style="background-color:White;height:20px">Header</div>
</div>
<div style="background-color:Yellow;position:absolute;
            top:60px;bottom:60px;left:0px;right:0px">
  <div style="position:absolute;top:20px;left:20px;right:20px;bottom:20px;
              background-color:Aqua">
    <%ContentFrameContent%>
  </div>
</div>
<div style="background-color:Red;position:absolute;
            bottom:0;height:60px;left:0px;right:0px">
  <div style="background-color:White;height:20px;margin:20px">Footer</div>
</div>
<script type="text/javascript">
    var api = <%ContentFrameAPI%>;
    // TODO: Perform your frame-specific code right here
</script>

See Also
<contentframes> ContentFrame API VHTML Files and Replacement Tags