My Website For Creating Interactive Visuals Linked To Equations

[person123]

TL;DR

I'm sharing a website I made for solving systems of equations and connecting them to interactive visuals.

I recently finished a website and I'd like to share it in case it would be useful, as well as to get feedback. The URL:

equationvisuals.com

The website uses a basic computer algebra system (CAS) I built to solve systems of equations and show its steps. These equations can then be linked to parametric, dynamic visuals. I created 40 examples in physics and engineering for users to build off of, and you can also create and save your own. Note that this site is basically unusable on mobile, so you should definitely use a laptop/desktop instead.

I intended this for students in engineering classes to get an intuition for the problem they're solving instead of blindly substituting values into equations. (I had the idea during college, but unfortunately graduated before it was developed much). I don't think I will continue to develop this (it honestly took much longer than I would have liked, and I'm afraid to spend more time), but I hope people find it interesting or valuable, and I would still love any feedback. Thanks!

Just to clear any doubts, this is entirely open-source at the Github page for anyone to use how they like (the code's kind of a mess so I wouldn't necessarily recommend it), and I'm okay with (and would take it as a huge compliment) if anyone creates something similar based on this. (If this does happen, the only thing I ask for is that my website is mentioned).

For a more or less comprehensive overview of what you can do on the site:

• Whenever you make a change (with the exception of the spinners), you must press Ctrl+Enter to run the sheet and update the output.
• Each block (what I'm calling the white rectangles on the left) is a system of equations, one equation per line, with a name on the top. New lines can be created within a block, and new blocks can be created (just use the + or x buttons for creating and deleting).
• Blocks can reference blocks above, inserting the equations of the referenced block into a larger system. After referencing a block and rerunning, a tables appear to the right of the line, one column for each variable, where variables, values, or just blank can be input. Variables and values are substituted, while a blank cell asks the CAS to eliminate the variable from the system (e.g. a=b+3 and b=c+4 becomes a=c+7 if b is eliminated). Multiple rows can be created in the table; the referenced block is inserted once for each row.
• A line for an equation can also start with the visual keyword followed by the name of a visual (e.g. "Cylinder", "Sphere", "Box", "Arrow"). Values for visuals can be substituted in just like equations, and they're displayed when numeric values have been substituted for all parameters.
• There's a special Solve block below the rest where the user can reference one of the above blocks to solve it. Once ran with a reference to a block, a table appears, again one column for each variable. If there is too much unknown to solve, you can substitute values into the cells, while the cells show the rest of the values as output if solved successfully. If the CAS is able to solve, it will show the steps. If values were input into the table, they can be adjusted with spinners, allowing for dynamic visuals.

 

[pbuk]

I recently finished a website and I'd like to share it in case it would be useful, as well as to get feedback.

My feedback:

• Is it really finished? There seems to be debugging code in there (do you really need to log "boop" hundreds of times to the console?) and a lot of files you are trying to load don't exist.
• The "sign in with Google" link doesn't work, apparently because "This domain (equationvisuals.com) is not authorized to run this operation" (not that I would sign in with my Google credentials to a site I did not trust anyway).
• Your site stores Google Analytics cookies and other data on my computer without my consent: this is not legal in most jurisdictions.
• If I design something using your site and it breaks then I might sue you for damages: you need to have terms of use to mitigate this risk.
• The site is very slow to load, particularly on a mobile connection. This is mainly due to loading a large number of inline scripts: you should consider using a bundler and loading with the "defer" or "async" attributes. The "Lighthouse" tool in Chrome can give some useful pointers.
• The site is almost unusable on a mobile phone or tablet, mainly because it does not include the right settings for high resolution displays, but also probably because you are using jQuery UI which is pretty much a dead project.

 

[person123]

Thanks for your critiques, I made the following changes:

• I removed the unnecessary debugging code (I used "boop" when I was checking window resizing), and removed the files that weren't loading (they were files I wasn't using anymore). (I didn't think much of keeping these messages on the log screen, but I understand I should remove the clutter).
• That's embarrassing -- I should have checked sign in on the published site. I added equationvisuals to list of allowed domains so sign in works now. I won't use people's google accounts at all, it's just the easiest way I found to allow people to save something they made.
• I disabled Google Analytics (I'm pretty sure this was default for Firebase as I don't remember enabling it). There are a few cookies from Glowscript, which glowscript.org also uses without permission, and a gstatic one from Firebase, which I don't think requires permission and I'm not sure how I could remove it.
• I added a disclaimer to the bottom of the page saying it's not meant for engineering design and users are responsible for ensuring accuracy.

On the last two comments:

• On my laptop, after clearing cache, it takes a couple seconds to load, and refresh takes about one second. I don't really see sites any faster than this, so I'm honestly confused about this one. (The library content can take several seconds since it's loading it from firebase, but I don't think that's what you mean).
• I don't use JQueryUI myself, but Glowscript does use it, so maybe that's the issue (in addition to other issue you mentioned about resolution).

Thanks again.

 

[DrJohn]

Your site badly needs a set of instructions, and a walkthrough of a few examples to help people know where to start and what to do.

When you create a system it is sometimes so very obvious to you on what to do. But not to anyone else.

 

[person123]

Your site badly needs a set of instructions, and a walkthrough of a few examples to help people know where to start and what to do.

When you create a system it is sometimes so very obvious to you on what to do. But not to anyone else.

Good point, I updated the site with a walkthrough of basic examples explaining how to use it. I hope this makes it clearer.