Cain's Jawbone

Six murders. One hundred pages. Millions of possible combinations… but only one is correct. Can you solve Torquemada’s murder mystery that only 3 puzzlers managed to beat? Fret not, this app can help!

Comment

Inspiration

In December 2021, I was introduced to Cain's Jawbone book by one of my close friends after it went viral on TikTok for being the most difficult literacy mystery puzzle in the world (only solved by only a few people over eight decades) and brilliantly disguised as a novel.

While my friend preferred to use the hard copy version, I personally prefer to do my investigation and reading on my electronic devices. This posed a lot of struggle for me because I would need to rely on many online tools from multiple websites. Therefore, I decided to build a web app with customised functions that I think avid puzzlers or casual attempter like me would need to have a great time solving the puzzle online.

What it does

Cain's Jawbone consists of 100 jumbled-up pages comprising 6 different murders. As such, I implemented the following basic features:

  • Compare 2 pages side-by-side to see if the stories are linked together

  • Note down the reordered pages

Also, the puzzle is originally meant for Oxbridge-educated men living in London in 1934 and it included references to past historical events or people. Not only that, English words that are popular around that time might not be commonly used right now. Therefore, we need to support the following features:

  • Tips for beginners starting out this puzzle

  • Note-taking feature (add, remove, reset)

  • Deep-linking within the PDF for easy reference

  • Search functions within the PDF to look for content or character overlap

To allow their current progress to be saved and reused whenever they want without the need for account creation and management (because I find it unnecessary), I also added the following features:

  • Export and import annotations (in JSON)

  • Export and import page ordering (in JSON)

How we built it

Using React and frameworks such as react-pdf, react-pdf-highlighter, pdfjs and etc...

Challenges we ran into

  1. A lot of pdf frameworks I used lack proper documentation which makes it difficult to understand the error messages
  2. Converting a half-completed project from JS to TS to merge a working sample example in TS is difficult and buggy
  3. URL-hashing and deep-linking did not work as expected and took a long time to debug because the coding logic is complicated
  4. PDF does not render properly as many pdf hosting websites do not enable CORS and it is not possible to use the already uploaded pdf file in assets to PdfLoader from react-pdf-highlighter only takes in URL
  5. Not a lot of pdf frameworks I tried support rearranging the pages
  6. Due to the time limit and coding fatigue, I did not get to figure out how to save the pdf with the annotations using pdfjs and support pdf viewer that renders with page reordering.
  7. Unable to successfully deploy on gcloud due to errors in the node modules (stemming from the packages used)

Accomplishments that we're proud of

  1. I finished most of the features I came out with within 24 hours
  2. People find my project idea interesting
  3. The frontend looks good

What we learned

  • PDF-related frameworks since I spent most of my time during the hackathon trying to get them to work...
  • More experimentation with React and some react drag-and-drop frameworks
  • ChatGPT is useful for debugging (but not always successful, unfortunately)

What's next for Cain's Jawbone

  • The ability to save PDFs with annotations and new page ordering
  • Deploying the website so others can use this web app as a tool

Built With

Share this project:

Updates