The current pandemic spotlighted a major issue: lack of technological understanding among the elderly. While staying socially distant has been lonely for all of us, they can be even bigger issues. Unlike the technologically savvy, the technologically challenged often cannot adequately use their personal devices to stay connected. Even more troublesome is the fact that most covid vaccine appointments are scheduled online. Many high risk individuals do not understand how to register themselves for an appointment. Also, they often cannot effectively use video chat to get help doing so. We wanted to create a "how-to" project to help the technologically challenged learn how to use technology. For our initial protype, we centered around basic functions of a smartphone. However, the overarching purpose demands that this curriculum can expand into other medium.

What it does

Our website features gamification elements paired with traditional educational methods to teach the elderly how to use their smart phone. We started with the ever-simple quiz function. The questions attempt to move in a very detailed, chronological order to guide the user every step of the way from A-Z. We cover hardware, software, password security, browsing functions, camera, and posting to social media.

How we built it

This project mostly uses Javascript, HTML, and CSS. We used photoshop and figma to create the images.


The Javascript controls the functional aspects of the application. This includes navigation, button clicks, and displaying questions. We create a quiz container that can flip through slides (questions). This quiz container determines when to show which buttons, which question and answers to display, as well as grades the user responses. This code also contains the questions for each module.


Figma is a collaborative graphics editing and prototyping tool. We used this primarily for the interaction designs as well as general page layouts. We used built in plugins from Figma to help us translate the design to HTML and CSS to incorporate in our project.

Challenges we ran into

Most of the challenges we had dealt with not having the skills to implement the functionality we origianally intended. For example, instead of just asking a question and taking user answer, we wish we could have included other forms of questions. These would have been including images in the questions, creating matching questions, and further Gameifying this learning application. Since it was our first time programming in these languages, we weren't able to bring our vision to reality completely. Also, because of our limited programming experience in these languages, our code is not very effective. We have code that is not optimal and copied and pasted multiple times. We also planned on incorporating a story to fulfill the gamification element. We envisioned a character that could guide our user through a digital learning adventure.

Accomplishments that we're proud of

We're very proud that we finished our product! Of course, we wanted to develop more questions and modules. However, we are very proud that we were able to complete so much development. Additionally, no one in our group has ever attended a Hackathon before. We are proud that we felt comfortable enough not only to sign up, but to finish a product. We are proud that we were able to make time in our busy schedules for this experience. Our team is incredibly proud of our elaborbate designs and our creative idea. Given more time and development, we truly feel this could make a difference!

Also, we came from different academic disciplines with very different skills. We were proud of how our well our differences fit together for this specific project. This allowed us to contribute substantially to different parts of the project.

Finally, we are extremely proud of how well we worked together. Since we worked virtually, we were nervous. However, we feel as though we worked efficiently and cooperaitively. Any criticisms were taken well and only improved our productivity. We feel as though we could absolutely continue this project as a team, or work on a new one. Overall, our team simply fit perfectly together.

What we learned

AnnaMaria's Takeaways: Through this project, I learned coding basics. I had zero coding experience before this Hackathon. My undergraduate degrees include English and Integrated Language Arts Education and I am currently pursing a Juris Doctorate. I became interested in coding as my school exposed me to the world of cybersecurity. While I understood some basic computer concepts, I struggled to understand exactly how anything actually functioned. Through this project, I learned about the process from idea to finished product. I also learned how code is used. I am excited to learn more about different coding languages to complete my own projects, now that I understand how to use them.

Natalie's Takeaways: While my educational background exposed me to the computer science and tech community, this is my first Hackathon. I came into this experience intending to complete a project and have fun. Not only did I do that, but I learned some valueable programming skills with Javascript, CSS, and HTML. Before this event, I never had to write code in Javascript or HTML this extensively. I also feel more confident attending future Hackathons.

Rachel's Takeaways: I've recently decided to make a career shift from Banking to UX/UI Design, and this is my first experience with it. Though I have always been interested in coding and design, I have never had an opportunity like this to test my skills. I intended to gain some experience and complete a project, but I was also able to get a headstart on using some UX programs that I know will be helpful for my future career moves. I learned a lot about the project process from the first idea brainstorming to the finalization of the finished website. I'm so grateful that I'm able to also walk away with some knowledge in Figma, which I will be using in an upcoming UX Design Certification.

What's next for DigiTutor

Improving Our Curriculum : While our quiz provides some education, we need to include more prelimiary information. Our ideas for providing more information include showing a tutorial before the quiz. Furthermore, we wanted to include actual pictures of the icons or buttons that we wanted our users to press. This should help the user understand their device better.

Including More Gamification and Storytelling : We want our product to be fun! We created a character named "Bit" that can 'level up' as a user completes different modules. Bit is featured on our site, but we ran out of time to build his adventure. Our original idea included creating a character that could complete modules in an overarching story or adventure. While we ran out of time to complete this piece, we believe it would be an asset to our project.

Adding Accessibility Modules : As we know, many of our elderly struggle with hearing or visual impairments. Fortunately, many devices now include many tools to help navigate despite these issues. We would like to include a module to help users learn how to toggle these functions, then how to use them.

Optimizing Code : We would like to remove the redundancies throughout the code and make it more optimal. This would include creating a single Javascript file, CSS file, and HTML file since the changes form file to file are small.


Pop-up button inspiration: https://www.w3schools.com/howto/howto_js_popup.asp

Quiz inspiration: https://www.sitepoint.com/simple-javascript-quiz/

Built With

Share this project: