Ruby in the back, JS API in the front.
Until this point, I have been writing software that is specifically helpful for teachers in a classroom setting. For my most recent application, I took a break from supporting teachers to build a game. I enjoy word puzzles and my all-time favorite word puzzles are ciphers. When I was a kid, I had a teacher that would print off the ‘cryptoquote’ from our local paper and leave them in a pile outside his door. I would race my friends to see who could solve the puzzle first. As a teacher, I see now that it’s not always what happens in class that affects students, but the culture that you build around the campus can have just as profound an impact. I still love ciphers, so I built an application that allows users to both create and solve ciphers.
In creating this application, I went straight for the gut of the problem first. How do you make a sentence into a cipher, and specifically how can you account for; spaces, hyphens, punctuation, and all of the non-letter characters that show up in a typical sentence. Here’s the raw function that I came up with:
Given any string, this function will produce a scrambled version of an original string. I also posted that string to the DOM and created the puzzle-board here. A good regex statement goes a long way but creating an Object-Oriented backend to go along with this code proved much more challenging.
To make the application sing, I needed to create puzzle objects that could be fetched on page-load once. This saves on bandwidth and makes for a more fluid user experience. Creating an object-oriented structure allowed me to build a smoother application that can change fluidly if I need to expand functionality.
Buttons along with event-listeners call on the Puzzle object class to print puzzles to the DOM and check results as the game is being played. Constructor and service classes do the fetching and I even built a few custom methods that I can use to call puzzles by difficulty. Overall, the trick to the application was building the JS function to scramble strings. One final trick that I learned is how to utilize the focus() method built into JavaScript. Focus allows you to control where a cursor is based on user-input. My puzzle game requires users to fill out a separate puzzle form for each letter. Those forms are small, but hitting tab after each letter is an odd option. Instead, I added an event-listener that detects keystrokes (specifically key-up). On key-up events, the cursor refocuses on the next field to make typing easier on the user. Front end work is intuitive and I’m starting to get the hang of exactly how to make the DOM work. There isn’t much lag for users when they manipulate an application on their end, and striking a good balance between front-end logic and back-end processes seems to be a puzzle worth optimizing.
