improve (#405)

* Update README.zh-tw.md

* Update README.zh-tw.md

* Update README.zh-tw.md

* Update README.zh-tw.md

* Update README.de.md

* Update README.es.md

* Update README.zh-cn.md

* Update README.hi.md

* Update README.hi.md

* Update README.id.md

* Update README.it.md

* Update README.it.md

* Update README.ja.md

* Update README.ko.md

* Update assignment.ko.md

* Update README.ko.md

* Update README.ko.md

* Update README.ms.md

* Update README.pt.md

* Update README.de.md

* Update README.md

* Update README.de.md

2-js-basics/4-arrays-loops/README.md

@@ -21,11 +21,15 @@ Working with data is a common task for any language, and it's a much easier task
 
 The syntax for an array is a pair of square brackets.
 
-`let myArray = [];`
+```javascript
+let myArray = [];
+```
 
 This is an empty array, but arrays can be declared already populated with data. Multiple values in an array are separated by a comma.
 
-`let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];`
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+```
 
 The array values are assigned a unique value called the **index**, a whole number that is assigned based on its distance from the beginning of the array. In the example above, the string value "Chocolate" has an index of 0, and the index of "Rocky Road" is 4. Use the index with square brackets to retrieve, change, or insert array values.
 

2-js-basics/4-arrays-loops/translations/README.de.md

@@ -17,11 +17,15 @@ Das Arbeiten mit Daten ist eine häufige Aufgabe für jede Sprache und eine viel
 
 Die Syntax für ein Array besteht aus zwei eckigen Klammern.
 
-`let myArray = [];`
+```javascript
+let myArray = [];
+```
 
 Dies ist ein leeres Array, aber Arrays können als bereits mit Daten gefüllt deklariert werden. Mehrere Werte in einem Array werden durch ein Komma getrennt.
 
-`let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];`
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+```
 
 Den Array-Werten wird ein eindeutiger Wert zugewiesen, der als **Index** bezeichnet wird. Diese ganze Zahl wird basierend auf dem Abstand vom Anfang des Arrays zugewiesen. Im obigen Beispiel hat der Zeichenfolgenwert "Chocolate" den Index 0 und der Index "Rocky Road" den Wert 4. Verwenden Sie den Index in eckigen Klammern, um Array-Werte abzurufen, zu ändern oder einzufügen.
 

2-js-basics/4-arrays-loops/translations/README.es.md

@@ -20,11 +20,15 @@ Trabajar con datos es una tarea común para cualquier lenguaje y es una tarea mu
 
 La sintaxis de una matriz es un par de corchetes.
 
-`let myArray = [];`
+```javascript
+let myArray = [];
+```
 
 Esta es una matriz vacía, pero las matrices se pueden declarar ya pobladas con datos. Varios valores en una matriz están separados por una coma.
 
-`let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];`
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+```
 
 A los valores de la matriz se les asigna un valor único llamado **índice**, un número entero que se asigna en función de su distancia desde el principio de la matriz. En el ejemplo anterior, el valor de cadena "Chocolate" tiene un índice de 0 y el índice de "Rocky Road" es 4. Utilice el índice entre corchetes para recuperar, cambiar o insertar valores de matriz.
 

2-js-basics/4-arrays-loops/translations/README.hi.md

@@ -20,11 +20,15 @@
 
 एक एरे के लिए सिंटेक्स वर्ग कोष्ठक की एक जोड़ी है।
 
-`let myArray = [];`
+```javascript
+let myArray = [];
+```
 
 यह एक खाली एरे है, लेकिन एरेस को पहले से ही डेटा के साथ आबाद घोषित किया जा सकता है। एक एरे में एकाधिक मान अल्पविराम द्वारा अलग किए गए हैं।
 
-`let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];`
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+```
 
 एरे मानों को एक अद्वितीय मान दिया जाता है जिसे **सूचकांक** कहा जाता है, एक पूरी संख्या जो कि एरे की शुरुआत से इसकी दूरी के आधार पर निर्दिष्ट की जाती है। ऊपर के उदाहरण में, स्ट्रिंग मूल्य "चॉकलेट" में 0 का सूचकांक है, और "रॉकी ​​रोड" का सूचकांक है। 4. एरे मानों को पुनः प्राप्त करने, बदलने या सम्मिलित करने के लिए वर्ग कोष्ठक के साथ सूचकांक का उपयोग करें।
 

