Jen Wachter

Web Developer

Hopkins Huddle

The 2023 message of thanks sent to faculty, staff, students, and alumni of Johns Hopkins University.

Concept: A series of 6 Wordle-esque puzzles whose answers come together to help craft a message of thanks from the president of the university. As each puzzle is completed, a part of the message is revealed. Once all puzzles are completed, the user is presented with the entire message.

This application was custom-built using React and tested using JavaScript Testing Library and Jest. There are two parts to the application: the stand-alone word puzzle and the multi-page game application.

Puzzle

The puzzle application consists of the word puzzle and a feedback mechanism for when the user either completes the puzzle or fails to complete the puzzle. A user’s progress through an individual puzzle is stored in their browser’s local storage, allowing the user to leave the puzzle and return to it later without worrying about losing data.

When a user completes a puzzle, the onPuzzleComplete callback (passed through the puzzle’s initialization properties) is called. In this case, this callback originates in the game application.

See the code: GitHub johnshopkins/hopkins-hurdle

Game

The game application defines the structure of the game and guides the user through the experience. Starting on the homepage, the user is invited to begin the game. If the user decides to play, they are directed to the first puzzle in the set. With the completion of each puzzle, a new piece of the message is revealed. When all puzzles are complete, the user is sent to a page with the full message from the university president, tying all the puzzle answers together.

In addition to guiding the user through the game, the game app also:

  • Keeps track of a user’s progress through the 6 puzzles using the browser’s local storage.
  • Reports various user interactions and milestones to Google Analytics to provide an in-depth understanding of user engagement.
  • Ensures a user completes all puzzles in order, without skipping ahead. If a user attempts to access a puzzle out of order, they are redirected to the correct puzzle.
  • Adds navigation between completed puzzles.

See the code: GitHub johnshopkins/hopkins-huddle