6.5 Calculators Examples
The CBA ItemBuilder offers two different approaches to integrate a calculator into items. Digitalized calculators provide some advantages, e.g., the calculator can be enabled or disabled according to item-specific needs. Simple pocket calculators can be designed using visual components of the CBA ItemBuilder and directly integrated into items with the finite-state machine without any further programming knowledge. More specific and possibly more complex calculators can be integrated into CBA ItemBuilder projects via ExternalPageFrames.
6.5.1 Basic Calculator using Finite-State Machine
The following item in Figure 6.23 shows a basic calculator using the internal Finite-State Machine:
FIGURE 6.23: Example for a calculator based on ‘Finite-State Machine’.
To implement the calculator using the CBA ItemBuilder Page Editor, components of type Button (see section 3.11.2) and a component of type SimpleTextField (see section 3.8.1) are placed on a page. The Input Source property of the SimpleTextField type component must be assigned to the CALCULATION_ENGINE_RESULT value. All components that have this Input Source are used by the CBA ItemBuilder to display the output of the calculations that are calculated by the calculator engine of the finite-state machine. If the property Input Source Catch Focus for this SimpleTextField is set to true, the keyboard input is automatically collected by the SimpleTextField and the calculator can be used using the keyboard. An optional second SimpleTextField can be used to show the calculator engine’s stack (using the value CALCULATION_ENGINE_OP_STACK for the property Input Source).
The buttons must be assigned to Events so that in Finite-State Machine Rules the input can be passed to the calculator engine.69 An example FSM is shown below:
Events: /* One event is defined for each button: */
calc0, calc1, calc2, calc3, calc4, calc5, calc6, calc7,calc8, calc9,
calcPI, calcDecimal, calcMult, calcDiv, calcAdd, calcSub, calcRes,
calcC, calcAC;
Rules: /* Calculator settings are defined in very first transition */
Start -> Process{true | calcSettings(displayWidth => 12, scale => 24)}
/* Calculator operators are processed as internal rules */
Process internal { calc0 | calcOpnd(add, 0) }
Process internal { calc1 | calcOpnd(add, 1) }
Process internal { calc2 | calcOpnd(add, 2) }
Process internal { calc3 | calcOpnd(add, 3) }
Process internal { calc4 | calcOpnd(add, 4) }
Process internal { calc5 | calcOpnd(add, 5) }
Process internal { calc6 | calcOpnd(add, 6) }
Process internal { calc7 | calcOpnd(add, 7) }
Process internal { calc8 | calcOpnd(add, 8) }
Process internal { calc9 | calcOpnd(add, 9) }
Process internal { calcPI | calcOp(clear), calcOpnd(add, 3),
calcOpnd(decimal), calcOpnd(add, 1),
calcOpnd(add, 4), calcOpnd(add, 1),
calcOpnd(add, 5) }
Process internal { calcDecimal | calcOpnd(decimal) }
Process internal { calcMult | calcOp(multiply) }
Process internal { calcDiv | calcOp(divide) }
Process internal { calcAdd | calcOp(add) }
Process internal { calcSub | calcOp(subtract) }
Process internal { calcRes | calcOp(equals) }
Process internal { calcC | calcOp(clear) }
Process internal { calcAC | calcOp(clearall) }The actual processing of test taker input is done by the special operators for the calculator engine (see section 4.4.6). The user interfaces created as part of the CBA ItemBuilder Project File’s content can be customized and adapted by item authors to the needs of items and tasks by placing, adding, and omitting buttons.
6.5.2 Embedding Calculator using ExternalPageFrame
An example for an external calculator that can be embedded using the ExternalPageFrames (see section 3.14) is shown in Figure 6.24.70
Note that if logging of calculator actions is required, it can be implemented in JavaScript using the API for trace events (see section 4.6.3).
Instead of buttons other components can be used for input if they can be assigned to an event (e.g.
ImageValueMaps).↩︎The source can be found at github in the repository https://github.com/DIPFtba/calculator↩︎