How Knowledge Bowl Online was made

How I Created the Site

Knowledge Bowl Online is hosted on an Azure server with a professional plan for optimal performance. The backend was made using Node.JS and socket.io. The database was made by web-scraping almost 40 PDFs of past Knowledge Bowl meets. There was only one problem: the PDFs are read line by line, but the actual questions are in even squares.

Inserting Questions into the Database

The way I combatted this was to convert every PDF to an image with python. There were also headers and footers to each PDF that had to be ignored when parsing the file, so the first step was cropping all of those away such that all that was left was an image that was divided into ten even chunks, each one being a question. Then, still using Python, each image was separated into ten even chunks. Each image now contained one question. Using the ImageCV library to read the text of the image, extracting what parts of the text were the subject, which were the question, and which were the answer was fairly straightforward: it only involved splitting the text by lines. The first line was always the subject. The last line was always the answer. This meant that by taking away those two, you could always get the rest of the question. The last step was going through each image and splitting the question like so, and then inserting each value into a database. This was the final step that involved Python.

Requesting and Serving a Question

When a new question is requested by the client, no API call is made. The client simply sends a message to the server to get a new question, and the server directly queries the database, running on a shared hosting account that I set up for hobby projects. I may migrate soon, but honestly, I’ve seen no use for it yet. Then, once every variable is set properly, the server sets an interval to send out the question and keep adding one word. That’s right, it doesn’t send out one word at a time. It sends out the entire question up until the last word every time. When testing, this yielded much more consistent results, especially with slow connections.

How the UI Was Made

The UI of KB Practice is made using Bootstrap. I may make my own design system for the site in the future, but it was never intended to look amazing. It’s supposed to do its job and look acceptable while doing that, and I’d say Bootstrap pretty much does that out of the box with little to no customization.

Points in KB Practice Online

Points in KB Practice Online are still experimental, and should be expected to sometimes reset randomly. I’m still working on storing them in a more permanent manner such that they don’t reset every time you change your name. I don’t have any intention of storing them in the localStorage like a username would be, however. The goal is to imitate Knowledge Bowl as closely as possible, which means points are gained each session and don’t carry over eternally. Every round is a fresh start.

Rereads in Knowledge Bowl VS KB Practice Online

Speaking of ways the site imitates Knowledge Bowl, there’s one key way in which it doesn’t: rereads. If a player buzzes in in Knowledge Bowl, and they get it wrong, the question restarts. However, in KB Practice Online, I saw no need for this. The text is all still there on the screen, after all, and users can still reread if they want to. So, in a Protobowl like fashion, rather than begin the question anew, the question picks up exactly where it left off.

Humble Beginnings

When Knowledge Bowl Online was first released, it was running on the Free plan on Heroku through an Iframe on my shared server. As expected, it crashed. A lot. There was no getting around it. When I migrated to Azure, these crashes decreased tenfold. But they still happen occasionally. One recurring bug that I’ve tried to fix countless times only to see it pop up again (just a little less frequently) is the infamous “undefined” bug.

Future Bugs

Randomly at times during gameplay, the site will break and begin to spam “Question is over. Correct answer: undefined” in the chat. To combat this without actually solving the problem, I’ve added a little failsafe. If the server finds itself either spamming the same answer or sending an undefined answer, it will exit the process. This certainly isn’t ideal, but at least it doesn’t require me manually entering into Azure and restarting the app. It has to run independently.