show optional visual indicator of whether child is looking in -infant…

…-control frames; allow delaying measurement period relative to stimulus onset. Finishes addressing #143

app/components/exp-lookit-images-audio-infant-control/doc.rst

@@ -58,6 +58,7 @@ than 2 s total, as coded by the parent holding down the P key, it will proceed.
         "endTrialKey": "q",
         "lookawayTone": "noise",
         "lookawayToneVolume": 0.25,
+        "showLookawayVisualGuide": true,
 
         "images": [
             {

app/components/exp-lookit-video-infant-control/doc.rst

@@ -45,8 +45,8 @@ restarting.
 Examples
 ----------------
 
-This frame will play through a central video of Kim introducing an apple up to five times. Once the child looks away for more
-than 2 s total, as coded by the parent holding down the P key, it will proceed.
+This frame will play through a central video of Kim introducing an apple up to five times. After the first 10 seconds,
+once the child looks away for more than 2 s total, as coded by the parent holding down the P key, it will proceed.
 
 .. code:: javascript
 
@@ -55,9 +55,11 @@ than 2 s total, as coded by the parent holding down the P key, it will proceed.
         "lookawayKey": "p",
         "lookawayType": "total",
         "lookawayThreshold": 2,
-        "endTrialKey": "q",
+        "endTrialKey": "",
         "lookawayTone": "noise",
         "lookawayToneVolume": 0.25,
+        "showLookawayVisualGuide": true,
+        "measurementPeriodDelay": 10,
 
         "audio": {
             "loop": false,

app/mixins/infant-controlled-timing.js

@@ -138,6 +138,18 @@ var infantControlledTimingMixin = Ember.Mixin.create({
             type: 'number',
             default: .25,
             description: 'Volume of lookaway tone, as fraction of full volume (1 = full volume, 0 = silent)'
+        },
+
+        showLookawayVisualGuide: {
+            type: 'boolean',
+            default: false,
+            description: 'Whether to show a border around the screen when the child isn\'t looking'
+        },
+
+        measurementPeriodDelay: {
+            type: 'number',
+            default: 0,
+            description: 'Number of seconds to delay measurement of looking time, beyond when it would ordinarily start'
         }
     },
 
@@ -178,6 +190,7 @@ var infantControlledTimingMixin = Ember.Mixin.create({
     _isLooking: true,
 
     _endTrialDueToLookawayTimer: null,
+    _delayLookingMeasurementPeriodTimer: null,
 
     _controlPeriodStarted: false,
     _anyLookDuringControlPeriod: false,
@@ -214,6 +227,10 @@ var infantControlledTimingMixin = Ember.Mixin.create({
         if ($lookawayTone.length) {
             $lookawayTone[0].play();
         }
+        if (this.get('showLookawayVisualGuide')) {
+            $('div.lookit-frame > div').addClass('infant-control-mixin-looking-away');
+            $('div.lookit-frame > div').removeClass('infant-control-mixin-looking');
+        }
     },
 
     _recordLookawayEnd() {
@@ -241,6 +258,10 @@ var infantControlledTimingMixin = Ember.Mixin.create({
         if ($lookawayTone.length) {
             $lookawayTone[0].pause();
         }
+        if (this.get('showLookawayVisualGuide')) {
+            $('div.lookit-frame > div').addClass('infant-control-mixin-looking');
+            $('div.lookit-frame > div').removeClass('infant-control-mixin-looking-away');
+        }
     },
 
     setTrialEndTime() {
@@ -278,34 +299,46 @@ var infantControlledTimingMixin = Ember.Mixin.create({
      * @method startParentControl
      */
     startParentControl() {
-        this.set('_totalLookaway', 0);
-        this.set('_anyLookDuringControlPeriod', this.get('_isLooking'));
-        this.set('_trialStartTime', new Date());
-        this.set('_controlPeriodStarted', true);
-        /**
-         * When interval of parent control of trial begins - i.e., lookaways begin counting up to threshold.
-         * Lookaway events are recorded throughout, but do not count towards ending trial until parent control period
-         * begins.
-         *
-         * @event parentControlPeriodStart
-         */
-        this.send('setTimeEvent', 'parentControlPeriodStart');
-
-        $(document).on('keyup.parentEndTrial', (e) => {
-            if (this.checkFullscreen()) {
-                if (this.get('endTrialKey') && e.key === this.get('endTrialKey')) {
-                    /**
-                     * When trial ends due to parent pressing key to end trial
-                     *
-                     * @event parentEndedTrial
-                     */
-                    this.send('setTimeEvent', 'parentEndedTrial');
-                    this.set('trialEndReason', 'parentEnded');
-                    this.setTrialEndTime();
-                    this.onLookawayCriterion();
-                }
-            }
-        });
+        let _this = this;
+        this.set('_delayLookingMeasurementPeriodTimer', window.setTimeout( function() {
+                _this.set('_totalLookaway', 0);
+                _this.set('_anyLookDuringControlPeriod', _this.get('_isLooking'));
+                _this.set('_trialStartTime', new Date());
+                _this.set('_controlPeriodStarted', true);
+                /**
+                 * When interval of parent control of trial begins - i.e., lookaways begin counting up to threshold.
+                 * Lookaway events are recorded throughout, but do not count towards ending trial until parent control period
+                 * begins.
+                 *
+                 * @event parentControlPeriodStart
+                 */
+                _this.send('setTimeEvent', 'parentControlPeriodStart');
+
+                $(document).on('keyup.parentEndTrial', (e) => {
+                    if (_this.checkFullscreen()) {
+                        if (_this.get('endTrialKey') && e.key === _this.get('endTrialKey')) {
+                            /**
+                             * When trial ends due to parent pressing key to end trial
+                             *
+                             * @event parentEndedTrial
+                             */
+                            _this.send('setTimeEvent', 'parentEndedTrial');
+                            _this.set('trialEndReason', 'parentEnded');
+                            _this.setTrialEndTime();
+                            _this.onLookawayCriterion();
+                        }
+                    }
+                });
+            },
+            this.get('measurementPeriodDelay') * 1000)
+        );
+
+
+
+
+
+
+
     },
 
     /**
@@ -315,6 +348,7 @@ var infantControlledTimingMixin = Ember.Mixin.create({
      * @method endParentControl
      */
     endParentControl() {
+        window.clearTimeout(this.get('_delayLookingMeasurementPeriodTimer'));
         this.set('_controlPeriodStarted', false);
         /**
          * When interval of parent control of trial ends - i.e., lookaways cannot lead to ending trial, parent cannot
@@ -363,6 +397,12 @@ var infantControlledTimingMixin = Ember.Mixin.create({
             console.error(`Error setting lookaway tone: ${e}`);
         }
 
+        // Start off assuming looking & display as such
+        if (this.get('showLookawayVisualGuide')) {
+            $('div.lookit-frame > div').addClass('infant-control-mixin-looking');
+            $('div.lookit-frame > div').removeClass('infant-control-mixin-looking-away');
+        }
+
         this._super(...arguments);
     },
 

app/mixins/infant-controlled-timing.rst

@@ -68,6 +68,16 @@ lookawayTone [String | ``'noise'``]
 lookawayToneVolume [Number | ``0.25``]
      Volume of lookaway tone, as fraction of full volume (1 = full volume, 0 = silent)
 
+showLookawayVisualGuide [Boolean | ``false``]
+    Whether to show a visual guide of whether the child is looking. If true, a thick green border is displayed at the
+    edge of the screen when the child is coded as looking, and a dashed gray border is displayed when the child is not
+    looking.
+
+measurementPeriodDelay [Number | ``0``]
+    How many seconds to delay the measurement period, relative to when it would ordinarily begin  (e.g., with stimulus
+    presentation). Lookaways are still recorded before this, but don't count towards the total lookaway time. Parents
+    cannot end the trial using the endTrialKey before this.
+
 Data collected
 ----------------
 

app/styles/app.scss

@@ -147,6 +147,15 @@ p#pipeClickPowered {
     font-size: large;
 }
 
+div.lookit-frame {
+    > div.infant-control-mixin-looking-away {
+        border: 10px dashed gray;
+    }
+    > div.infant-control-mixin-looking {
+        border: 10px solid green;
+    }
+}
+
 .video-record-mixin-wait-for-video, .pause-unpause-mixin-cover {
     width: 100vw;
     height: 100vh;