The width of the touchArea for pickers should be increased substantially, so that you don't need to obscure the number in order to operate the picker with your finger. And we have plenty of room to the left and right of each picker.

Here's a screenshot from Balancing Chemical Equations. This is with the '?showPointerAreas' query parameter; touchArea is red dashed lines, mouseArea is blue dashed lines.

Compare this to the touchAreas in graphing-lines, which facilitate touching left or right of the pickers:

For example, PCl5 overlaps box.
What must we do with this?
Scale this molecule, or scale all molecules in this equation or scale all molecules?
May be increase box size a bit?

There are many constructors that don't have @param documentation (e.g., FulcrumNode) and there are some that have incomplete/incorrect documentation (e.g., BalanceScalesNode is missing @param maxY). Please make another pass through the code and make sure that all constructors are documented.

In light of the recent discussions about 1st versus 2nd person labels in sims (e.g. phetsims/acid-base-solutions#122), should "Choose Your Level" be changed to something like "Choose A Level" ?

Steps to reproduce:

1. Go to 'Introduction' screen.
2. Change coefficients in equation.
3. Watch balance scales shift left and right.

This is caused by this bit of layout code in BalanceScalesNode.updateNode:

this.centerX = this.aligner.centerXOffset;
this.bottom = this.maxY;

As the beam pivots, centerX won't always correspond to the fulcrum's center, and maxY won't always correspond to the fulcrum's base. So the fulcrum will shift left and right, and will even shift up and down when the beam pivot is extreme.

I noticed the code to create the reward node only creates a few images.

        this.rewardNode = new RewardNode( {
          nodes: [
            new AtomNode( Element.C ),
            new AtomNode( Element.Cl ),
            new AtomNode( Element.F ),
            new AtomNode( Element.H ),
            new AtomNode( Element.N ),
            new AtomNode( Element.O ),
            new AtomNode( Element.P ),
            new AtomNode( Element.S )
          ]
        } )

Please see RewardNode.createRandomNodes for a way to create many copies of these nodes.

BarNode contains a large block of dead code (code that is commented out). If it's no longer needed, please remove it.

This is an issue for PhET.

Please provide the list of people who should be included as members of the design team.

No work by MLL required on this, this is an issue for PhET.

The scoreboard button is currently labeled "New Game", as shown in the design specification. Common code was recently changed so that this label would be "Start Over" for all sims. So I'm guessing (but have not confirmed) that PhET will want to change this.

Removing this option in the Scoreboard instantiation (GameView, line 90) will use the default "Start Over":

90 startOverButtonText: newGameString,

And newGameString can be removed from the imports and strings file.

Observed in 1.0.0-dev.1 on all platforms. Here's an example from the 'Balancing Game' screen:

common.model.Equation is a subtype of axon.PropertySet. It overrides reset, but does not chain to the overridden function, so the properties defined in the constructor (balanced, balancedAndSimplified) will not be reset.

Here's the proper implementation, which chains to the supertype function. Note the use of @OverRide JSdoc annotation to denote a function that has been overridden.

// @override
reset: function() {
  PropertySet.prototype.reset.call( this );
  this.reactants.forEach( function( reactant ) {
    reactant.reset();
  } );
  this.products.forEach( function( product ) {
    product.reset();
  } );
}

I realize that this implementation is not complete yet. But just in case it was overlooked, I thought I should point out that there should be an equals sign or not-equals sign (depending on whether the equation is balanced) between the reactants and products in the 'bar charts' representation.

Here are screenshots from the design document.

I see that you've converted the subtypes of DecompositionEquation to factory functions, which in this case is a reasonable approach to converting from Java to JavaScript. But the current implementation of DecompositionEquation looks a bit odd. It's not returning a constructor function, and isn't attaching the static factory functions to the constructor.

Other types (DisplacementEquation, SynthesisEquations, others?) have this same issue.

Here's the general pattern that should be used:

// @constructor
function DecompositionEquation(...) {
  Equation.call( this, ... );
  // any additional code
} 

return inherit( Equation, DecompositionEquation, {
    // add prototype functions here
}, {
   // add static functions here, for example this factory function:
   create_2H2O_2H2_O2: function() {...}
} );

Call sites would look like this:

var equation = DecompositionEquation.create_2H2O_2H2_O2();

Observed in 1.0.0-dev.2 on all platforms.

Here's an example screenshot. Look at the left balance scale (nitrogen, N). There are 4 reactants and 3 products, and they overlap pretty severely. And atoms on both scales look like they are about to fall off the ends.

BalancedRepresentationStrategy is an odd port of a strategy pattern; a no-op constructor with some static methods attached.

Since this is only used in GameModel, I recommend replacing it with a functional approach. For example, here's how the call site in GameModel might look:

this.BALANCED_REPRESENTATION_STRATEGIES = {
  1: function() { return BalancedRepresentation.BALANCE_SCALES; },
  2: function() { 
         return Math.random() < 0.5 ) ?
                   BalancedRepresentation.BALANCE_SCALES : 
                   BalancedRepresentation.BAR_CHARTS;
     }
  3: function() { return BalancedRepresentation.BAR_CHARTS; }
};

