Project Demo

Below is a walkthrough of the completed web app and it's key components, both on the front-end and back-end.

Library Page

The library is the main landing page of the site and features a search tool that allows any user to perform search queries on the NAU audio corpus, as well as specify the context size around the resulting word.

Here is an example of the results page after a search is completed. As you can see each instance of the word is listed, as well as the context surrounding the word on both sides. Users are also able to listen to the word in the given context, or open it in the dictionary or pronunciation games using the buttons below it.

Next let's move to the Login and Sign Up pages by clicking on these buttons in the top right corner.

The user will be presented with one of these two pages depending on which button they clicked. They can either create a new account to use with the website, or login to an existing one. All login information is safely encrypted on the back-end so that user data is kept secure.

If a user has an account then they will have access to their user profile page. Let's go there by clicking on profile in this dropdrown menu.

The profile page is where users can view all of their progression statistics, scoreboards, and daily challenges.

Also on the profile page are the definitions that the user has created in the dictionary game, as well as their personal ratings for their practiced words from the pronunciation game, both of which we will be covering next.

To get to the games we can open the Navigation drop down and click on "Practice".

We are presented with a selection of three different games to practice.Let's start with the context game.

There are two ways to play the context game. The first is to try to select the word that best fits a randomly chosen sentence from the library out of four different options. The second is to do the inverse, and try to guess which sentence the selected word best fits in.

Here is an example of what the word selection version looks like.

Moving on to the dictionary game, users are presented with a randomly selected word from the database and given a bit of its surrounding context. Using these clues the user must try to write a definition for the word. These definitions can be edited and improved upon later as users get more experience with different words. These definitions are easily accessible from the profile page that was shown earlier.

Finally we come to the pronunciation game. Again, the user is presented with a word and its context, as well as the audio of the words pronunciation. The goal here is to record yourself pronouncing the word and compare your version to the provided audio, then rate yourself on how well you think that you did. These scores are accessible from the profile page.

The Admin page is only accessible by users with sufficient permissions. It is a toolkit for easily making changes to the site and database, as well as managing user accounts and groups.