Re: Welcome to the Developing Interactive Simulations in HTML5 Google Group!

[Madhan Karthik]

Hi ,

Will you guide me for the development of HTML 5 simulation in Linux/Ubuntu.

On Monday, September 29, 2014 10:26:05 PM UTC+5:30, samrreid wrote:

Greetings and welcome to the Developing Interactive Simulations in HTML5 Google Group!  Developing complex, high-performance interactive simulations in HTML5 that work well on many platforms is tricky business, and we thought this would be a nice place to discuss problems, solutions, strategies and ideas.

 

PhET Interactive Simulations is developing several open-source libraries to facilitate simulation development, and we have documented the libraries as well as patterns and practices that work well for us in our PhET Development Overview: http://bit.ly/phet-development-overview.

 

Looking forward to hearing from you,

Sam Reid

PhET Interactive Simulations

University of Colorado Boulder

[samrreid]

Hi Madhan,

I don't have a Linux/Ubuntu machine at the moment, so I can't be sure of anything, but to set up for development there, the main ingredients are the same:

1. Install git

2. Create a directory phetsims

3. Change into the directory

4. Run these git clone commands:

git clone https://github.com/phetsims/example-sim.git
git clone https://github.com/phetsims/assert.git
git clone https://github.com/phetsims/axon.git
git clone https://github.com/phetsims/brand.git
git clone https://github.com/phetsims/chipper.git
git clone https://github.com/phetsims/dot.git
git clone https://github.com/phetsims/joist.git
git clone https://github.com/phetsims/kite.git
git clone https://github.com/phetsims/phet-core.git
git clone https://github.com/phetsims/phetcommon.git
git clone https://github.com/phetsims/scenery.git
git clone https://github.com/phetsims/scenery-phet.git
git clone https://github.com/phetsims/sun.git
git clone https://github.com/phetsims/sherpa.git

Download and install node + npm, Linux binaries are available here: http://nodejs.org/download/

Install the http-server as a command line program:

npm install http-server -g

Change into the phetsims directory (if you were not already there).

cd phetsims/

Run the http server program

http-server

Open a browser to the path for one of the simulations:  http://localhost:8080/example-sim/example-sim_en.html

Now you can edit/create simulation JS files and start creating things.

If you get the setup process working well on Linux/Ubuntu, we could add that to the instructions in the PhET Development Overview:

http://bit.ly/phet-development-overview

Good luck and let me know how it goes,

Sam

[Madhan Karthik]

Hi Sam,

I tried in my machine(Ubuntu).It is working well.So,you can include the manual for the linux machine also.

Thanks a lot. 

Madhan Karthik

[samrreid]

Sounds good, thanks for testing that out.

Best Regards,

Sam

[ahsan...@gmail.com]

Hi Sam,
I want to develop physics optical labs.
Kindly guide me.

[samrreid]

Ahsanul,

Can you please provide more information about the labs you are thinking about?  How would it look on the screen?  What is the user able to do?  What specific topics and learning goals in the field of optics do you want to address?

PhET currently provides a geometric optics lab in Flash here: http://phet.colorado.edu/en/simulation/geometric-optics

PhET also provides a Java simulation called "Bending Light" here: http://phet.colorado.edu/en/simulation/bending-light

Best Regards,

Sam

[Madhan Karthik]

Hi Sam,

What framework are you using for the simulation? or do you've any separate tool for that.If so,Kindly share the tutorial/docs.

Thanks

MadhanKarthik R

[samrreid]

MadhanKarthik R,

I work with a group called PhET Interactive Simulations, and we publish our simulations online here: http://phet.colorado.edu

The best place to look for overview, documentation, explanation, etc is the PhET Development Overview: http://bit.ly/phet-development-overview

The framework + libraries are free and open source, and hosted on GitHub here: https://github.com/phetsims/

Good luck and let me know if you have any further questions,

Sam

[Gabrielle Legault]

Hello Sam,

