website/hungary/language/vocabulary/vocabulary.js

import { addBanner, addArticle, addTitle, addHeader, addParagraph, addSubHeader } from '/scripts/article.js';
import { addInset, addInsetList, addInsetCodeListing, addInsetBulletList } from '/scripts/inset.js';
import { addImageWithCaption, addButtonGroup } from '/scripts/visuals.js';
import { addSidebar} from '/scripts/sidebar.js'
import { addSyntax } from '/scripts/code.js';
import { menu } from '/scripts/web_dev_buttons.js';
import { global_menu, local_menu } from '/scripts/grid_layout1.js'

const heading = document.querySelector(".heading");
const global = document.querySelector(".global_menu");
const local = document.querySelector(".local_menu");
const sidebar = document.querySelector(".sidebar");
const main = document.querySelector(".main_content");

heading.append(addTitle("Hungarian Language"));
heading.append(addParagraph("Philip Osztromok"));

main.append(addHeader("VOCABULARY"));
main.append(addParagraph("This is essentially a very basic flashcard system which will display a word, phrase or sentence in either Hungarian or in English."));
main.append(addParagraph("When the user clicks on \"See Meaning\", a translation for the term will appear so the user can check whether they understood the word and can translate it from English to Hungarian or vice versa."));
main.append(addParagraph("Translating from Hungarian to English should be relatively simple but there is no real easy way to learn the words in Hungarian so rote learning is probably the best option!"));
main.append(addParagraph("The plan is that the pages will be in pairs so for example, the Hungarian to English verbs page will have the same words and translations on the English to Hungarian verbs page so you can practice either translating the Hungarian to English or the more challenging option which is to translate English to Hungarian!"));

main.append(addSubHeader("Creating the vocabulary files"));
main.append(addParagraph("At the moment, the HTML files are self contained and include an array with each element being a pair of key/value pairs that look something like this:"));
main.append(addInset("{ word: \"day\", meaning: \"nap\" },"));

main.append(addSubHeader("Using AWK to generate the files"));
main.append(addParagraph("The first few vocabulary files I created were translating Hungarian or Japanese to English and I had created a few pages before realising I could use the same files for the reverse translations.  Going forward, I will create a text file where the above example would be written as simply"));
main.append(addInset("nap|day"));
main.append(("I just need one text file for each page and I can then use the command"));
main.append(addInset("awk -F\"|\" '{ printf \"{ word: \"%s\", meaning: \"%s\" },\n\", $1, $2}' vocab.txt > verbs.txt"));
main.append(addParagraph("This will scan the text file and replace each line in the format \"nap|day\" with the line required for the database.  In this example, the output is going to a file called verbs1.txt - I have adopted a naming convention for the vocabulary pages where the verbs page,f or example, might be called verbs.html and will display verbs in Hungarian for the user to translate to English.  There will also be another file where the user is expected to translate the English into Hungarian and that is verbs1.html.  For that reason, you will see references on these examples to names in both formats and you can assume that translations from English is going to be in a file where the name (not the extension) ends with a l."));
main.append(addParagraph("The following command does exactly the same as the previous AWK command with one critical difference.  The arguments are switched round!  To illustrate this, let's say our text file includes the line"));
main.append(addInset("nap|day"));
main.append(addParagraph("The command that outputs $1 first will generate the line to be pasted into the HTML (in practice, this text will contain lots of lines rather than just 1) and the order will remain the same so the word will be nap and the meaning will be day.  We can also use the command shown below on the same file and the result will be the same except the word and meaning are switched and so now day is the word and nap is the meaning."));
main.append(addInset("awk -F\"|\" '{ printf \"{ word: \"%s\", meaning: \"%s\" },\n\", $2, $1}' vocab.txt > verbs1.txt"));
main.append(addParagraph("This is really handy because it means that I can create one file with each line having a Hungarian word followed by the pipe character and then the translation into English.  I can then use that file to created the 'database' (as I mentioned, this is built into the HTML file and is basically a fake or simulated database) for both the page where Hungarian is translated into English and also the page where English is translated into Hungarian which could save me an awful lot of time!"));

addSidebar("hungarian");