6.6 ExternalPageFrame Examples

The functionality of the CBA ItemBuilder does not limit the possibilities for designing Technology-Enhanced Items. Instead, the CBA ItemBuilder can be understood as a platform where recurring elements are made available as components for item authors while new and innovative components provided by software developers can be integrated using ExternalPageFrames. For the complete workflow for creating custom HTML5/JavaScript content—including an HTML template, the JavaScript API reference, and integration patterns—see section 4.6. The following subsections provide practical examples that illustrate the range of possibilities.

6.6.1 Continuous Sound using Buttons in ExternalPageFrame

The CBA ItemBuilder can play audio files. But it may not be able to repeat audio files continuously, as is necessary for playing notes on a (digital) instrument. Just because such a function is missing, the use of the CBA ItemBuilder does not have to be completely questioned. With the help of JavaScript and ExternalPageFrames extensions can be easily programmed. Figure 6.25 illustrates how such a missing functionality can be added using ExternalPageFrames.

FIGURE 6.25: Continuous Audio Play with ExternalPageFrames (html|ib).

In this project file, each of the three buttons is implemented separate ExternalPageFrame to keep the syntax as minimal as possible. The respective HTML files contain JavaScript code to play a wav file and a standard HTML button.

6.6.2 Alternative Editors as ExternalPageFrame

The CBA ItemBuilder does not natively support the input of mathematical formulas. The following example in Figure 6.26 illustrates the use of the mathlive library. Mathlive provides a virtual keyboard that also allows formula input on touch devices. The library can be included and used via an ExternalPageFrame component.

FIGURE 6.26: Using math-field (from Mathlive) within ExternalPageFrames (html|ib).

In the same way as a specific editor for mathematical input, a text editor can also be included as an ExternalPageFrame, as shown in Figure 6.27.

FIGURE 6.27: CKEditor within ExternalPageFrames (html|ib).

Displaying the number of words already written (or the number of words remaining, if specified) and, for example, detailed JavaScript-based logging of keystrokes is also possible with an ExternalPageFrame, as illustrated in Figure 6.28.

FIGURE 6.28: TextArea within ExternalPageFrames (html|ib).

6.6.3 Adding Speech Recognition using ExternalPageFrame

Speech recognition functions can also be embedded in ExternalPageFrames. A generic variant that should work in many browsers and delivery options is illustrated in Figure 6.29.

Offline: The following item shows an offline capable speech recognition. For this, a large language model must be loaded before spoken language can then be translated into characters without transferring the data to the server. For this example, the model of one language is loaded, i.e. the speech recognition in the CBA ItemBuilder item in Figure 6.29 recognizes only German speech.

FIGURE 6.29: Browser-based Speech Recognition using Vosk and ExternalPageFrames (html|ib).

Online: As an alternative to client-side recognition, some browsers also provide access to server-side speech recognition. The following example in Figure 6.30 will only work in the Chrome browser and requires an internet connection:

FIGURE 6.30: Server-based Speech Recognition using window.SpeechRecognition and ExternalPageFrames (html|ib).

FIGURE 6.31: Reading Task using Server-based Speech Recognition and ExternalPageFrames (html|ib).

6.6.4 Showing HTML5 Package (H5P) using ExternalPageFrame

Using the MIT licensed H5P standalone player it is possible to embed HTML5 Package (H5P) into CBA ItemBuilder projects as interactive content. The following example shows how to display H5P content without using a web server inside the CBA ItemBuilder using ExternalPageFrames (for more details, open ExternalPageFrameH5PIntegrationExample.zip in the CBA ItemBuilder):

FIGURE 6.32: Example for the integration of H5P content in an ExternalPageFrame.

Note: An integration of data storage and xAPI needs to be added.

6.6.5 Including GeoGebra Applets using ExternalPageFrame

Using ExternalPageFrames it is also possible to integrate other interactive content such as GeoGebra applets into CBA ItemBuilder tasks (see figure 6.33, for more details, open ExternalPageFrameWithGeoGebra.zip in the CBA ItemBuilder).

FIGURE 6.33: Integration of GeoGebra content in a ExternalPageFrame (html|ib).

6.6.6 Including QTI Item Content using ExternalPageFrame

With the help of JavaScript (client-side) rendering of content in the IMS Question & Test Interoperability (QTI) format, using, for instance the MIT licensed QTI.js library, QTI can be used within CBA ItemBuilder items (see Figure 6.3471).

FIGURE 6.34: Integration of QTI content using QTI.js and ExternalPageFrames (html|ib).

6.6.7 Including SurveyJS Questionnaires using ExternalPageFrame

The creation of long surveys with the CBA ItemBuilder is possible but can be more complex than known from survey tools. An easy way to integrate surveys in all delivery modes supported by CBA ItemBuilder (online, offline) is offered by the SurveyJS library.

FIGURE 6.35: Integration of Questionnaires using SurveyJS and ExternalPageFrames (html|ib).

As shown in the following screenshot (see Figure 6.36), the runtime environment of SurveyJS can be inserted into the Embedded HTML Explorer. The JSON configuration of the survey can be stored in the file index.html, which is used as the Local page address in the ExternalPageFrame. This file is part of the CBA ItemBuilder project files and is available at runtime.

Screenshot of the Embedded HTML Explorer using SurveyJS conent.

FIGURE 6.36: Screenshot of the Embedded HTML Explorer using SurveyJS conent.

The JSON configuration can be assigned, for instance, to a JavaScript variable surveyJSON:

var surveyJSON = <!-- COPY JSON OR JSON STRING HERE--> ;

function sendDataToServer(survey) {
    postLogEvent("SurveyJS results changed to: " + JSON.stringify(survey.data));
    postFsmEvent('EV_NextTask');
}

function doOnCurrentPageChanged(survey) {
    postLogEvent("Page changed to: " + survey.currentPageNo);
}

function doOnValueChanged (sender, options) {
    postLogEvent("Answer changed to: " + options.name + " ; " + JSON.stringify(options.value));
};

var survey = new Survey.Model(surveyJSON);
$("#surveyContainer").Survey({model: survey, onComplete: sendDataToServer});
$("#surveyContainer").Survey({model: survey, onCurrentPageChanged: doOnCurrentPageChanged});
$("#surveyContainer").Survey({model: survey, onValueChanged: doOnValueChanged});

Two further details of the integration are worth mentioning (see ExternalPageFrameWithSurveyJS.zip):

  • In order that the administration of the CBA ItemBuilder tasks can be continued after the completion of the survey with the integrated SurveyJS, a function is bound to the onComplete event of SurveyJS. In this function sendDataToServer the answers are passed as JSON String into the log data of the ItemBuilder delivery. After storing the answers, an FSM-event is triggered in order to call, for instance, the NEXT_TASK-command.

  • In addition, the onCurrentPageChanged and onValueChanged events are also used by SurveyJS. With their help, the collection of log events is possible that indicate the loading of a page (onCurrentPageChanged), and that identifies a change in response. These two pieces of information are necessary in order to extract response times at item-level for detailed analyses (Kroehne and Goldhammer 2018).

Note that a deeper integration of the data storage might be developed in future.

References

———. 2018. “How to Conceptualize, Represent, and Analyze Log Data from Technology-Based Assessments? A Generic Framework and an Application to Questionnaire Items.” Behaviormetrika. https://doi.org/10.1007/s41237-018-0063-y.

  1. The example does not include data storage, that can be added, for instance, using postMessages to send data to the CBA ItemBuilder trace data↩︎