CBA ItemBuilder Workshop: Session 12

Ulf Kroehne

Paris, 2022/11/07 - 2022/11/08

Session 12: Hands on ‘Finite-State Machine (1)’

Overview Session 12

Use of Audio (and Video) Control with FSM

Concept 3: Compute output on Drop Events

• Drag and Drop Events

Your Ideas:

• ?

Create and Embedd Audio File

• Generate MP3 file using https://ttsmp3.com/
  • Audio Text: This audio file is part of a listening task. In the audio stimulus, things are mentioned that must then have been remembered or understood in the following question. A little tip: The audio files can be generated quite well automatically nowadays with text-to-speech converters.
    
  • Download the file and rename the file to myaudio.mp3.

• Open Item AudioExampleItem.zip and import the downloaded *.mp3-file in the Resource Browser
• Add Component of type Audio to page page1 and configure the following properties:
  • User Defined Id: Audio1
  • X: 40, Y: 225, Height: 30, Width: 940
• Use Link Audio to link the Audio component to the Internal Media (i.e., file myaudio.mp3)

• Preview and change volume during runtime (i.e., using the controls of the Audio component).

Hide Audio-Controls

• Inspect the prepared Finite-State Machine syntax:

Events: EV_Play;
Rules: S->R{true}
R internal {EV_Play|setMediaPlayer(Audio1,mp_start)}

• The Operator setMediaPlayer(Audio1,mp_start) starts the audio playback. What is necessary, that this Operator is executed?

• Use the context menu Link Select Event with the button Play in page page1 and assign the event EV_Play.

• Edit the component Audio1 and change the following properties:
  • Hide Controls: true

• Preview the item.

Set Volumne to Max

Use the setMediaPlayerVolume()-operator to set the volume of the Audio-component to the max value (=10).

• Change the start rule from:

Events: EV_Play;
Rules: S->R{true}
R internal {EV_Play|setMediaPlayer(Audio1,mp_start)}

• To:

Events: EV_Play;
Rules: S->R{true|setMediaPlayerVolume(Audio1,10)}
R internal {EV_Play|setMediaPlayer(Audio1,mp_start)}

Simplify Interface (1)

Disable the “Play”-button, as soon as the audio file is played.

• Define a User Defined Id for the button with the Text: Play to BtPlay.
• Define an additional regular State with the name P:

• Replace the internal rule R internal {EV_Play|setMediaPlayer(Audio1,mp_start)} with a change from state R to state P.

Events: EV_Play;
Rules: S->R{true|setMediaPlayerVolume(Audio1,10)}
R => P {EV_Play|setMediaPlayer(Audio1,mp_start), setFrozen(BtPlay)}

• Use the State Machine Debug Window (Strg+M/Ctrl+M) to verify, that the machine changes to state P.

Simplify Interface (2)

Detect Audio-End to enable the “Play”-button when the playback stops.

• Define an additional event EV_PlayEnd:

Events: EV_Play, EV_PlayEnd;

• Close both editors of the State Machine (i.e. State Machine Rules and State Machine Tree View) and Save Changes.¹

• Open page1 in the Page Editor and right-click the Audio-component. Select Link Media Events and assign the event EV_PlayEnd to the slot End Event.

P => R {EV_PlayEnd|unsetFrozen(BtPlay)}

• Preview and verify the expected behavior.

1. This is required to save the changes and to update the Page Editor.

Count How often the Audio is Played

• Add variable V_AudioCounter with default value 0 (type: INTEGER)

• Increase variable as soon as the audio file is started:

R => P {EV_Play|setMediaPlayer(Audio1,mp_start), setFrozen(BtPlay), 
                set(V_AudioCounter,V_AudioCounter+1)}

Avoid Responses before Audio was Played

• Add Event EV_AnswerSelected

Events: EV_Play, EV_PlayEnd, EV_AnswerSelected;

• Close both State Machine Editors
• Assign EV_AnswerSelected to all RadioButtons using Link Raised Event in the Page Editor

• Add rule to de-select answers given, before the audio was played

R internal {EV_AnswerSelected : [V_AudioCounter==0]|unsetActive(a),
               unsetActive(b), unsetActive(c),unsetActive(d)}

Make Behavior Obious to Test-Takers

• Add a modal dialog with the following text: “Please listen to the audio before answering the question.”
• Add a button “Play now” to the dialog and link the CLOSE command as well as the EV_Play-event to the button.

• Calls the dialog by adding the openDialog(dialog,400,300)-operator

R internal {EV_AnswerSelected : [V_AudioCounter==0]|unsetActive(a),
               unsetActive(b), unsetActive(c),unsetActive(d), 
               openDialog(dialog,400,300)}

Group Work

End of Session 12: Hands-on ‘FSM 1’

Helpful to remember

• The default volume of Audio-components is defined using the Finite-State Machine Operator setMediaPlayer()
• Make sure the implemented behavior is evident and transparent for test-takers.

• Let’s have a break and continue after the break with more details about Finite-State Machines in session 13.

• What else have you learned?