Does PhET have a custom alert function?

Mayank Pandey

unread,

Sep 6, 2021, 6:41:50 PM9/6/21

to Developing Interactive Simulations in HTML5

Hello,

So I am trying to make a simulation which has data points that can be grabbed and placed on a graph. A constraint I am trying to set is that if the distance between the two data points (x-values) is less than or equal to 0.1 then that data point which was last controlled by the user should be removed from the frame. I am able to do this, however, I was wondering if there was a way to give the reason to the user to explain why this happened so that they are not confused by what just happened. I know I could just do a alert message and the user can click ok and continue on with the simulation, but I wanted to check in here to see if there was a class for maybe either a disappearing textbox (set to disappear after like 3 seconds) or like a custom alert of sorts.

Thank you for your help!

Regards,

Mayank Pandey

cmalley

unread,

Sep 7, 2021, 9:55:30 AM9/7/21

to Developing Interactive Simulations in HTML5

Hi Mayank,

There's nothing like that in any of the PhET common-code repositories. But if would be relatively easy to create your own.

But first... If it's important that the user sees these alerts, you might reconsider the approach that you've described. What if a user looks away from the screen and doesn't see the alert before it fades out? If the message is something that the user MUST see in order to prevent confusion, then a modal dialog, which the user has to explicitly close, is probably most appropriate. That said...

For the dialog, you could either use sun.Dialog, or scenery-phet.OopsDialog. Dialog is very general, the base class used for all dialogs. OopsDialog is intended for notifying the user when something has gone wrong ("Oops! ...") but you can change the message and the image. Dialog demos are in sun/js/demo/DialogsScreenView.js. OopsDialog demo is in scenery-phet/js/demo/DialogsScreenView.js.

PhET currently supports only modal dialogs, which dim the rest of the screen and make it impossible to interact with the sim while it's displayed. If you want something different, you could use a sun.Panel and create your own "information popup". This approach might be more appropriate for an "alert" that allows the user to keep interacting with the sim, and then fades out.

For fading out the alert, see the PhET twixt repository. This is PhET's animation library, and it includes classes for fading things out. Run twixt/twixt_en.html and see twixt/js/demo/ for examples. There are additional examples in many of the PhET sims, search for "twixt/js/" in .js files. If you use twixt, not that you'll need to add it to package.json, then run "grunt update", because it is not one of the libraries used by all PhET sims.

I hope this helps!

Chris Malley

PixelZoom, Inc.

Mayank Pandey

unread,

Sep 7, 2021, 3:42:23 PM9/7/21

to Developing Interactive Simulations in HTML5

Hello Chris,

Thank you for the help, and also you brought up a really good point that if the user needs to see the error/mistake it's better to show them something like the OopsDialog and that's what I am doing now (very funny default icon btw haha). As always really appreciate the help!