CBA ItemBuilder Workshop | Paris 2022 - CBA ItemBuilder Workshop: Session 17

Calculator with Finite-State Machine

The CBA ItemBuilder provides Finite-State Machine operators to create user-defined Calculators.

Buttons & text field configured in Page Editor
Calculation performed using FSM-Operators
Embedded on Pages (regular or dialog)
Keyboard support

But what if you need a special (school-style) calculator type?

Answer: ExternalPageFrames and Embedded HTML Explorer

Example: Calculator

Example of custom HTML5/JavaScript-calculator
Resources embedded in Embedded HTML Explorer
- Files (and folders) integrated in Project File

Content integrated via ExternalPageFrames can also be embedded into pages or displayed in dialogs.

Example: GeoGebra

Create and Integrate

Create at geogebra
Download as Website
Integrate in Project File
Link HTML-file in ExternalPageFrame

Connect

Send trace messages (log events)
Set FSM Variables (for scoring)

User Interface: Embedded HTML Explorer

Folder Structure for Embedded Resources:

Using the Embedded HTML Explorer to edit or change content requires basic knowledge about HTML and JavaScript. An example file is provided for Developers.

However, importing existent content wit the Embedded HTML Explorer and using ExternalPageFrames in the Page Editor is rather simple.

Default

New have a file example.html

Editor

Double-click to open in the embedded HTML editor

Note that the Embedded HTML Explorer fails to show very long text lines (e.g., when embedding large base64-encoded resources)!

Using Embedded Content

Select Set Page Address in context menu of ExternalPageFrames

Embedded files are automatically listed

External content with ExternalPageFrames requires that the linked content is available online when the assessments are administered and that an online connection exists (i.e., no offline delivery).

Preparing and Adding Files and Folders

All files and dependencies required at runtime (i.e., an HTML entry page and all resources, libraries, CSS, and JavaScript files) must be integrated into the Project File for local use.

How to Integrated Files and Folders?

HTML5/JavaScript content is added¹ using the Embedded HTML Explorer’s context menu
- Add files / directories
- New folder
- Rename / Delete

If references to URLs (i.e., links starting with http or https) remain in embedded resources, a) pure offline delivery is not possible, and b) potential privacy issues may arise.

CBA ItemBuilder JavaScript API

Embedded HTML-Content is…

Displayed within Pages using ExternalPageFrames (= iframe)
Part of the Project Files (i.e., part of the .zip files like other resources)

Embedded HTML-Content can…

Trace log events
Set FSM Variables
Read FSM Variables
Trigger FSM Events

Embedded HTML-Content needs to respond in particular way to…

Inform the CBA ItemBuilder about provided variable values
Store/Re-Store it’s state for persistence (getState()/setState())

Demo JavaScript API

Examples

Click Trace Log-Event and check the Trace Debug Window.
Click the buttons Set V_* to change values of FSM-variables.
Values of FSM-variables can also be set from JavaScript.
The button `Trigger FSM-Event” executes a FSM-rule triggered by a JavaScript-event.

External Page Frames can be used for various purposes, including the computation of FSM variables using JavaScript functions.

External Page Frame - Persistence of Content

Data provided to Embedded HTML Content will get lost on page changes. To make data persistent and to store data entered to ExternalPageFrames, the getState() and setState()-methods need to be implemented.

Data is transmitted from ExternalPageFrames to the item with the getState()-method.
Available data is provided as argument to setState().

The methods getState() and setState() are called automatically by the CBA ItemBuilder (i.e., a JavaScript developer only needs to implement the endpoints within the content developed for ExternalPageFrames).

Variables Provided by External Page Frames

Embedded HTML Content can provide variables that can be used for Scoring. If the HTML5/JavaScript content implements the interface¹, variables can be automatically extracted.

Provide a User Defined Id for the ExternalPageFrame.
Select Import External Variables to add Variables.

Call JavaScript from the Finite-State Machine

Button 1: Simple call
Button 2: Provide FSM-variable value as argument
Button 3: Trigger a JavaScript function to change a FSM-variable

FSM-Rules

Events: EV_Button1, EV_Button2, EV_Button3;
Rules: S->R{true}
R internal {EV_Button1|callExternalPageFrame(EPF1,"StaticMessage")}
           {EV_Button2|callExternalPageFrame(EPF2,V_Input)}
           {EV_Button3|callExternalPageFrame(EPF3,"")}

End of Session 17: External Page Frames

Helpful to remember

Cross-browser testing: If ExternalPageFrames are used, item authors need to perform cross-browser tests to ensure the content works in the targeted browser.
Availability of content: Keep in mind that content used in ExternalPageFrames is either completely embedded or available at runtime.

Consider to share content created for ExternalPageFrames!

Time to talk about workflows and project management for assessment projects in session 18.