1 of 22

Senior Project Final Presentation - Fall 2023

Auditory Training App

Team Members: Danny Pascual, Samuel Perez, Norberto Merani

Product Owner: Dr. Alliete Alfano

Professor: Masoud Sadjadi

FLORIDA INTERNATIONAL UNIVERSITY

2 of 22

Problem Description

  • The Auditory Training App is a web-based application designed specifically for adults who are dealing with hearing loss and are either using hearing aids or have cochlear implants.

  • The main aim of this app is to enhance auditory abilities through a variety of interactive games and listening tasks that are both engaging and enjoyable.

  • When individuals begin using hearing aids or cochlear implants, adapting to their new hearing capabilities can be challenging, especially during the early stages, which is often marked by speech recognition difficulties. To facilitate this transition, our app provides multiple ways to train their hearing abilities.

COLLEGE OF ENGINEERING AND COMPUTING

FLORIDA INTERNATIONAL UNIVERSITY

3 of 22

Problem Management

  • The "Auditory Training App" address the previously stated problem, by addressing the shortcomings observed in existing applications available in the market.

  • Many of the current apps lack the essential variety needed for effective auditory training. "Auditory Training App" sets itself apart by offering a wide array of engaging games and drill activities, ranging from simple sound detection exercises to intricate tasks involving sound differentiation and complex word recognition.

  • In essence, "Auditory Training App" serves as a comprehensive and tailored solution to the challenges faced by individuals using hearing aid devices and cochlear implants. It aims to provide a holistic and adaptable approach to auditory enhancement.

COLLEGE OF ENGINEERING AND COMPUTING

FLORIDA INTERNATIONAL UNIVERSITY

4 of 22

Our Main Focus

This semester was focused on:

  • Adding more Content to the App

• Adding new drill activities

• Creating and adding games

  • Record and add more audios to the database
  • Adding a Voice selector Feature
  • Fixed known bugs in the code
  • Minor UI Improvements

COLLEGE OF ENGINEERING AND COMPUTING

FLORIDA INTERNATIONAL UNIVERSITY

5 of 22

User Stories

Game Activities Page:

  • Create Game Page Activity Selection page
  • Create Matching Game Page
  • Create Matching Game Levels
  • Create Word Search Game Page
  • Create Word Search Game Levels
  • Add new Icons and sounds to the games
  • Update the UI with proper functionality and game names

Detection Activity Page

  • Add a new level with more ling sounds plus randomized silence.
  • Revise the logic to improve the timing and frequency of silent sound intervals.
  • Create a voice selector feature
  • Add an animated sidebar for the voice selector
  • Add 8 different voices to the voice selector. 4 female voices and 4 male
  • Added preview buttons for each voice
  • Modify the UI to reflect the new changes

Discrimination Activity Page

  • Fix bugs where sounds would not properly play
  • Add a new level with more complex sounds
  • Add a logic to restart the game after new voice is selected
  • Include the voice selector feature in the UI
  • Added 8 different voices to the voice selector. 4 female voices and 4 male
  • Modify the UI to reflect the new changes

Database

  • Record multiple voice from different people
  • Edited long files to single audio samples
  • Uploaded new voice files to the database
  • Organize database folder structure

COLLEGE OF ENGINEERING AND COMPUTING

FLORIDA INTERNATIONAL UNIVERSITY

6 of 22

Technologies Used

Google Firebase: Used for real-time hosting and where the database for the sound clips was located.

Visual Studio Code: IDE where all the coding was done in and all the new changes were tested.

React: The framework used for the front-end development of the website itself.

Git/Github: Repo used to push and merge changes made to the project and collaborate with each other.

JavaScript: Programming language we used to create dynamic content for our application.

NodeJS: Programming environment that we used to build our application.

COLLEGE OF ENGINEERING AND COMPUTING

FLORIDA INTERNATIONAL UNIVERSITY

7 of 22

Object Design Diagram

COLLEGE OF ENGINEERING AND COMPUTING

FLORIDA INTERNATIONAL UNIVERSITY

8 of 22

System Design Architecture

COLLEGE OF ENGINEERING AND COMPUTING

FLORIDA INTERNATIONAL UNIVERSITY

9 of 22

Use Case Diagram

COLLEGE OF ENGINEERING AND COMPUTING

FLORIDA INTERNATIONAL UNIVERSITY

10 of 22

Detection Activities Page

