There is no way to access the next collection if one clicks the X instead of Next Collection button after completing a collection

[loganbraywork]

Test device
Windows 10 Laptop
Operating System
Windows 10
Browser
Chrome
Problem description
For phetsims/qa#459

When one completes a collection they are presented with a text box which has two options, Next Collection and an X button in the corner. Clicking the X will close the text box and prevent the user from accessing the next collection at all, even after a reset and the completion of the collection a second time.
Steps to reproduce

1. Complete a collection
2. When the text box appears for completing the collection, click the X in the top right corner
3. Reset the sim
4. Complete collection again
   Visuals
   

Troubleshooting information:
!!!!! DO NOT EDIT !!!!!
Name: ‪Build a Molecule‬
URL: https://phet-dev.colorado.edu/html/build-a-molecule/0.0.0-dev.23/phet/build-a-molecule_all_phet.html
Version: 0.0.0-dev.23 2019-11-20 23:29:39 UTC
Features missing: generatedcontent, touch
Flags: pixelRatioScaling
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.97 Safari/537.36
Language: en-US
Window: 1536x754
Pixel Ratio: 1.25/1
WebGL: WebGL 1.0 (OpenGL ES 2.0 Chromium)
GLSL: WebGL GLSL ES 1.0 (OpenGL ES GLSL ES 1.0 Chromium)
Vendor: WebKit (WebKit WebGL)
Vertex: attribs: 16 varying: 30 uniform: 4095
Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 32)
Max viewport: 32767x32767
OES_texture_float: true
Dependencies JSON: {}

[Denz1994]

This is a side effect of using common code Dialog. The legacy version of BAM prompts the user to go to the next collection via a button in the play area in the kitPlayArea. It also shows yellow arrows to swap collections. If a user doesn't click the "Next Collection" button then they have to option to use the yellow arrow buttons.

It looks like I shouldn't be using Dialog to support this behavior. A sim-specific panel will need to be implemented.

[Denz1994]

The above changes should now match the behavior of the Java version. I'll release a dev version to compare.

Edit: Matching the java version means, that when the panel is present the user can still interact with other sim elements. It shouldn't have been implemented as a dialog. Can you confirm in this dev version @KatieWoe?

[KatieWoe]

The behavior is better, but interaction behind the box should probably be stopped.

[KatieWoe]

Underlying problem does seem solved in the dev version.

[Denz1994]

The behavior is better, but interaction behind the box should probably be stopped.

The legacy version of this sim allows for the interaction of the sim while the next collection box is present. If we wanted to go ahead with removing this behavior that would be a decision for designers.

Thoughts @arouinfar?

[arouinfar]

@Denz1994 I think you should take a look at phetsims/balancing-chemical-equations#137. The game in BCE uses a sim-specific dialog-like thing that isn't actually a dialog. For a11y, a dialog would be preferable, but converting the sim to use a dialog is non-trivial.

It seems really weird to me to allow user to interact with the sim while the dialog-like-thing is open. In addition to the behavior shown in #124 (comment), I'm able to open the 3D dialogs or reset the collection (so the sim contradicts the dialog message) which feels pretty buggy to me.

I think the simplest UX would be to use dialog instead of something sim-specific. To do this, we would need the close button to behave the same as the "next collection" button. However, I don't know if this is possible. @ariel-phet what would you recommend?

[ariel-phet]

@arouinfar @Denz1994 after chewing a bit...what about this idea...

1. We still use dialog and keep the close button (we could perhaps choose a more muted color for the close button as a polish if necessary)

2. If you close the dialog we leave a "Next Collection" button on screen. Perhaps we put the button near the to of the play area. I think using the close button to move to the next collection would be a problematic UX (especially for a11y).

Something like this...

[ariel-phet]

@Denz1994 @arouinfar I agree we should probably go with the balancing chemical equations approach and stop items in the sim from being pickable when the dialog appears.

I do not think having a close button move to the next collection would be a good UX. It seems we could still allow the close button and use the dialog approach. The close button could just close the dialog

[Denz1994]

A few changes that should be reviewed in this dev version:

• The AllFilledNode is now a modal dialog.
• The NextCollectionButton only shows after the dialog is closed out. It remains on the screen until either it is clicked or the user clicks the resetAllButton.
• Both UI components need pixel polishing. If not, then ignore this bullet.

Note: The URL for the dev version includes an easyMode parameter. Filling one collection box is considered a completed collection with this query parameter. Is this what you had in mind @ariel-phet?

[ariel-phet]

@Denz1994 almost...two tweaks.

1. There should be a NextCollectionButton contained in the dialog. The "normal/expected" interaction should be to click this button. If the user happens to click the "close" button on the dialog, then there is another NextCollectionButton on screen to allow them to move on (just as you have it now, no change needed with this button once the dialog is closed, that behavior looks good)

2. Ideally the modal AllFilledNode should appear centered in the play area as it was originally. I am not sure if that is tough to do with dialog, but it would be best if it retained the position you had it in before. I can mock up if needed

[Denz1994]

If the user happens to click the "close" button on the dialog, then there is another NextCollectionButton on screen to allow them to move on

This has been implemented so this behavior also occurs if the user clicks outside of the dialog to escape the prompt, not just if they hit the close button.

The above tweaks have been implemented in https://phet-dev.colorado.edu/html/build-a-molecule/0.0.0-dev.39/phet/build-a-molecule_all_phet.html. @ariel-phet should review when possible.

[ariel-phet]

@Denz1994 behavior is all correct now. I might have a polish or two, but we will deal with that in a main polishing issue. Closing.