Please wait for a few seconds. The network may be slow.

If this is visible after a few seconds, then javascript is not enabled. This site needs it running. Please disable any script blockers.

Chemical Reaction Balancer

Background

I'm a volunteer math and science tutor with Pathways to Education. I find many students struggle to balance chemical reactions. I looked online for balancing tools. To my chagrin none of these tools listed the steps taken to balance a given reaction. Since I wanted to make a website using AJAX anyway, and test it with Selenium, I figured I would try to make a balancer that showed its work.

I assumed that

  • because this project will be used in tutoring, I designed it "large-screen first", versus the standard "mobile first" technique used in designing most of the bbaero site.
  • only simple reactions are to be balanced.
    • Half-cell reactions and hard-to-balance reactions will fail to balance, even though they may be able to be balanced
    • It is a learning opportunity for the student when a reaction is deemed "impossible to balance." Follow-up questions include
    • Is this reaction truly impossible to balance?
    • If not, how do we balance it?
    • What should the computer have done differently?
    • and others
  • no ions (i.e., particles with non-zero net charges) can be given as reactants or products
  • hydrated salts (i.e., with "xH2O" molecules trapped in their crystal lattice) are forbidden
  • compounds given are valid. Only elements are checked.
    • for example, both H2O and H5O are accepted by the balancer, even though H5O does not exist

Approach

Client side Javascript does some of the input validation. For example, scripts check whether each compound is composed of valid elements. Once client validation complete, a JSON object is sent to PHP scripts. It is these server-side scripts that performs the actual balancing, or outputs client-detected errors in the JSON object.

I have not bothered to ensure my Javascript is Internet Explorer compatible. I may add that backward compatibility later, if needed. For the most part, the balancer should work with Microsoft's Edge browser. But as of Sept 7, 2016, it has not been tested.

I wanted to have the tests start from a web browser, and run in a headless setup on the web server. Because I decided to use Java, I run the headless tests via a servlet. Go to the run tests page to start them.

Takeaways and Possible enhancements

Some simple reactions, like 'H2O2 = H2O + O2', really should be balanced by the balancer. Currently it fails because it took too many steps (i.e., gets caught in an infinite balancing loop). Perhaps I will fix some of the balancing logic.

What I definitely want to go going forward, though, is add animation to the chemical reaction balancer. Why? Students have such short attention spans, so any bells and whistles to attract their attention are always welcome. Also, animating the results of each step should help students understand what is happening in a given step. For example, if the step says 'multiply coefficients by 4 to make F counts match', highlighting the compounds with fluorine (F) that have changing coefficients focuses attention on one particular step. From what I have read testing animation cannot be automated well, if at all. However, I think my current testing gear will be helpful to confirm that the needed CSS classes and/or IDs that indicate which tags to animate are where they should be.

Source Code

Source code for the chemistry reaction balancer is at tutor-prez in my GitHub repository. The web/php, web/chem and web/js directories have most of the core balancer functionality's code.