UI has been updated to reflect more accurate information about the game. New game icon added to the UI

COLLEGE OF ENGINEERING AND COMPUTING

FLORIDA INTERNATIONAL UNIVERSITY

11 of 22

Detection Activities Levels

A Voice Selector Button has been added to the UI to trigger the left Side Bar. Bug where the sound would not play has been fixed

COLLEGE OF ENGINEERING AND COMPUTING

FLORIDA INTERNATIONAL UNIVERSITY

12 of 22

Detection Activities Levels (Continued)

The voice Selector side bar is animated from the left when the button is clicked. The user can click on the Sound icon to hear a preview of the voice. The user can select a button to change to a new voice

COLLEGE OF ENGINEERING AND COMPUTING

FLORIDA INTERNATIONAL UNIVERSITY

13 of 22

Detection Activities Levels (Continued)

The reset logic has been added, when clicking on a new voice, it will warn the user

that this will restart the level. After clicking okay the level will begin again

COLLEGE OF ENGINEERING AND COMPUTING

FLORIDA INTERNATIONAL UNIVERSITY

14 of 22

Discrimination Activities Page

The work on this page and subpages was very similar to the Detection Activities. The audio in the page was not properly being played. The voice selector side bar was added. The logic for preview and reset voices was added. Finally, more audio files were edited and added to the database to be used in this page

COLLEGE OF ENGINEERING AND COMPUTING

FLORIDA INTERNATIONAL UNIVERSITY

15 of 22

Game Activities Page

UI has been updated to reflect the newly added features. Which are under the categories of Discrimination and Identification.

COLLEGE OF ENGINEERING AND COMPUTING

FLORIDA INTERNATIONAL UNIVERSITY

16 of 22

Game Activity Matching Page

UI has been updated to reflect the multiple levels of the matching game. Additionally, a new game icon was added to the UI

COLLEGE OF ENGINEERING AND COMPUTING

FLORIDA INTERNATIONAL UNIVERSITY

17 of 22

Game Activity Matching Levels

The UI of each game level has been updated to reflect the difficulty of each level where if the level increases so does the difficulty. Starting from six tiles all the way to twenty-four tiles.

COLLEGE OF ENGINEERING AND COMPUTING

FLORIDA INTERNATIONAL UNIVERSITY

18 of 22

Game Activity Word Search Page

UI has been updated to reflect the multiple levels of the word search game where there are two levels that are fully operational. Additionally, a new game icon was added to the UI

COLLEGE OF ENGINEERING AND COMPUTING

FLORIDA INTERNATIONAL UNIVERSITY

19 of 22

Game Activity Word Search Levels

The UI of the two game levels have been updated so that both levels start with ten two-syllable words within a twenty by twenty word search puzzle.

COLLEGE OF ENGINEERING AND COMPUTING

FLORIDA INTERNATIONAL UNIVERSITY

20 of 22

Shortcomings

  • The team counting with only 3 members proved to be a challenge.
  • Due to the time constraints the blog or social media feature was left for future teams to work on.
  • The files in the database were a little bit hard to find.
  • It took time to record and edit the audio files. That time could have been for development.
  • Recording voices for kids was not possible, but it is a feature that will be added in the future.

COLLEGE OF ENGINEERING AND COMPUTING

FLORIDA INTERNATIONAL UNIVERSITY

21 of 22

Wishlist

  • Future Teams will focus on adding more content to the page.
  • Graphic are need to be added to the games, to make them more interesting
  • Due to the focus in other user stories, we could not implement an ambient noise feature.
  • Adding identification games with words.
  • A dark theme and more improvements to the ui, like making the the webpage responsive.

COLLEGE OF ENGINEERING AND COMPUTING

FLORIDA INTERNATIONAL UNIVERSITY

22 of 22

Summary

  • The Auditory Training App gave us the opportunity and flexibility to learn more about the framework, build upon existing features, and creating new features to help aid hearing loss patients in their rehabilitation. The product owner allowed us to use our creativity and expertise to better improve the product design, functionality, and our communication skills. Each of our team members was able to contribute their ideas, designs, and solutions to the application.

  • Contact:
  • Danny Pascual – dpasc014@fiu.edu
  • Samuel Perez – spere408@fiu.edu
  • Norberto Merani – nmera003@fiu.edu

  • Thank you for taking a look at our hard work! We hope to see the application continue in its excellent and promising development!

COLLEGE OF ENGINEERING AND COMPUTING