I work for a school publishing house (PearsonERPI) and we are very interested in the PhET simulations for our etexts. I wanted to know, once we have changed the source code from Java to HTML where can we harbour or shelter the simulations to keep them active ? These etexts will be around for quite a while and we couldn't find the answer to this "problem" on the website. I hope you understand my question.

Thanks, Gabrielle   I 

[samrreid]

Gabrielle,

The answer to your question depends on how you are storing and delivering the etexts.  If your delivery medium is HTML5 capable and web access is available, then one solution is to include the PhET simulation as an iframe, linking to the version on PhET's servers.  If your etexts will be available offline, or through some other delivery medium, then we would need to discuss other ways to embed the simulations (and we should discuss how we can keep them up to date as bugs are fixed or improvements are made).  What is your context and delivery model?

Best Regards,

Sam Reid

PhET Interactive Simulations

[shailaj...@gmail.com]

On Monday, 29 September 2014 22:26:05 UTC+5:30, samrreid wrote:
> Greetings and welcome to the Developing Interactive Simulations in HTML5 Google Group!  Developing complex, high-performance interactive simulations in HTML5 that work well on many platforms is tricky business, and we thought this would be a nice place to discuss problems, solutions, strategies and ideas.
>  
> PhET Interactive Simulations is developing several open-source libraries to facilitate simulation development, and we have documented the libraries as well as patterns and practices that work well for us in our PhET Development Overview: http://bit.ly/phet-development-overview.
>  
> Looking forward to hearing from you,
> Sam Reid
> PhET Interactive Simulations
> University of Colorado Boulder

Hi

I am using Windows and followed all the steps given in PhET Development Overview.
When I open any browser to the path : http://localhost:8080/example-sim/example-sim_en.html
The error message on Git bash is - "GET/joist/strings/joist-strings_en.json?bust=1431607520150" Error (404): "Not found"

Please help
Shailaja

[cmalley]

Hi Shailaja,

http://localhost:8080/example-sim/example-sim_en.html is an example path. You'll need to modify the URL based on where you have installed it on your computer, and how your local web server is configured (HTTP port, etc).

I will make sure that this gets clarified in the "PhET Development Overview" document. See https://github.com/phetsims/tasks/issues/238.  

Chris

[samrreid]

It is unclear what Shailaja's problem is.  If it is erroring on "GET/joist/strings/joist-strings_en.json?bust=1431607520150", doesn't that mean that it found the HTML file itself (as a precursor to loading requirejs + joist strings) and hence the port and relative path are correct?  Perhaps there is some downstream error, such as joist not being checked out, or joist not being checked out in the right location?

Best Regards,

Sam

[cmalley]

Shailaja, do you have all dependencies for the sim checked out?  It might be better if you tried this with a published sim; example-sim is not published, and its README.md therefore does not have the instructions for checking out all dependencies. See for example https://github.com/phetsims/acid-base-solutions, where the "Quick Start" section of README.md enumerates the "git clone" commands required to check out all dependencies.  For the error that you're seeing, it sounds like you may be missing the "joist" repository, which is required by all sims.

Chris

[cmalley]

Shailaja replied to me via email:

> Now I have cloned all dependencies for acid-base-solutions. I can see the commands executing on Git but the browser is blank and does not show the sim.

>  

> What could be the error.

>  

> Sorry for bothering again.

[cmalley]

Shailaja,

Please post your questions to the Google Group, do not contact individual via email. Thanks.

In this specific case, post any error messages that you see during the “git clone” commands, or in the web browser console when running the sim.

Thanks,

Chris

[shailaj...@gmail.com]

Sorry about that.

No error messages both in git clone command and the browser. I tried http://localhost:8080/acid-base-solutions/acid-base-solutions_en.html - the browser window is blank and white in color
http://localhost:8080/forces-and-motion-basics/forces-and-motion-basics_en.html - the browser window is blank and black in color.

[samrreid]

