Wordle+

A web-based word-guessing game to help increase vocabulary, outfitted with a hint button and a display of the word's definition after playing a round.

Comment

Inspiration

Our inspiration for this project comes from the popular game Wordle, which is an addictive web-based game where you have 6 attempts to guess a 5-letter word given confirmation if each letter exists in the word and if it is in the correct position after each guess. We saw potential to make improvements upon the basic Wordle game to make it more educational, helping the user learn English words and their meanings. We felt this would be particularly applicable to students learning English as a second language as well as younger students.

What it does

Each time the page is refreshed, a random 5-letter word is stored as the word to be guessed. Then, the user is able to input guesses by typing on the virtual keyboard. Following each guess, the letter tiles will flip and change color, giving the user valuable information:

  1. If the letter in the user's guess is not in the word, the tile will flip and turn grey.
  2. If the letter is in the word but in the wrong position, the tile will flip and turn yellow.
  3. If the letter is in the word and in the correct position, the tile will flip and turn green.

The corresponding letters on the keyboard will also change color accordingly.

Wordle+ adds a useful hint button, which reveals an associated word to the user, as well as displays the definition of the intended word after a round of the game is played. Various definitions are provided for the word if applicable in addition to the part(s) of speech in order to provide the most complete information.

How we built it

We built the site using HTML, CSS, and JavaScript, with JavaScript constituting a large majority of the project's code. We also used two APIs from rapidapi.com, Random Words and Word Dictionary. The Random Word API is used to generate the word to be guessed while the Word Dictionary API is used to check if the entry is a valid word, retrieve associated word for hint, and acquire definition.

Challenges we ran into

The main challenge we ran into was integrating and working with the API's as none of our team members had much prior experience working with them. We also had to prioritize function over form in order to comply with the time constraints of the hackathon.

Accomplishments that we're proud of

We are very proud of what we accomplished in this project, going in with limited web development experience. We constructed a functional Wordle variant with two new features catered towards educating the user. The team learned a great deal and was inspired by the idea and establishment of Wordle+.

What we learned

Through the creation of this project, we learned how to find API's, how to install packages, how to use localhost to get API response, and how to work with JSON file format. It was an extremely valuable process in which we communicated and collaborated with each other to fabricate the game.

What's next for Wordle+

In the future, we hope to host the site on a personal domain and accept keyboard input for entering the guesses rather than just selecting the letters with a cursor to make for a more smooth, enjoyable experience. We would also like to implement the choice to play with a different length of word (e.g. 6-letter word instead of the normal 5-letter word) to further promote an expanding vocabulary.

Built With

Share this project:

Updates