Add QuestionBar text labels, see #6

phetsims · Feb 2, 2022 · 8cf826c · 8cf826c
1 parent 95d981e
commit 8cf826c
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 8 deletions.
diff --git a/center-and-spread-strings_en.json b/center-and-spread-strings_en.json
@@ -13,5 +13,14 @@
   },
   "screen.lab": {
     "value": "Lab"
+  },
+  "medianQuestion": {
+    "value": "What is the typical ball distance?"
+  },
+  "meanAndMedianQuestion": {
+    "value": "How does each kick influence the mean and median?"
+  },
+  "spreadQuestion": {
+    "value": "How consistent is ball distance?"
   }
 }
diff --git a/js/centerAndSpreadStrings.ts b/js/centerAndSpreadStrings.ts
@@ -16,7 +16,10 @@ type StringsType = {
     'meanAndMedian': string,
     'spread': string,
     'lab': string
-  }
+  },
+  'medianQuestion': string,
+  'meanAndMedianQuestion': string,
+  'spreadQuestion': string
 };
 
 const centerAndSpreadStrings = getStringModule( 'CENTER_AND_SPREAD' ) as StringsType;

diff --git a/js/common/CASConstants.ts b/js/common/CASConstants.ts
@@ -10,11 +10,8 @@
 import centerAndSpread from '../centerAndSpread.js';
 
 const CASConstants = {
-
   SCREEN_VIEW_X_MARGIN: 15,
   SCREEN_VIEW_Y_MARGIN: 15
-
-  //TODO
 };
 
 centerAndSpread.register( 'CASConstants', CASConstants );

diff --git a/js/common/view/QuestionBar.ts b/js/common/view/QuestionBar.ts
@@ -10,10 +10,15 @@
 import optionize from '../../../../phet-core/js/optionize.js';
 import centerAndSpread from '../../centerAndSpread.js';
 import StatusBar from '../../../../vegas/js/StatusBar.js';
+import { Text } from '../../../../scenery/js/imports.js';
 import Bounds2 from '../../../../dot/js/Bounds2.js';
 import Property from '../../../../axon/js/Property.js';
+import PhetFont from '../../../../scenery-phet/js/PhetFont.js';
+import CASConstants from '../CASConstants.js';
 
-type QuestionBarSelfOptions = {};
+type QuestionBarSelfOptions = {
+  labelText: string
+};
 type StatusBarOptions = {}; // TODO: Add Options in StatusBar
 export type QuestionBarOptions = QuestionBarSelfOptions & Omit<StatusBarOptions, 'floatToTop'>
 
@@ -25,6 +30,19 @@ class QuestionBar extends StatusBar {
       floatToTop: true
     }, providedOptions );
     super( layoutBounds, boundsProperty, options );
+
+    const labelText = new Text( options.labelText, {
+      font: new PhetFont( {
+        weight: 'bold',
+        size: '18px'
+      } )
+    } );
+    this.addChild( labelText );
+
+    this.positioningBoundsProperty.link( bounds2 => {
+      labelText.centerY = bounds2.centerY;
+      labelText.left = CASConstants.SCREEN_VIEW_X_MARGIN;
+    } );
   }
 }
 

diff --git a/js/mean-and-median/view/MeanAndMedianScreenView.ts b/js/mean-and-median/view/MeanAndMedianScreenView.ts
@@ -13,6 +13,7 @@ import centerAndSpread from '../../centerAndSpread.js';
 import MeanAndMedianModel from '../model/MeanAndMedianModel.js';
 import SoccerScreenView, { SoccerScreenViewOptions } from '../../common/view/SoccerScreenView.js';
 import CASColors from '../../common/CASColors.js';
+import CenterAndSpreadStrings from '../../centerAndSpreadStrings.js';
 
 type MeanAndMedianScreenViewOptions = SoccerScreenViewOptions;
 
@@ -26,7 +27,8 @@ class MeanAndMedianScreenView extends SoccerScreenView {
       tandem: Tandem.REQUIRED,
 
       questionBarOptions: {
-        barFill: CASColors.meanAndMedianQuestionBarFillColorProperty
+        barFill: CASColors.meanAndMedianQuestionBarFillColorProperty,
+        labelText: CenterAndSpreadStrings.meanAndMedianQuestion
       }
     }, providedOptions );
 

diff --git a/js/median/view/MedianScreenView.ts b/js/median/view/MedianScreenView.ts
@@ -14,6 +14,7 @@ import MedianModel from '../model/MedianModel.js';
 import { CASScreenViewOptions } from '../../common/view/CASScreenView.js';
 import SoccerScreenView from '../../common/view/SoccerScreenView.js';
 import CASColors from '../../common/CASColors.js';
+import CenterAndSpreadStrings from '../../centerAndSpreadStrings.js';
 
 type MedianScreenViewOptions = CASScreenViewOptions;
 
@@ -27,7 +28,8 @@ class MedianScreenView extends SoccerScreenView {
       tandem: Tandem.REQUIRED,
 
       questionBarOptions: {
-        barFill: CASColors.medianQuestionBarFillColorProperty
+        barFill: CASColors.medianQuestionBarFillColorProperty,
+        labelText: CenterAndSpreadStrings.medianQuestion
       }
     }, providedOptions );
 

diff --git a/js/spread/view/SpreadScreenView.ts b/js/spread/view/SpreadScreenView.ts
@@ -13,6 +13,7 @@ import centerAndSpread from '../../centerAndSpread.js';
 import SpreadModel from '../model/SpreadModel.js';
 import SoccerScreenView, { SoccerScreenViewOptions } from '../../common/view/SoccerScreenView.js';
 import CASColors from '../../common/CASColors.js';
+import CenterAndSpreadStrings from '../../centerAndSpreadStrings.js';
 
 type SpreadScreenViewOptions = SoccerScreenViewOptions;
 
@@ -26,7 +27,8 @@ class SpreadScreenView extends SoccerScreenView {
       tandem: Tandem.REQUIRED,
 
       questionBarOptions: {
-        barFill: CASColors.spreadQuestionBarFillColorProperty
+        barFill: CASColors.spreadQuestionBarFillColorProperty,
+        labelText: CenterAndSpreadStrings.spreadQuestion
       }
     }, providedOptions );