My Website For Creating Interactive Visuals Linked To Equations

  • Thread starter Thread starter person123
  • Start date Start date
  • Tags Tags
    equations
AI Thread Summary
The discussion centers around a newly launched website, equationvisuals.com, designed to help engineering students visualize equations through interactive graphics linked to a computer algebra system. The site features 40 examples in physics and engineering, allowing users to create and save their own systems of equations. Initial feedback highlighted issues such as debugging code, slow loading times, and mobile usability, prompting the creator to implement several improvements, including fixing the Google sign-in and disabling Google Analytics. Users emphasized the need for clear instructions and walkthroughs, which the creator has since added to enhance user experience. Overall, the website aims to provide valuable educational tools, despite its current limitations.
person123
Messages
326
Reaction score
52
TL;DR Summary
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.
 
  • Like
Likes Filip Larsen
Technology news on Phys.org
person123 said:
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.
 
  • Informative
  • Love
Likes berkeman and Mark44
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.
 
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.
 
  • Like
Likes FactChecker
DrJohn said:
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.
 
Dear Peeps I have posted a few questions about programing on this sectio of the PF forum. I want to ask you veterans how you folks learn program in assembly and about computer architecture for the x86 family. In addition to finish learning C, I am also reading the book From bits to Gates to C and Beyond. In the book, it uses the mini LC3 assembly language. I also have books on assembly programming and computer architecture. The few famous ones i have are Computer Organization and...
I have a quick questions. I am going through a book on C programming on my own. Afterwards, I plan to go through something call data structures and algorithms on my own also in C. I also need to learn C++, Matlab and for personal interest Haskell. For the two topic of data structures and algorithms, I understand there are standard ones across all programming languages. After learning it through C, what would be the biggest issue when trying to implement the same data...
Back
Top