Verb Master - a React app for learning Spanish

May 11, 2017

verb-master-usage

Check out the Live Version

Backstory

I’ve found language apps a useful tool since I started learning Spanish last year. Nothing beats real life practice, but the convenience of apps and the ability to track your progress makes them pretty useful.

Duolingo & Memrise are a good introduction to Spanish, but they quickly become fairly inefficient. Both focus too much focus on remembering particular words/ phrases, without an explanation of the underlying rules of the language. Anki is also better than either DuoLingo or Memrise for learning vocab, but I’m yet to find a good app for learning Spanish grammar. A good text book is probably still the best option, but once you complete the exercises you either have to start the book again (boring) or buy another (expensive). Verb Master is designed to solve this by helping you practice spanish verb conjugations.

This project was also my final project for the fantastic CS50 from Harvard.

Initial Concept

The game needs to allow the user to select which people, tenses and (maybe) verbs they wanted to practice with. I started with a quick (and very basic!) wireframe in Google Sheets to get the basics of the game clear in my head:

Verb Master mockup

Version 1 - Vanilla JS

I got verb conjugation data for 600 verbs from Fred Jehle’s spanish verbs database. I wrote a node.js script to turn this data into a JSON object and store it a more efficient form (e.g. avoiding storing the infinitive for each conjugation).

I then built the version of the game display using vanilla JS. I wanted to improve my JavaScript and get some of the ‘business logic’ for the game clear before I started working with React.

It also helped show me what was good and bad about my initial plan. For example, this version had two game modes: ‘normal mode’ for practicing one tense before advancing to the next tense, and ‘multiple mode’ for practicing multiple tenses together. This was needlessly complex and a bit confusing for the user, so I scrapped it for the react version and went for one mode where you can practice whatever you want.

Verb Master version 1

The vanilla JS version of the game is still on live on github pages.

React Version

I wanted to use React Toolbox, a Material Design component library, but couldn’t get it working with React and Redux. After several hours of swearing at Webpack I caved and decided to use barbaravk’s react-redux-toolbox-starter as a boilerplate. As a bonus this came with PostCSS, which I’d wanted to try for a while.

Building the UI was suprisingly fast with the help of React Toolbox components. Although Material Design can make apps look a bit generic, it hugely reduces how much time you spend deciding how to lay things out and present information to the user. For example I use snackbars to tell the user what to do when they try and start a game without any tenses selected:

Verb Master snackbar

Small button under the game input allow the user to enter accented letters more easily, since these aren’t included on mobile/ computer keyboards. I also added keyboard shortcuts for these on desktop. This allows the user to input ‘á’ by pressing Shift and A, ‘é’ by pressing Shift and E, and so on.

I also added navigation keyboard controls, so that the Enter key starts the game / submits your answer, and the Escape key quits the game (progress is saved).

I added tooltips to guide the user through their first game: Verb Master tooltips

Game Logic

I wanted to allow users to play indefinitely, but not just have some sort of endless loop where you never get any sense of achievement. I decided that each round would have a set number of questions to answer, which at the moment is set to 15, but in the future I could let users customise this in the options menu.

If you get a question wrong, no progress is added to the progress bar, the correct answer is shown in a conjugation table and the verb-tense combination is stored. Before the end of the round this combination is shown again, but not necessarily accompanied by the same person. The reason for this is to try and ensure the user has learnt the wider conjugation rule, not just retained the answer in short term memory. This isn’t a perfect strategy, but I think it’s the best one for testing understanding whilst keeping the rounds short and engaging.

Verb Master incorrect

What’s next

  • More feedback when you get an answer right/ wrong.

  • The game is a bit of a black box at the moment, and it’s not clear that your wrong verb-tense combinations are re-shown to you before the end of the round.

  • I need to come up with a way to make this clearer. This could be done at the end of the round or in a…

  • Statistics tab/ menu, showing you your weak verb- tense combos, and letting you practice them together.

  • Audio

  • Choose what verbs you see - most common, reflexive, irregular etc.

You can try the app here or give me some feedback on twitter @clokehead.