A Brief History of Hangman
Hangman is a classic word-guessing game that dates back to at least the Victorian era. Traditionally played with pencil and paper, one player thinks of a word and the other tries to guess it by suggesting letters, with each incorrect guess bringing the stick-figure "hangman" closer to his doom. The game is simple, suspenseful, and a fun way to build vocabulary and logic skills. In the digital age, Hangman has become a favorite beginner project for programmers learning about user interaction, logic, and now—AI!
Stage 1: Classic Hangman
The original and 'tweaked' foundational versions using the Fantastic Four! Play the classic game (without graphics), see the code, and follow the earliest steps of our coding journey.
Featuring...
Play 'Improved' Stage 1Stage 2: Enhanced & Documented
Additional documentation and experimental quiz development on HTML basics. Introduces our 'S.P.A.R.K' development protocol! Game play basically the same. Added interpage navigation and an index page for the Hangman Saga.
Featuring...
Play Stage 2Stage 3: Professional Touches and Improved Game Play
This stage introduces a professional favicon, improved documentation, and enhanced game play features. Explore the chatlog to see our design decisions and security best practices as we continue our Hangman coding adventure!
Featuring...
- Stage3 Chat Log
- Favicon incorporation
- "Loading, please wait..." message
- Thematic hint, word length and additional thematic words in the word bank
- Strategic Google Font usage
- User-provided theme(s) and word(s)
Stage 4: Getting the Hang of it!
In Stage 4, we focused on refining the user experience and deepening our understanding of interactive web development. This stage introduced dynamic visual feedback, improved UI structure with Bootstrap 5, and a more robust dialog between developer and AI. We also emphasized clear documentation and educational commentary, making the project a stronger teaching tool for both coding and collaboration with AI.
Featuring:
- Dynamic hangman image updates as the game progresses
- Immediate visual feedback for win/loss states (e.g., background color changes)
- Refactored layout using Bootstrap 5 grid for clarity and responsiveness
- Enhanced documentation and in-line commentary for teaching purposes
- A more conversational, educational AI dialog (Stage 4 Chatlog)
- Added a feature to 'quick-solve' the puzzle with a popup modal
- Improved Use Your Words interface and improved the localStorage nomenclature
Stage 5: Integration of TNT's 'Look & Feel'
In Stage 5, our goal was to improve the game's design and incorporate it into the 'TNT ecosystem' Most of this work was done with good-old-fashion coding. (We did utilize a template from TNT.)
We did ask Copilot on iPhone for some 'cool' taglines and it did not disappoint.
Other than that, we did not use Copilot in this stage (other than some inline help for centering a figure element with CSS)! Believe it or not!
Copilot's tagline suggestions:
- 'Guess wisely...or face the gallows!'
- 'Hang in there -- literally'
- 'Letter by letter, escape the noose!'
- 'Solve the puzzle, save your dignity!'
- 'Wordplay with a twist -- don't get strung along!'
- 'The stages are high...and so is the rope!'
- 'Can you dodge the drop? Play to find out!'
You can see which one we picked!
Featuring:
- TNT navigation
- 'Jumbotron' incorporation
- Slight game layout reorganization
Stage 6: Extended theme integration
In Stage 6, our goal was to allow a user to choose from a variety of word themes.
Featuring:
- Stage 6 Chatlog
- Theme and New Theme pages
- localStorage for user and current data
We even had Microsoft Copilot create some nifty artwork we used in our chatlog:
