Incorrectly typed, takes it back to beginning. Note that we have taken out few features compared to initial idea.
Initial idea
Easy Korean words
final design of our TypeTutor

TypeTutor

Inspiration & Background

I happened to notice my friends who are learning Korean struggling to type in Korean. For users who only have one type of language on the keyboard, for example, English only, they do not know where Korean characters are located as it is not shown on the English keyboard.

For them to type in Korean, they have to use trial and error, pressing every single key to make a word or so.

And we know there is an app to learn languages, but not how to type! Thus, our project begins :)

More information is found in our Google Docs, TypeTutor Draft

What it does

On the screen, it will show words to type. Underneath the words, it will have 'letters to type' to make the words.

When the user types in the correct letter, the 'letters to type' will turn green. Otherwise, it will reset to the beginning.

As it is a demo, we will be learning how to type in Korean, with English keyboard layout. We have come up with words that are "commonly known" and easy to type.

How we built it

We first designed the website on our iPad to gather ideas.

First, we tried to make a virtual keyboard with react. As Korean and English keyboards are both located in the qwerty layout, we were able to match the keys (eg. A -> ㅁ, S -> ㄴ). We implemented for both languages to appear on a key, and then created a keyboard layout.

We created a box which contains word and the 'letters to type' to create the word. For demo 1, we have a virtual keyboard appearing on the screen. 'key to press' lights up in green. When the input is read, we check if it matches the 'letters to type'. If it doesn't, 'what to type' lights in red. For demo 2, virtual keyboard does not exist, for advanced users. When the user makes multiple mistakes, then the keyboard will appear. As the user progresses to type correctly, the keyboard disappears again.

Challenges we ran into

Initially, we were going to come up with sentences, accuracy, levels which decides the transparency of the keyboards. However, as none of us are competently familiar in HTML or CSS, it was taking longer time than we expected which we took it out.

We were supposed to do the backend but gave up because we couldn't figure out how sessions worked with Flask and React to create logins and signups, so we ended up just doing the frontend.

Learning front-end in two days was challenging, but we made keyboard appear on the screen, and for it to highlight when being pressed. It also shows what we have typed.

Accomplishments that we're proud of

Creating a virtual keyboard on a website itself was pretty challenging. It appears in the centre, letters are correctly detected & highlighted when pressed and most importantly, we are proud to implement our ideas into actual reality. This is our very first hackathon project and we have never done front-end before.

What we learned

Our experience in front-end development for TypeTutor was a challenging using HTML and CSS. We learned the intricacies of building a visually appealing and functional interface, particularly in creating a virtual keyboard and integrating it seamlessly with the website. This experience has equipped us with foundational skills and a newfound appreciation for web development, setting the stage for future growth in this domain.

What's next for TypeTutor

We want to further take our project as to implement hardness level, typing sentences and characters, creating user login system and storing their progression.