Tag Archives: web application

My latest app project: 5K Race Timer

I happened to attend a meeting a little more than a month ago for the committee that organizes the Dragon Run. This is one of the school's biggest events and requires quite a group of people to make happen. One of the biggest challenges that the group faces is the timing of the race and management of this data for the 120+ runners that participate in the official event.

The scheme used in previous years has been a very well thought out system of spotters with pencil and paper lists and a race timer placed at the finish line. When runners register, they give an estimated time for their run, which places them in a few different speed categories. Each spotter has a list of runner numbers from each category so that they are searching for particular runner numbers throughout the time span of the race. When a runner crosses, the spotter records the time on their sheet. This time is then later fed into a spreadsheet that gives everyone's time. These results are then collated and printed to give the results list after the race.

I'm trying not to be a hammer looking for a nail here, but this seemed like a perfect opportunity to try to use the power of the computer to reduce some of the mental and paper load of this task. My learning obsession with Python web apps and even more recent desire to learn about databases quickly helped me see some easy ways to do this. These were the main points that I wanted as part of the UI:

  • Upon seeing a runner approach the finish line, the spotter should be able to send a 'stop' command at the moment that runner crosses the line. Calculating the finish time relative to the start of the race and recording that information is screaming for a computer solution. This capitalizes on the human spotter's ability for to recognize a runner's number by sight, leaving the rest of the work to the program to do.
  • We would need a simple interface for starting the race and stopping individual runners with a button press.
  • A non-trivial number of runners register on the day of the race. There needs to be a way to manually add runners to the database easily.
  • Mistakes also come up in recording times and entering data. Editing a runner's information, including finish time, is a necessity.
  • Manually entering all the runners into the database before the race? Heck no. The organizers use a spreadsheet to record all of the registration information, which is a CSV file asking to be made and inputted to the database automatically.
  • Creating a list of runners based on category and ranked according to race finish time is another exhausting task when done purely by spreadsheet. This process in the program should make the most of SQL queries and Python/Bottle template features to generate the race results automatically.
  • To properly see if this system would work, I'd need a way of showing numbers passing by similar to what actually happens during a race. I put together a Javascript simulator to do this using Raphael that can be found here. This was especially important in testing the system with my student volunteers.

The organizers agreed to let me run my software as a beta test to see if it would work for future years. More insight and conversation led to the idea of a mobile application to be used to enter runner numbers. I agreed that this would be an easier way to locate runners than looking down a list, but had no idea how to do this. I did research and figured out the jQuery Mobile would be the way to do it. This was a difficult learning process having never done this sort of thing before. I battled with the "ghost click" problem for a while until discovering that the 'touchend' event was an easy fix.
Screen Shot 2013-05-26 at 5.12.20 PM


Here's the software as used on race day:

UPDATE Mar. 2016: I've taken down the site to save some memory on my server. Write me if you are interested in the details.

The system worked really well, but ran into some of the same challenges that the pencil-and-paper spotters have been battling since the event's inception. It's really hard to simultaneously grab the numbers of a group of 4-5 runners that all come in at once. The system that my students devised for identifying who was going to enter a particular runner approaching the finish line broke down in two specific instances of this, and we missed runners. Luckily pencil and paper picked up the ones we missed. Definitely still in beta. The process of generating results lists and recording times overall worked quite smoothly, and I'm really happy with how it turned out.

Notes:

  • Bottle, Twitter Bootstrap, jQuery Mobile, and vanilla Javascript were all in play.
  • I learned at the race that there are already software packages out there. Now that I've done a quick search, it seems that while there is a lot of software out there, the ease of running it through a web interface (and snagging runners through a mobile interface) is a relatively young feature. This project was about me learning to do some new things, and in the end it cost me (and the school) nothing other than time.
  • I learned a lot about user centered design through this project. Usability was a necessity, so I had to start from there and work backwards to build the code needed to make it happen. I really like thinking this way,

Progress on Python-Powered randomized quiz generator

One of the projects floating around in my head since the end of last year is creating an easy to use tool that will automatically generate questions for students to test their skills either on their own or while in class. My first attempt at this was during a unit in Geometry on translations, my first attempt at implementing standards based grading. I was taking a Udacity course on web applications and realized that if I could write a quiz generator online, it would be the easiest way to give students a sense of how they were doing without needing me to be part of the process.

As most people doing reassessments tend to be, I was a bit overwhelmed with the paperwork side of things, especially because many of the students just wanted to know if they were right or not. I had made some Python programs to generate quiz questions one by one and decided to try to adapt it to the web application so students could input their answers to questions that had different numbers every time. I had tried to use other options such as PollEverywhere, Socrative to at least collect the data and check it as right/wrong (which would have been good enough for a start in terms of collecting data, but left out the randomization part). The problem with these is that I believe they are hosted in the US and are incredibly slow without a VPN. I needed a solution that was fast, and if I could add the randomization, that would be even better. I decided to try to adapt my quiz generator to a Google App Engine hosted web application.

Needless to say (at least for me) this was not an easy task. I had a loose understanding of how to manage GET and POST requests and use cookies to store random values used. The biggest challenge came from checking answers on the server side. For someone figuring out Python concept as he goes, it involved a lot of fists on the keyboard at the time. My attempt is posted here. There were tons of bugs (and still are) but I at least got up the nerve to try it in class. The morning I was excited to premiere it, I also found out another interestingly infuriating nugget of info: Google App Engine is blocked in China.

I gave up at the time, as it was almost summer. I was interested in helping out with the development of the Physics Problem Database project during the summer, but opportunities for sitting down and coding while on a whirlwind tour of the US seeing friends and family weren't that numerous. It's amazing to see how John, Andy, and others have gotten the database site together and doing functionally cool things in a short amount of time. I spent some time over the summer learning PHP and MYSQL, but was pulled back into Python when I saw the capabilities of webpy and web2py to do applications. I see a lot of features and possibility there, but fitting my ideas to that framework is beyond what I know how to do and what I have been able to figure out during my time prepping and starting school. That will come later.

I keep coming back to the fact that randomization needs to be built into the program interface from the beginning. I want students that need to practice to be able to do so with different problems each time, because that frees them from needing me to be there to either generate them myself or prevent them from creating impossible problems. I want the reassessment process to be as simple as possible, and for the lowest level skills, they don't necessarily need me to be testing them in person. That's what in person interviews and conversations (including those through BlueHarvest) are all about. I won't rely on a tool like this to check proficiency, but it's a start for giving students a tool that will get them thinking along those lines.

I've had the structure for how to do this in my head for a while, and I started sketching out what it would be in a new Python program last week. This morning, after learning a bit more about the newer string formatting options in Python that offer more options than basic string substitution, I hunkered down and put together what is at least a workable version of what I want to do.

Please visit here to see the code, and here to give it a shot on repl.it.

The basic structure is that every question can use either random integers, an irrational decimal value, or signed integers in its text. With all of the messiness of methods to generate and replace the random numbers inside the Question class, it is fairly easy to generate questions with random values and answers. I admit that the formatting stinks, but the structure is there. I could theoretically make some questions for students this way that could be used on Monday, but I probably won't just yet. I think a nap is in order.

Next steps:

  • I need to work on the answer checking algorithm. At the moment it just compares an entered decimal answer to being within a certain tolerance of the calculated answer. My plan is to expand the Question definition to include another input variable for question type. Single numerical answers are one question type, Coordinates are another, and symbolic equations or expressions are yet another one I'd like to include. Based on the question type, the answer method in the Question class can be adjusted.
  • As an extension to this, I'd like to include sympy as part of this for making both question generation and answer checking. It has the ability to show that two symbolic expressions are equal to each other, among many other really nice capabilities. This will let me generate all sorts of nice Calculus and algebraic manipulation questions without too much difficulty.
  • I'd like to be able to format things nicely for algebraic questions, and possibly generate graphical questions as well.
  • The ultimate goal is to then get this nicely embedded as a web application. As I mentioned before, there is too much going on in the web2py framework for me to really get how to do this, but I think this is something I can do with a bit of help from the right sources.

I'm having a ball learning all of this, and to know that it will eventually make for a nice learning tool that students will benefit from using is a nice incentive for doing it.