Self Exam

Home Page
Hearing Test Page
Bottom of Color Test Page after a Bug Scarred It. Now sizing and positioning is off.
Technologies Used
State Machine of Initial Hearing Test

Inspiration

50% of color blind people don't even know that they are color blind. To us, this stat is mind-blowing. Half of this community doesn't even know they are in it. Exploring this idea, we thought that it would be beneficial to create an easy-access colorblindness test, in order to ignite self-awareness for users. We figured that we could expand to auditory tests as well, and the idea of having multiple tests snowballed from there.

Purpose

Self Exam offers users an easy and user-friendly experience to test their color blindness and/or hearing. After taking a test, you will be met with an analysis of your performance.

Technologies used

Tech

Problem-Solving

Below is a representation of how the Hearing Test tracks the results of the user. There are 2 outputs, a and count, where a is if the audio is on or off (mimics value of p), and count increments every time the user correctly clicks when sound is on. There are 3 inputs, p (1 if audio is allowed to play, else 0), s (1 if audio has sound, 0 if not), and c (1 if user left-clicks, 0 if not). The state machine handles cases so that only the number of times the user correctly hears a sound (and clicks) is recorded. Mutual exclusion is also enforced to give us the exact outputs we desire. Hearing-State-Machine

Challenges we ran into

We are both relatively beginners in web development (5 months experience and 3 days experience), we ran into sizing and positioning challenges. This is seen in the color test, which was sized perfectly at one point, but in the chaos of merge conflicts, it's perfection was ruined. Due to the time constraint, we were unable to implement the state machine for the Hearing Test, so we had to resort to a YouTube video. This also prevented us from reaching the visual test.

Accomplishments that we're proud of

For one of us, this weekend was their first time coding. To build a website looking like this is very empowering for a beginner.
We are very proud to have come up with an idea that adheres very closely to the accessibility theme. This is a branch of programming that we are new to exploring, and we are proud of how much our knowledge has expanded on this subject.

What we learned

One of us learned the essentials of HTML and CSS in addition to GitHub. The other sharpened their skills in HTML, CSS, and JavaScript while learning about the basics of jQuery. Aside from programming, our knowledge of colorblindness and hearing impairments grew very much. We explored treatments/preventions for hearing loss (which was intended to accompany the results page), and hearing loss trends as summarized in the graph below: The last frontier our knowledge grew on was that for the colorblind circle tests (called Ishihara Plates), there's a website that will generate them for you! This was much better than the alternative: copying all the Ishihara Plates from Google Images. This website has other great visual tools, and it's definitely one we will strongly consider using in future projects.

What's next for Self Exam

We were very ambitious entering this hackathon with Self Exam. We definitely bit off more than we can chew in 48 hours, but there is more we would like to expand upon with Self Exam.

Product Recommendations: In addition to receiving your results, you will also receive a list of a few recommended products based on the result analysis.
Firebase Compatibility: We think it would be brilliant for users to have their stats saved every time they log in, rather than having to take the tests over again! In addition, products that are recommended to them will also be saved.
More Tests: We didn't get the chance to flesh out the vision test, but in addition to this, we would like to think of more tests that can benefit a large population.