website/japan/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 { addVocab, homework_menu } from '/scripts/japanese.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("Japanese 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 Japanese 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 Japanese or vice versa."));
main.append(addParagraph("Translating from Japanese to English should be relatively simple but there is no real easy way to learn the words in Japanese 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 Japanese to English verbs page will have the same words and translations on the English to Japanese verbs page so you can practice either translating the Japanese to English or the more challenging option which is to translate English to Japanese!"));

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: \"tomorrow\", meaning: \"ashita\" },"));

main.append(addSubHeader("Using AWK to generate the files"));
main.append(addParagraph("The first few vocabulary files I created were translating 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("ashita|tomorrow"));
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 \"ashita|tomorrow\" 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, for example, might be called verbs.html and will display verbs in Japanese for the user to translate to English.  There will also be another file where the user is expected to translate the English into Japanese and that is verbs1.html.  For that reason, you will see references in 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("ashita|tomorrow"));
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 ashita and the meaning will be tomorrow.  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 tomorrow is the word and ashita 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 Japanese 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 Japanese is translated into English and also the page where English is translated into Japanese which could save me an awful lot of time!"));

addSidebar("Japanese");