I also recommend using an Array instead of an object literal with properties '1', '2' and '3'.

There are problems with the vertical alignment of the 'bar graph' representation in the "Introduction" screen, 1.0.0-dev.2. Horizontal alignment is fine.

Here's what the layout currently looks like. I've drawn a red rectangle around the area that I'm referring to:

Here's what it should look like (from the Java version), again with a red rectangle drawn around the area that I'm referring to:

Specifically:

• more vertical space is needed between atoms and bars; they should not touch
• bottoms of the bars should be vertically aligned
• bottoms of the numbers should be vertically aligned when bar height is zero
• centers of atoms should be vertically aligned

I am seeing the following errors when running the grunt build task:

$ grunt
Running "generateLicenseInfo" task
created license info for 9 dependencies

Running "jshint:simFiles" (jshint) task
Linting js/balancing-chemical-equations-main.js ...ERROR
[L15:C16] W098: 'GameModel' is defined but never used.
  var GameModel = require( 'BALANCING_CHEMICAL_EQUATIONS/game/model/GameModel' );
Linting js/balancing-chemical-equations-main.js ...ERROR
[L16:C15] W098: 'GameView' is defined but never used.
  var GameView = require( 'BALANCING_CHEMICAL_EQUATIONS/game/view/GameView' );
Linting js/balancing-chemical-equations-main.js ...ERROR
[L24:C31] W098: 'balancingGameTitleString' is defined but never used.
  var balancingGameTitleString = require( 'string!BALANCING_CHEMICAL_EQUATIONS/balancingGame' );
Linting js/balancing-chemical-equations-main.js ...ERROR
[L29:C25] W098: 'balancingGameImage' is defined but never used.
  var balancingGameImage = require( 'image!BALANCING_CHEMICAL_EQUATIONS/Check-Mark-u2713.png' );
