Components

NameDescription
AnchorPointSet an initial polygon for an ImageArea by dragging this tool into the ImageArea. The polygon defines the area's display form. You can modify the polygon by dragging at its lines or vertices.
AudioA component that plays audio files using the native audio support of the browser. (For more details see the extended description chapters following this components table.)
BackButtonA component which restores the displayed page in a WebBrowser with the previous page according to the stack of visited pages.
BookmarkA special button that opens a drop down menu with predefined menu items: Add Bookmark, Manage Bookmark and items to switch to already bookmarked pages. (For more details see the extended description chapters following this components table.)
ButtonA component that displays a button, i.e. a clickable control that triggers a command or an event.
CheckBoxA component that accepts a yes/no choice represented as check box.
ChildAreaAn area that embeds the currently selected child page. Initially it embeds the page assigned to it at design time via the 'Link Page' command. Use the 'setEmbeddedPage' operator to change the embedded page at assessment run time.
ComboBoxA component that allows to select an item from a drop down list of items.
ExternalPageFrameA component that embeds content from an external URL or some HTML/JavaScript code included in the item. Use the 'Set Page Address' command in the component's context menu to specify the URL. Use the 'Embedded HTML Explorer' on the left side to include HTML/JavaScript code into the item.
ForwardButtonA component which sets the displayed page in a WebBrowser to the next page according to the stack of visited pages.
FrameThe top level container of a page. Each page must have exactly one Frame as it's top level container.
GridAreaA component that plays the role of a container in panels with auto-layout feature.
HTMLTextFieldA component that displays static text with rich formatting functionality. It is similar to the TextField but does not provide text blocks and highlighting and does not support embedded images. (For more details see the extended description chapters following this components table.)
HomeButtonA component which sets the displayed page in a WebBrowser to the initial page according to the stack of visited pages.
ImageAreaA component that puts a selectable area on top of the image in an ImageMap. The area is bounded by a polygon (i.e. a closed figure composed of an arbitrary number of straight lines).
ImageFieldA component that displays an image.
ImageMapA component that displays an image decorated with text fields, buttons and selectable areas bounded by polygons. An image map constitutes a 'select group' that the decorating components may join as 'select group members'. (For more details see the extended description chapters following this components table.)
ImageTextFieldA component that displays static text with rich formatting functionality on top of the image in an ImageMap. It is similar to TextField but does not support embedded links, embedded images and text blocks. (For more details see the extended description chapters following this components table.)
InputFieldA component that accepts text input.
Line HorizontalA component that displays a horizontal line.
Line VerticalA component that displays a vertical line.
LinkA component representing a link to a page. A link switches the displayed page at assessment run time. (For more details see the extended description chapters following this components table.)
ListA component that allows to select an item from a list of items.
MapBasedVariableDisplayA component that displays the value of a variable as specified by a ValueMap.
MenuA titled drop down list of commands (i.e. MenuItems) to be used in a MenuBar.
MenuBarA component that groups Menu components to a menu bar.
PageAreaAn area that embeds another page. Initially it embeds the page assigned to it at design time via the 'Link Page' command. Use the 'setEmbeddedPage' operator to change the embedded page at assessment run time.
PanelA rectangular container for other components. A panel constitutes a 'select group' that the selectable components inside the panel may join as 'select group members'. (For more details see the extended description chapters following this components table.)
RadioButtonA component that accepts a yes/no choice represented as radio button.
RadioButtonGroupA container for RadioButtons that should implement a set of mutually exclusive choices.
RectangleA component that displays a rectangle.
ScaleValueInputA scale control that displays and updates the value of a variable.
SimpleTextFieldA component that displays a simple text. Maybe coupled to the calculator (for input and history display) or an InputField via the Configure Input Source command.
SingleLineInputFieldA component that accepts a single line of text input. (For more details see the extended description chapters following this components table.)
SpinnerValueInputA spinner control that displays and updates the value of a variable.
TabButtonA button that activates a corresponding tab and child page in a TabFolder page. The button is represented like a tab. The child page is linked to the button at design time.
TabfolderFrameThe top level container of a tab folder page.
TabfolderGroupA container for the buttons representing the tabs on the tabfolder page.
TableA component that displays a table of cells. Use the 'Configure Table' command in the Table's context menu to initialize the table cells.
TableCellEditorA component that displays a simple editor for the currently selected cell in a 'spreadsheet' table.
TaskbarButtonA button that activates a corresponding child page in a Taskbar page. The activated child page is linked to the button at design time.
TaskbarFrameThe top level container of a taskbar page.
TaskbarGroupA container for the buttons representing the task bar in the taskbar page.
TaskbarStartButtonA special TaskbarButton that becomes implicitly selected if no other TaskbarButton is selected currently.
TextFieldA component that displays a non editable text which may have multiple lines and may be formatted using different fonts, sizes, colors, styles and alignment. (For more details see the extended description chapters following this components table.)
TimerA component that displays a stopwatch or the run down of a state machine timer event.
TreeA component that displays a hierarchy of TreeNodes. Use the Tree's context menu to add types of nodes (TreeNodeType), nodes (TreeNode) and display columns for nodes (TreeColumn). Select the Tree and use the 'Component Edit' explorer on the left side to configure more details. (For more details see the extended description chapters following this components table.)
TreeChildAreaA component attached to a Tree that displays the page attached to the currently selected node in the Tree.
TreeViewA component attached to a Tree used to display the sub-tree below the currently selected node in the Tree.
VariableValueDisplayA component that displays the value of a variable as text.
VariableValueInputA component that displays and updates the value of a variable as text.
VideoA component that plays video files using the native video support of the browser.
VideoTextAreaA component that displays text on top of a running video at particular points in the time while the video is playing.
WebBrowserFrameThe top level container of a web browser page.
WebBrowserToolbarA container for the components controlling the web browser.
WebChildAreaAn area that embeds the currently selected browser child page. Initially it embeds the page assigned to it at design time via the 'Link Page' command. Use the 'setEmbeddedPage' operator to change the embedded page at assessment run time.
WebChildFrameThe top level container of a web child page.

