Vocabulary app with Claude

MLL: Claude Version 2.7 Sonnet

Task: Building a bare-bones vocabulary trainer.

Text prompt display.
Text input mask to type in the answer.
Simple check if right or wrong. (Later: Almost right)
Tracking mechanism to track which words have been asked before and answered correctly.
Sorting/prioritising mechanism to ask words that have never been answered correctly.
Possibility of alternative answers (i.e. synonyms for the same word).
Upload a csv and/or Google Sheets file with the input vocabulary.

Javascript or Python?

Roadmap

Recommendations from Claude.

1. Structured online review

Pick one comprehensive resource rather than jumping between multiple tutorials. MDN Web Docs or free Code Camp’s Javascript section are excellent options.

2. Focus on specific areas

DOM manipulation - How to select elements, modify content and handle events.
Form handling - Working with inputs, getting values and form submissions.
Arrays and objects - Storing and manipulating your vocabulary data.
String methods - For comparing user answers with correct answers.
localStorage - Saving progress between sessions

3. Practical exercises

Instead of theory-heavy learning

Build a simple form that validates input
Create a program that loads data from an array and display it
Practice comparing strings with different methods
Make something that saves and retrieves data from localStorage

4. Code along

With tutorials rather than just reading or watching them. The muscle memory helps tremendously.

5. Set a timeboxed goal

Iterations

1. Simple vocab trainer

Explanations

The code is written in HTML, CSS and JavaScript. The HTML provides the structure for the web page, the CSS (inside the <style>tags) handles all the visual styling and layout, and the Javascript (insdie the <script>tags) provides the functionality and interactivity.

It’s a fully client-side web application, which means it runs entirely in your web browser without needing a server. This is why it can use localStorage to save your vocabulary data right on your computer. You can save it as a single .html file and open it in any modern web broser, and it would work immediately without any additional setup or installation.

Reading CSV files

With src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.jswe import the PapaParse JavaScript library into the app. PapaParse is a powerful CSV (comma-separated values) parser that handles the processing of CSV files. In the app, it’s specifically used for the “Upload CSV File” functionality. When you upload a spreadsheet or CSV file with your vocabulary words, PapaParse does the heavy lifting of:

Reading the file
Parsing the CSV format
Converting it into a JavaScript data structure (an array of objects)

In the code it’s being used where the Papa.parse() function is called after a file is uploaded.

Almost correct algorithm

The “almost correct” algorithm in the app uses something called the Levenshtein distance to determine if your answer is close enough to the correct translation. Here’s how it works:

First, it calculates the Levenshtein distance between your answer and the correct answer. This distance represents the minimum number of single-character edits (insertions, deletions, or substitutions) required to change one word into another.
The app has this specific function to check if your answer is “close enough”. Default settings: Allow up to 30% of the word’s length to be different. Allow at least 2 characters to be different (for short words). This approach is nice because it adapts to the length of the word - longer words get a bit more tolerance for typos than shorter ones.

2. Improvement: add session timer

Timer functionality

In HTML, we code a timer button. In JS, we code the functionality of the timer. It takes the input from the timer (between 1 and 60 min), sets the session to “active”, converts duration to milliseconds, and calculates the end time by adding that duration to the current time (Date.now()returns the current time in milliseconds).
The timer display is then updated every second. The remaining time is compared to the current time, and the remainder (in mm:ss) is shown. Once the timer has run out, the endSession function is called. This stops the timer and calculates and displays the result statistics.

3. Improvement: allow for synonyms

What option is the best for being able to allow for input of synonyms for the same word? Putting them in different columns of the csv, or semi-colon separating them, or a different option altogether?

Option 1: Additional CSV columns

word,translation,synonym1,synonym2 hello,hola,saludos,qué tal

Pros:

Clear structure
Easy to parse
Fixed number of synonyms per word

Cons:

Limited to a predetermined number of synonym columns
Empty columns waste space
More complex CSV structure

Option 2: Semicolon-separated values

word,translation hello,"hola;saludos;qué tal"