We were recently introduced to the world of Explorable Explanations (by Nicky Case!) and were immediately enthralled by its educating yet engaging nature. Inspired, we decided to present the concept of quantum mechanics to better engage the youth who have not yet encountered this phenomenon in class.
The code that we built is a web page for educational purposes. It talks about the applications and different phenomena of Quantum physics in a very simple way, so that even high school students can understand it clearly. The webpage contains simple animations for demonstrations of the phenomena.
We built the webpage using HTML and CSS and created small animations using Javascript and an open-source library (EaselJS and TweenJS).
Jennifer: Working through the eye strain! I had some experience with HTML and CSS prior to this hackathon, but having to relearn the basics and take on a completely new language (Javascript) was an incredible challenge. From the numerous crash courses consumed to the constant research and debugging I’ve had to do in the past two days, I realized just how different of a language Javascript is compared to my experience with Python.
Karen: As a beginner programmer, trying to learn coding was a huge challenge. I had limited knowledge with HTML, and no experience with CSS or JavaScript; the latter being the most difficult to understand! This hackathon was also my first concrete experience with programming and also an introduction to software development as a whole. Debugging was also a pain.
Yudi: I have never dealt with a front-end language before. In my past experience, I have only worked with C and python, and softwares like MATLAB. Learning three languages in a short amount of time was the biggest challenge that I have. Our team decided on the topic and language the night before the hack, and all three of us binge watched loads of Youtube crash courses. This was also my very first hackathon experience!
Jennifer: Having actually learned and implemented a new programming language in such a short time span. There were many things on our page that I thought we wouldn’t be able to accomplish. It was an absolute pain trying to create our small animations and there were many times where I felt like giving up. We also played around with user input (and created an unrelated drawing game on the side)! But in the end, I’m proud of all the work we’ve done and for continuing to persevere through our many hurdles. As simple as our web page may be, it was the result of a lot of hard work and it was a great learning experience for all of us!
Karen: In preparation for this hackathon, I attempted to learn three languages over the course of a few days. Software development was always an intimidating field to me, but I am proud to be able to understand the basics of coding - even though I’m only familiar with three languages thus far. As a non-STEM student, coding is something I’m glad to have pursued!
Yudi: I was kind of frustrated that I didn’t understand some of the things that was going on, but in the latter half of the hack, I was able to overcome some of the confusion. Although I felt I haven’t contributed that much to the team, I did learn a lot; not just from the crash courses, but also from my teammates. We had many things that we had to clarify and google, but in the end, we grit our teeth and pull through.
Jennifer: I hate semicolons and have a new appreciation for Javascript. I also learned that centering divs is unnecessarily painful and have fallen in love with documentations. As well, I learned about my dire need for caffeinated chocolate and miss it dearly so. On a more serious note, I learned a lot about web development! Javascript is a more flexible language that I had anticipated and its capabilities astounded me.
Karen: Beyond understanding the basics of coding, I also familiarized myself with the work culture surrounding software development. The community is incredibly talented and ambitious, which instills fear within me.
Yudi: I observed that humans work incredibly fast and efficient under pressure :) I really appreciate how the three languages come together so smoothly. But then again, I need to learn more about all these three languages to use them fluently. Through this experience, I realized how little I know about coding, and how vast and versatile this field actually is.
As we work on our Javascript, HTML, and CSS knowledge, we can further develop this website to be more interactive and pretty. In addition, we can add other topics to the web page.
card.mp3 from: License: The sound effect is permitted for non-commercial use under license “Attribution-NonCommercial 4.0 International (CC BY-NC 4.0) http://www.orangefreesounds.com/