Flashcards app is an easy way to learn English vocabulary. Insert data what you need to the database, print the table and learn your new vocabulary. Finally, exercise it by using flashcards.
On the start screen select the user (database), category (table) and mode. Then press "Start" button.
Mainpage.
App can be used in two different modes:
Learn mode allows user to look inside created table in database. User can learn vocabulary by the classic method - reading words in polish language and their translation in english. Table can be easy converted into .pdf file or printed by clicking button below the table.
Learn page.
Table ready to be printed.
Flashcards mode is the main feature of this app. On the purple card is displayed a random word in polish language. User has to translate it and result is presented by the red card (wrong answer) or the green card (correct answer). After giving an incorrect answer user has to try again until the correct answer is given.
Card to be filled by user.
Correct-answer card
Uncorrect-answer card
App also collects the data about efficiency and learning time in current session and shows everything in real time below the card section.
It's not possible to make changes in the database using Javascript, so the database files can be edited by a free tool "DB Browser for SQLite" (https://sqlitebrowser.org). Inside the file can be created multpile tables. It's recommended to sort vocabulary by category.
Database look in "DB Browser for SQLite"
Inside each table should be six columns with names "eng1, eng2, eng3, pol1, pol2, pol3". There are 3 possible meanings of the same word in both languages. An example is shown in the photo below.
Database table contents.
Remember also to add your database name to the "user" section in index.html and enter the table name inside script.js file.
<div class="select1-container">
<label for="select-database">Select user:</label>
<select class="select-database">
<option value="arthur.sqlite">Arthur</option>
<option value="william.sqlite">William</option>
</select>
</div>const displayUserTables = (user) => {
switch (user) {
case "arthur.sqlite":
selectTable.innerHTML = `
<option value="food">food</option>
<option value="school">school</option>
<option value="travelling">travelling</option>
`;
break;
case "william.sqlite":
selectTable.innerHTML = `
<option value="colors">colors</option>
<option value="months">months</option>
`;
break;
default:
console.error(`Problem with displayUserTables().`);
break;
}
};https://flashcards-app-public.vercel.app/- Just open the link above, in section "Live preview".
- Download all files
- Open index.html using a web server