Mike Eng User Experience Designer 401-234-4611
m@mike-eng.com
me on github

Digit Decoder Update #2

Apr 17, 2013

Part of an ongoing personal project. Here are all posts on the subject. Also, here’s the code at this stage and the working demo (which has been updated since this post).

Last time, I tried using an algorithm to guess the entire message in one fell swoop, which ended up generating a bunch of nonsense. So this time, I relied on the human to make smart decisions about which word to choose.

jQuery Approach

I am now leveraging the dictionary file to filter all possible letter combinations to only those that match words found in the dictionary and then add the words as options to a select element.

Initial Word Select

Upon making a selection, a few things happen. First, one function called removeDefault removes the placeholder text option from the select element. Then, another function called printWord inserts the selected word into place, character by character and wraps that word in a div to distinguish it as a word.

First word selected

If that doesn’t look right, the user can change the option in the select element. This clears the blue text that was there initially as well as the word wrapper around it and inserts the new word.

Changed option selected

Clicking the “next” button removes the current select element, creates a new select element after the current word, and loads the appropriate options into it. There is also a catch to throw an error if the user clicks “next” before making a selection.

Second Word

PHP Adjustments

I entered more of the initial message into the file message.txt. This is a lousy chore for humans. I realized I had to change some things in my PHP.

First off, I had to handle some characters that I wasn’t initially expecting. There are some punctuation marks in the message. At this point, there only seem to be exclamation points and question marks. Initially, the PHP script was built to parse a very rigidly organized file of digits separated by one comma and one space. I did a quick character replacement to replace the character “!” with “, !,” (and did the same thing for a question mark and a period, just for good measure). This then allowed the rest of the array creation and HTML output to run. The end result is a literal “!” on the page as a separate character with no letter options.

Also I wanted to make the data entry a bit less error-prone. As it was before, the script required each number to be separated by only by a comma and a single space. Linebreaks or additional spaces would break the script. Entering the message as a single line made it extremely difficult to check for accuracy when comparing with the text in the book. So by allowing linebreaks in the message, I could use one linebreak to indicate the end of a line in the book and two linebreaks to indicate the end of a page. To accommodate this, I basically just had to remove any linebreak characters from the text that the script then processes. Not too bad – this linear script is much easier than dealing with all the interaction on the front end.

Message - page 269 Message manually entered into the message.txt file

Takeaways and Next Steps

End point trying to decode the message

The exciting thing about getting the application to this stage was that in theory, I would be able to use it to decode more of the message. However, I was only able to decode to the point where the message read “My name is” – and then the only option that was a word in the dictionary was “el”. This got me no further than I had decoded manually before starting this project. Also, the character’s name (Thomas) doesn’t work here either. So I’m not sure what to try here. I’d have to move to another part of the message.

In entering the data, I found many repetitions of the sequence “7, 2, 2, 7, 7, 4, 2, 5, 5, 2” and somewhat fewer repetitions of “7, 2, 2, 7, 7, 4, 2, 5, 5, 2, 2, 2, 4, 5, 2”. Also, I found some instances of “5, 6, 8, 3?”, which looks like “love?”. This was encouraging. At least there are some words further down in the message, and it’s not all random.

A few immediate next steps:

  1. Allow the user to navigate to a previous word
  2. Allow the user to move around in a non-linear fashion – this is going to be challenging, but after using this, I am resigned to the fact that it’s necessary to enter some bits at various places that I know are words. Decoding this is going to be a bit like solving a crossword puzzle.
  3. Allow the user to manually enter some words that aren’t in the dictionary, like proper nouns and maybe slang and even some German

Reply