Creating Virtual Hand

Thursday, February 21, 2019 - 6 mins

In 2013 (October, I think), during my sophomore year of high school, I needed a project to keep my busy. After bugging my Computer Science teacher for ideas, she gave me one that stuck for a few years: create a system that her students could use to electronically request assistance during class and provide her a queue with these requests.

At the time, the only language I had any significant experience with was Java, and I had zero networking experience. So I set out to learn about Java sockets and within a few weeks (I don’t really remember exactly how long it took), I had developed prototypes of the teacher and student sides, respectively:

The teacher program operated as very basic server to which the student programs, the clients, connected.

I further iterated on the design and developed another version of the teacher program. Each student would be assigned a box as they logged in, and the boxes would change color and display a request number if a student requested help. A note: I thought I remember this being the first version I made, but the screenshots I have saved have this one labelled as the second version. Regardless, it’s the first one I tested in a classroom:

As I mentioned, this was the first version I tested in a classroom. I definitely got a lesson in testing my creations a bit more thoroughly (and in general, just designing them better). I remember two major bugs popping up originally. The first is that students could lower and raise their hands as often as they wished, and one student figured out that he could mess up the teacher’s display by doing so very rapidly. This is because I decided to have a request number displayed (probably thinking of the paper tickets in stores) instead of displaying an actual queue. My initial fix for this was to implement a few second delay between when a student could change their request status. The second major bug involved student being able to get their name on the board in multiple boxes. I don’t remember the exact cause of that one, but I’m pretty sure it wasn't because of multiple instances on a student machine, because that would have caused issues with sockets. Regardless, I definitely had fun working out the various kinks. Over time there were several versions that got lost along the way and at some point I switched from the bright yellow grid to an actual queue. And I even made an update to celebrate Pi Day:

Towards the end of that school year Raise My Hand, as it was known then, was catching on and another teacher was interested in using it in her classroom. Unfortunately, there were issues getting two teacher servers to function properly on the same network. That was the beginning of the end for the desktop Java version. Here’s the code (for unknown versions):

• Teacher Raise My Hand
• Student Raise My Hand

At some point I remember experimenting with a Java based website, with little luck. I don’t recall the problem I ran into, but they could probably be boiled down to inexperience with website design or servers. After that didn’t work out, I decided to try doing it in another language (because I blamed the language at the time). After doing some research (which as you’ll find out later, wasn’t good enough), I settled on PHP… in hindsight, probably not a good idea. Regardless, I was determined to get it running before the next school year, so I managed to write what I had begun calling Virtual Hand in about 3 weeks. The result was not pretty (that includes the code and the GUI), but it was functional:

This ended up being used rather successfully for most of the year. But there were two main issues: one, the design, specifically the colors, was awful (I might be remembering this incorrectly, but I think the first version was actually green on pure black). Towards the end of the year, I distributed a survey to all of the student users, and one result stood out, and that was that the color scheme needed to be redone:

!{Survey Results](https://i.imgur.com/mTXV8f9.png){: .center-image }

The second issue, and definitely more important, was that the code was a mess. I had written it all in three weeks while learning a new language. The result was an uncommented mess that I really had no hope of maintaining, never mind adding on the various features requested.

And so, it was time for another rewrite, over the summer of 2015 this time. I decided I had had enough of PHP and switched to Node.js, reasoning that I had a solid handle on Javascript at the time, so it would probably be the best option. I haven’t switched the project from that yet, so I think it worked out.

This time, I did a much better job planning out the structure of the server, which allowed me to properly maintain the project and add features over time. During my high school senior project, I added a paywall to the service, opening the possibility of selling it to teachers or districts. As a part of this, I made a brand of sorts, [STL Software] (www.stlclassrooms.com), informational handouts, and various other promotional items. None of that ever worked out, so I ended up removing the paywall and leaving it at that.

Last year I had some free time, so I rewrote a significant portion of the backend to make better use of Javascript promises, which I had recently learned to use. I also added a couple of features, like allowing students to request and be granted hall passes automatically and providing teachers with a history of different requests so they could monitor which students needed the most help and who was leaving the classroom the most often.

The current Virtual Hand code is available here: Virtual Hand

It’s not perfect, but it works pretty well and it is by far the single project that has taught me the most about software development. From designing a system, to testing it and working with users, I have immensely benefited from this project. I hope that in the future as I continue to develop it I’ll write posts about the process so I can provide more details than the vague outline above.