2-js-basics/4-arrays-loops/translations/README.id.md

@@ -23,11 +23,15 @@ Bekerja dengan data adalah tugas umum untuk bahasa apa pun, dan ini jauh lebih m
 
 Sintaks untuk array adalah sepasang tanda kurung siku.
 
-`let arrayKu = [];`
+```javascript
+let arrayKu = [];
+```
 
 Ini adalah array kosong, tetapi array dapat dideklarasikan sudah diisi dengan data. Beberapa nilai dalam array dipisahkan dengan koma.
 
-`let rasaRasaEsKrim = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];`
+```javascript
+let rasaRasaEsKrim = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+```
 
 Nilai array diberi nilai unik yang disebut **indeks**, bilangan bulat yang ditetapkan berdasarkan jaraknya dari awal array. Dalam contoh di atas, nilai string "Chocolate" memiliki indeks 0, dan indeks "Rocky Road" adalah 4. Gunakan indeks dengan tanda kurung siku untuk mengambil, mengubah, atau menyisipkan nilai array.
 

2-js-basics/4-arrays-loops/translations/README.it.md

@@ -22,11 +22,15 @@ Lavorare con i dati è un'attività comune per qualsiasi linguaggio ed è un'att
 
 La sintassi per un array è una coppia di parentesi quadre.
 
-`let myArray = [];`
+```javascript
+let myArray = [];
+```
 
 Questo è un array vuoto, ma gli array possono essere dichiarati già popolati con i dati. Più valori in un array sono separati da una virgola.
 
-`let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];`
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+```
 
 Ai valori dell'array viene assegnato un valore univoco chiamato **indice**, un numero intero che viene assegnato a un elemento in base alla sua distanza dall'inizio dell'array. Nell'esempio precedente, il valore di stringa "Chocolate" ha un indice di 0 e l'indice di "Rocky Road" è 4. Si utilizza l'indice all'interno di parentesi quadre per recuperare, modificare o inserire valori di matrice.
 

2-js-basics/4-arrays-loops/translations/README.ja.md

@@ -21,11 +21,15 @@
 
 配列の構文は角括弧のペアです。
 
-`let myArray = [];`
+```javascript
+let myArray = [];
+```
 
 これは空の配列ですが、配列はすでにデータを埋めた状態で宣言することができます。配列内の複数の値はカンマで区切られます。
 
-`let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];`
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+```
 
 配列の値には、**インデックス** と呼ばれる一意の値が割り当てられ、配列の先頭からの距離に基づいて整数が割り当てられます。上の例では、文字列の値 "Chocolate" のインデックスは 0 で、"Rocky Road" のインデックスは 4 です。 配列の値を取得、変更、挿入するには、角括弧付きのインデックスを使用します。
 

2-js-basics/4-arrays-loops/translations/README.ko.md

@@ -21,11 +21,15 @@
 
 배열 구문은 대괄호 쌍으로 이루어져 있습니다.
 
-`let myArray = [];`
+```javascript
+let myArray = [];
+```
 
 빈 배열이지만, 이미 데이터가 채워진 배열로 선언할 수 있습니다. 배열에 들어있는 여러가지 값들은 쉼표로 구분합니다.
 
