search

phetsims / number-line-distance

"Number Line: Distance" is an educational simulation in HTML5, by PhET Interactive Simulations.
GNU General Public License v3.0
0 stars 3 forks source link

Thermometers aren't aligned with x values in the number line above #58

Closed Nancy-Salpepi closed 3 years ago

Nancy-Salpepi commented 3 years ago

Test device MacBook Air

Operating System os 11.4

Browser safari 14.1.1

Problem description https://github.com/phetsims/qa/issues/675

In the temperature scene, the thermometers aren't aligned with the number line above. Because of this, the thermometer needs to be moved beyond the picture in order to obtain the maximum temperature value.

Steps to reproduce

  1. Select the explore screen
  2. Select the thermometer icon
  3. Move either thermometer all the way to the right, until the x value is 50.

Visuals

Screen Shot 2021-07-22 at 8 22 47 PM

Troubleshooting information: !!!!! DO NOT EDIT !!!!! Name: ‪Number Line: Distance‬ URL: https://phet-dev.colorado.edu/html/number-line-distance/1.0.0-dev.6/phet/number-line-distance_all_phet.html Version: 1.0.0-dev.6 2021-07-22 08:01:52 UTC Features missing: touch Flags: pixelRatioScaling User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.1.1 Safari/605.1.15 Language: en-us Window: 1111x711 Pixel Ratio: 2/1 WebGL: WebGL 1.0 GLSL: WebGL GLSL ES 1.0 (1.0) Vendor: WebKit (WebKit WebGL) Vertex: attribs: 16 varying: 31 uniform: 1024 Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 32) Max viewport: 8192x8192 OES_texture_float: true Dependencies JSON: {}

jbphet commented 3 years ago

The alignment is with the point of the triangle, so the behavior of the sim is correct based on the intended design.

@amanda-phet - I think I recall that this has come up before. I thought I'd assign this to you as a data point. Feel free to close, but maybe there is some tweak to the design that would make it more obvious what's going on here, like some sort of connection between the triangle and the thermometer, and/or a highlight of some kind at the tip of the triangle where the sensing occurs.

amanda-phet commented 3 years ago

I wanted to sit with this for a bit, because yes this is functioning correctly, but since it came up in one interview as well, I am thinking this design doesn't work so well in this 1D space.

I have two ideas after discussing with @Nancy-Salpepi on zoom.

(1) We remove the TemperatureAndColorSensorNode (the triangle) and instead read the temperature from the middle of the thermometer. I think this is close to how a thermometer functions in reality, and would keep the thermometer aligned with the value on the number line.

(2) We redesign ThermometerNode to make the triangle clearer. The downside of this approach is that we might still encounter issues with the body of the thermometer feeling off to the side.

@jbphet and @SaurabhTotey - thoughts?

SaurabhTotey commented 3 years ago

The first option would make more visual sense to me personally. However, the first option has the unfortunate side-effect of removing the temperature color display for thermometers (red for hot, blue for cold, etc.) which I like. Regardless, I still prefer the first option because I occasionally still accidentally misjudge a thermometer's position.

amanda-phet commented 3 years ago

@SaurabhTotey let's go ahead with option (1) then. Thanks for your input!

jbphet commented 3 years ago

I agree that just making the center of the thermometer be the measuring point will likely improve our users' perceptions about this.

SaurabhTotey commented 3 years ago

I have replaced the usage of TemperatureAndColorSensorNode with ThermometerNode. Assigning to @amanda-phet to review.

amanda-phet commented 3 years ago

I like it! Thanks for making that change.