I just tried running all of the git clone commands from the Development Overview http://bit.ly/phet-development-overview and launching the example-sim, and it worked OK on my platform OSX + Chrome.  What OS + browser are you running?  Can you open the JavaScript console in your browser and report the problems you see?  Have you tried this on Chrome?

Best Regards,

Sam

[Shailaja J]

Thank you so much Sam it worked on Chrome.

 

Regards

Shailaja

[samrreid]

That is good news, thanks for reporting back.  If you have any insight about why it failed on the other browser, I'd be curious to hear about it.

Best Regards,

Sam

[Alexandre Enkerli]

Gabrielle: Interested in knowing more about this project. Are you still involved in it?

We (Vitrine technologie-éducation) are exploring diverse ways to work with learning resources in Quebec’s college system (Cegeps). For instance, we have a catalogue of Open Educational Resources and we’ve been experimenting with ePUB3. Creating HTML5 simulations and embedding them in an eBook is something we’re looking at.
In fact, PhET simulations would probably make excellent test cases, as many of them are self-contained. Hm… This could open up interesting possibilities. For instance, it should be possible to just drop the code in InDesign or iBooks Author…

[Alexandre Enkerli]

Ok! With a bit of fiddling (such as renaming the main HTML file), was able to convert a PhET sim into a widget for use in iBooks Author and create an ePub3 file with that sim embedded.

Everything is in this Dropbox folder.

The “ph-scale” folder contains the file for the widget (you convert it into a widget by adding .wdgt to the folder name):

• ph-scale.wdgt.html is the full sim (originally called ph-scale_en.html on PhET).
• Info.plist contains some info about the content, including an identifier and version number. (Should probably modify the size values).
• Def...@2x.png and Default.png are two copies of the same screenshot from the sim.

ph-scale.wdgt is that same folder with the .wdgt extension, so iBooks Author can recognize it.

ph-scale.iba is the iBooks Author file, based on the blank ePUB3 template.
ph-scale.epub is the ePUB3 exported from iBooks Author.

Maybe this was all very obvious to other people, but my guess is that some people might find it useful. In fact, it’s easy enough to produce these widgets that it could make for a neat activity with teachers and students.

Of course, as Sam was saying, it might be necessary to keep these things up-to-date (and it might make more sense to use <iframe> embeds). But having such a portable document with sims in it could prove very useful, in some situations. Could easily imagine students downloading a sim-enhanced ePub for offline use on a tablet.

Thanks for the inspiration, Gabrielle. And thanks to the whole PhET team for such stimulating simulations!

— Alex

--
Alex Enkerli, Learning Technology Advisor
Vitrine technologie-éducation http://www.vteducation.org/

[b...@cs.umass.edu]

Dear Sam,

Thanks for the great job you are doing to build PhET simulations and then convert them all to HTML5.

I am working with a group of researchers to teach about Electronic Circuits.

Can you tell me which of your simulations in the category of Physics/ Electricity, Magnetism and Circuits you will be porting to HTML5. The HTML5 sims work well within our tutor. However the Java simulations are much more difficult as the student would need to download Java first.

Many thanks,

Beverly Woolf.

[samrreid]

Greetings Beverly,

Thanks for reaching out to me, I'm glad to hear our HTML5 sims work nicely in your tutor.  I'll have to check with our development coordinator about the list of sims we are porting, I'll ask him to respond here.

Best Regards,

Sam

[ariel.phet]

Hi Beverly,

Unfortunately the conversion process is long and expensive. Further complicating matter is that traditional funding sources like government grant agencies only fund "innovation" not sustainability, so it is difficult to secure funding for this conversion process. Through the help of donations we are slowly working our way through our legacy sims until we secure more robust resources for the conversion. Ideally we will eventually convert all popular sims, but on the horizon you can expect the following sims to be in HTML5 within the next couple of years:

Masses and Springs

Pendulum Lab

Gravity and Orbits

Fluid Pressure and Flow

Circuit Construction Kit

Faraday's Electromagnetic Lab

Rutherford Scattering

Energy Forms and Changes

There may well be more (and we hope there are) but those are the ones I can say with reasonable confidence are on the horizon.

Thanks for your use and support of PhET!

Ariel

[Bev Woolf]

Dear Ariel,

Many thanks for your detailed discussion about the conversion process in PhET. I do understand all

the issues you discuss below.

I certainly understand the funding issue, being in the same position at Umass as you-all are in Colorado.

Can you advise me about funding of PhET simulations from agencies. For example, can an agency request the conversion of certain simulations and make a donation to compensate for same?

Regards,

Beverly

-----------------------------------

Beverly Park Woolf

Research Professor
College of Information and Computer Science
University of Massachusetts
b...@cs.umass.edu

[chimac...@gmail.com]

On Monday, 29 September 2014 17:56:05 UTC+1, samrreid wrote:
> Greetings and welcome to the Developing Interactive Simulations in HTML5 Google Group!  Developing complex, high-performance interactive simulations in HTML5 that work well on many platforms is tricky business, and we thought this would be a nice place to discuss problems, solutions, strategies and ideas.
>  
> PhET Interactive Simulations is developing several open-source libraries to facilitate simulation development, and we have documented the libraries as well as patterns and practices that work well for us in our PhET Development Overview: http://bit.ly/phet-development-overview.
>  
> Looking forward to hearing from you,
> Sam Reid
> PhET Interactive Simulations
> University of Colorado Boulder

Hi Sam

Please how can I create my own simulations using templates?

Awaiting your response.

Chima Clement

[samrreid]

We are continuing discussion in this thread: https://groups.google.com/forum/#!topic/developing-interactive-simulations-in-html5/d1EBfcdqOl0

[AKumar]

I am helping couple of high school kids develop physics and other science simulations as they learn to code. Checkout their work at https://SimPop.org. All development is in HTML5 and Javascript.

[exc...@gmail.com]

On Monday, September 29, 2014 at 12:56:05 PM UTC-4, samrreid wrote:
> Greetings and welcome to the Developing Interactive Simulations in HTML5 Google Group!  Developing complex, high-performance interactive simulations in HTML5 that work well on many platforms is tricky business, and we thought this would be a nice place to discuss problems, solutions, strategies and ideas.
>  
> PhET Interactive Simulations is developing several open-source libraries to facilitate simulation development, and we have documented the libraries as well as patterns and practices that work well for us in our PhET Development Overview: http://bit.ly/phet-development-overview.
>  
> Looking forward to hearing from you,
> Sam Reid
> PhET Interactive Simulations
> University of Colorado Boulder

Hello Sam

I would like to develop experimental optics on the subject of wdm.
How could I use PhET to create the content I want?

[samrreid]

SimPop looks great, keep up the good work!

Best Regards,

Sam

[samrreid]

I don't know much about wavelength-division multiplexing, but here is a document about how PhET creates interactive simulations: https://phet.colorado.edu/publications/phet_design_process.pdf

For the development side, you can use the PhET Development Overview http://bit.ly/phet-html5-development-overview about getting started with PhET development.

Good Luck and Best Regards,

Sam

[thetruthal...@gmail.com]

On Monday, September 29, 2014 at 9:56:05 AM UTC-7, samrreid wrote:
> Greetings and welcome to the Developing Interactive Simulations in HTML5 Google Group!  Developing complex, high-performance interactive simulations in HTML5 that work well on many platforms is tricky business, and we thought this would be a nice place to discuss problems, solutions, strategies and ideas.
>  
> PhET Interactive Simulations is developing several open-source libraries to facilitate simulation development, and we have documented the libraries as well as patterns and practices that work well for us in our PhET Development Overview: http://bit.ly/phet-development-overview.
>  
> Looking forward to hearing from you,
> Sam Reid
> PhET Interactive Simulations
> University of Colorado Boulder

