Solve It! screen

[pixelzoom]

In 1/18/18 design meeting, we discussed the possibility of adding a 5th screen -- call it the "Mystery" screen, for the sake of discussion. In this screen, the student is presented with equations (challenges) and must solve for 1 variable (x).

Tentative conclusions:

• the value of x is always be an integer
• coefficients and constants are integers or fractions (proper or improper; as in other screens, no mixed fractions)
• equations contain one 'x' term, on either the left or right side of the equations
• equations are randomly generated (vs selected from a pool) using a range for coefficients and constants
• no scoring, no revealing the value of 'x'.
• layout is similar to the Solving screen, but without the following UI components: carousels below the scale, lock button, reset button on scale, "Variable" accordion box, "x=" check box in Snapshots
• add buttons for "Next Challenge" and "Replay Challenge"
• show 2 equations about the universal operator. The top equation is the challenge, the bottom equation is the current state of what's on the scale. Equations are not in an accordion box, since there's no reason to hide them.
• terms on the scale are not interactive; all interaction with the equation is via the universal operator
• may want to exclude "x 0" from the universal operator, since that would remove the 'x' term, with no way to restore it
• "scene" radio buttons, for selecting different levels of challenges
• Snapshots works like it does on other screens

Questions:

• With no scoring or "revealing" of answer, what is the motivator for playing?
• Equations only, or inequalities too?

Next steps:

• state the learning goals
• review the above conclusions & questions
• mockups
• estimate impact on the sim's schedule and other work that is scheduled after this sim
• flesh out requirements (ranges used to generate challenges, challenge levels, etc.)

[pixelzoom]

@amanda-phet @kathy-phet @ariel-phet I've created this issue for further discussion of the (tentatively titled) Mystery screen. 1/18/18 meeting notes in the design document were a bit incomplete, so the above is a superset of what's in the design doc.

The suggestion to add this screen comes at an awkward time. The Mystery screen is based on the Solving screen. I'm in the middle of implementing the Solving screen and have already made some decisions that may need to be revised or reversed. So if this is indeed a screen that you want to include in a 1.0.0 release (or any release, for that matter), I recommend making that decision in the next week, and having the design completed within the next 2 weeks.

[amanda-phet]

All of the bullets look correct to me.

• show 2 equations about the universal operator. The top equation is the challenge, the bottom equation is the current state of what's on the scale. Equations are not in an accordion box, since there's no reason to hide them.

I'm having a hard time figuring this one out as I'm playing around with mockups today. This seems like the biggest design challenge to me at this point.

I am also thinking we should have a prompt like "solve it!" because the Mystery screen in Function Builder that we are modeling this off of has question marks to indicate the mystery, as well as a way to reveal the final answer. So a prompt might help students understand the goal of the interaction.

[amanda-phet]

Can you add a bullet for remove "x = ?" checkbox, or modify the snapshots bullet to include this change.

[pixelzoom]

I edited this bullet item:

• layout is similar to the Solving screen, but without the following UI components: carousels below the scale, lock button, reset button on scale, "Variable" accordion box, "x=" check box in Snapshots

[amanda-phet]

I just noticed your questions.

• With no scoring or "revealing" of answer, what is the motivator for playing?

As I play aroudn with this screen, I think we should think about the model used in Make a Ten. At the top is the original problem. Students can't so anything right or wrong when interacting. Once they achieve the goal of finding the final number (or in our case, isolating x on one side of the balance), a "next" button appears that takes them to another problem, so they know they can do another challenge. They can also just keep playing around if they want.

• Equations only, or inequalities too?

I thought we decided Equations only. I don't think it's meaningful to include inequalities here because the solving process is the same, and inequalities have a solution set that is most meaningful when tied to a graph on a number line or some other representation.

[amanda-phet]

In terms of learning goals, I think it's pretty straightforward:
• Solve a given equation using only universal operations
• Interpret a solution as the value that balances x

Here is a first mockup that includes new components.

[pixelzoom]

@amanda-phet said:

Once they achieve the goal of finding the final number (or in our case, isolating x on one side of the balance), a "next" button appears that takes them to another problem, so they know they can do another challenge. They can also just keep playing around if they want.

In the above mockup, is the "next" button the one in the upper-right corner of the screen? (Same "next" button as Function Builder's "Mystery" screen?)

If the "next" button doesn't appear using they've achieved the goal (solved for 'x'), what happens if they get stuck on a challenge and want to skip it?

[amanda-phet]

In the above mockup, is the "next" button the one in the upper-right corner of the screen? (Same "next" button as Function Builder's "Mystery" screen?)

I don't have a next button in the mockup because I only included elements from the original list of changes... if we want to follow that model I'd re-think this a bit.

If the "next" button doesn't appear using they've achieved the goal (solved for 'x'), what happens if they get stuck on a challenge and want to skip it?

The refresh button at the top is supposed to give a new challenge to work on. I don't like the current location, but that top bar seems like a logical place for it.

If we want a button to reset the problem being worked on we'll need to include that somewhere... perhaps on the base of the balance?

[pixelzoom]

In #34 (comment) @amanda-phet said:

As I play aroudn with this screen, I think we should think about the model used in Make a Ten. ...

If you're referring to the "Game" screen in Make A Ten, it provides a score (number of correct answers) in the upper right corner. E.g.:

[pixelzoom]

@amanda-phet said:

I don't have a next button in the mockup because I only included elements from the original list of changes... if we want to follow that model I'd re-think this a bit. ... The refresh button at the top is supposed to give a new challenge to work on.

I don't understand. If the "refresh" button provides a new challenge, how is that different from a "next" button? And why are both needed?

[amanda-phet]

Yes, the Game screen, but more the model for interacting with the challenge. This screen reminded me a lot of the Make a Ten game because you can play around a lot and nothing is "wrong", but once you reach the goal (in MaT that is combining the numbers, in EqEx that is isolating x), a next button appears to indicate that you've achieved the goal and you are prompted to try another problem.

[pixelzoom]

I still don't understand this UX. But I'll wait for mockups + scenarios.

[amanda-phet]

It would be helpful to have feedback from @ariel-phet and @kathy-phet, too.

Can we have a design meeting Thursday and bring more mockups then? Or should we try to meet sooner?

[pixelzoom]

Thursday is plenty early for me. I have no shortage of things to work on. And the logic I'm working on for the remainder of this week is not dependent on this screen.

Ultimately, we need to describe these scenarios:

(1) solving a challenge
(2) advancing to the next challenge
(3) switching between levels
(4) resetting (can you reset a challenge? a level? or can you only reset all?)

For a design meeting, it would be nice to have mockups for at least (1) and (2).

[pixelzoom]

The mockup in #34 (comment) shows a set of radio buttons for switching between levels. That's similar to Function Builder, which has no scoring. If you want to show a score (e.g. # of stars), then you might consider a level-selection UI, like the "Game" screen in Make a Ten or Expression Exchange.

[pixelzoom]

@amanda-phet said:

It would be helpful to have feedback from @ariel-phet and @kathy-phet, too.

In addition to feedback on the UX design, we'll need feedback from @ariel-phet and @kathy-phet on the cost/impact of adding (or not adding) this screen. If included in 1.0, it will push out the schedule of this sim and Gas Properties. If we don't include it in 1.0, it is likely to be very costly (and certainly destabilizing) to add in the future, based on how complicated this sim's user-interaction is.

Since game screens are notoriously more expensive than non-game screens, my WAG is that this screen will add at least 2 months to the development schedule. Based on current estimates, that pushes publication to somewhere in the July-August timeframe -- or possibly September, since I have significant vacation plans in July/August.

[kathy-phet]

Thanks for the input, Chris. I would like to go ahead with the design of this screen to nail that down, and then revisit how the development of the current features set in this sim is going over the next 6 weeks and see where we are at in early to mid-March so we can better estimates before making a decision about adding this screen now or later. OK?

[pixelzoom]

OK. In the meantime, I'll try to keep this screen in mind as I'm implementing the Solving screen.

[pixelzoom]

This issue did not make the cut for design meetings this week. Hopefully for Feb 1? Adding "high priority" label to underscore the urgency of designing this screen.

[kathy-phet]

@pixelzoom - I believe, yes, goal is to bring it next week to design, with mock ups.

[pixelzoom]

In 2/1/18 design meeting, we decided to name this screen "Solve It!"

[pixelzoom]

2/1/18 design meeting decisions, summarized with @amanda-phet:

• Screen name is "Solve It!"
• Use standard level-selection screen
• Returning to a level restores the state that the level was in, does not generate a new challenge
• "New Challenge" button on scale is always available
• Smiley face appears + audio "ding" when challenge has been solved. Smiley face fades out.
• "New Challenge" button replaced with "Next Challenge" when challenge has been solved. Consider how/whether to emphasize the "Next Challenge" button.
• When you reach 10 stars on a level, no smiley, but there is a reward screen + dialog + audio, see "Make A Ten"

[amanda-phet]

Mockups are in the design doc. https://docs.google.com/document/d/1xu9nawWcndFqgg5zyCGm25h-OFUsuFYnXF3QHW42spQ/edit#heading=h.9axhf449f0q7

[amanda-phet]

Sounds great to me, too!

[pixelzoom]

Decision was to include "Solve It!" screen in 1.0.0 release.

[pixelzoom]

@amanda-phet Question... I’m playing a challenge in Level 1. I press the Back button to return to the level-selection screen. The next time I go to Level 1, what do I see? The challenge that I was working on when I pressed the Back button, or a new challenge?

[amanda-phet]

My preference is to return to the same problem, since we offer a refresh button that allows the user to get a new challenge.

[pixelzoom]

@amanda-phet Solve It! screen is feature complete. Please review 1.0.0-dev.95.

I have one usability concern: When a challenge has been solved, your attention is drawn to the smiley face, and the change from the refresh button to "Next" button is subtle and easy to miss. So I think that it's perhaps not immediately obvious what you need to do next.

Other than that, there are likely layout tweaks and pixel polishing that still need to be done.

Relatively high priority, since it will be easiest to make changes while this is still fresh in my mind.

[pixelzoom]

In 1.0.0-96, I relocated the "Next" button so that it appears where the smiley face fades out (in the center of the screen). This feels more usable to me. @amanda-phet your thoughts?

[amanda-phet]

This looks great to me!

[pixelzoom]

There are some other things that are not optimal in the current layout.

The screenshot below of 1.0.0-dev.97 illustrates the following problems:
(1) The elements that make up the challenge ("Solve for x", equation and refresh button) are not tied together, they feel disconnected. Both "Solve for x" and the refresh button are relatively far from the challenge equation.
(2) The refresh button is actually closest to the panel that contains the solution equation, so it's not immediately obvious what the refresh button applies to.
(3) The solution equation is in a huge panel, much larger than it will ever fill for equations in this screen. It feels lopsided, with a lot of dead whitespace.
(4) Finally, the challenge and solution equations lack symmetry of presentation -- one is directly on the play area, the other is in a panel, and they appear to have different footprints sizes on the screen.

The screenshot below of 1.0.0-dev.98 shows an alternative layout. The challenge and solution equations are in similar size boxes. The light stroke around the challenge (currently the same color as the status bar) ties together the UI elements related to the challenge, and it's clear what the refresh button applies to.

@amanda-phet your thoughts?

1.0.0-dev.97:

1.0.0-dev.98:

[amanda-phet]

I agree, I've thought the original challenge equation felt lost in the design. This looks like a nice improvement to me, but I still wonder if the white background is too stark in contrast to the original equation. What about something like this: the same white panel but at 50% opacity, so it doesn't look "active" but still looks prominent in comparison to the solution equation panel.

[pixelzoom]

Revised UI to match #34 (comment).

Reduced fade time to 0.8 sec, per @amanda-phet's request.

[pixelzoom]

I'm going to close this, and we can create new issues for any fixes or change requests.