I Made a Vue Site that Asks Chemistry Questions
Back in high school, I wrote a program in Java that asked chemistry questions — I distributed it to classmates as a JAR file, and almost no one figured out how to run it. Jeffery, another student taking AP Computer Science, said that I’d lose 90% of potential interest the second I instructed a user to open the command prompt. Even back then, in the year 2011, Jeffery already understood the concept of the UX leaky funnel.
I gave up on the project for a while, but kept the java code around in my email archives. The original intent was to parody my high school chemistry class. It was a console program that asked the user questions, responded to feedback, lectured, and gave back “grades.” It would have to keep track of state, and react accordingly.
I realized this would be a good use case for Vue. Vue is reactive — changes to properties are reflected in a website’s visual elements, and the website keeps track of changes so that it can update the elements efficiently. Could I have achieved this with a different framework? Yes, Vue just so happens to be something I was familiar with. Could I have achieved this with no framework? Maybe, using DOM manipulations, but Vue has its own way of interacting with the DOM.
Why Vue.js was a good choice:
- Vue is reactive
- Vuetify provides for quick project creation, and Material Design out of the box. Once you have your dependencies installed, you can make new Vuetify projects very easily
- Vue.js is for client side applications. You can host this in Github Pages without having to run your own server, or anything like that. For me, this three-minute guide has been like a magic spell book.
That being said, the UI didn’t have to be anything complex. The original program was a console app, after all…just a window and button would suffice.
The Conversion Process
The java file I wrote in high school was 3300 lines (in high school, I was a programmer. I never said I was a good one). It printed lectures in a series of print statements, instead of using file parsing. The vast majority of the code was in the main method. I did the Java to JavaScript by hand…I have to say, some of my old code brought back memories.
I used a variable in Vue to track how many times the user clicked a button, and a lot of the text parsing logic was reusable…using trim, converting to lowercase, doing search. I got to learn about the <sub> tag, which came in handy for the chemical equation balancing. The whole thing employed the standard Vuetify grid, which is based on Flexbox.
The lecture feature required something a little extra. Like my APCS teacher said way back then, not doing file parsing for a task like this was poor form. So I downloaded raw loader with npm, and the formatting was awful. Line breaks were simply not appearing.
Stackoverflow to the rescue. I found a regular expression that did the necessary work on line breaks.
Looked right to me in localhost. I had a heading for the questions, an answer section, and a lecture section that would expand when the user got to it. I used the v-btn disabled attributed to add some simple logic — buttons were only available when they were supposed to be available.
Deploying
But was I able to put it on Github pages? was Github able to handle the different dependencies, like Raw Loader and Vuetify?
Yeah, it was, thanks to that helpful 3-minute read.
https://evansoohoo.github.io/AngryChemTeacher/
This Isn’t Complete
I’ve saved the original java file I wrote in high school in the project, and it had six sections — more lectures, more questions, and I didn’t know if I had the time to translate it all. If anyone wants the rest of it, I can get on that.
Until then, there it is.
Have fun, everyone, enjoy the Vue, and I hope your next week is very Vuetiful.
I will show myself out.