-`let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];`
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+```
 
 배열 값에는 **index**라는 고유 값이 할당됩니다. 이 값은 배열 시작부터 측정한 길이를 기준으로 할당되는 정수입니다. 예시에서, 문자열 값 "Chocolate"의 인덱스는 0이고, "Rocky Road"의 인덱스는 4입니다. 배열 값을 검색하고, 변경하거나 넣으려면 대괄호가 있는 인덱스를 사용합니다.
 
@@ -124,4 +128,4 @@ JavaScript의 배열에는 많은 메서드를 가져서 데이터 조작에 매
 
 ## 과제
 
-[Loop an Array](../assignment.md)
+[배열 순회하기](./assignment.ko.md)

2-js-basics/4-arrays-loops/translations/README.ms.md

@@ -20,11 +20,15 @@ Bekerja dengan data adalah tugas biasa untuk bahasa apa pun, dan ini adalah tuga
 
 Sintaks untuk array adalah sepasang tanda kurung persegi.
 
-`let myArray = [];`
+```javascript
+let myArray = [];
+```
 
 Ini adalah array kosong, tetapi tatasusunan dapat dinyatakan sudah diisi dengan data. Pelbagai nilai dalam array dipisahkan dengan koma.
 
-`let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];`
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+```
 
 Nilai array diberikan nilai unik yang disebut **indeks**, nombor bulat yang diberikan berdasarkan jaraknya dari awal array. Dalam contoh di atas, nilai rentetan "Chocolate" mempunyai indeks 0, dan indeks "Rocky Road" adalah 4. Gunakan indeks dengan tanda kurung persegi untuk mengambil, mengubah, atau memasukkan nilai array.
 

2-js-basics/4-arrays-loops/translations/README.pt.md

@@ -20,11 +20,15 @@ Trabalhar com dados é uma tarefa comum para qualquer língua, e é uma tarefa m
 
 A sintaxe de uma matriz é um par de parênteses rectos.
 
-`let myArray = [];`
+```javscript
+let myArray = [];
+```
 
 Esta é uma matriz vazia, mas as matrizes podem ser declaradas já povoadas com dados. Os valores múltiplos numa matriz são separados por uma vírgula.
 
-`let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];`
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+```
 
 Aos valores da matriz é atribuído um valor único chamado **índice**, um número inteiro que é atribuído com base na sua distância desde o início da matriz. No exemplo acima, o valor da string "Chocolate" tem um índice de 0, e o índice de "Rocky Road" é 4. Use o índice com parênteses rectos para recuperar, alterar, ou inserir valores da array.
 

2-js-basics/4-arrays-loops/translations/README.zh-cn.md

@@ -21,11 +21,15 @@
 
 数组的语法需要一对方括号。
 
-`let myArray = [];`
+```javascript
+let myArray = [];
+```
 
 这是一个空数组，但数组其实可以在声明时就存入一些数据。数组中的多项数据用逗号分隔。
 
-`let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];`
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+```
 
 数组中的值会被指定一个唯一的值，称为 **索引（index）**，它是一个整数，表示对应值在数组中的位置与数组开头的距离。在上方的例子中，字符串值 `"Chocolate"` 的索引就是 0，而 `"Rocky Road"` 的索引是 4。可以用索引加上方括号来获取、改变或者插入数组值。
 

2-js-basics/4-arrays-loops/translations/README.zh-tw.md

@@ -13,7 +13,7 @@
 
 > 點擊以上的圖片來觀賞關於矩陣與迴圈的影片。
 
-## 矩陣(Arrays)
+## 矩陣（Arrays）
 
 處理資料是任何程式語言中最常見的任務，如果能將程式碼有條理地編排成如矩陣的形式，處理任務來會更加輕鬆。矩陣的資料儲存格式就像串列，其中一項好處是矩陣可以儲存不同的資料型態資料。
 
@@ -21,13 +21,17 @@
 
 矩陣的語法需要用到中括號。
 
-`let myArray = [];`
+```javascript
+let myArray = [];
+```
 
 上述為一個空矩陣，矩陣也能在宣告時設定內容資料，資料會以逗號來做區隔。
 
