Fix reset, see #172

js/common/model/SoccerBall.ts

@@ -154,11 +154,15 @@ export default class SoccerBall {
   }
 
   public reset(): void {
+
+    // Reset the drag position first, since it triggers a change in the position property and the value property (if it is clamped)
+    // TODO: It is odd and awkward that it takes this value through value = 1 during reset, should we fix it? See https://github.com/phetsims/center-and-variability/issues/172
+    this.dragPositionProperty.reset();
+
     this.positionProperty.reset();
     this.velocityProperty.reset();
     this.animationModeProperty.reset();
     this.valueProperty.reset();
-    this.dragPositionProperty.reset();
     this.isMedianObjectProperty.reset();
     this.isQ1ObjectProperty.reset();
     this.isQ3ObjectProperty.reset();

js/median/view/CardNodeContainer.ts

@@ -183,6 +183,15 @@ export default class CardNodeContainer extends Node {
         totalDragDistanceProperty.value += distance;
       } );
 
+      const removeCardCell = ( cardNode: CardNode ) => {
+        const index = this.cardNodeCells.indexOf( cardNode );
+
+        if ( index >= 0 ) {
+          this.cardNodeCells.splice( index, 1 );
+          this.cardNodeCellsChangedEmitter.emit();
+        }
+      };
+
       cardModel.isActiveProperty.link( isActive => {
         if ( isActive && !phet.joist.sim.isSettingPhetioStateProperty.value ) {
 
@@ -206,9 +215,13 @@ export default class CardNodeContainer extends Node {
           this.cardNodeCellsChangedEmitter.emit();
         }
         else if ( !isActive ) {
-          const index = this.cardNodeCells.indexOf( cardNode );
-          this.cardNodeCells.splice( index, 1 );
-          this.cardNodeCellsChangedEmitter.emit();
+          removeCardCell( cardNode );
+        }
+      } );
+
+      cardModel.soccerBall.valueProperty.link( value => {
+        if ( value === null ) {
+          removeCardCell( cardNode );
         }
       } );