Frame to implement a storybook page with dialogue spoken by characters. First, characters appear and any main narration audio is played. Next, the user can click on the characters to play additional audio associated with each character image, or (for a choice trial) the user clicks one of the images to select it as an answer. Once main narration audio has been played and either a selection has been made (for a choice trial, isChoiceFrame: true) or all required character audio has been played (for a non-choice trial), the user can proceed by pressing 'next'. (A trial with only main narration audio can also simply auto-proceed when audio is finished.)

Recording is optional. If webcam recording is conducted (doRecording: true) then audio does not start until recording does, to ensure the entire trial is recorded.

The character images are specified in 'images', including an image source, positioning on the screen, any animation at the start of the trial, any associated audio, and whether that audio is required.

This frame extends ExpFrameBaseUnsafe because it is displayed fullscreen and expected to be repeated.

The examples below show a few expected uses of this frame. In phase-2, two characters are shown; the protagonist is already present, and speaker1 flies in from the left. Speaker1 has associated audio (dialogue). After the narrative audio, the user can click on speaker1 to play the audio, and will then be able to proceed.

phase-5 is a choice trial, where the user has to click on one of the two images before proceeding.

"frames":
       "phase-2": {
           "kind": "exp-lookit-dialogue-page",
           "id": "phase-2",
           "baseDir": "https://s3.amazonaws.com/lookitcontents/politeness/",
           "audioTypes": ["mp3", "ogg"],
           "backgroundImage": "order1_test1_background.png",
           "doRecording": false,
           "autoProceed": false,
           "parentTextBlock": {
               "title": "Parents!",
               "text": "some instructions",
               "emph": true
           },
           "images": [
               {
                   "id": "protagonist",
                   "src": "order1_test1_listener1.png",
                   "left": "40",
                   "bottom": "2",
                   "height": "60"
               },
               {
                   "id": "speaker1",
                   "text": "Click to hear what he said!",
                   "src": "order1_test1_speaker1.png",
                   "left": "20",
                   "bottom": "2",
                   "height": "60",
                   "animate": "flyleft",
                   "requireAudio": true,
                   "imageAudio": [
                       {
                           "stub": "polcon_example_2_2speaker1polite"
                       }
                   ]
               }
           ],
           "audioSources": [
               {
                   "audioId": "firstAudio",
                   "sources": [
                       {
                           "stub": "polcon_example_2_1intro"
                       }
                   ]
               }
           ]
       },
       "phase-5": {
           "kind": "exp-lookit-dialogue-page",
           "id": "phase-5",
           "baseDir": "https://s3.amazonaws.com/lookitcontents/politeness/",
           "audioTypes": ["mp3", "ogg"],
           "backgroundImage": "order1_test1_background.png",
           "doRecording": false,
           "autoProceed": false,
           "isChoiceFrame": true,
           "parentTextBlock": {
               "title": "Parents:",
               "text": "click on the character your child selects.",
               "emph": true
           },
           "images": [
               {
                   "id": "speaker1",
                   "src": "order1_test1_speaker1.png",
                   "left": "20",
                   "bottom": "2",
                   "height": "60"
               },
               {
                   "id": "speaker2",
                   "src": "order1_test1_speaker2.png",
                   "left": "60",
                   "bottom": "2",
                   "height": "60"
               }
           ],
           "audioSources": [
               {
                   "audioId": "firstAudio",
                   "sources": [
                       {
                           "stub": "polcon_example_5q1"
                       }
                   ]
               }
           ]
       }
}