Typing Tally

This note-taking tracker will help teachers see who's still typing and taking notes! Hopefully, it will allow students more time to process information and summarize lectures effectively!

Comment

Inspiration

My teacher and I were brainstorming ideas for the hackathon. He asked me what kind of challenges I face when I'm learning. One of the things I struggle with most is note-taking. I have social anxiety and ADHD. So, sometimes when I'm in large classes with a lot of students, I can't focus or process what my teacher is saying. But, I'll be too nervous to raise my hand or interupt the teacher. Thus, Typing Tallying is a way for students to anonymously communicate to their teacher that they need more time or more help.

What it does

Typing Tally is a note-tracking application. Teachers, or lecturers in general, can create a room. A code will be randomly generated, and students or other listeners can join using that code. Once a person has joined the room, the teacher will be able to see whether or not they're typing. There are also some buttons that users can press to quickly communicate with their teacher when they need help. The buttons available are "Repeat," "Slow down," and "Elaborate."

How I built it

I worked on Typing Tally during my ICS4U classes. The languages I used were JavaScript, HTML, and CSS. Once I had the idea, I sketched out some basic pseudo code. I also knew I would need a database, so I set up a Firebase Realtime Database. From there, I worked on the entry pages, one for teachers who would create the room and one for students who would join the room. From there, I built the student view which would inform what data is being sent to teacher view.

Challenges I ran into

One of the main challenges I ran into was cutting down on my ideas. This was my first hackathon and as I began working on the project, I became more and more aware of how little time I had. I wouldn't be able to incorporate all the features I wanted. So, I had to prioritize basic functionality and focus on simply creating a working demo. I let my code be messy which made it a bit hard to understand sometimes, but it let me push forward and create a nice rough draft of Typing Tally.

Accomplishments that I'm proud of

I'm proud of the interface. I think it looks pretty clean and simple. CSS and design are some of my favourite parts of web development and coding! Also, I was super hesitant to do a hackathon, so I'm just proud that I actually went through with it this time! My poor teacher has been trying to get me to do one for months...

What I learned

I've always been interested in responsive web design, but I never really took the time to look into it. So, I used this hackathon as an excuse to figure out the basics of how media queries work and how to create breakpoints. Also, I've worked with Realtime Firebase before in the past, but I felt like I learned a lot more about its documentation and uses as I actually implemented into this project. I had never used it practically before. Another thing I learned about was the beforeunload event handler.

What's next for Typing Tally

One feature that definitely has to be implemented is the prevention of duplicate room codes or student codes from being pushed to the database. Right now, the program doesn't check for potential duplicate codes. So, if by chance, the program generates two identical codes, one person won't be able to access a unique room. Furthermore, it would be nice if the note-taking interface for the students had more features—such as emboldening, italicizing, and underling text—that are common in word processers.

Share this project:

Updates