Duck Duck Goose

Our home page!
Children can select levels and stages. Completed stages are grayed out to show progress.
Here is a snippet of our game!
Completion popup when the stage is completed
Our game also includes additional scenes that match the storyline

Inspiration

Children of low socio-economic status (SES) generally have fewer dialogue interactions with parents than children of high SES. This causes infants of low SES to have a smaller vocabulary and difficulty producing complex sentence structures, understanding grammatical rules, and recognizing sounds.

The gap in literacy skills between low SES and high SES children only increases as children move on to higher grade levels. Using Duck Duck Goose, students can improve their reading and speaking skills early, ultimately increasing their chances for later academic success.

What it does

Duck Duck Goose is a fun, interactive game designed to improve literacy skills for children. Children practice their pronunciation by reading the words of Lily and Pogo’s story aloud. If the word read aloud is pronounced correctly, the character jumps onto the next platform. If children pronounce the word incorrectly, they can click a volume icon which plays the correct pronunciation. This allows children to hear the word and practice saying the word correctly.

There are four different levels, “Beginner,” “Intermediate,” “Advanced,” and “Expert,” which are different chapters of Lily and Pogo's story. Each level is composed of ten to twelve stages. Each stage includes one sentence ranging in number and difficulty of words. There are fifty-two sentences that make up Lily and Pogo's story.

When the child finishes reading the sentence, a pop-up window displays a number of stars based on how many times the child tried pronouncing the word before getting the correct. Children can retry levels in order to improve their pronunciation or move on to the next level if they are able to pronounce the words with ease. Once a stage is completed, the stage icon is darkened so children can see their progress through the levels.

How we built it

We developed the website with HTML, CSS, and JavaScript on a NodeJS server. We used Phaser.js to make the graphics for the game and used repl.it to collaborate online. Canva was used to create the avatars, backgrounds, and icons. We used the Web Speech API to generate pronunciations, and the SpeechRecognition interface of the Web Speech API to listen to the user and compare what they said to the word they’re supposed to say. To keep track of completed levels, localStorage was used.

In creating the storyline, we created a JSON file which stored the sentence used in each level as a list of "-" separated words. This JSON file dictated the length of each level and how many levels are in each difficulty category, allowing us to add levels and sentences easily and effectively.

Challenges we ran into

One of the main challenges we faced in completing the project was accessing the microphone. Initially, we planned to use Python for the voice recognition and do the processing in the backend. The issue with this approach was twofold: the process would have been painfully slow and very tedious to implement. Instead, we used the SpeechRecognition interface of Mozilla’s Web Speech API for Javascript, which only works in Google Chrome and Microsoft Edge. In giving up some compatibility flexibility, we were able to successfully port the voice recognition into the client Javascript.

Another problem we ran into was how to make sure the computer wouldn’t hear its own audio and make the player jump as if the user said it. We solved this by stopping the recorder as the audio was playing, and then restarting it once it was done.

Also, when implementing the sample audio, we tried using the Merriam-Webster Dictionary API. However, when making calls to this API, we realized that many of the words we requested could not be found by the API, and others would result in different forms of the word (i.e. "Pogo-stick" rather than the name "Pogo"). To solve this, we switched from the lookup api to the SpeechSynthesis interface of the Web Speech API, allowing us to synthesize sound for any word we need.

Accomplishments that we're proud of

We’re proud that we were able to make a working game. While the game is simple, this is the first fully-working game any of us have made in a hackathon. We’re also proud of the avatar’s ability to jump once a word is pronounced correctly.

Also, this is a first for all of us in using client-side audio processing. We are all very proud that we were able to correctly implement the Web Audio API in conjunction with Phaser.js, which was also a new framework for us. Getting localStorage and caching to work properly was also a major achievement for us, as in the past we had only ever used mongoDB databases to store user data.

What we learned

One of the biggest things we learned was Phaser. None of us were familiar with Phaser.js, and we were also mostly unfamiliar with making games in JavaScript. We had to learn how to create obstacles and how to make the avatar jump from block to block for the first time. Through Duck Duck Goose, we learned how to make games, and how to use Phaser.js, which is a very common and useful tool for making JS games.

The last couple projects our group has done used a database, so we decided to go with localStorage here. We learned how to use local storage, instead of users and accounts stored on a database, to save data. This was especially useful for this project, as it allows for the user to access the game and save their progress without going through the hassle of creating a user and password.

What's next for Duck Duck Goose?

Going forward, we hope to develop more story lines and levels. Currently, we only have one story, but we’re excited to add options for more stories with a greater variety of words and sentence structures. Since our game currently only works on Google Chrome, we also hope to make our game compatible with more browsers. Also, we could develop a settings tab, in which the user would be able to control the voice, pitch, volume, and speed of the sample pronunciations.

Note

If the microphone is automatically blocked, make sure Google Chrome has the microphone permissions set to always on

Built With

Submitted to

Epsilon Hacks
- Winner Google Cardboard

Created by

I worked with the Web Speech API, implementing the SpeechSynthesis and SpeechRecognition interfaces. As I typically work in either Python or Java on the backend, JavaScript was new to me, but I had a great time working with the API. I also helped Ashley with the UI/UX, editing together our video pitch.

Kevin Gauld
I designed the game background, the additional scenes for storyline, and the icons. I generated sentences for Pogo and Lily's story. I also helped develop the game and implement the spoken pronunciations when the volume icon is pressed.

Christina W
I worked a lot on the javascript. I wrote the code to load in the JSON file, load the cards for each level, and load the levels themselves. I also wrote much of the code for the game itself, including the logic behind the movements in Phaser and the pronunciation comparisons. I also helped to write some HTML and CSS.

Ethan Horowitz
Ashley Fong