The following sections give extended explanations for some components.

Audio

The first audio replay in a test user session may start with some seconds delay while the browser's replay stack is initialized. To mitigate this you might put a hidden Audio component in some initial page of the very first task, that plays a short, silent audio just to initialize the browser's audio stack.

Bookmark

A special button that opens a drop down menu with predefined menu items:

HTMLTextField

HTMLTextField supports dynamic text extensions at assessment run time. The item author inserts special marker snippets into the text to specify those extensions. The following marker formats are available:

Marker FormatDescription
${ItemScore.<task name>.<calculation>}Insert the result of a scoring calculation for the specified task. For a list of available calculations see the description of the getItemScore operator.
${FSMVariable.<variable name>}Insert the value of a state machine variable.
${DynamicFragment.<user defined id>.<fragment text>}Declares a text snippet that will appear only when activated by the operator setActive called with the given user defined ID. To make the text snippet disappear de-activate it by calling the operator unsetActive with the given user defined ID. The inserted fragment text cannot contain further markers.

HTMLTextField supports a rotation angle similar to the ImageTextField. See the description of the ImageTextField for details.

ImageMap

An ImageMap can collect a set of the decorating text fields, buttons and selectable areas in a 'select group' similar to the select group of a panel. See the detail description of the Panel component for more details on the 'select group' concept and the attributes used to configure it.

ImageTextField

ImageTextField supports a rotation angle specified via the rich text editor. For non-paraxial angles the system puts a paraxial rectangle around the rotated component and moves the upper left corner of the paraxial rectangle to the point specified by the attributes X and Y.

Link

A Link differentiates between 'selected' status and 'visited' status:

A selected link will change its background color (and its border color if the Border Color is set and the Border Width is not zero) if its Selected Background Color property is set. A visited link will change its font color according to the settings specified via the Link Page command in the context menu.

Panel

A Panel can collect a set of its selectable components into a group that we call a 'select group'. The group will control the 'selected' status of the group members in certain situations:

We call a select group with the Multiple Select Mode set to false a 'single select group'.

Example use case for single select group: A list of links might represent the chapters of a book in a table of contents. Selecting one of the links should automatically deselect all other links.

You configure a 'single select group' with attributes in the section Misc of the Properties view:

SingleLineInputField

The SingleLineInputField supports the 'visited link' color settings specified via the Link Page command in the context menu: As soon as the test taker modifies the text in the field the field is considered 'visited' and changes the text color accordingly.

TextField

This component displays read-only text with rich formatting features. A rich text editor is used for formatting a text field in a WYSIWYG (what-you-see-is-what-you-get) manner. To enter text, select the TextField and select Edit Rich Text from the context menu (right click) or do a double click on the TextField. TextFields may be defined as 'highlightable'. In that case parts of the text can be selected and highlighted at assessment runtime. For the evaluation of the highlighted parts at runtime (in particular for assessing a test result) define 'text blocks' in the editor for the TextField and use the scoring operators to check the selection status of these text blocks. For mathematical formulas you may enclose MathJax expressions (see www.mathjax.org) in an opening tag {tex} and a closing tag {/tex}, e.g. {tex}a \ne 0{/tex}. Use the preview to see the formatted result.

Tree

A Tree contains a hierarchy of TreeNodes. TreeNodeTypes specify common settings shared by tree nodes. They also serve as templates for nodes that are created at assessment run time.You must assign each TreeNode to one TreeNodeType. You may define additional columns (besides the tree node name as first column) as TreeColumns. Each node can specify the values for each column in the Column Values attribute. Nodes created at assessment run time will use the column values of their TreeNodeType.