3.3 Quick Start: Create Single Page Items
While the several chapters in this book describe the individual functions, components, and concepts for creating complex assessment components with the CBA ItemBuilder in detail, simple one-page items can be easily made. A simple guide to how to do this is the subject of this Quick Start section.
First, it must be defined what is to be understood as a Single Page Item. Single Page Items are items that fit on a computer screen, i.e., that can be displayed without page switching. When possible, scrolling should be avoided. Single Page Items are typically composed of a question stem or stimulus and one single response format. The response formats Single-Choice, Multiple-Choice, and Text Entry are considered in this section. Moreover, CBA ItemBuilder projects containing tasks for the general instructions (embedding a video), a closing page (containing an image) will be created as Single Page Items.
To give a realistic impression of working with the CBA ItemBuilder, we will start with creating a master project, which we will then adapt for the different item types.
3.3.1 Create Master Project
At the beginning of preparing an assessment project, you have to decide on the screen orientation (portrait or landscape) and aspect ratio (e.g., 16:9 or 4:3) of the computer-based material (see section 2.4). This determines the minimum size that should be supported without scrolling or scaling. As mentioned in the section 3.2.2, 1024x768 can often be a reasonable choice, which is the current default of the CBA ItemBuilder.
1. Check Settings: Before preparing multiple project files, it is recommended to check the settings of the CBA ItemBuilder. For instance, it is suggested to consider the appropriate CBA Presentation Size right at the very beginning. For that purpose, open the main menu Utilities and select Open preferences. The CBA Presentation Size should be defined as Height: 768, and Width: 1024. Change to the section CBA Rulers And Grid and select Apply changes to all pages. Finally, go to the section CBA Item Fonts, click Deselect All. Afterwards, select the two Font Names Arial and Courier New. Close the Preferences dialog with OK. Confirm the message Any open editors must be closed before these changes are applied with OK.
2. Create a new Project: With the main menu File using the entry New project, a new CBA ItemBuilder Project File can be created. It is required to enter a valid project name, for instance, SinglePageItems_MasterProject. As soon as the (empty) project is created, the entry Save from the main menu File can be used to specify the location where the Project File is stored. Select a folder and keep the file name SinglePageItems_MasterProject.zip.
3. Add New Page: Since creating the project, the project name SinglePageItems_MasterProject is shown in the Project View in the left part of the CBA ItemBuilder. Right-click on this project name in the Project View and select the entry Add new page in the context menu. In the dialog that appears keep the suggested name page1 and confirm the dialog with OK.
4. Define Rulers & Grid: The Project View now contains the newly created page page01. Double-click this page in the Project View to open the Page Editor in the main area of the CBA ItemBuilder window. In the Page Editor that opens, right-click in the gray area and select Show Properties View. Select Show Ruler and Show Grid in the section Display, change the Rulers Units to Pixels and change to 20 for the Grid Spacing in section Measurement. Finally, check the option Snap To Shapes.
5. Define Border: Click in the white part of the Page Editor. This should select the Panel that was automatically generated by the CBA ItemBuilder for that page1. The type of the selected element is shown in the headline of the Properties view. If the Properties view was closed, right-click anywhere in the Page Editor and select the entry Show Properties View again in the context menu. Find the property Border Width in section Display and enter the value 5.
6. Add HTMLTextField as Headline: Click again in the white part of the Page Editor to select the Panel. When the Panel is selected, the Palette should show a long list of components that could all be added to the selected Panel. If the Palette 
is not displayed, it can be shown at the right window border with the small icon 
. Select the HTMLTextField entry (
) and draw a rectangle in the Drawing Area (inside the Panel) to add the HTMLTextField. Leave two boxes of the grid blank on the left, right and top and draw the rectangle 4 grid boxes high while holding down the mouse button. This way it should be 940 pixels wide and 80 pixels high, and placed at X=40 and Y=40.
Check the following values in the Position-section of the Properties view: Height: 80, Width: 940, X: 40, and Y: 40. If the Properties view was closed in a previous step, open it using the context menu. If the headline of the Properties view is showing a different component type than HTMLTextField, select the HTMLTextField in the Page Editor.
The HTMLTextField is now aligned relative to the Panel in the top. To enter text, double-click the HTMLTextField and enter the text Headline in the HTML Text Editor. Select the text and change the font to Arial and the size to 30. Finally, save the changes using the button Save and Close.
7. Add HTMLTextField for Content: Repeat step 5 and create a second HTMLTextField. Start by selecting the Panel in order to see the entry HTMLTextField in the Palette. Position the second HTMLTextField aligned below the first and draw the HTMLTextField with 80 pixels height and leave 20 Pixel distance. You can also change the position in the Page Editor or enter the values in the section Position of the Properties-view: Height: 80, Width: 940, X: 40, and Y: 140. Double-click the new HTMLTextField and enter the text Content in the HTML Text Editor. Change the font to Arial of size to 20 and close the editor with the Save and Close button.
8. Add and Configure Next-Button: Buttons can be added to components of type Panel. Select the Panel and find and click the entry Button 
in the Palette. When the component type is selected in the Palette a new button can be added to the page by drawing a rectangle into the Drawing Area. It should be two three boxes (i.e., 60 pixels) height, ten boxes (i.e., 200 pixels) width and two full boxes left and below in the lower right corner of the Panel. You can also use the Properties view and enter Height: 60, Width: 200, X: 780, and Y: 660 in the section Position. Find the tab Appearance 
and click it, and change the formatting of the button. Select Arial as font and set the font size to 20. Moreover, set the font color to white using the button 
. Now set the background color using the button 
and select Custom... in the small color dialog. In the Choose Color change to RGB and enter Red: 50, Green: 100 and Blue: 200 and confirm with OK. Navigate back to the tab Core in the Properties view and change the Properties Use Default Link Color to false and Use Same Color For Visisted Reference to true.
Next, double-click the button and enter the text Next in the dialog Configure a Multiline Text, before closing the dialog with OK. Finally, right-click the button in the Page Editor and select the entry Set command in the context menu. In the dialog Set Runtime Command click on the entry NEXT_TASK and confirm the selection with OK.
9. Define Task: Open the Task Editor using the main menu Project and the entry Browse Task and Item Score 
. In the right area of the CBA ItemBuilder main window a tab titled Tasks will appear. Click the first button New below the headline Tasks. This will move the cursor to the first row to the column titled Name. Keep the default Name task0 and the select the name of the page created in step 3 (page1) as the Start Page.
10. Save and Preview: The project can now be saved, for instance, using the main menu File and the entry Save 
. Confirm the message box Save Resource that informs that page01.cbambl_diagram has been modified with Yes. Finally, in the preview (main menu Project the entry Preview Project 
) the item should now look like shown in Figure 3.18. In case of a problem, download and open the CBA ItemBuilder project file SinglePageItems_MasterProject.zip.
Using the master item created in the ten steps, it is possible to create various single page items. For this purpose, the components used to capture the response must be added. The required steps will be described for the different response formats Single Choice, Multiple-Choice, and Text Response, in a subsection each.
3.3.2 Create Single-Choice Item
1. Open Master and Save as SinglePageItems_01SC.zip: Open the master item created in the previous section 3.3.1 (or download SinglePageItems_MasterProject.zip) using the icon 
in the CBA ItemBuilder (or use the main menu File and the entry Open project). Save the Project File with the new name SinglePageItems_01SC.zip using the main menu File and the entry Save as... (or use the icon 
).
2. Rename the Project: After saving the project to a new file, the project itself needs to be renamed as well. For that purpose, right click on the old project name SinglePageItems_MasterProject in the Project View and select Rename project. Enter the name SinglePageItems_01SC and confirm the dialog with OK.
3. Update Headline and Text: The most visible customization necessary to turn the master project into an item is editing the HTMLTextFields that are used for the heading and page content. To make this change, first open the page page01 in the Page Editor by double-clicking on page01 in the Project View (alternatively, you can also use the context menu in the Project View, which can be opened with a right-click on the page and which contains the entry Open page). Once the page is opened in the Page Editor (i.e., the tab in the middle region of the CBA ItemBuilder titled page01.cbaml_diagram), the text in the HTMLTextFields can be edited. Replace the text Headline with Single-Choice Task and insert as Content the text Select the option that answers the following question: (italic) and then, after two line breaks (i.e., with an empty line in between): Which answer is correct? Close the HTML Text Editors each time with Save and Close.
4. Add RadioButtonGroup: In the next step, a so called RadioButtonGroup will be inserted (see section 3.9.2). A RadioButtonGroup is necessary to define the connection between the components of the type RadioButton, inserted in the next step. To add the RadioButtonGroup, select the Panel in the Page Editor first. Afterwards, find and select the icon RadioButtonGroup (
) in the Palette. To add a RadioButtonGroup to the page, click in the Drawing Area within the Panel below the second HTMLTextField and hold the left mouse button clicked while moving the mouse to draw a rectangle. Add the RadioButtonGroup to fill the remaining space with 40 pixels border around. After releasing the mouse button open the Properties view if necessary using the context menu (right-click on the RadioButtonGroup and select the entry Show Properties View). Check the following values in the Position section: Height: 360, Width: 940, X: 40, and Y: 260.
5. Add the first RadioButton: Adding RadioButtons is only possible within components of type RadioButtonGroup (see section 2.11.4). In the Palette the icon RadioButton (
) can therefore only be selected if a RadioButtonGroup is selected in the Page Editor. Select the RadioButtonGroup in the Page Area and the RadioButton in the Palette and add a first RadioButton by drawing a rectangle within the area that is covered by the RadioButtonGroup with 20 pixels border to the top, left and right and 60 pixels height. Subsequently, check the position in the Properties view to Height: 60, Width: 900, X: 20, and Y: 20.
Change the values for the properties Control Item Size and Label Distance in section Misc to 30. Change to the tab Appearance () and select Arial as font and 20 as font size. It is also possible to enter Arial (including capitalization) and 20 directly in section Appearance into the properties Font Name and Font Size, respectively. Finally, double-click the RadioButton in the Page Editor and enter the text Option A into the dialog Configure a Multiline Text, that must be confirmed with OK.
6. Duplicate the RadioButton: After creating the first RadioButton, copies of this component can be created using the function Duplicate. For that purpose, the RadioButton that has just been created must be right-clicked to open the context menu that contains a sub-menu Edit with the entry Duplicate.^[If the sub-menu Edit does not contain the entry Duplicate, the text property of the component was selected. In that case, just select another component in the Page Editor and then right-click on the RadioButton again.
] After duplicating the RadioButton the first time, arrange it with 20 pixels border below the first or change the Position in the Properties view to Y: 100, and X: 20 and change the text property to Option B (via double-click on the duplicated RadioButton or using the small icon 
in section Text of the Properties view). Repeat these procedure for a third RadioButton (Y: 180, X: 20, Text: Option C*) and a fourth RadioButton (Y: 260, X: 20, Text: Option D).
7. Provide UserDefinedIDs: Before the scoring can be defined, the created components of type RadioButton must be uniquely named. For this purpose, each Radiobutton must be selected in the Page Editor, and an identifier must be entered in the section Identification of the Properties view as UserDefinedId. To keep the scoring syntax as simple as possible, we use the following schema to name the RadioButtons.First: UserDefinedID: a, second UserDefinedID: b, third UserDefinedID: c, and fourth: UserDefinedID: d (without white spaces).
8. Add Classes as Variables for Scoring: With the help of the UserDefinedID’s, the scoring can now be created exemplary for this item. Let’s assume that Option C is correct. Then we could expect either a true/false-coding in the result data set (i.e., a variable ScoredResponse) or a raw-response coding (i.e., a variable RawResponse). In this example, we create both variables. Variables are defined in the CBA ItemBuilder as Classes. The definition of Classes can be requested in the Task Editor, which can be opened via the menu Project and the entry Browse Task and Item Score or the icon . To create two new Classes, open the Task Editor select task task0. Open the dialog Task Classes Editor with the button Edit Classes. In that dialog create two classes using the button Add new class and enter the class name ScoredResponse for the first class and RawResponse for the second class. Finally, confirm the Task Classes Editor with the button OK.
9. Define Hit-Conditions: Each hit represents a condition to be distinguished as value of a (categorical) variable. The value of the RawResponse variable should indicate which option was selected (resulting in four potential values, defined as Hits RawA, RawB, RawC and RawD). To define a Hit, first a task must be selected in the Task Editor (in this example the task with the name Task01 as defined above). A click into the first table in the Task Editor directly on the name Task01 selects the first task. When the task is selected, a new hit condition can be created with the Add Hit-button. Then, the cursor jumps to the table in the Hits section of the Task Editor. Enter as Name the name RawA for the first Hit, enter as Weight the value 1 and select the Class RawResponse. Then click the Open-button or double-click the newly created Hit to open the Conditions editor in the main CBA ItemBuilder window. For the first Hit just enter here the UserDefinedID of the first RadioButton (i.e. a) and close the editor using the small x in the tab-title (
). Confirm to save the changes. Continue for the remaining Hits using the information presented in Table 3.1. Copy the string provided in the column Conditiona-Syntax exactly, including all brackets (see section 4.1.3 for more information).
| Name | Weight | Class | Condition-Syntax |
|---|---|---|---|
| RawA | 1 | RawResponse | a |
| RawB | 1 | RawResponse | b |
| RawC | 1 | RawResponse | c |
| RawD | 1 | RawResponse | d |
| ScoreWrong | 1 | ScoredResponse | ((a or b) or d) |
| ScoreCorrect | 1 | ScoredResponse | c |
To complete the scoring, two more Hit-conditions are needed for the coding of missing responses: A Hit RawOR (assigned to the Class RawResponse) and a Hit ScoreOR (assigned to the Class ScoredResponse). The abbreviation OR is used for Omitted Response (see section 2.5.2). Click the button Open to enter the following syntax as Condition: (((not a and not b) and not c) and not d).
10. Save, Preview and Test Scoring: The project can now be saved () and previewed (). Probably the most error-prone part of creating this item is the scoring definition. With a key combination (default is Ctrl + S) the scoring can be checked directly in the preview (see section 1.5). The scoring is defined correctly if exactly one hit is active for each Class (= Variable) at any time. If no answer is selected, the Hits ScoreOR and RawOR should be active. Once a response is selected, the Hit to the Class RawResponse should indicate which RadioButton was selected. Only if Option C is selected, the Hit ScoreCorrect assigned to the Class ScoredResponse should be active.
3.3.3 Create Multiple-Choice Item
1. Open Master and Save as SinglePageItems_02MC.zip: Open the master item created in section 3.3.1 (or download SinglePageItems_MasterProject.zip) using the icon in the CBA ItemBuilder (or use the main menu File and the entry Open project). Save the Project File with the new name SinglePageItems_02MC.zip using the main menu File and the entry Save as... (or use the icon ).
2. Rename the Project: After saving the project to a new file, the project itself needs to be renamed as well. For that purpose, right click on the old project name SinglePageItems_MasterProject in the Project View and select Rename project. Enter the name SinglePageItems_02MC and confirm the dialog with OK.
3. Update Headline and Text: Open the page page01 in the Page Editor by double-clicking on page01 in the Project View and edit the HTMLTextFields. Replace the text Headline with Multiple-Choice Task and insert as Content the text Select all alternatives that apply: (italic) and then, after a line break: For which of the following entries a hypothetical rule applies? Close the HTML Text Editors each time with Save and Close.
3. Add the first Checkbox: Adding Checkboxes is possible within components of type Panel. In the Palette the icon Checkbox (
) can be selected if the Panel is selected in the Page Editor. Select the Panel in the Page Area and the Checkbox in the Palette. Add the first Checkbox by drawing a rectangle at with 40 pixels border top, left and right and a height of 60 pixels. Subsequently, check the position in the Properties view, which should be Height: 60, Width: 940, X: 40, and Y: 260.
Change the values for the properties Control Item Size and Label Distance in section Misc to 30. Go to the tab Appearance () and select Arial as font and 20 as font size. Finally, double-click the Checkbox in the Page Editor and enter the text Entry 1* into the dialog Configure a Multiline Text, that must be confirmed with OK.
4. Duplicate the Checkbox: After creating the first Checkbox, create copies of this component again using the function Duplicate. For that purpose, the Checkbox that has been created in step 3 must be right-clicked to open the context menu that contains a sub-menu Edit with the entry Duplicate. After duplicating the Checkbox the first time, change the Position in the Properties view to X: 40, and Y: 340 and change the text property to Entry 2 (via double-click on the duplicated RadioButton or using the small icon in section Text of the Properties view). Repeat these procedure for a third Checkbox (X: 40, Y: 420, Text: Entry 3*) and a fourth Checkbox (X: 40, Y: 500, Text: Entry 4).
5. Provide UserDefinedIDs: Each Checkbox must obtain a unique name as UserDefinedID. Since UserDefinedIDs are not allowed to start with a number, the following schema is used to name the Checkboxes: First: UserDefinedID: e1, second UserDefinedID: e2, third UserDefinedID: e3, and fourth: UserDefinedID: e4 (without white spaces). To assign the UserDefinedIDs select each Checkbox in the Page Editor, and enter the identifier in the section Identification of the Properties view.
6. Add Classes as Variables for Scoring: With the help of the UserDefinedID’s, the scoring can now be created exemplary for this item. Let’s assume that Entry 1 and Entry 3 are required for a correct response. Since the item is in multiple-choice format, we can either define a true/false-coding in the result data set for each choice, or a combinded score variable. In this example, we create both variables. Variables are defined in the CBA ItemBuilder as Classes. The definition of Classes can be requested in the Task Editor, which can be opened via the menu Project and the entry Browse Task and Item Score or the icon . To create two new Classes, open the Task Editor, select Task task0 and use the button Edit Classes. In the dialog Task Classes Editor use the button Add new class and enter the class name ScoredResponse for the first class and RawResponse1, RawResponse2, RawResponse3, RawResponse4 for four remaining classes. Finally, confirm the Task Classes Editor with the button OK.
7. Define Hit-Conditions: After defining the Classes the definition of Hit-conditions is necessary. Select the Task with the name Task01 in the Task Editor. To add a Hit-condition use the button Add Hit and type the name this Hit in the first column: Entry1Selected. Press the Tab key and maintain the default 1as Weight in the second column and select the class RawResponse1 in the third column. Once the Hit is created, double-click the Hit or use the button Open to enter the condition-syntax e1 into the Tab titled Condition - <Entry1Selected>. Close the editor and confirm to save the changes. After creating the first Hit, continue with the information presented in Table 3.2.
| Name | Weight | Class | Condition-Syntax |
|---|---|---|---|
| Entry1Selected | 1 | RawResponse1 | e1 |
| Entry1NotSelected | 1 | RawResponse1 | not e1 |
| Entry2Selected | 1 | RawResponse2 | e2 |
| Entry2NotSelected | 1 | RawResponse2 | not e2 |
| Entry3Selected | 1 | RawResponse3 | e3 |
| Entry3NotSelected | 1 | RawResponse3 | not e3 |
| Entry4Selected | 1 | RawResponse4 | e4 |
| Entry4NotSelected | 1 | RawResponse4 | not e4 |
| ScoreWrong | 1 | ScoredResponse | (((e2 or e4) or not e1) or not e3) |
| ScoreCorrect | 1 | ScoredResponse | (((e1 and e3) and not e2) and not e4) |
8. Define Missing-Values: Typically, in RadioButtonGroups (used for the single-choice item in section 3.3.2) no RadioButton is pre-selected. Hence, the response is missing until one RadioButton of a RadioButtonGroup is selected. Components of type Checkbox (used for the multiple-choice items) can not distinguish whether a response was not given or the Checkbox was intentionally not selected. Accordingly, defining missing values for Checkboxes is either impossible or must take additional information into account. In this example, we only apply missing value coding to the score variable. For this purpose, we use the operator user_interactions() that counts the number of interactions in the current task. Suppose this number is smaller than the minimal number of interactions (one for clicking the Next-button). In that case, we consider the value of the variable ScoredResponse to be the Hit for an omitted response. In order to implement this approach for missing-value coding, select the Task labeled Task01 in the Task Editor, add an additional Hit using the button Add Hit and name this Hit ScoreOR (Weight: 1; Class: ScoredResponse). Edit the Hit using the button Open (or double-click the Hit ScoreOR) and enter the following syntax: [user_interactions()==0]. Close the Condition-editor using the small x in the tab-title () and confirm to save the changes. Note that a more specific missing-value coding counting only answer-change events would be possible using the CBA ItemBuilder, but is omitted here in the quick start example.
9. Re-Define Scoring for the ScoredResponse-Variable: What, if a test-taker clicks the Next-button without selecting any Checkbox? The Hit ScoreWrong will be active, since the defined Hit-condition (((e2 or e4) or not e1) or not e3) is fulfilled. It is not true, that the Checkboxes with the UserDefinedId's e1 and e2 are selected. However, at the same time the Hit ScoreOR is active, since the number of user-interactions would zero. To observe this prediction open the Preview (main menu Project the entry Preview Project or the icon ), click into the item and hit the key combination (default is Ctrl + S). You can verify that as long as the number of interactions is zero, both Hits are active at the same time. Reload the page in the preview (typically by hitting F5 to try again). To resolve this issue, we can make use of the fact that at least two interactions (selecting any Entry 2 and pressing the Next-button) are necessary. Hence, we can adjust the scoring syntax and use the scoring-syntax ((((e2 or e4) or not e1) or not e3) and [user_interactions()>=2]) for the Hit that correspond to a wrong response. Using this adaptation the condition is mutually exclusive with [user_interactions()<2], the condition used for the Hit that correspond to an omitted response on the ScoredResponse-variable. To adjust the scoring, double-click the Hit ScoreWrong and copy the following condition syntax in to the editor provided by the CBA ItemBuilder: ([user_interactions()>1] and not (e1 and e3)). Finally, also adjust the Hit ScoreOR to the following syntax: [user_interactions()<2]
10. Save, Preview and Test Scoring: This concludes the multiple-choice item and the project can now be saved () and previewed () again. Check the scoring using the Scoring Debug Window in the preview (see section 1.5).
3.3.4 Create Text-Entry Item
1. Open Master and Save as SinglePageItems_03TXT.zip: Open the master item created in section 3.3.1 (or download SinglePageItems_MasterProject.zip) using the icon in the CBA ItemBuilder (or use the main menu File and the entry Open project). Save the Project File with the new name SinglePageItems_03TXT.zip using the main menu File and the entry Save as... (or use the icon ).
2. Rename the Project: After saving the project to a new file, the project itself needs to be renamed as well. For that purpose, right click on the old project name SinglePageItems_MasterProject in the Project View and select Rename project. Enter the name SinglePageItems_03TXT and confirm the dialog with OK.
3. Update Headline and Text: Open the page page01 in the Page Editor by double-clicking on page01 in the Project View and edit the HTMLTextFields. Replace the text Headline with Text-Entry Task and insert as Content the text Use the keyboard to provide an answer to the following question: (italic) and then, after a line break: What is the "Answer to the Ultimate Question of Life, the Universe, and Everything"? Close the HTML Text Editors each time with Save and Close.
4. Add two HTMLTextFields to Provide Context for the Text-Response: Two more components of type HTMLTextField are necessary to embed the text input into a response phrase. Select the Panel in the Page Editor. Then select the HTMLTextField entry () in the Palette and draw a rectangle in the Drawing Area (inside the Panel) to add the HTMLTextField to the page. Use the Properties view to specify the position: Height: 40, Width: 170, X: 40 and Y: 300. Double-click the HTMLTextField and enter the text The answer is (font Arial and font size 20). Save and Close the HTML Text Editor. Add a second HTMLTextField with text . (font Arial and font size 20) at the position: Height: 40, Width: 40, X: 320 and Y: 300.
5. Add a SingleLineInputField: SingleLineInputField can be added to components of type Panel. In the Palette the icon SingleLineInputField (
) is available if a Panel is selected in the Page Editor. Select the Panel in the Page Area and the SingleLineInputField in the Palette. Add the SingleLineInputField to the page by drawing a rectangle in the free area between the two HTMLTextFields added in step 4. To make sure the SingleLineInputField is precisely adjusted check the position and change the Y coordinate in the Properties view (Height: 40, Width: 110, X: 210, and Y: 295). Moreover, define a Border Width: 2 in the section Display. Finally, change to the tab Appearance () and select Arial as font and 20 as font size.
6. Define the Input Validation Pattern: Text fields without input restrictions can be a challenge for privacy and scoring. Therefore, and because we expect a number to be the answer, we can use an Input Validation Pattern to configure that only digits can be entered. For that purpose select the SingleLineInputField and enter the string [0-9]* in the section Misc of the Properties view.
7. Provide UserDefinedID: The scoring definition needs an identifier for the SingleLineInputField. Enter the property User Defined Id: txt in the Identification section of the Properties view.
8. Add Classes as Variables for Scoring: As a result of an item with text input, two variables can be distinguished again. A RawResponse variable should contain the entered text, and a ScoredResponse variable can, if the string can be evaluated automatically using, for instance, regular expressions, indicate whether the answer is correct or incorrect. First, two Classes must be created to prepare the definition of the corresponding scoring syntax. The definition of Classes is possible in the Task Editor, which can be opened via the menu Project and the entry Browse Task and Item Score or the icon . To create two new Classes, open the Task Editor, select the Task task0and use the button Edit Classes. In the dialog Task Classes Editor use the button Add new class and enter the class name ScoredResponse for the first class and RawResponse for the second class. Finally, confirm the Task Classes Editor with the button OK.
9. Define Hit-Conditions: Hit-conditions are required for the two Classes ScoredResponse and RawResponse. Assume the correct response is 42. The scoring-operator matches(txt,"42") (see section 5.3.4) can be used to compare the text entered into the SingleLineInputField with the UserDefinedId: txt with the string for a correct response. Select the Task with the name Task01 in the Task Editor. Add a Hit-condition using the button Add Hit and type the name for this Hit in the first column: ScoreCorrect. Press the Tab key and remain 1 as the Weight in the second column and select the class ScoredResponse in the third column. Once the Hit is created, double-click the Hit or use the button Open to enter the condition-syntax matches(txt,"42") into the Tab titled Condition - <ScoreCorrect>. Close the editor and confirm to save the changes. After creating the first Hit, continue with the information presented in Table 3.3.
| Name | Weight | Class | Condition-Syntax |
|---|---|---|---|
| ScoreCorrect | 1 | ScoredResponse | matches(txt,"42") |
| ScoreWrong | 1 | ScoredResponse | (not matches(txt,"") and |
| \(~\) | \(~\) | \(~\) | not matches(txt,"42")) |
| RawResultText | 1 | RawResponse | (not matches(txt,"") |
| \(~\) | \(~\) | \(~\) | and result_text(txt)) |
As shown in Table 3.3, the Hit ScoreWrong of the class ScoredResponse uses the matches()- operator two times, combined as logical expression (see section 4.1.3). The condition-syntax for the Hit RawResultText of the class RawResponse uses the result_text()-operator, also as part of a logical expression. The result_text()-operator copies the text of the component (see the UserDefinedId provided as argument) to the variables Result text).
To complete the scoring of the text-entry item, two more Hit-conditions are needed for the coding of missing responses: A Hit RawOR (assigned to the Class RawResponse) and a Hit ScoreOR (assigned to the Class ScoredResponse). Click the button Open to enter the following syntax as Condition: matches(txt,"") to both Hit-conditions.
10. Save, Preview and Test Scoring: This concludes the text-entry item and the project can now be saved () and previewed (). Check the scoring using the Scoring Debug Window in the preview (see section 1.5).
3.3.5 Create a Closing Page
1. Open Master and Save as SinglePageItems_END.zip: Open the master item created in section 3.3.1 (or download SinglePageItems_MasterProject.zip) using the icon in the CBA ItemBuilder (or use the main menu File and the entry Open project). Save the Project File with the new name SinglePageItems_04END.zip using the main menu File and the entry Save as... (or use the icon ).
2. Rename the Project: After saving the project to a new file, the project itself needs to be renamed as well. For that purpose, right click on the old project name SinglePageItems_MasterProject in the Project View and select Rename project. Enter the name SinglePageItems_END and confirm the dialog with OK.
3. Update Headline and Text: Open the page page01 in the Page Editor by double-clicking on page01 in the Project View and edit the HTMLTextFields. Replace the text Headline with Thank You and insert as Content the text You have reached the end of this short assessment. and then, after a line break: Click "Finish" to end the test. (italic). Close the HTML Text Editors each time with Save and Close.
4. Use the Resource Browser to Insert Image: As an example on how to use images, an image should be displayed on the last page. For this purpose, the picture must be added using the Resource Browser to the Project File first. Open the Resource Browser over the main menu Project and the entry Browse resources (or use the icon 
). Any image in one of the supported file formats (see section 3.10.1) can be used.41 Unpack this ZIP archive and then click the Add button in the Resource Browser of the CBA ItemBuilder to add the file ExampleImage_min.png to the list of Available resources. Close the Resource Browser via the small cross in the tab title ().
5. Add a ImageField and Link the Image: Once resources have been added to the Project File, they can be used in components. Next, add an ImageField. Components of type ImageField can be inserted into Panels. To add an ImageField, open the page page01 by double-clicking in the Project View for editing in the Page Editor and select the already existing Panel. Use the headline of the Properties view (right mouse button in the Page Editor and then the entry Show Properties View in the context menu) to check that you have selected the Panel. Then select the ImageField (
) in the Palette and click inside the Panel in the drawing area of the Page Editor with the left mouse button while moving the mouse so that a small rectangle is created. Click the ImageField with the right mouse button and select the entry Link Image. In the dialog Select Image that will appear, select the file name of the picture added in step 3 (e.g., ExampleImage_min.png). Finally, adjust the position of the ImageField by entering the following numbers in the section Position of the Properties view: Height: 380, Width: 944, X: 40, and Y: 240.
6. Update Button-Text: Finally, change the text of the Button from Next to Finish. To edit the text, double click the Button.
7. Save and Preview: This concludes the assessment component prepared as the last page. The project can now be saved () and previewed (). Verification of a scoring-definition is not necessary since the last page does not contain any response elements.
3.3.6 Create an Instruction Page
1. Open Master and Save as SinglePageItems_INSTR.zip: Open the master item created in section 3.3.1 (or download SinglePageItems_MasterProject.zip) using the icon in the CBA ItemBuilder (or use the main menu File and the entry Open project). Save the Project File with the new name SinglePageItems_01INSTR.zip using the main menu File and the entry Save as... )
2. Rename the Project: After saving the project to a new file, the project itself needs to be renamed as well. For that purpose, right click on the old project name SinglePageItems_MasterProject in the Project View and select Rename project. Enter the name SinglePageItems_INSTR and confirm the dialog with OK.
3. Update Headline and Remove HTMLTextField Content: Open the page page01 in the Page Editor by double-clicking on page01 in the Project View and edit the HTMLTextFields. Replace the text Headline with Welcome. After closing the HTML Text Editor with the button Save and Close select the second HTMLTextField at X: 40 and Y: 140 in the Page Editor. After selecting the HTMLTextField press the delete key or right click and select Delete from Model (
) to delete the second HTMLTextField.
4. Use the Resource Browser to Insert Video: As an example on how to use videos, a small video should be displayed on this first page. For this purpose, the video must be added using the Resource Browser to the Project File first. Open the Resource Browser over the main menu Project and the entry Browse resources (or use the icon ). Any video in one of the supported file formats (see section 3.10.1) can be used. If you don’t have a picture at hand, a sample image can be downloaded here: SinglePageItemsResources. Unpack this ZIP archive and then click the ‘Add’ button in the Resource Browser of the CBA ItemBuidler to add the file ExampleVideo.mp4 to the list of Available resources. The video was created using Microsoft PowerPoint’s export feature. The video size used for this export was 852x480 pixel. A *.mp4-file was created by PowerPoint that can be embedded and shown on a page, after it was added to the Resource Browser. Close the Resource Browser via the small cross in the tab title ().
5. Add a Video-Component and Link the Video: The video added to the Project File, can now be used in components. To play videos, the CBA ItemBuilder provides the Video-component. Video-components can be added to Panels. To place the component of type Video, open the page page01 by double-clicking in the Project View for editing in the Page Editor and select the already existing Panel. When the Panel is selected, components of type Video can be selected in the Palette. Select the Video (
) in the Palette and click inside the Panel in the drawing area of the Page Editor with the left mouse button while moving the mouse so that a small rectangle is created. Click the Video with the right mouse button and select the entry Link Video. In the dialog LinkVideo that will appear, click the button Browse for Internal Media and select the video’s file name added in step 3 (e.g., ExampleVideo.mp4). Adjust the Video position by entering the following numbers in the section Position of the Properties view: Height: 480, Width: 852, X: 40, and Y: 140. Finally, find the section Misc in the Properties view and configure Automatic Start: true and Hide Controls: true.
6. Save and Preview: This concludes the assessment component prepared as the first page. The project can now be saved () and previewed (). Note that the CBA ItemBuilder will inform you when requesting the Preview, that an automatically started audio or video might not be previewed correctly until the first user-interaction took place in the browser (see section 1.4.2 for details). Check the box Show login dialog. In the preview, a small dialog appears, asking for a Username. Use any Username. Because a user-interaction took place for entering the Username, the video will automatically start.
Summary: This hands-on section described how to create single-page items using the CBA ItemBuilder. Items made according to this template can be used for computer-based assessments. The quick-start section 7.1 picks up the created CBA ItemBuilder Project Files again and shows how to combine the Tasks as simple offline delivery. The sample items illustrate the three most common response formats (single-choice, multiple-choice, and short text responses). Only one item was placed on each page. The welcome page was used to illustrate how images can be embedded, and the instruction page gives an impression of how to include videos into assessment components created with the CBA ItemBuilder. The created ItemBuilder Project Files each contained only one Task with only one page of the type Simple Page. Dynamic content that will be introduced in chapter 4 was not required to implement the simple single page items.
If you don’t have a picture at hand, a sample image can be downloaded here: SinglePageItemsResources.zip.↩︎