CODEon!

An introduction to how we understand DNA.

Comment

How do we interpret our DNA?

Inspiration

With more teachers integrating technology into their classrooms than ever before, there is a need for accessible educational material that students will actually enjoy.

Although there were multiple prompts, we saw a niche for education on the topic of bioinformatics. We wanted to create something that could be educational and easy to understand, while also introductory to the field of bioinformatics. When brainstorming ideas on how we could best execute our mission, we referenced educational biology material and bioinformatics topic introductions, then searched for the best way to translate it into our website as a fun activity.

What it does

CODEon! is a website we made with Qoom that offers two interactive learning experiences to ease someone with any level of experience into learning more about the topic. With it we seek to give a simple but engaging introduction to the world of bioinformatics.

On the landing page, we included clickable buttons that can take the user to either the learn page to get started with the activities, or to an introductory video on the topic of bioinformatics as a whole. Along with this, we added more information about what bioinformatics is and how our project relates to it.

When the user is taken to the Learn page, they will first see the amino aid coding activity. After an introduction to how amino acids are made and what their function is, the user can input their own 3-base codon sequence and simulate the way a tRNA arranges bases. When any of the inputted codons are recognized by the code, more information on that codon will appear, and a link is given for more information. The second activity describes how DNA polymerase fixes mutations and allows the user to interact with a set of two DNA strands, and try to find the mutation in the copied strand. The user can click on the mutation for a link to appear that leads them to more information on mutations in general.

How we built it

Connor wrote the code on this project, and here's his take: I started out by doing research on features of successful websites. I learned that an intuitive user interface is key to a website being desirable to visit, so I set out learning how to code the best menus. I also wanted the site to stand out, so I incorporated animations into the buttons, text, and background, to make it more pleasing to the eye. We decided on three pages for ease of use, as its primary function is to serve as an educational tool to the world of bioinformatics.

Challenges we ran into

There was the challenge of designing the layout to be compatible on different screen sizes and also on a phone. Designing the biological concepts in the format of a website and making it into an educational experience was a challenge in itself because we had to take the amount of work that it would take on the back end into account.

Connor also ran into some challenges while coding: The main struggles I faced were related to the coding of the UI itself. I had never done keyframes or webkit animation, so getting them to work correctly and consistently across multiple browsers was definitely a challenge. MDBootstrap was also new to me, so there was a learning curve there as well. However, I'd say the biggest issue we tackled was making activities that were fun and educational, but I'd say we achieved that rather well.

Accomplishments that we're proud of

We are proud of how we were able to incorporate multiple aspects to our idea; our website has two different activities along with links that give further education for an even more educational experience. We are also proud of how we were able to adapt to use Qoom for the first time.

What we learned

Learning how to use Qoom for the first time was something Connor had to figure out, but with the help of the staff on the Helyx discord (and especially Kiae), and the coding webinars, we were both able to learn something in the process of working on the web design aspect.

As this was our first hackathon, we didn't know fully what to expect, but we both learned a lot and plan on collaborating on more hackathons in the future.

What's next for CODEon!

As CODEon!'s initial goal was to provide an introductory learning experience, the next step would be to expand from this by adding some more challenging elements to the activities. This could entail further developing our activities. For our first activity, a random amino acid generator could ask the user to enter its specific codon. And more variants of DNA strands could be added to our mutation activity.

Thanks for taking a look at CODEon!

Built With

Share this project:

Updates