phetsims / acid-base-solutions

"Acid-Base Solutions" is an educational simulation in HTML5, by PhET Interactive Simulations.
http://phet.colorado.edu/sims/html/acid-base-solutions/latest/acid-base-solutions_en.html
GNU General Public License v3.0
4 stars 7 forks source link

Water molecules de-emphasized and different size #106

Closed learnthinkteach closed 10 years ago

learnthinkteach commented 10 years ago

The HTML5 version of Acid-Base Solutions has the solvent molecules behind what looks like a transparent layer the color of water (macroscopic water, in the sim). This makes them look separate from the acid/base molecules and ions, like a background texture. In the java sim, the solvent water molecules look sharp and fill all the empty space up in the magnifying glass, rather than being a background texture. I have seen student respond positively to the fullness and crowding of the java version "Woah, that's a lot," and I think it conveys the chemical concept well. Was there other evidence that prompted the design choice to de-emphasize the water molecules and put them in the background? I am not challenging this choice, just wondering what it was based on.

This choice does make the solvent molecules look different from the example water molecule in the reaction and the control panel. Additionally, the water molecules used in the HTLM5 sim appear to have slightly larger O and H atoms than the atoms in the acid/base molecules/ions.

HTML5: screenshot_246

Java: screenshot_247

pixelzoom commented 10 years ago

I don't recall the reason why the molecules are deemphasized, but it was a very specific change request made at 4/3/14 design meeting. I'll check with the team to see if they want to reconsider.

The size of the H2O molecules should probably be fixed. Making them exactly the correct size is difficult because the solvent is actually an image that was captured from the Java sim, and then sized to fit. If I reduce the size any more, the image will be too small to fill the magnifier lens. So I'll need to capture another image from the Java version, perhaps with a larger lens diameter so I have some wiggle room to scale the image. I can then eyeball it to get close to the correct size.

emily-phet commented 10 years ago

@learnthinkteach - it was decided at the last design meeting to make the solvent molecules more transparent to distinguish these molecules from the grey non-water particles (decision was unanimous, not controversial at all). In interviews with four students, there was no indication that this caused any interpretation issues - students still indicated that the solvent molecules were the water molecules filling the container and surrounding the colored particles.

@pixelzoom - If the size change is relatively easy, I say go for it. I wouldn't worry about it being exactly the same size. I don't think we have any evidence that students attend to the individual solvent particles that closely.

pixelzoom commented 10 years ago

I grabbed a new larger image from the Java version, and scaled it down so that the H2O molecules are the correct size. Here's a screenshot:

screenshot_76

pixelzoom commented 10 years ago

A note about the solvent image (solvent.png) … Because we're reducing the opacity, it's ok if the H2O molecules are a little less 'crisp' than the other molecules. In order to make them as crisp, we'd have to double the dimensions of the image file. That would mean a 770K file versus a 170K file, and that means a significant difference in the deliverable HTML file. So we're trading off quality for reduced file size, and that's OK in this case because the H2O molecules are supposed to be less distinct. If we ever decide that the H2O should be fully opaque (like in the Java sim) then we'd need to revisit this. In that case, I'd probably recommend ditching the image file and generating the solvent programmatically.

pixelzoom commented 10 years ago

Fix first published in http://www.colorado.edu/physics/phet/dev/html/acid-base-solutions/1.0.0-dev.9/acid-base-solutions_en.html