-`let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];`
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+```
 
-矩陣數值位置會以**索引(index)**來決定，標記從矩陣的開頭相隔多少元素。在上述例子中，字串 "Chocolate" 的索引為 0，"Rocky Road" 為 4。以中括號帶入索引來接收、修改或加入特定元素數值。
+矩陣數值位置會以 **索引（index）** 來決定，標記從矩陣的開頭相隔多少元素。在上述例子中，字串 "Chocolate" 的索引為 0，"Rocky Road" 為 4。以中括號帶入索引來接收、修改或加入特定元素數值。
 
 ✅ 索引從 0 開始有超出你的預料之外嗎？在部分程式語言中，索引會從 1 開始。這有一段有趣的歷史，你可以[閱讀維基百科](https://zh.wikipedia.org/wiki/%E5%BE%9E%E9%9B%B6%E9%96%8B%E5%A7%8B%E7%9A%84%E7%B7%A8%E8%99%9F)來了解它。
 
@@ -59,16 +63,16 @@ iceCreamFlavors.length; //5
 
 ✅ 自己動手試試看！使用瀏覽器命令欄，自由地建立並操控矩陣。
 
-## 迴圈(Loops)
+## 迴圈（Loops）
 
-迴圈幫助你處理重複性與**迭代(iterative)**任務，這可以省下許多程式碼行數與時間。每一次迭代可以有不同的變數、數值或條件。在 JavaScript 中有許多種迴圈的樣式，彼此都有些微的差異，但主要功能都一樣：對資料做迴圈。
+迴圈幫助你處理重複性與 **迭代（iterative）** 任務，這可以省下許多程式碼行數與時間。每一次迭代可以有不同的變數、數值或條件。在 JavaScript 中有許多種迴圈的樣式，彼此都有些微的差異，但主要功能都一樣：對資料做迴圈。
 
-### For 迴圈(For Loop)
+### For 迴圈（For Loop）
 
 `for` 迴圈有三個條件：
-    - `計數器(counter)` 一個初始化變數決定目前迭代的次數。
-    - `條件式(condition)` 一個以比較運算子表示的陳述式，當結果為 `true` 時終止迴圈。
-    - `迭代陳述式(iteration-expression)` 在每一次迭代完後，改變計數器的數值。
+    - `計數器（counter）` 一個初始化變數決定目前迭代的次數。
+    - `條件式（condition）` 一個以比較運算子表示的陳述式，當結果為 `true` 時終止迴圈。
+    - `迭代陳述式（iteration-expression）` 在每一次迭代完後，改變計數器的數值。
   
 ```javascript
 // 從 0 加到 10
@@ -79,7 +83,7 @@ iceCreamFlavors.length; //5
 
 ✅ 在瀏覽器命令欄中運行這段迴圈。在改變計數器、條件式與迭代陳述式後有什麼改變？你能讓它變成從 10 減到 0 嗎？
 
-### While 迴圈(While Loop)
+### While 迴圈（While Loop）
 
 不同於 `for` 迴圈語法，`while` 迴圈只要求一個條件式，當條件式回傳 `true` 時即終止迴圈。迴圈中的條件是通常需要依賴像計數器的變數，這些變數必須被合理的處理。計數器的起始化需要在迴圈外面，之後的條件陳述式與計數器的變化則需要在迴圈當中。
 
@@ -115,6 +119,7 @@ for (let i = 0; i < iceCreamFlavors.length; i++) {
 除了 for 迴圈與 while 迴圈外，仍有許多使用矩陣與迴圈的方法：[forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)、[for-of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of) 與 [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)。用上列其中一種語法改寫你的迴圈。
 
 ## 課後測驗
+
 [課後測驗](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/14?loc=zh_tw)
 
 ## 複習與自學

2-js-basics/4-arrays-loops/translations/assignment.ko.md

@@ -10,4 +10,4 @@
 
 기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안
 --- | --- | --- | ---
- | 프로그램이 올바르게 동작하며 설명하는 주석이 있는 경우 | 프로그램을 설명하는 주석이 없는 경우 | 프로그램이 불완전하거나 버그가 있는 경우
+| | 프로그램이 올바르게 동작하며 설명하는 주석이 있는 경우 | 프로그램을 설명하는 주석이 없는 경우 | 프로그램이 불완전하거나 버그가 있는 경우

4-typing-game/typing-game/translations/README.zh-tw.md

@@ -8,13 +8,13 @@
 
 當我們建立專為瀏覽器設計的應用程式時，我們會提供 Graphical User Interface (GUI) 給用戶使用，在我們建立的格式上進行互動。最常見的互動方式是透過點擊或輸入在多樣的物件。開發者面臨的問題是，我們不了解用戶會何時對這些物件產生互動！
 
-[事件驅動程式設計](https://zh.wikipedia.org/zh-tw/%E4%BA%8B%E4%BB%B6%E9%A9%85%E5%8B%95%E7%A8%8B%E5%BC%8F%E8%A8%AD%E8%A8%88)是一種程式設計的方式，以建立我們的 GUI。若拆解該名詞的話，我們知道主軸關鍵會是**事件(Event)**。根據 Merriam-Webster，[事件](https://www.merriam-webster.com/dictionary/event)according定義為「將發生的事」。它能有效地解決我們面臨的問題。我們知道當用戶產生互動時，什麼程式必須回應其要求，只差在我們不知道用戶會何時產生互動。
+[事件驅動程式設計](https://zh.wikipedia.org/zh-tw/%E4%BA%8B%E4%BB%B6%E9%A9%85%E5%8B%95%E7%A8%8B%E5%BC%8F%E8%A8%AD%E8%A8%88)是一種程式設計的方式，以建立我們的 GUI。若拆解該名詞的話，我們知道主軸關鍵會是**事件（Event）**。根據 Merriam-Webster，[事件](https://www.merriam-webster.com/dictionary/event)定義為「將發生的事」。它能有效地解決我們面臨的問題。我們知道當用戶產生互動時，什麼程式必須回應其要求，只差在我們不知道用戶會何時產生互動。
 
 藉由建立新的函式，我們可以標記這段將被運行的程式碼。我們回顧一下[程序式程式設計](https://zh.wikipedia.org/wiki/%E8%BF%87%E7%A8%8B%E5%BC%8F%E7%BC%96%E7%A8%8B)，函式會依照順序一行一行的被運行。這同樣也會被實踐在事件驅動程式設計上，差別在於**如何**去呼叫這些函式。
 
-要處理這些事件：點擊按鈕、輸入字串等等，我們需註冊**事件監聽者(Event Listeners)**。事件監聽者是函式之一，負責回應當事件觸發時，提供相對應的回應。事件監聽者可以根據用戶的行為，更新使用者介面，呼叫伺服器，或是任何你想要它做的事。我們利用[addEventListener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)新增事件監聽者，提供要被運行的函式。
+要處理這些事件：點擊按鈕、輸入字串等等，我們需註冊**事件監聽者（Event Listeners）**。事件監聽者是函式之一，負責回應當事件觸發時，提供相對應的回應。事件監聽者可以根據用戶的行為，更新使用者介面，呼叫伺服器，或是任何你想要它做的事。我們利用 [addEventListener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) 新增事件監聽者，提供要被運行的函式。
 
-> **注意** 值得注意我們有許多建立事件監聽者的方式。你可以使用匿名函式(anonymous functions)，或是有名字的；你可以使用多種的快捷，好比直接設定 `click` 屬性，或使用 `addEventListener`。在我們練習過程中，主要專注在 `addEventLister` 與匿名函式上，它們可能是開發者最常見的網頁開發技巧。同時，也是彈性最高的： `addEventListener` 作用在任何事件，任何以參數方式輸入的事件名稱。
+> **注意** 值得注意我們有許多建立事件監聽者的方式。你可以使用匿名函式（anonymous functions），或是有名字的；你可以使用多種的快捷，好比直接設定 `click` 屬性，或使用 `addEventListener`。在我們練習過程中，主要專注在 `addEventLister` 與匿名函式上，它們可能是開發者最常見的網頁開發技巧。同時，也是彈性最高的： `addEventListener` 作用在任何事件，任何以參數方式輸入的事件名稱。
 
 ### 常見事件
 
@@ -313,7 +313,7 @@ typedValueElement.addEventListener('input', () => {
 
 點擊按鈕 **start**，馬上開始輸入單字！你可以看看這預覽動畫。
 
-![遊戲中的動畫](../../4-typing-game/images/demo.gif)
+![遊戲中的動畫](../../images/demo.gif)
 
 ---