API Docs for: 0.5.1
Show:

ExpLookitStoryPage Class

Uses
Extends ExpFrameBaseUnsafe
Defined in: addon/components/exp-lookit-story-page/component.js:16
Module: frames
Parent Module: exp-player

Frame to implement a basic "storybook page" trial, with images placed on the screen within a display area and a sequence of audio files played. Optionally, images may be highlighted at specified times during the audio files.

Webcam recording may be turned on or off; if on, the page is not displayed or audio started until recording begins.

Frame is displayed fullscreen, but is not paused or otherwise disabled if the user leaves fullscreen. A button appears prompting the user to return to fullscreen mode.

The parent may press 'next' to proceed, or the study may proceed automatically when audio finishes (autoProceed).

Any number of images may be placed on the screen, and their position specified. (Aspect ratio will be the same as the original image.)

These frames extend ExpFrameBaseUnsafe because they are displayed fullscreen and expected to be repeated.

"frames": {
   "story-intro-1": {
           "doRecording": false,
           "autoProceed": true,
           "baseDir": "https://s3.amazonaws.com/lookitcontents/ingroupobligations/",
           "audioTypes": ["mp3", "ogg"],
           "parentTextBlock": {
               "title": "Parents!",
               "text": "some instructions",
               "emph": true
           },
           "images": [
               {
                   "id": "leftA",
                   "src": "flurps1.jpg",
                   "left": "10",
                   "width": "30",
                   "top": "34.47"
               },
               {
                   "id": "rightA",
                   "src": "zazzes1.jpg",
                   "left": "60",
                   "width": "30",
                   "top": "34.47"
               }
           ],
           "kind": "exp-lookit-story-page",
           "id": "story-intro-1",
           "audioSources": [
               {
                   "audioId": "firstAudio",
                   "sources": [
                       {
                           "stub": "intro1"
                       }
                   ],
                   "highlights": [
                       {"range": [3.017343, 5.600283], "image":     "leftA"},
                       {"range": [5.752911, 8.899402], "image":     "rightA"}
                   ]
               }
           ]
       }
}

Methods

exitFullscreen

()

Inherited from FullScreen: addon/mixins/full-screen.js:127

Exit fullscreen mode

serializeContent

(
  • videoID
  • eventTimings
)
Object

Inherited from ExpFrameBase but overwritten in addon/components/exp-lookit-story-page/component.js:322

Parameters captured and sent to the server

Parameters:

  • videoID String

    The ID of any video recorded during this frame

  • eventTimings Object

Returns:

Object:

The payload sent to the server

showFullscreen

()

Inherited from FullScreen: addon/mixins/full-screen.js:89

Make a specified element fullscreen

Properties

audioSources

Object[]

Defined in addon/components/exp-lookit-story-page/component.js:196

Array of objects describing audio to play at the start of this frame. Each element describes a separate audio segment.

Sub-properties:

  • audioId String

    unique string identifying this audio segment

  • sources Object[]

    Array of {src: 'url', type: 'MIMEtype'} objects with audio sources for this segment

    Can also give a single element {stub: 'filename'}, which will be expanded out to the appropriate array based on baseDir and audioTypes values; see audioTypes.

  • highlights Object[]

    Array of {'range': [startT, endT], 'image': 'imageId'} objects, where the imageId values correspond to the ids given in images

audioTypes

String[]

Defined in addon/components/exp-lookit-story-page/component.js:168

List of audio types to expect for any audio specified just with a string rather than with a list of src/type pairs. If audioTypes is ['typeA', 'typeB'] and an audio source is given as [{'stub': 'intro'}], the audio source will be expanded out to

                [
                       {
                           src: 'baseDir' + 'typeA/intro.typeA',
                           type: 'audio/typeA'
                       },
                       {
                           src: 'baseDir' + 'typeB/intro.typeB',
                           type: 'audio/typeB'
                       }
               ]

Default: ['mp3', 'ogg']

autoProceed

Boolean

Defined in addon/components/exp-lookit-story-page/component.js:137

Whether to proceed automatically after audio (and hide replay/next buttons)

baseDir

String

Defined in addon/components/exp-lookit-story-page/component.js:147

Base directory for where to find stimuli. Any image src values that are not full paths will be expanded by prefixing with baseDir + img/. Any audio/video src values that give a value for 'stub' rather than 'src' and 'type' will be expanded out to baseDir/avtype/[stub].avtype, where the potential avtypes are given by audioTypes and videoTypes.

Note that baseDir SHOULD include a trailing slash (e.g., http://stimuli.org/myexperiment/, not http://stimuli.org/myexperiment)

Default: ''

doRecording

Boolean

Defined in addon/components/exp-lookit-story-page/component.js:127

Whether to do webcam recording (will wait for webcam connection before starting audio if so)

fsButtonID

String

Inherited from FullScreen: addon/mixins/full-screen.js:24

The element ID of a button to show if the user leaves fullscreen mode

fullScreenElementId

String

Inherited from FullScreen: addon/mixins/full-screen.js:17

The element ID of the thing to make full screen (video element, div, etc)

images

Object[]

Defined in addon/components/exp-lookit-story-page/component.js:284

Array of images to display and information about their placement

Sub-properties:

  • id String

    unique ID for this image

  • src String

    URL of image source. This can be a full URL, or relative to baseDir (see baseDir).

  • left String

    left margin, as percentage of story area width

  • width String

    image width, as percentage of story area width

  • top String

    top margin, as percentage of story area height

parentTextBlock

Object

Defined in addon/components/exp-lookit-story-page/component.js:261

Text block to display to parent.

Sub-properties:

  • title String

    title to display

  • text String

    paragraph of text

  • emph Boolean

    whether to bold this paragraph

Events

enteredFullscreen

Defined in addon/components/exp-lookit-story-page/component.js:460

Upon detecting change to fullscreen mode

leftFullscreen

Defined in addon/components/exp-lookit-story-page/component.js:453

Upon detecting change out of fullscreen mode

nextFrame

Inherited from ExpFrameBase: addon/components/exp-frame-base/component.js:214

Move to next frame

onCamAccess

Defined in addon/components/exp-lookit-story-page/component.js:504

When recorder detects a change in camera access

Event Payload:

stoppingCapture

Defined in addon/components/exp-lookit-story-page/component.js:379

Just before stopping webcam video capture

videoStreamConnection

Defined in addon/components/exp-lookit-story-page/component.js:516

When recorder detects a change in video stream connection status

Event Payload:

  • status String

    status of video stream connection, e.g. 'NetConnection.Connect.Success' if successful