Hi, I would like to find someone that can help me with the Wave on a String app? Would really like a finer tuning capability with the frequency.
You can email me at dav...@netzero.com
Thank you

[afr...@purdue.edu]

On Monday, September 29, 2014 at 12:56:05 PM UTC-4, samrreid wrote:
> Greetings and welcome to the Developing Interactive Simulations in HTML5 Google Group!  Developing complex, high-performance interactive simulations in HTML5 that work well on many platforms is tricky business, and we thought this would be a nice place to discuss problems, solutions, strategies and ideas.
>  
> PhET Interactive Simulations is developing several open-source libraries to facilitate simulation development, and we have documented the libraries as well as patterns and practices that work well for us in our PhET Development Overview: http://bit.ly/phet-development-overview.
>  
> Looking forward to hearing from you,
> Sam Reid
> PhET Interactive Simulations
> University of Colorado Boulder

Sam,

I'm a faculty member at Purdue and we've been using several phet simulations each semester for our freshman biology course (up to 1800 students a year).

We generally love the simulations, but I noticed yesterday that the pH simulation (html5) no longer allows one to enter the pH directly into the box.

Is this readily fixable? I'm learning html, javascript and git, so it's something I might like to get involved with myself, unless it's just a line or two that you know exactly how to fix. If it's not so simple that you could just do it, please let me know how to get started.

Thanks for your interest and all the work you and your colleagues have put into phet.

Alan Friedman

[Ariel]

Alan,

On the "My Solution" screen you can change the pH manually using the vertical "spinner" arrows to the right of the pH readout. These buttons are designed to be "fire on hold" so if you hold them down you can quickly get close, and then fine tune with a few clicks to the desired pH.

If you think direct entry would truly be necessary (being able to type in the pH) let us know. Unfortunately, due to the cross-platform nature of HTML5 sims, this can not just be done with keyboard entry. Our solution has been to have a keypad on the screen that allows number entry, which would be possible in the simulation, but would require some amount of design work.

[compact...@gmail.com]

I'm developing phet simulation in html.
and I'm using phet framework.
I didn't understand what tandem means.
I want to know about phet project structure.
I'm looking forward to hear from you

[samrreid]

Greetings,

PhET uses "Tandem" instances to provide unique global string IDs to simulation components.  The implementation is here: https://github.com/phetsims/tandem/blob/master/js/Tandem.js

You can look at any of PhET's open source simulations as an example of project structure: https://github.com/phetsims

For example, here is PhET's "Example Sim" https://github.com/phetsims/example-sim

Best Regards,

Sam

[bhava...@gmail.com]

Hello 

I Have installed everything as described in the http://bit.ly/phet-development-overview. Worked well i could the see page on my localhost. but when i make changes in my simulation code i couldnt see changes on the browser page. could you please help?

[Michael J Kauzmann]

Hello! Thanks for posting to the group. It is likely that this is a caching problem. Please try adding `?cacheBust` as a query parameter. Another option is to load the sim in Google Chrome with the developer tools open. There is an option in those developer tools to disable caching while they are open. Or another way is explained here, https://www.technipages.com/google-chrome-how-to-completely-disable-cache. Let me know how I can assist further.

Good luck,

Michael

--
You received this message because you are subscribed to the Google Groups "Developing Interactive Simulations in HTML5" group.
To unsubscribe from this group and stop receiving emails from it, send an email to developing-interactive-simu...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/developing-interactive-simulations-in-html5/62c9dd0f-bfd6-4b03-9a26-e4806cc168b7%40googlegroups.com.

--

Michael Kauzmann

PhET Interactive Simulations

University of Colorado

Michael....@Colorado.edu

[samrreid]

The PhET Development Overview has been moved to https://github.com/phetsims/phet-info/blob/master/doc/phet-development-overview.md.  I'll delete the top post since it refers to an older version.  Also, I'll lock this thread, since new questions and problems should be posted in new threads.