Linting js/common/view/BoxNode.js ...ERROR
[L43:C17] W004: 'options' is already defined.
    var options = _.extend( {
Linting js/common/view/BoxNode.js ...ERROR
[L100:C31] W055: A constructor name should start with an uppercase letter.
          var imageNode = new moleculeImageConstructor();
Linting js/common/view/CoefficientNode.js ...ERROR
[L21:C11] W098: 'Node' is defined but never used.
  var Node = require( 'SCENERY/nodes/Node' );
Linting js/common/view/EquationNode.js ...ERROR
[L21:C14] W098: 'Vector2' is defined but never used.
  var Vector2 = require( 'DOT/Vector2' );
Linting js/game/model/GameModel.js ...ERROR
[L47:C14] W117: 'GameState' is not defined.
      state: GameState.START_GAME,
Linting js/game/view/GameView.js ...ERROR
[L73:C32] W117: 'LevelCompletedNode' is not defined.
        rootNode.addChild( new LevelCompletedNode( gameModel.level, gameModel.score, gameModel.MAX_POINTS_PER_GAME_LEVEL,
Linting js/game/view/GameView.js ...ERROR
[L17:C15] W098: 'Property' is defined but never used.
  var Property = require( 'AXON/Property' );
Linting js/game/view/GameView.js ...ERROR
[L20:C25] W098: 'StartGameLevelNode' is defined but never used.
  var StartGameLevelNode = require( 'BALANCING_CHEMICAL_EQUATIONS/game/view/StartGameLevelNode' );
Linting js/introduction/model/BalancedRepresentation.js ...ERROR
[L9:C3] E007: Missing "use strict" statement.
  return Object.freeze( {
Linting js/introduction/view/BalancedRepresentationChoiceNode.js ...ERROR
[L36:C13] W098: 'self' is defined but never used.
    var self = this;

Warning: Task "jshint:simFiles" failed. Use --force to continue.

Aborted due to warnings.

This pattern is used in a few places (IntroductionModel, GameModel, Equation,...)

define function( require ) {
  function SomeType() {...}
  inherit( SuperType, SubType, {...} );
  return SubType;
};

PhET typically prefers to return directly from the inherit call, like this:

define function( require ) {
  function SomeType() {...}
  return inherit( SuperType, SubType, {...} );
};

Possible related to this joist issue: phetsims/joist#108

Troubleshooting information (do not edit):
Name: Balancing Chemical Equations
URL: http://www.colorado.edu/physics/phet/dev/html/balancing-chemical-equations/1.0.0-dev.2/balancing-chemical-equations_en.html
Version: 1.0.0-dev.2
Features missing: touch, fullscreen
Flags: pointerEnabled, msPointerEnabled, pixelRatioScaling
User Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; Touch; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729; Tablet PC 2.0; ASU2JS; rv:11.0) like Gecko
Language: en-US
Window: 1093x538
Pixel Ratio: 1.25/1
WebGL: WebGL 0.93
GLSL: WebGL GLSL ES 0.93
Vendor: Microsoft (Internet Explorer)
Vertex: attribs: 16 varying: 14 uniform: 512
Texture: size: 8192 imageUnits: 16 (vertex: 16, combined: 32)
Max viewport: 8192x8192
OES_texture_float: true

Please use scenery-phet.NumberPicker for interactive coefficients in equations. I believe that replaces CoefficientNode.

At the bottom of the 'Introduction' screen, there is a blue horizontal bar where radio buttons are located. Below is a screenshot showing how this is currently implemented. The red outline denotes the safe bounds of the screen (produced by adding '?dev' query parameter to the URL.)

Is it OK that this bar doesn't always fit the full width of the screen? I think it might look odd on some (many?) platforms, especially near the navigation bar. Perhaps we should make the rectangle extend further to the left and right, so that (except for extreme window sizes) it looks like the navbar?

The design document for balancing-chemical-equations makes this request for the rendering of molecules:

For all atoms, please render with stroke=’black’, lineWidth=1.

The reason for this is to make the atoms stand out on the white background. Here's a comparison with and without the stroke:

balancing-chemical-equations uses nitroglycerin for molecules, and there is currently no ability to stroke atoms. So this feature needs to be added to nitroglycerin by PhET. Here's the issue to track that: phetsims/nitroglycerin#1

When support is added, I'll add details to this issue about how to specify the stroke and lineWidth for balancing-chemical-equations.

The license.txt file should contain the licensing information for all images used in the sim.

Pressing the 'Reset' button on the 'Introduction' screen does not restore boxes to expanded state.

Occurs on all platforms with this version:
http://www.colorado.edu/physics/phet/dev/html/balancing-chemical-equations/1.0.0-dev.2/balancing-chemical-equations_en.html

Steps to reproduce:

1. start sim
2. go to "Introduction" screen
3. press to 'collapse' button on both the 'Reactants' and 'Products' boxes
4. push the 'Reset' button at lower right
5. The boxes are not restored to their original 'expanded' state.

Observed in 1.0.0-dev.2. Dialog is shown in screenshot below. The order of the '+' and number ('+1' shown in this example) is locale-specific. Some languages put the '+' after the number.

Here's the line of code that needs to be fixed in BalancedNode:

47 new Text( '+' + points, {font: phetFont} ) //points text

This is a design issue for PhET.

There are various usability problems with the 'not balanced' dialog that appears in the game. Example screenshot shown below.

1. There is no 'close' button. The dialog can only be closed by pressing the 'Try Again' button. And in some cases (like the screenshot below) the 'Try Again' button is obscured, and can only be accessed by moving the dialog or clicking 'Hide Why'.
2. The 'move' icon is located where the close button would be, and where the collapse button is for the molecule boxes. This is confusing; the first thing I instinctive do to try to dismiss this dialog is to click when the 'move' icon is.
3. When this dialog is open, the screen becomes exceptionally busy. Perhaps the background should be dimmed slightly, so that the user can easily focus on the contents of the dialog, while still being able to see the challenge behind the dialog. If we do this, then I recommend closing the dialog if you click anywhere outside of it, similar to the About dialog on the home screen.
4. In some cases with 'Show Why', the dialog fills almost the entire screen, making it impractical to move it to see the challenge behind it. Recommended to significantly shrink the representation displayed by 'Show Why'; the molecules need not be the same size as they are in the challenges, just maintain relative sizes.
5. Pressing 'Show Why' makes the dialog 'jump' to being opened, and it's a pretty jarring experience as the screen very suddenly gets very complicated. An animated transition between 'Show Why' and 'Hide Why' would improve the user experience. (This would be a relatively expensive change.)

Tested on both Windows 8 and OSX 10.9 with multiple browsers and this behavior is present in all cases.

If you change the browser tab while the game timer is running, then return to the game screen after some amount of time has passed; the timer will change rapidly from the time you changed tabs to the some amount of time after since you returned to the game screen.

Steps to Reproduce:
Open browser open two tabs: one with the sim and one without.
Open sim
Select "Balancing Game" screen
Select any level
Change to tab without sim
Wait a few minutes
Return to tab with sim and watch the timer.

Observed in 1.0.0-dev.2 on all platforms.

Steps to reproduce:

1. start the sim
2. go to 'Balance Game' screen
3. select a level
4. let the clock run a bit
5. press the 'Start Over' button
6. select a level
7. note that the clock has not been restarted from zero

Enable assertions by adding '?ea' query parameter to the end of the URL, for example:
http://localhost/~cmalley/GitHub/balancing-chemical-equations/balancing-chemical-equations_en.html?ea

Below is the partial stack trace. 'Matrix was suspicious' is usually indicative of trying to position a node that has undefined bounds. For example, if you create a scenery.Node() with no children and try to position it. But I have not confirmed that this is the cause.

Uncaught Error: Assertion failed: Matrix was suspicious assert.js?1402928282993:42
(anonymous function) assert.js?1402928282993:42
Transform3.setMatrix Transform3.js?1402928282993:40
Transform3.prependTranslation Transform3.js?1402928282993:76
Node.prependTranslation Node.js?1402928282993:1135
Node.translate Node.js?1402928282993:987
Node.setTop Node.js?1402928282993:1255
top Node.js?1402928282993:2202
(anonymous function) VBox.js?1402928282993:39
inherit.updateLayout AbstractBox.js?1402928282993:67
AbstractBox.(anonymous function) AbstractBox.js?1402928282993:97
Node.addChild Node.js?1402928282993:180
Node.setChildren Node.js?1402928282993:239
children Node.js?1402928282993:2234
(anonymous function) Node.js?1402928282993:2266
St lodash-2.4.1.min.js?1402928282993:23
Node.mutate Node.js?1402928282993:2258
AbstractBox AbstractBox.js?1402928282993:57
VBox VBox.js?1402928282993:30
inherit.updateNode BalanceScaleNode.js?1402928282993:85
BalanceScaleNode BalanceScaleNode.js?1402928282993:64
(anonymous function) BalanceScalesNode.js?1402928282993:67
inherit.updateNode BalanceScalesNode.js?1402928282993:66
coefficientsObserver BalanceScalesNode.js?1402928282993:38
axon.Property.link Property.js?1402928282993:135
(anonymous function) Equation.js?1402928282993:79
inherit.addCoefficientsObserver Equation.js?1402928282993:78
(anonymous function) BalanceScalesNode.js?1402928282993:47
axon.Property.link Property.js?1402928282993:135
BalanceScalesNode BalanceScalesNode.js?1402928282993:42
IntroductionView IntroductionView.js?1402928282993:41
Screen.call.backgroundColor IntroductionScreen.js?1402928282993:32
(anonymous function)

This is a design issue for PhET.

Observed in 1.0.0-dev.2 on all platforms.

Below is an example in the game where the equation is too wide, practically falling off the screen. Should the overall size of the equation be reduced? Or the size of the font for the molecule symbols? Or...?

Ready for initial functional review by PhET

vegas and vibe should be added to phetLibs in package.json.

vegas is used by the Game screen.
vibe is required by vegas for audio.

See screenshot. This is a common-code issue: phetsims/joist#129.

Based on the design spec, number and symbols in the equation should be aligned roughly centered with the molecules they depict, in both the Introduction and Game screens.

For example, the alignment on the right side is approximately correct, while the left side is offset incorrectly.

@ariel-phet, can you decide who should be assigned to this?

Remove unused strings from balancing-chemical-equations_en.strings

This is a design question for PhET.

The 'Check', 'Try Again' and 'Show Answer' buttons are shown as green in the design specification, and that's how they appear in the sim. For example:

All other sims (as well as the Java version) use yellow for these buttons. Is there are reason why they have a different color in this sim?

This is a PhET design issue.

Here's the icon for the "Introduction" screen:

This may be a nit. But 'X + Y -> XY' is not how reactions work. Eg, N₂ + H₂ does not make N₂H₂. I would expect that a teacher or two might complain about this.

BCEConstants currently contains constants that are related to the view, but it lives in common/view/model. Recommended to move this to common/BCEConstants, where it can safely contain both model and view constants. Mentioning this now because it's likely to be used in many places.

The design document contains links to full-size images for the screen icons, and those have been used in the implementation. The files are 1142x777, which is about 2x times the size needed for the home screen. Sizes are 58K (Intro) and 31K (Game).

To reduce the HTML file size, these should be scaled down to joist.Screen.HOME_SCREEN_ICON_SIZE (548x373) or implemented programmatically. I recommend the latter, since they will look better when scaled down for the navigation bar.

Occurs on http://www.colorado.edu/physics/phet/dev/html/balancing-chemical-equations/1.0.0-dev.2/balancing-chemical-equations_en.html

Steps to Reproduce
-Attempt any level in game mode
-Finish level completely
-Press the reset button on the screen where you can choose any level
-None of the boxes will reset; the button does not work

Perhaps have the "Check" button be unavailable when zeros are present for all coefficients?

Similar to...

@samreid noted that this code in GameView made it difficult to determine what initializer was being called:

self'init' + state;

In design specification color of arrow in tool selection combobox gray.
But it can't be changed via options.
File sun\js\ComboBox.js

What must we do with this?

This is a design issue, to be addressed by PhET.

The Tool's icon has a realistic-looking balance beam, which doesn't look anything like the balance beams in the sim. Recommended to make the icon in the combo box look like the thing that it makes visible.

balancing-chemical-equations-main.js currently creates screens like this:

var Screen = require( 'JOIST/Screen' );
//...
var screens = [
    new Screen( introductionTitleString, new Image( introductionImage ),
     function() { return new IntroductionModel( ScreenView.DEFAULT_LAYOUT_BOUNDS.width, ScreenView.DEFAULT_LAYOUT_BOUNDS.height ); },
     function( model ) { return new IntroductionView( model ); },
     {backgroundColor: BCEConstants.INTRODUCTION_CANVAS_BACKGROUND} ),
    new Screen( balancingGameTitleString, new Image( balancingGameImage ),
      function() { return new GameModel( ScreenView.DEFAULT_LAYOUT_BOUNDS.width, ScreenView.DEFAULT_LAYOUT_BOUNDS.height ); },
      function( model ) { return new GameView( model ); },
      {backgroundColor: BCEConstants.GAME_CANVAS_BACKGROUND} )
  ];

PhET recently decided that it was preferable to create a subtype files for each screen, to improve encapsulation and to facilitate the ability to reuse screens. See ph-scale-main.js for an example. Using that approach, the above would look like:

var IntroductionScreen = require( 'introduction/IntroductionScreen' );
var GameScreen = require( 'introduction/GameScreen' );
//...
var screens = [ new IntroductionScreen(), new GameScreen() ]; 

When playing level 3, sometimes users are presented with both the forward and reverse versions of the same reaction. Also, sometimes users receive more than one equation with NH3 as a reactant, or more than one equation with NH3 as a product.

I believe these should all be disallowed, according to the selection/exclusion rules for random equation selection in the Java sim Level 3.

@pixelzoom, can you confirm that the Java sim does have these exclusions coded in, and then assign to MLL to fix if this is the case?

Test device: Macbook Pro

Operating System: 10.9.3

Browser: Chrome 35.0.1916.153

Problem description: After completing a level with a less than perfect score, I was rewarded "Your Best 0:00"

Steps to reproduce:
-Attempt a level with a less than perfect score
-You will be rewarded Your New Best regardless of your score

Severity:

Screenshots:

Troubleshooting information (do not edit):
Name: Balancing Chemical Equations
URL: http://www.colorado.edu/physics/phet/dev/html/balancing-chemical-equations/1.0.0-dev.2/balancing-chemical-equations_en.html
Version: 1.0.0-dev.2
Features missing: touch
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36
Language: en-US
Window: 973x566
Pixel Ratio: 1/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: 15 uniform: 1024
Texture: size: 4096 imageUnits: 16 (vertex: 16, combined: 16)
Max viewport: 8192x8192
OES_texture_float: true

Occurs on http://www.colorado.edu/physics/phet/dev/html/balancing-chemical-equations/1.0.0-dev.2/balancing-chemical-equations_en.html

After a set amount of time (in this case, 5:53) the timer will stop running. I tested another published simulation and the timer surpassed this set amount of time.

Steps to reproduce
-Attempt a level
-Let the time run
-At a certain point the timer will stop running.

The current state of master (sha d001577) does not run.

Here's the output from Chrome console (version 35.0.1916.114, Mac OS):

GET http://localhost/~cmalley/GitHub/balancing-chemical-equations/js/common/view/BalanceScaleNode.js?1401383705220 404 (Not Found) require-2.1.11.js:1895
Uncaught Error: Script error for: BALANCING_CHEMICAL_EQUATIONS/common/view/BalanceScaleNode
http://requirejs.org/docs/errors.html#scripterror require-2.1.11.js:166

Observed on Mac and Windows. The game will not save/display your score (# of stars) unless you correctly answer the 5th challenge.

To reproduce open the sim and pick any game level.
Answer only the first question (or any question besides the last question) correctly.
Your score will not be visible in the "Choose Your Level" screen.

Troubleshooting information (do not edit):
Name: Balancing Chemical Equations
URL: http://www.colorado.edu/physics/phet/dev/html/balancing-chemical-equations/1.0.0-dev.2/balancing-chemical-equations_en.html
Version: 1.0.0-dev.2
Features missing: touch, fullscreen
Flags: pointerEnabled, msPointerEnabled, pixelRatioScaling
User Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; Touch; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729; Tablet PC 2.0; ASU2JS; rv:11.0) like Gecko

Language: en-US
Window: 1093x538
Pixel Ratio: 1.25/1
WebGL: WebGL 0.93
GLSL: WebGL GLSL ES 0.93
Vendor: Microsoft (Internet Explorer)
Vertex: attribs: 16 varying: 14 uniform: 512
Texture: size: 8192 imageUnits: 16 (vertex: 16, combined: 32)
Max viewport: 8192x8192
OES_texture_float: true