Add preference to change how the number bond looks

[catherinecarter]

During interviews, a parent (who is also a math educator) mentioned that the curricular materials their son uses does not use the number bond representation currently in the sim. Upon showing the way the number bond is displayed in other materials, discussions of how the number bond looked echoed in my head during design meetings.

To honor both our design meeting curiosities and the parent's noticing that not all students will connect to the current representation, I'd like to add a preference to the settings menu where users could change how the number bond is represented.

Current design:

Preference toggle option:

Key features:

• The bottom two rectangles will change width to reflect a somewhat proportional (not exact) decomposition of the number

  • In other words, the total rectangle will remain a constant width (purple, as shown), regardless of what the total is

• The addends will only be equal in size when the decomposition has equal addends

• The smallest either rectangle could be is when one of the addends is zero, in which case the rectangle would be as small as possible and still show the addend.
  

• OR
  

Design questions:

• How much space to leave between the total rectangle (purple) and the addends (pink/blue)? (I'm leaning towards zero space)
• When one of the addends is zero, should it say zero, or should it be much more area-oriented where the zero addend disappears so the rectangles are the same size for the addend and the total?

[catherinecarter]

In the design meeting on 12/04, we made the following decisions:

• There will be no space between the bottom two rectangles with the addends; they will essentially be one rectangle with a vertical line separating them.
• We'd like to try making the rectangles proportional to their area for the addends, if possible. We know the text would have to shrink, but the opportunity to reinforce the relative size of the addends seems like a good thing to explore
  • 

[marlitas]

Added above. @catherinecarter let me know what you think. Some things to solidify:

• Name of the new diagram (currently called barModel in the code)
• Name of the preferences option and choices ( currently number model type with options number bond and bar model)
• Query parameter name and options (on hold until decided)

The wider the total rectangle the more space there is for the numbers. Right now it really only starts to seem weird until we're at the ratio 20:1. If we're wanting to make the total rectangle more narrow that ratio oddity range will expand.
Of note, is that it is wider than the number bond so the accordion box adjusts accordingly.

[catherinecarter]

My initial reaction is that I love it! I don't mind that the accordion box changes size since you'll never see both representations at the same time.

I agree that the decomposition of 20 into 19 and 1 is the threshold for needing the reduce the size of the number 1. Looks like it starts to get cramped at 16 decomposed into 15 and 1.

We'll hold off on the name until we get a chance to show the design team, and for the radio buttons in the preferences, I'll draw an image of it so we won't have to say a name at all in the preferences menu.

Thanks for your hard work on this. I really do love it.

[marlitas]

That's great! I didn't see next steps in your comment, how would you like me to proceed until the design team is able to review?
If there's nothing to proceed on yet it would be helpful to assign back to me once those decisions have been made.

[catherinecarter]

One thing to do while we wait for a design meeting is to ensure the "0" does not appear when the area of the rectangle for the zero addend is zero. Currently, the zero still appears.

Not sure if this is related to the swapping addends button being buggy, but I'm seeing this in the beads as well:

Or this when I press the "organize" button:

If those are things that don't depend on any design team decisions, those could be worked on as well.

For the rest, we'll wait until he design team has a look to see if it's worth the time to shrink the "1" for 16 and up (maybe 15, depending on what the design team agrees to).

Thanks!

[marlitas]

Yeah I wouldn't trust anything in the beads right now.

[marlitas]

Okay I updated so that we are handling the case when either addend is equal to 0. Over to @catherinecarter for next steps.

[catherinecarter]

The bar model looks good, and the modification to account for when one of the addends is zero also looks good.

There are other issues related to this, so for documentation and paper trail...

• Add icons to preferences menu for switching number bond representations #68
• Flip the bar model on Sum screen #75

[marlitas]

Okay prefect. I will go ahead and close this issue then. Thanks @catherinecarter!