DictAction

Corrected version with red for wrong words

Inspiration

From our own experiences that we faced in high school and primary.

What it does

It is a dictation tool where users can choose to submit a text to practice their dictation or choose a stored dictation available on the website for different levels of proficiency. The tool will then read the text at the pace chosen by the user and they can choose to either type it on the website or write it by hand on a paper. In the case that the user types it on the website, the tool will correct and grade the user's answer. Otherwise, the user can see the dictated text and correct his answer manually.

How we built it

For the frontend, we used HTML and CSS. For the backend, we used Python, Javascript and Flask. During the design part, we used Figma for prototyping and Canva for the design of the logo.

Challenges we ran into

The hardest part of our project was linking the front-end and back-end together. Some of us already knew HTML/CSS while others knew Python, however none of us had experience working with Flask. We were able to overcome this obstacle thanks to the help of our mentors and the workshops given on the subject. The text-to-speech feature of our program was also tricky to implement because it was difficult to find TTS libraries that would meet our needs. We started with gTTS, pyaudio, pydub , which were able to read text in three different speeds, but this only worked in our local computers and not on the web browser. So with the recommendation of a mentor, we discovered a Javascript equivalent that successfully accomplished the task.

Accomplishments that we're proud of

As our first web dev project, we wanted to aim for a project that could stand out in creativity while still being feasible considering the time frame and our programming background. We were proud of our implementation of the text-to-speech feature as well as the dynamic Figma prototype we made as a model. We were also able to succesfully utilize the microframework Flask without any prior knowledge in a short amount of time.

What we learned

Website development (how to use Figma) Flask Text to speech The process of creating a website project

What's next for DictAction

There are many improvements, such as a better speech voice. There are only limited amount of dictations available, to address this issue it would be better to incorporate an AI that can generate new dictations tailored to the level of the user. Another improvement is to offer an option for teachers to be able to create a virtual classroom so that students can easily access dictations that the teachers post in the classroom as practice. Moreover, we can include many more languages in the future!