Add color highlights to text, #4

phetsims · Sep 13, 2024 · 5437c40 · 5437c40
1 parent 6b5a233
commit 5437c40
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 3 deletions.
diff --git a/js/common/view/NumberSentenceAccordionBox.ts b/js/common/view/NumberSentenceAccordionBox.ts
@@ -9,7 +9,7 @@
 import numberPairs from '../../numberPairs.js';
 import PatternStringProperty from '../../../../axon/js/PatternStringProperty.js';
 import NumberPairsStrings from '../../NumberPairsStrings.js';
-import { RichText, Text } from '../../../../scenery/js/imports.js';
+import { RichText, Text, Node, Rectangle } from '../../../../scenery/js/imports.js';
 import NumberPairsConstants from '../NumberPairsConstants.js';
 import SumRepresentationAccordionBox, { SumRepresentationAccordionBoxOptions } from './SumRepresentationAccordionBox.js';
 import optionize, { EmptySelfOptions } from '../../../../phet-core/js/optionize.js';
@@ -84,8 +84,58 @@ export default class NumberSentenceAccordionBox extends SumRepresentationAccordi
         rightAddend: value => LOWERCASE_NUMBER_TO_WORD_MAP.get( value ).value
       }
     } );
+
+    let sumHighlight: Rectangle;
+    let leftAddendHighlight: Rectangle;
+    let rightAddendHighlight: Rectangle;
     const richText = new RichText( numberSentencePatternStringProperty, {
-      lineWrap: 250
+      lineWrap: 250,
+      leading: 10,
+      tags: {
+        sum: node => {
+          sumHighlight = new Rectangle( node.bounds.dilated( 1 ), {
+            fill: model.sumColorProperty.value
+          } );
+          return new Node( {
+            children: [
+              sumHighlight,
+              node
+            ]
+          } );
+        },
+        left: node => {
+          leftAddendHighlight = new Rectangle( node.bounds.dilated( 1 ), {
+            fill: model.leftAddendColorProperty.value
+          } );
+          return new Node( {
+            children: [
+              leftAddendHighlight,
+              node
+            ]
+          } );
+        },
+        right: node => {
+          rightAddendHighlight = new Rectangle( node.bounds.dilated( 1 ), {
+            fill: model.rightAddendColorProperty.value
+          } );
+          return new Node( {
+            children: [
+              rightAddendHighlight,
+              node
+            ]
+          } );
+        }
+      }
+    } );
+
+    model.sumColorProperty.link( color => {
+      sumHighlight.fill = color;
+    } );
+    model.leftAddendColorProperty.link( color => {
+      leftAddendHighlight.fill = color;
+    } );
+    model.rightAddendColorProperty.link( color => {
+      rightAddendHighlight.fill = color;
     } );
 
     const titleNode = new Text( NumberPairsStrings.numberSentenceStringProperty, {

diff --git a/number-pairs-strings_en.json b/number-pairs-strings_en.json
@@ -27,7 +27,7 @@
     "value": "Equation"
   },
   "numberSentencePattern": {
-    "value": "{{sum}} can be decomposed into {{leftAddend}} and {{rightAddend}}."
+    "value": "<sum>{{sum}}</sum> can be decomposed into <left>{{leftAddend}}</left> and <right>{{rightAddend}}</right>."
   },
   "zero": {
     "value": "zero"