Content Creation

ClearXP comes with a built-in authoring tool for creating your own learning content. The editor's capabilities allow the creation of multi-screen activities consisting of static content, quizzes as well as more complex interactions.
Creating a New CMS Activity
1. Start by creating a new CMS Page activity as described in Adding Activities​
2. On the New Activity screen, give the Activity a name and click Save Changes
3. Scroll down to the Content section – the Content Type will have been pre-selected as CMS Page but you now need to select a Layout Template from the list available:
Blank Template
A bare-bones template that allows the creation of vertically scrolling content. Multiple screens can be linked together manually to build decision-tree navigation.
Full Screen Template
Content is centered vertically on the page with a linear navigation bar at the bottom of the screen. Useful for creating Powerpoint-Style content with navigation always moving to the next slide.
Layout Templates apply predefined styles and functionality to the activity being created. Select the one most appropriate for the content you wish to create.
4. Click Save and Edit Content to save your template selection and launch the authoring tool.
Using the Authoring Tool
The ClearXP authoring tool allows the creation of learning content by dragging Components onto the Canvas. Components have editable Properties that can be changed to customise their behaviour. Continue reading to learn how to control this functionality.
For the purpose of this documentation, all screenshots will be using the Blank Template layout.
Navigating the Interface
The Authoring Tool interface with a blank canvas
1.The Canvas – The area where all components can be dragged and dropped onto to add to the content on the page. Components added to this area can be interacted with by clicking to select and dragging to a new location or editing (see Editing Components below).
2.Device Preview – Select either Desktop, Tablet or Mobile to preview how the content will look on different screen sizes.
3.Selection Tabs –
Components: A list of components that can be dragged onto the Canvas to add content (see Adding Components below).
Properties: Will display any editable properties for the selected component (see Editing/Deleting Components below).
Styles: Override component styles such as font sizes, colours, etc. (see Changing Component Styles below).
Screens: Add or manage multiple screens for this content (see Adding New Screens below).
4.Editor Controls –
Preview: View a preview of the content in the editor
Save: Save any changes to a draft version
Publish: Save and publish changes for immediate access
Exit: Close the editor without saving.
Adding Components
Components Tab
With the Components tab selected, hover over the component you wish to add then click and drag to drag the component onto the Canvas. As you drag, a horizontal line will appear showing where the Component will be placed on the page when you release the mouse.
Some Components may have restrictions around where on the page they can be added – for example, quiz question components can only be added within a Quiz component. See the Component Reference at the bottom of this page to learn about all restrictions.
Editing/Deleting Components
Once a Component has been added to the canvas, it can be moved around or its properties can be edited to change its behaviour.
Start by clicking on the Component to select it.
The image component has been selected
A border will appear around the selected component which displays the following information:
1.The name of the selected component
2.The component toolbar –
Up Arrow: Click to select the parent/container component
Drag Handle: Click and drag to move this component within the canvas
Clone: Click to duplicate the component
Trash: Click to delete the component from the canvas
Selecting Properties in the Selection Tabs will reveal a number of component-specific properties that can be changed to alter the behaviour of the component.
Properties Tab for the Image component
The Properties tab is where non-visual aspects of the component can be set, such as selecting the image for an Image component or setting the options and correct response for a Multiple Choice component. See what properties are available for a given component in the Component Reference section below.
Changing Component Styles
With the Component selected, you can also edit many aspects of its visual style by selecting the Styles tab.
Styles tab
Simply edit each respective field to customise the styles as desired. Styles that have been edited will change to orange but these can be reset by deleting the input field.
Adding New Screens
Most templates include the ability to navigate between multiple screens. To add or manage existing screens, click the Screens tab.
Screens Tab
Click New Screen to create a new screen. You can edit the content on each screen by clicking the screen from the list to load that screen's content into the Canvas. To delete a screen, click the trash icon below its name.
Component Reference
The following is a list of all available components and any configuration options.
Common Components
Component
Description
Configuration Options
Text
Free text for writing formatted content.
​
Subheader
A block element with text for breaking up the page into sections.
​
Image
Upload or add an existing image to the page.
Alt Text - Associated with the image for screen-reader use.
Embed Code
Insert custom HTML code that may be supplied from YouTube, Vimeo, etc.
​
Layout Components
Component
Description
Configuration Options
Columns
Splits the page into two columns so content can be displayed side-by-side.
​
Learning Components
Social Components
Quiz Components
Component
Description
Configuration Options
Quiz
A container for quiz input elements, responsible for submitting and grading the quiz.
Quiz Name - The name of the quiz  for reporting purposes.
Submitted Message - Displayed after the quiz has been submitted.
Text Input
A free text input field for collecting open-ended responses.
Input Label - The label to display above this input field.
Multiple Choice
A drop-down selection of multiple responses.
Label - The label to display above this input field.
Choices - Name/Value pairs of possible selection options. Value will be used in reports as the selected response.
Rating Scale
Sets and displays the scale for Rating Question components.
Scale - Description/Score pairs for each of the possible scale ratings. Both Description and Score will appear in reports.
Rating Question
A question for the preceding Scale Rating. Ensure a Scale Rating exists in the content prior to this component, otherwise no options will be displayed.
​
You must add a Quiz component to the page before you can add any of the question-related input fields. All input fields must be nested underneath a Quiz to be functional.
​