You are browsing as a guest. Sign up (or log in) to start making projects!

Espanio

By @manayp

  • 4 Devlogs
  • 8 Total hours

Espanio is an interactive website which teaches Spanish via lessons, games, quizzes, flashcards and pronunciation. The topics covered include alphabet, numbers, colors, verbs, common phrases, vocabulary and more while the system tracks XP, level, streak and saved progress in the browser. There is also the use of text-to-speech so that you hear the right pronunciations. The activities include matching memories, hangman, word jumbles, quizzes and many more.

Source
Ship #1

@manayp on Espanio

Espanio is a website to learn Spanish in an enjoyable manner. This website features 11 fun Spanish learning games in one location such as Flash Cards, Vocabulary Test, Verb Conjugation Trainer, Survival Phrases, and five mini-games like Memory Match, Match the Pairs, Hangman, Word Scramble, and Numbers Listening Game. Additionally, there are sections of alphabets and colors with actual color samples. All Spanish words are read out loud using the speech function in the web browser (without AI assistance). Espanio keeps track of all your progress like XP, Level, Daily Streak, and Best Quiz Score, and this data is saved locally in your web browser. Moreover, there is an option to change the background of five different Spanish speaking countries (Spain, Mexico, Argentina, Colombia, Peru).

What was difficult

Making the text legible while the background images change - I figured out how to make translucent paper-like panels appear behind the header, content area and footer.
Developing the games using pure JavaScript without any other libraries - such as implementing the functionality for matching memory cards, controlling the hangman keyboard state and ensuring the shuffled word is not the same as the original one.
Creating a design that is fun yet retains its simplicity - a neo-brutalist handmade-style with thick outlines and harsh offsets done in the comic font.

Things I'm proud of

No third party libraries used, just plain HTML, CSS, and JS with no AI features involved.
The whole progress mechanism (Experience Points, Level System, Streaks) works, making it feel like an actual application.
It's practical – you could open it and start learning actual words and phrases right away.
How others can use it for testing

Just load index.html in any modern browser (the best browsers to test speech are Chrome, Edge, and Safari).
Press 🔊 buttons to hear pronunciation of words in Spanish language – make sure your volume is on.
Go through tabs in the top menu to navigate between 11 different activities; gaining experience points by answering questions.
The "Change Country" button on the right side changes the background image.
Progress is saved separately in each browser, to start from scratch press "Reset Progress" button on the Home page.

  • 4 devlogs
  • 8h
  • 11.54x multiplier
  • 94 Stardust
Try project → See source code →
Open comments for this post

@manayp on Espanio

1h 59m 27s logged

I finally finished all the games plus the css and everything works well, but there is minor css issues but I just fixed them before I posted this, which is good. All the games are ready and I even tested it and I feel like it will be easy to learn because I tried it and it is only for the basics. The readme is also fully completed ( I wrote a good amount ). I also researched a lot using ai like claude on translations and stuff and yeah I believe I created a basic foundational website…hope you guys like it!

0
0
5
Open comments for this post

@manayp on Espanio

3h 17m 9s logged

Currently I finished most of the css and I think I am around 45-55 percent done. I completed the home pages css and claude translated english to spanish for me and added the Spanish voice that google has built in. And these are the games I am choosing which are pretty good games in my opinion and are pretty fun especially in learning. The next thing to do is actually make the games and to be honest I started but there are sooo many bugs. AND THE BACKGROUNDS ARE CHANGEABLE if you press the green button in the corner which is pretty cool and it lowkey looks good especially the spain flag. Overall I am ready to finish all the games…wish me good luck.

0
0
3
Open comments for this post

@manayp on Espanio

1h 53m logged

I added the country pictures (around 5 countries) and I started coding the html. Overall I ran into a few errors but I fixed them. But the craziest error was I forgot to add a “;” which wasted a lot of time for me because I was keep figuring out what I did wrong and stuff. I also started some of the games like the matching game and a few other ones which I will talk about in the next devlog… I also started some of my css and readme even though its a bit early for it but its fine.

0
0
1
Open comments for this post

@manayp on Espanio

57m 41s logged

I am trying to make a spanish learning website with games and a bunch of other things and currently in this past hour I worked on the background and the foundation of this project and I had a idea to have 5 background which include 5 spanish countries that get controlled from the button below which you can change. Now I have to create all the games etc and more.

0
0
8

Delete project?

Are you sure you want to permanently delete this project? This action cannot be undone.

All devlogs, followers, and associated data will be removed.

Followers

Loading…