diff --git a/1-getting-started-lessons/2-github-basics/README.md b/1-getting-started-lessons/2-github-basics/README.md
index 5eb022cf..8a5e480a 100644
--- a/1-getting-started-lessons/2-github-basics/README.md
+++ b/1-getting-started-lessons/2-github-basics/README.md
@@ -63,7 +63,7 @@ Let's say you have a folder locally with some code project and you want to start
    git init
    ```
 
-1. **Check status**. To check the status if your repository type:
+1. **Check status**. To check the status of your repository type:
 
    ```bash
    git status
diff --git a/2-js-basics/1-data-types/translations/README.it.md b/2-js-basics/1-data-types/translations/README.it.md
index 176fab15..ec185a54 100644
--- a/2-js-basics/1-data-types/translations/README.it.md
+++ b/2-js-basics/1-data-types/translations/README.it.md
@@ -4,7 +4,7 @@
 > Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac)
 
 ## Quiz pre-lezione
-[Quiz pre-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/7)
+[Quiz pre-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/7?loc=it)
 
 Questa lezione copre le basi di JavaScript, il linguaggio che fornisce l'interattività sul web.
 
@@ -116,13 +116,13 @@ Le variabili possono memorizzare tutti i tipi di numero, inclusi decimali o nume
 
 Esistono diversi tipi di operatori da utilizzare quando si eseguono funzioni aritmetiche e alcuni sono elencati qui:
 
-| Simbolo | Descrizione | Esempio |
-| ------ | ------------------------------------------------------------------------ | -------------------------------- |
-| `+` | **Addizione**: calcola la somma di due numeri | `1 + 2 // la risposta attesa è 3` |
-| `-` | **Sottrazione**: calcola la differenza tra due numeri | `1-2 // la risposta attesa è -1` |
-| `*` | **Moltiplicazione**: calcola il prodotto di due numeri | `1 * 2 // la risposta attesa è 2` |
-| `/` | **Divisione**: calcola il quoziente di due numeri | `1/2 // la risposta attesa è 0,5` |
-| `%` | **Resto**: calcola il resto dalla divisione di due numeri | `1 % 2 // la risposta attesa è 1` |
+| Simbolo | Descrizione                                               | Esempio                           |
+| ------- | --------------------------------------------------------- | --------------------------------- |
+| `+`     | **Addizione**: calcola la somma di due numeri             | `1 + 2 // la risposta attesa è 3` |
+| `-`     | **Sottrazione**: calcola la differenza tra due numeri     | `1-2 // la risposta attesa è -1`  |
+| `*`     | **Moltiplicazione**: calcola il prodotto di due numeri    | `1 * 2 // la risposta attesa è 2` |
+| `/`     | **Divisione**: calcola il quoziente di due numeri         | `1/2 // la risposta attesa è 0,5` |
+| `%`     | **Resto**: calcola il resto dalla divisione di due numeri | `1 % 2 // la risposta attesa è 1` |
 
 ✅ Proviamolo! Provare un'operazione aritmetica nella console del proprio browser. I risultati sorprendono?
 
@@ -184,7 +184,7 @@ I  booleani possono avere solo due valori: vero (`true`) o falso (`false`). I bo
 JavaScript è noto per i suoi modi sorprendenti di gestire talvolta i tipi di dato. Effettuare un po' di ricerca su questi "trabocchetti". Ad esempio: la distinzione tra maiuscole e minuscole può mordere! Provare questo nella propria console: `let age = 1; let Age = 2; age == Age` (risulta `false` - perché?). Quali altri trabocchetti si riescono a trovare?
 
 ## quiz post-lezione
-[Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/8)
+[Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/8?loc=it)
 
 ## Revisione e auto apprendimento
 
diff --git a/2-js-basics/2-functions-methods/translations/README.it.md b/2-js-basics/2-functions-methods/translations/README.it.md
index fd7eb8cb..2718bb8d 100644
--- a/2-js-basics/2-functions-methods/translations/README.it.md
+++ b/2-js-basics/2-functions-methods/translations/README.it.md
@@ -5,7 +5,7 @@
 
 ## Quiz pre-lezione
 
-[Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/9)
+[Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/9?loc=it)
 
 Quando si pensa di scrivere codice, ci si vuole sempre assicurare che il proprio codice sia leggibile. Anche se questo sembra controintuitivo, il codice viene letto molte più volte di quanto non venga scritto. Uno strumento base nella cassetta degli attrezzi dello sviluppatore è la **funzione**
 
@@ -184,7 +184,7 @@ Si riesce ad articolare in una frase la differenza tra funzioni e metodi? Fare u
 
 ## Quiz post-lezione
 
-[Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/10)
+[Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/10?loc=it)
 
 ## Revisione e auto apprendimento
 
diff --git a/2-js-basics/3-making-decisions/translations/README.it.md b/2-js-basics/3-making-decisions/translations/README.it.md
index e1100713..3170511a 100644
--- a/2-js-basics/3-making-decisions/translations/README.it.md
+++ b/2-js-basics/3-making-decisions/translations/README.it.md
@@ -162,7 +162,7 @@ Creare un programma che viene scritto prima con operatori logici, quindi riscriv
 
 ---
 ## Quiz Post-Lezione
-[Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/12?loc=12)
+[Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/12?loc=it)
 
 ## Revisione e Auto Apprendimento
 
diff --git a/2-js-basics/3-making-decisions/translations/README.ko.md b/2-js-basics/3-making-decisions/translations/README.ko.md
index 716a7e0d..32774b54 100644
--- a/2-js-basics/3-making-decisions/translations/README.ko.md
+++ b/2-js-basics/3-making-decisions/translations/README.ko.md
@@ -4,7 +4,7 @@
 > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
 
 ## 강의 전 퀴즈
-[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/11&loc=ko)
+[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/11?loc=ko)
 
 결정을 내리고 코드가 실행되는 순서를 제어하면 코드를 재사용하며 강력하게 만들 수 있습니다. 이 강의에서는 JavaScript에서 데이터 흐름을 제어하기 위한 구문과 논리 자료형 데이터 타입을 함께 사용하는 중요성을 다룹니다.
 
diff --git a/2-js-basics/4-arrays-loops/README.md b/2-js-basics/4-arrays-loops/README.md
index 0c307ffd..9c0b5b7e 100644
--- a/2-js-basics/4-arrays-loops/README.md
+++ b/2-js-basics/4-arrays-loops/README.md
@@ -113,7 +113,7 @@ for (let i = 0; i < iceCreamFlavors.length; i++) {
 There are other ways of looping over arrays other than for and while loops. There are [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), and [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Rewrite your array loop using one of these techniques.
 
 ## Post-Lecture Quiz
-[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/14)
+[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/14)
 
 
 ## Review & Self Study
diff --git a/2-js-basics/4-arrays-loops/translations/README.it.md b/2-js-basics/4-arrays-loops/translations/README.it.md
index 21014a8e..1a02a71e 100644
--- a/2-js-basics/4-arrays-loops/translations/README.it.md
+++ b/2-js-basics/4-arrays-loops/translations/README.it.md
@@ -113,7 +113,7 @@ for (let i = 0; i < iceCreamFlavors.length; i++) {
 Esistono altri modi per eseguire un ciclo sugli array. diversi dai cicli for e while. Ci sono [forEach](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Statements/for...of) e [map](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Riscrivere il ciclo sull'array usando una di queste tecniche.
 
 ## Quiz Post-Lezione
-[Quiz Post-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/14?loc=14)
+[Quiz Post-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/14?loc=it)
 
 
 ## Revisione e Auto Apprendimento
diff --git a/2-js-basics/4-arrays-loops/translations/README.ko.md b/2-js-basics/4-arrays-loops/translations/README.ko.md
index 3024f762..e48f9b7b 100644
--- a/2-js-basics/4-arrays-loops/translations/README.ko.md
+++ b/2-js-basics/4-arrays-loops/translations/README.ko.md
@@ -4,7 +4,7 @@
 > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
 
 ## 강의 전 퀴즈
-[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/13&loc=ko)
+[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/13?loc=ko)
 
 이 강의에서는 웹에서 상호 작용을 제공하는 언어인 JavaScript의 기본 사항을 다룹니다. 데이터를 컨트롤하는 데 사용하는 배열과 반복문에 대해 알아 봅니다.
 
@@ -112,7 +112,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)도 있습니다. 해당 기술 중 하나를 사용하여 배열 반복을 다시 작성하십시오.
 
 ## 강의 후 퀴즈
-[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/14&loc=ko)
+[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/14?loc=ko)
 
 
 ## 리뷰 & 자기주도 학습
diff --git a/2-js-basics/translations/README.de.md b/2-js-basics/translations/README.de.md
index 780512e0..09f65fa6 100644
--- a/2-js-basics/translations/README.de.md
+++ b/2-js-basics/translations/README.de.md
@@ -4,10 +4,10 @@ JavaScript ist die Sprache des Webs. In diesen vier Lektionen lernen Sie die Gru
 
 ### Themen
 
-1. [Variablen und Datentypen](1-Datentypen/README.md)
-2. [Funktionen und Methoden](2-functions-methods/README.md)
-3. [Entscheidungen mit JavaScript treffen](3-making-decisions/README.md)
-4. [Arrays und Loops](4-arrays-loops/README.md)
+1. [Variablen und Datentypen](../1-data-types/translations/README.de.md)
+2. [Funktionen und Methoden](../2-functions-methods/translations/README.de.md)
+3. [Entscheidungen mit JavaScript treffen](../3-making-decisions/translations/README.de.md)
+4. [Arrays und Loops](../4-arrays-loops/translations/README.de.md)
 
 ### Credits
 
diff --git a/2-js-basics/translations/README.es.md b/2-js-basics/translations/README.es.md
index bd17b271..6153dc04 100644
--- a/2-js-basics/translations/README.es.md
+++ b/2-js-basics/translations/README.es.md
@@ -4,10 +4,10 @@ JavaScript es el lenguaje de la web. En estas cuatro lecciones, aprenderá sus c
 
 ### Temas
 
-1. [Variables y tipos de datos](data-types/README.md)
-2. [Funciones y métodos](variables-datatypes/README.md)
-3. [Toma de decisiones con JavaScript](making-decisions/README.md)
-4. [Arrays and Loops](arrays-loops/README.md)
+1. [Variables y tipos de datos](../1-data-types/translations/README.es.md)
+2. [Funciones y métodos](../2-functions-methods/translations/README.es.md)
+3. [Toma de decisiones con JavaScript](../3-making-decisions/translations/README.es.md)
+4. [Arrays and Loops](../4-arrays-loops/translations/README.es.md)
 
 ### Créditos
 
diff --git a/2-js-basics/translations/README.it.md b/2-js-basics/translations/README.it.md
index bee32eb6..5d86f87d 100644
--- a/2-js-basics/translations/README.it.md
+++ b/2-js-basics/translations/README.it.md
@@ -4,10 +4,10 @@ JavaScript è il linguaggio del web. In queste quattro lezioni, si impareranno l
 
 ### Argomenti
 
-1. [Variabili e Tipi di Dato](1-data-types/translations/README.it.md)
-2. [Funzioni e Metodi](2-functions-methods/translations/README.it.md)
-3. [Prendere Decisioni con JavaScript](3-making-decisions/translations/README.it.md)
-4. [Array e Cicli](4-arrays-loops/translations/README.it.md)
+1. [Variabili e Tipi di Dato](../1-data-types/translations/README.it.md)
+2. [Funzioni e Metodi](../2-functions-methods/translations/README.it.md)
+3. [Prendere Decisioni con JavaScript](../3-making-decisions/translations/README.it.md)
+4. [Array e Cicli](../4-arrays-loops/translations/README.it.md)
 
 ### Crediti
 
diff --git a/2-js-basics/translations/README.ja.md b/2-js-basics/translations/README.ja.md
index 246a1737..f48342cc 100644
--- a/2-js-basics/translations/README.ja.md
+++ b/2-js-basics/translations/README.ja.md
@@ -4,10 +4,10 @@ JavaScript は Web の言語です。この4つのレッスンでは、その基
 
 ### トピック
 
-1. [変数とデータ型](1-data-types/README.md)
-2. [関数とメソッド](2-functions-methods/README.md)
-3. [JavaScript での意思決定](3-making-decisions/README.md)
-4. [配列とループ](4-arrays-loops/README.md)
+1. [変数とデータ型](../1-data-types/translations/README.ja.md)
+2. [関数とメソッド](../2-functions-methods/translations/README.ja.md)
+3. [JavaScript での意思決定](../3-making-decisions/translations/README.ja.md)
+4. [配列とループ](../4-arrays-loops/translations/README.ja.md)
 
 ### Credits
 
diff --git a/2-js-basics/translations/README.ms.md b/2-js-basics/translations/README.ms.md
index f3e042f2..b07d07c6 100644
--- a/2-js-basics/translations/README.ms.md
+++ b/2-js-basics/translations/README.ms.md
@@ -4,10 +4,10 @@ JavaScript adalah bahasa web. Dalam empat pelajaran ini, anda akan mengetahui as
 
 ### Topik
 
-1. [Pemboleh ubah dan Jenis Data](1-data-types/README.md)
-2. [Fungsi dan Kaedah](2-functions-methods/README.md)
-3. [Membuat Keputusan dengan JavaScript](3-making-decisions/README.md)
-4. [Susunan dan Gelung](4-arrays-loops/README.md)
+1. [Pemboleh ubah dan Jenis Data](../1-data-types/translations/README.ms.md)
+2. [Fungsi dan Kaedah](../2-functions-methods/translations/README.ms.md)
+3. [Membuat Keputusan dengan JavaScript](../3-making-decisions/translations/README.ms.md)
+4. [Susunan dan Gelung](../4-arrays-loops/translations/README.ms.md)
 
 ### Kredit
 
diff --git a/4-typing-game/typing-game/translations/README.it.md b/4-typing-game/typing-game/translations/README.it.md
index 4e17044e..7c67117c 100644
--- a/4-typing-game/typing-game/translations/README.it.md
+++ b/4-typing-game/typing-game/translations/README.it.md
@@ -2,7 +2,7 @@
 
 ## Quiz Pre-Lezione
 
-[Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/21)
+[Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/21?loc=it)
 
 ## Programmazione guidata dagli eventi
 
@@ -328,7 +328,7 @@ Aggiungere più funzionalità
 
 ## Quiz Post-Lezione
 
-[Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/22)
+[Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/22?loc=it)
 
 ## Revisione e Auto Apprendimento
 
diff --git a/5-browser-extension/1-about-browsers/translations/README.it.md b/5-browser-extension/1-about-browsers/translations/README.it.md
index d9bb346d..bdff1237 100644
--- a/5-browser-extension/1-about-browsers/translations/README.it.md
+++ b/5-browser-extension/1-about-browsers/translations/README.it.md
@@ -5,7 +5,7 @@
 
 ## Quiz Pre-Lezione
 
-[Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/23)
+[Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/23?loc=it)
 
 ### Introduzione
 
@@ -152,7 +152,7 @@ Si dia un'occhiata alle estensioni del browser in uno store e se ne installi una
 
 ## Quiz Post-Lezione
 
-[Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/24)
+[Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/24?loc=it)
 
 ## Revisione e Auto Apprendimento
 
diff --git a/5-browser-extension/2-forms-browsers-local-storage/translations/README.it.md b/5-browser-extension/2-forms-browsers-local-storage/translations/README.it.md
index d7de59f3..f2922d05 100644
--- a/5-browser-extension/2-forms-browsers-local-storage/translations/README.it.md
+++ b/5-browser-extension/2-forms-browsers-local-storage/translations/README.it.md
@@ -2,7 +2,7 @@
 
 ## Quiz Pre-Lezione
 
-[Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/25)
+[Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/25?loc=it)
 
 ### Introduzione
 
@@ -212,8 +212,7 @@ Finora si è discusso sui diversi tipi di API in queste lezioni. Scegliere un'AP
 
 ## Quiz Post-Lezione
 
-[
-Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/26)
+[Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/26?loc=it)
 
 ## Revisione e Auto Apprendimento
 
diff --git a/5-browser-extension/3-background-tasks-and-performance/translations/README.it.md b/5-browser-extension/3-background-tasks-and-performance/translations/README.it.md
index 1061a430..78a01c39 100644
--- a/5-browser-extension/3-background-tasks-and-performance/translations/README.it.md
+++ b/5-browser-extension/3-background-tasks-and-performance/translations/README.it.md
@@ -2,7 +2,7 @@
 
 ## Quiz Pre-Lezione
 
-[Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/27)
+[Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/27?loc=it)
 
 ### Introduzione
 
@@ -147,7 +147,7 @@ Esaminare alcuni siti web open source che esistono da molto tempo e, in base all
 
 ## Quiz Post-Lezione
 
-[Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/28)
+[Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/28?loc=it)
 
 ## Revisione e Auto Apprendimento
 
diff --git a/6-space-game/1-introduction/translations/README.hi.md b/6-space-game/1-introduction/translations/README.hi.md
index 15ffb2f8..bffa5eb1 100644
--- a/6-space-game/1-introduction/translations/README.hi.md
+++ b/6-space-game/1-introduction/translations/README.hi.md
@@ -211,7 +211,7 @@ eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
 
 ## लेक्चर बाद की क्विज
 
-[लेक्चर बाद की क्विज](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/30?loc=30)
+[लेक्चर बाद की क्विज](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/30?loc=hi)
 
 ## समीक्षा और स्व अध्ययन
 
diff --git a/6-space-game/1-introduction/translations/README.it.md b/6-space-game/1-introduction/translations/README.it.md
index 4caeabb0..215b026e 100644
--- a/6-space-game/1-introduction/translations/README.it.md
+++ b/6-space-game/1-introduction/translations/README.it.md
@@ -4,7 +4,7 @@
 
 ## Quiz Pre-Lezione
 
-[Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/29)
+[Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/29?loc=it)
 
 ### Ereditarietà e Composizione nello sviluppo del gioco
 
@@ -213,8 +213,7 @@ Pensare a come il modello pub/sub può migliorare un gioco. Quali parti dovrebbe
 
 ## Quiz Post-Lezione
 
-[
-Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/30)
+[Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/30?loc=it)
 
 ## Revisione e Auto Apprendimento
 
diff --git a/6-space-game/2-drawing-to-canvas/translations/README.it.md b/6-space-game/2-drawing-to-canvas/translations/README.it.md
index e819db12..f460000d 100644
--- a/6-space-game/2-drawing-to-canvas/translations/README.it.md
+++ b/6-space-game/2-drawing-to-canvas/translations/README.it.md
@@ -2,7 +2,7 @@
 
 ## Quiz Pre-Lezione
 
-[Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/31)
+[Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/31?loc=it)
 
 ## Canvas
 
@@ -205,8 +205,7 @@ Si è imparato a disegnare con l'API Canvas incentrata sul 2D; dare un'occhiata
 
 ## Quiz Post-Lezione
 
-[
-Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/32)
+[Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/32?loc=it)
 
 ## Revisione e Auto Apprendimento
 
diff --git a/6-space-game/3-moving-elements-around/translations/README.it.md b/6-space-game/3-moving-elements-around/translations/README.it.md
index dda320dc..5abdc80b 100644
--- a/6-space-game/3-moving-elements-around/translations/README.it.md
+++ b/6-space-game/3-moving-elements-around/translations/README.it.md
@@ -2,7 +2,7 @@
 
 ## Quiz Pre-Lezione
 
-[Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/33)
+[Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/33?loc=it)
 
 I giochi non sono molto divertenti finché non si hanno alieni che scorazzano per lo schermo! In questo gioco, si utilizzeranno due tipi di movimenti:
 
@@ -377,8 +377,7 @@ Come si può vedere, il proprio codice può trasformarsi in ["spaghetti code"](h
 
 ## Quiz Post-Lezione
 
-[
-Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/34)
+[Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/34?loc=it)
 
 ## Revisione e Auto Apprendimento
 
diff --git a/6-space-game/4-collision-detection/translations/README.it.md b/6-space-game/4-collision-detection/translations/README.it.md
index dd37d9c0..070b0fa3 100644
--- a/6-space-game/4-collision-detection/translations/README.it.md
+++ b/6-space-game/4-collision-detection/translations/README.it.md
@@ -2,7 +2,7 @@
 
 ## Quiz Pre-Lezione
 
-[Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/35)
+[Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/35?loc=it)
 
 In questa lezione si imparererà come fare fuoco con i laser con JavaScript! Verranno aggiunte due cose al gioco:
 
@@ -286,8 +286,7 @@ Aggiungere un'esplosione! Dare un'occhiata alle risorse di gioco [nel repository
 
 ## Quiz Post-Lezione
 
-[
-Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/36)
+[Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/36?loc=it)
 
 ## Revisione e Auto Apprendimento
 
diff --git a/6-space-game/5-keeping-score/translations/README.it.md b/6-space-game/5-keeping-score/translations/README.it.md
index f2f82c6b..616246e2 100644
--- a/6-space-game/5-keeping-score/translations/README.it.md
+++ b/6-space-game/5-keeping-score/translations/README.it.md
@@ -2,7 +2,7 @@
 
 ## Quiz Pre-Lezione
 
-[Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/37)
+[Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/37?loc=it)
 
 In questa lezione si imparerà come aggiungere punteggi a una partita e calcolare le vite.
 
@@ -178,8 +178,7 @@ Il codice è quasi completo. Si riescono a immaginare i prossimi passi?
 
 ## Quiz Post-Lezione
 
-[
-Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/38)
+[Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/38?loc=it)
 
 ## Revisione e Auto Apprendimento
 
diff --git a/6-space-game/6-end-condition/translations/README.it.md b/6-space-game/6-end-condition/translations/README.it.md
index 814901a9..ea7da529 100644
--- a/6-space-game/6-end-condition/translations/README.it.md
+++ b/6-space-game/6-end-condition/translations/README.it.md
@@ -2,7 +2,7 @@
 
 ## Quiz Pre-Lezione
 
-[Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/39)
+[Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/39?loc=it)
 
 Esistono diversi modi per esprimere una *condizione di fine gioco*. Spetta al creatore del gioco dire perché il gioco è finito. Ecco alcuni motivi, si supponga di parlare del gioco spaziale costruito finora:
 
@@ -211,8 +211,7 @@ Aggiungere un suono! Si può aggiungere un suono per migliorare il gioco, magari
 
 ## Quiz Post-Lezione
 
-[
-Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/40)
+[Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/40?loc=it)
 
 ## Revisione e Auto Apprendimento
 
diff --git a/7-bank-project/1-template-route/translations/README.it.md b/7-bank-project/1-template-route/translations/README.it.md
new file mode 100644
index 00000000..7c45b6ba
--- /dev/null
+++ b/7-bank-project/1-template-route/translations/README.it.md
@@ -0,0 +1,306 @@
+# Creazione di un'App Bancaria Parte 1: Modelli HTML e Rotte in un'app web
+
+## Quiz Pre-Lezione
+
+[Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/41?loc=it)
+
+### Introduzione
+
+Dall'avvento di JavaScript nei browser, i siti web stanno diventando più interattivi e complessi che mai. Le tecnologie web sono ora comunemente utilizzate per creare applicazioni completamente funzionali che vengono eseguite direttamente in un browser che vengono chiamate [applicazioni web](https://it.wikipedia.org/wiki/Applicazione_web). Poiché le app web sono altamente interattive, gli utenti non desiderano attendere il ricaricamento di una pagina intera ogni volta che viene eseguita un'azione. Ecco perché JavaScript viene utilizzato per aggiornare l'HTML direttamente utilizzando il DOM, per fornire un'esperienza utente più fluida.
+
+In questa lezione, getteremo le basi per creare un'app web bancaria, utilizzando modelli HTML per creare più schermate che possono essere visualizzate e aggiornate senza dover ricaricare l'intera pagina HTML.
+
+### Prerequisito
+
+È necessario un server web locale per testare l'app web che verrà creata in questa lezione. Se non ne ha uno, si può installare [Node.js](https://nodejs.org) e utilizzare il comando `npx lite-server` dalla cartella del progetto. Creerà un server web locale e aprirà la propria app in un browser.
+
+### Preparazione
+
+Sul proprio computer, creare una cartella denominata `bank` con un file denominato `index.html` al suo interno. Si inizierà da questo codice [boilerplate](https://en.wikipedia.org/wiki/Boilerplate_code) HTML:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Bank App</title>
+  </head>
+  <body>
+    <!-- Qui è dove si lavorerà -->
+  </body>
+</html>
+```
+
+---
+
+## Modelli HTML.
+
+Se si desidera creare più schermate per una pagina Web, una soluzione potrebbe essere la creazione di un file HTML per ogni schermata che si desidera visualizzare. Tuttavia, questa soluzione presenta alcuni inconvenienti:
+
+- È necessario ricaricare l'intero HTML quando si cambia schermata, il che può essere lento.
+- È difficile condividere i dati tra le diverse schermate.
+
+Un altro approccio consiste nell'avere un solo file HTML e definire più [modelli HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template) utilizzando l'elemento `<template>`. Un modello è un blocco HTML riutilizzabile che non viene visualizzato dal browser e deve essere istanziato in fase di esecuzione utilizzando JavaScript.
+
+### Attività
+
+Verrà creata un'app bancaria con due schermate: la pagina di accesso e il cruscotto. Innanzitutto, si aggiunge nel corpo dell'HTML un elemento segnaposto che si utilizzerà per istanziare le diverse schermate dell'app:
+
+```html
+<div id="app">Loading...</div>
+```
+
+Viene fornito un `ID` all'elemento per renderlo più facilmente individuabile con JavaScript in seguito.
+
+> Suggerimento: poiché il contenuto di questo elemento verrà sostituito, si può  inserire un messaggio di caricamento o un indicatore che verrà mostrato durante il caricamento dell'app.
+
+Successivamente, si aggiunge il modello HTML seguente per la pagina di accesso. Per ora si inserirà solo un titolo e una sezione contenente un collegamento che si utilizzerà per eseguire la navigazione.
+
+```html
+<template id="login">
+  <h1>Bank App</h1>
+  <section>
+    <a href="/dashboard">Login</a>
+  </section>
+</template>
+```
+
+Quindi si aggiungerà un altro modello HTML per la pagina del cruscotto. Questa pagina conterrà diverse sezioni:
+
+- Un'intestazione con un titolo e un collegamento di disconnessione
+- Saldo corrente del conto bancario
+- Un elenco di transazioni, visualizzato in una tabella
+
+```html
+<template id="dashboard">
+  <header>
+    <h1>Bank App</h1>
+    <a href="/login">Logout</a>
+  </header>
+  <section>
+    Balance: 100$
+  </section>
+  <section>
+    <h2>Transactions</h2>
+    <table>
+      <thead>
+        <tr>
+          <th>Date</th>
+          <th>Object</th>
+          <th>Amount</th>
+        </tr>
+      </thead>
+      <tbody></tbody>
+    </table>
+  </section>
+</template>
+```
+
+> Suggerimento: durante la creazione di modelli HTML, se si vuole vedere come apparirà, si possono commentare le righe tra `<template>` `</template>` racchiudendole `tra <!- ->-->`.
+
+✅ Perché si pensa che vengano utilizzati gli attributi `id` sui modelli? Si potrebbe usare qualcos'altro come le classi?
+
+## Visualizzazione di modelli con JavaScript
+
+Se si prova il proprio file HTML corrente in un browser, si vedrà che si blocca visualizzando `Loading ...` Questo perché si deve aggiungere del codice JavaScript per istanziare e visualizzare i modelli HTML.
+
+L'istanza di un modello viene solitamente eseguita in 3 passaggi:
+
+1. Recuperare l'elemento del modello nel DOM, ad esempio utilizzando [`document.getElementById`](https://developer.mozilla.org/it/docs/Web/API/Document/getElementById).
+2. Clonare l'elemento template, usando [`cloneNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode).
+3. Collegarlo al DOM sotto un elemento visibile, ad esempio utilizzando [`appendChild`](https://developer.mozilla.org/it/docs/Web/API/Node/appendChild).
+
+✅ Perché è necessario clonare il modello prima di collegarlo al DOM? Cosa si pensa che accadrebbe se venisse saltato questo passaggio?
+
+### Attività
+
+Creare un nuovo file denominato `app.js` nella cartella del progetto e importare quel file nella sezione  `<head>` del proprio HTML:
+
+```html
+<script src="app.js" defer></script>
+```
+
+Ora in `app.js`, verrà creata una nuova funzione `updateRoute`:
+
+```js
+function updateRoute(templateId) {
+  const template = document.getElementById(templateId);
+  const view = template.content.cloneNode(true);
+  const app = document.getElementById('app');
+  app.innerHTML = '';
+  app.appendChild(view);
+}
+```
+
+Quello che si fa qui sono esattamente i 3 passaggi descritti sopra. Si istanza il modello con l'id `templateId` e si inserisce il suo contenuto clonato nel segnaposto dell'app. Notare che si deve usare `cloneNode (true)` per copiare l'intero sottoalbero del modello.
+
+Ora chiamare questa funzione con uno dei template e guardare il risultato.
+
+```js
+updateRoute('login');
+```
+
+✅ Qual è lo scopo di questo codice `app.innerHTML = '';`? Cosa succede senza di essa?
+
+## Creazione di rotte
+
+Quando si parla di un'app web, si definisce *Routing* (instradamento) l'intento di mappare gli **URL** a schermate specifiche che dovrebbero essere visualizzate. Su un sito web con più file HTML, questa operazione viene eseguita automaticamente poiché i percorsi dei file si riflettono sull'URL. Ad esempio, con questi file nella cartella del progetto:
+
+```
+mywebsite/index.html
+mywebsite/login.html
+mywebsite/admin/index.html
+```
+
+Se si crea un server web con `mywebsite` come radice, la mappatura dell'URL sarà:
+
+```
+https://site.com            --> mywebsite/index.html
+https://site.com/login.html --> mywebsite/login.html
+https://site.com/admin/     --> mywebsite/admin/index.html
+```
+
+Tuttavia, per l'app web in costruzione si utilizza un singolo file HTML contenente tutte le schermate, quindi questo comportamento predefinito non sarà di aiuto. Si deve creare questa mappa manualmente ed eseguire l'aggiornamento del modello visualizzato utilizzando JavaScript.
+
+### Attività
+
+Si userà un semplice oggetto per implementare una [mappa](https://it.wikipedia.org/wiki/Array_associativo) tra i percorsi degli URL e i propri modelli. Aggiungere questo oggetto all'inizio del file `app.js`.
+
+```js
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard' },
+};
+```
+
+Ora modificare un po' la funzione `updateRoute`. Invece di passare direttamente il `templateId` come argomento, lo si vuole recuperare guardando prima l'URL corrente, quindi utilizzndo la mappa per ottenere il valore dell'ID del modello corrispondente. Si può  usare [`window.location.pathname`](https://developer.mozilla.org/en-US/docs/Web/API/Location/pathname) per ottenere solo la sezione del percorso dall'URL.
+
+```js
+function updateRoute() {
+  const path = window.location.pathname;
+  const route = routes[path];
+
+  const template = document.getElementById(route.templateId);
+  const view = template.content.cloneNode(true);
+  const app = document.getElementById('app');
+  app.innerHTML = '';
+  app.appendChild(view);
+}
+```
+
+Qui sono state mappato le rotte che sono state dichiarate al modello corrispondente. Si può provare se funziona correttamente modificando manualmente l'URL nel proprio browser.
+
+✅ Cosa succede se si inserisce un percorso sconosciuto nell'URL? Come potrebbe essere risolto questo problema?
+
+## Aggiungere navigazione
+
+Il prossimo passo per la costruzione dell'app è aggiungere la possibilità di navigare tra le pagine senza dover modificare manualmente l'URL. Questo implica due cose:
+
+1. Aggiornamento dell'URL corrente
+2. Aggiornamento del modello visualizzato in base al nuovo URL
+
+E' già stata trattata la seconda parte con la funzione `updateRoute`, quindi occorre capire come aggiornare l'URL corrente.
+
+Si dovrà utilizzare JavaScript e più precisamente [history.pushState](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState) che permette di aggiornare l'URL e creare una nuova voce nella cronologia di navigazione, senza ricaricare l'HTML.
+
+> Nota: Sebbene l'elemento HTML ancora [`<a href>`](https://developer.mozilla.org/it/docs/Web/HTML/Element/a) possa essere usato da solo per creare collegamenti ipertestuali a diversi URL, è anche in grado di fare ricaricare al browser l'HTML nella modalità predefinita. È necessario prevenire questo comportamento quando si gestisce il routing con javascript personalizzato, utilizzando la funzione preventDefault() sull'evento click.
+
+### Attività
+
+Si crea una nuova funzione da utilizzare per navigare nell'app:
+
+```js
+function navigate(path) {
+  window.history.pushState({}, path, window.location.origin + path);
+  updateRoute();
+}
+```
+
+Questo metodo aggiorna prima l'URL corrente in base al percorso fornito, quindi aggiorna il modello. La proprietà `window.location.origin` restituisce l'URL radice, permettendo di ricostruire un URL completo da un dato percorso.
+
+Ora che si ha questa funzione, ci si può occupare del problema che si verifica se un percorso non corrisponde a nessuna rotta definita. Si modificherà la funzione `updateRoute` aggiungendo una soluzione di contingenza per indirizzare verso una delle rotte esistenti se non viene trovata una corrispondenza.
+
+```js
+function updateRoute() {
+  const path = window.location.pathname;
+  const route = routes[path];
+
+  if (!route) {
+    return navigate('/login');
+  }
+
+  ...
+```
+
+Se non è possibile trovare una rotta, si esegue un reindirizzamento alla pagina `login`.
+
+Ora si crea una funzione per ottenere l'URL quando si fa clic su un collegamento e per impedire il comportamento predefinito del browser per un collegamento:
+
+```js
+function onLinkClick(event) {
+  event.preventDefault();
+  navigate(event.target.href);
+}
+```
+
+Si completa il sistema di navigazione aggiungendo collegamenti ai link di accesso (*Login*) e di disconnessione (*Logout*) nell'HTML.
+
+```html
+<a href="/dashboard" onclick="onLinkClick()">Login</a>
+...
+<a href="/login" onclick="onLinkClick()">Logout</a>
+```
+
+Utilizzando l 'attributo [`onclick`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick) associare l'evento `click` al codice JavaScript, in questo caso la chiamata alla funzione `navigate()` .
+
+Provare a fare clic su questi collegamenti, ora si dovrebbe essere in grado di navigare tra le diverse schermate dell'app.
+
+✅ Il metodo `history.pushState` fa parte dello standard HTML5 e implementato in [tutti i browser moderni](https://caniuse.com/?search=pushState). Se si sta creando un'app web per browser meno recenti, c'è un trucco che si può usare al posto di questa API: usando un [hash (`#`)](https://en.wikipedia.org/wiki/URI_fragment) prima del percorso si può implementare un instradatamento che funziona con la normale navigazione dell'elemento ancora e non ricarica la pagina, poiché il suo scopo era creare collegamenti all'interno di una pagina.
+
+## Gestione dei pulsanti Avanti e Indietro del browser
+
+L'utilizzo di `history.pushState` crea nuove voci nella cronologia di navigazione del browser. Si può verificare tenendo premuto il *pulsante Indietro* del proprio browser, dovrebbe visualizzare qualcosa del genere:
+
+![Videata della cronologia di navigazione](../history.png)
+
+Se si prova a fare clic sul pulsante Indietro alcune volte, si vedrà che l'URL corrente cambia e la cronologia viene aggiornata, ma lo stesso modello continua a essere visualizzato.
+
+Questo perché il browser non sa che si deve chiamare `updateRoute()` ogni volta che cambia la cronologia. Se si dà un'occhiata alla documentazione di [`history.pushState`](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState) si può vedere che se lo stato cambia, vale a dire che si è passati a un URL diverso, viene attivato l'[evento](https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event) `popstate`. Verrà usato per risolvere quel problema.
+
+### Attività
+
+Per assicurarsi che il modello visualizzato venga aggiornato quando la cronologia del browser cambia, si aggiungerà una nuova funzione che chiama `updateRoute()`. Verrà fatto in fondo al file `app.js`:
+
+```js
+window.onpopstate = () => updateRoute();
+updateRoute();
+```
+
+> Nota: è stata usata una [funzione freccia](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) qui per dichiarare il gestore di eventi `popstate` per concisione, ma una funzione normale andrebbe bene allo stesso modo.
+
+Ecco un video di aggiornamento sulle funzioni freccia:
+
+[![Funzionifreccia](https://img.youtube.com/vi/OP6eEbOj2sc/0.jpg)](https://youtube.com/watch?v=OP6eEbOj2sc "")
+
+> Fare clic sull'immagine sopra per un video sulle funzioni freccia
+
+Ora provare a utilizzare i pulsanti Indietro e Avanti del proprio browser e controllare che il percorso visualizzato sia aggiornato correttamente questa volta.
+
+---
+
+## 🚀 Sfida
+
+Aggiungere un nuovo modello e instradare per una terza pagina che mostra i crediti per questa app.
+
+## Quiz Post-Lezione
+
+[Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/42?loc=it)
+
+## Revisione e Auto Apprendimento
+
+Il routing (instradamento) è una delle parti sorprendentemente complicate dello sviluppo web, soprattutto perché il web passa dai comportamenti di aggiornamento della pagina all'aggiornamento della pagina dell'applicazione a pagina singola. Leggere alcune informazioni su [come il servizio App Web Static di Azure](https://docs.microsoft.com/en-us/azure/static-web-apps/routes?WT.mc_id=academic-4621-cxa) gestisce il routing. Si può spiegare perché alcune delle decisioni descritte in quel documento sono necessarie?
+
+## Compito
+
+[Migliorare l'instradamento](assignment.it.md)
diff --git a/7-bank-project/1-template-route/translations/assignment.it.md b/7-bank-project/1-template-route/translations/assignment.it.md
new file mode 100644
index 00000000..51dd5958
--- /dev/null
+++ b/7-bank-project/1-template-route/translations/assignment.it.md
@@ -0,0 +1,14 @@
+# Migliorare l'instradamento
+
+## Istruzioni
+
+La dichiarazione delle rotte contiene attualmente solo l'ID del modello da utilizzare. Quando si visualizza una nuova pagina, a volte è necessario un po 'di più. L'implementazione del routing viene migliorata con due funzionalità aggiuntive:
+
+- Assegnare titoli a ciascun modello e aggiornare il titolo della finestra con questo nuovo titolo quando il modello cambia.
+- Aggiungere un'opzione per eseguire del codice dopo le modifiche al modello. Si vuole stampare `"Il cruscotto è mostrato" nella` console per sviluppatori ogni volta che viene visualizzata la pagina del dashboard.
+
+## Rubrica
+
+| Criteri | Ottimo | Adeguato | Necessita miglioramento |
+| -------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
+|          | Le due funzionalità sono implementate e funzionanti. L'aggiunta di titolo e codice funziona anche per una nuova rotta aggiunta nella dichiarazione di `routes` . | Sono funzionanti i due comportamenti aggiuntivi, ma il comportamento è fisso nel codice e non è configurabile tramite la dichiarazione di `routes`. L'aggiunta di una terza rotta con l'aggiunta di titolo e codice non funziona o funziona parzialmente. | Una delle funzionalità manca o non funziona correttamente. |
\ No newline at end of file
diff --git a/7-bank-project/2-forms/translations/README.it.md b/7-bank-project/2-forms/translations/README.it.md
new file mode 100644
index 00000000..d6d85592
--- /dev/null
+++ b/7-bank-project/2-forms/translations/README.it.md
@@ -0,0 +1,293 @@
+# Creazione di un'App Bancaria Parte 2: Creazione di un form di accesso e registrazione
+
+## Quiz Pre-Lezione
+
+[Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/43?loc=it)
+
+### Introduzione
+
+In quasi tutte le moderne app web, si può  creare un account per avere il proprio spazio privato. Poiché più utenti possono accedere a un'app web contemporaneamente, è necessario un meccanismo per archiviare i dati personali di ciascun utente separatamente e selezionare le informazioni da visualizzare. Non verrà trattato come gestire [l'identità dell'utente in modo sicuro](https://it.wikipedia.org/wiki/Autenticazione) poiché si tratta di un argomento ampio di per sé, ma ci si assicurerà che ogni utente sia in grado di creare uno (o più) conto bancario nella app.
+
+In questa parte si utilizzeranno form HTML per aggiungere login e registrazione all'app. Si vedrà come inviare i dati a un'API del server a livello di programmazione e, infine, come definire le regole di convalida di base per gli input dell'utente.
+
+### Prerequisito
+
+È necessario aver completato i [modelli HTML e il routing](../../1-template-route/translations/README.it.md) dell'app web per questa lezione. È inoltre necessario installare [Node.js](https://nodejs.org) ed  [eseguirel'API del server](../../api/README.md) in locale in modo da poter inviare dati per creare account.
+
+Si può verificare che il server funzioni correttamente eseguendo questo comando in un terminale:
+
+```sh
+curl http://localhost:5000/api
+# -> dovrebbe restituire "Bank API v1.0.0" come risultato
+```
+
+---
+
+## Form e controlli
+
+L'elemento  `<form>` incapsula una sezione di un documento HTML in cui l'utente può inserire e inviare dati con controlli interattivi. Esistono tutti i tipi di controlli dell'interfaccia utente (UI) che possono essere utilizzati all'interno di un form, i più comuni sono gli elementi `<input>` e `<button>`.
+
+Esistono molti [tipi](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) diversi di `<input>`, ad esempio per creare un campo in cui l'utente può inserire il proprio nome utente si può  utilizzare:
+
+```html
+<input id="username" name="username" type="text">
+```
+
+L'attributo `name` verrà utilizzato come nome della proprietà quando verranno inviati i dati del form. L'attributo `id` viene utilizzato per associare un'etichetta (`<label>`) al relativo controllo nel form.
+
+> Si dia un'occhiata all'intero elenco di  [tipi di `<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) e [altri controlli del form](https://developer.mozilla.org/en-US/docs/Learn/Forms/Other_form_controls) per avere un'idea di tutti gli elementi nativi dell'interfaccia utente che si possono utilizzare durante la creazione della propria interfaccia utente.
+
+✅ Si noti che  `<input>` è un [elemento vuoto](https://developer.mozilla.org/en-US/docs/Glossary/Empty_element) su cui *non* si dovrebbe aggiungere un tag di chiusura corrispondente. È comunque possibile utilizzare la notazione a chiusura automatica  `<input/>` , ma non è richiesta.
+
+L'elemento `<button>` all'interno di un form è un po' speciale. Se non si specifica il suo attributo di tipo (`type`) , invierà automaticamente i dati del form al server quando viene premuto. Ecco i possibili valori di `type` :
+
+- `submit`: l'impostazione predefinita all'interno di un `<form>`, il pulsante attiva l'azione di invio del form.
+- `reset`: il pulsante ripristina tutti i controlli del form ai valori iniziali.
+- `button`: non assegna un comportamento predefinito quando viene premuto il pulsante. È quindi possibile assegnargli azioni personalizzate utilizzando JavaScript.
+
+### Attività
+
+Si comincia aggiungendo un form al modello di accesso `login` . Servirà di un campo *username* per il nome utente e di un pulsante *Login* .
+
+```html
+<template id="login">
+  <h1>Bank App</h1>
+  <section>
+    <h2>Login</h2>
+    <form id="loginForm">
+      <label for="username">Username</label>
+      <input id="username" name="user" type="text">
+      <button>Login</button>
+    </form>
+  </section>
+</template>
+```
+
+Se si guarda più attentamente, si può notare che è stato aggiunto anche un elemento `<label>` (etichetta). Gli elementi `<label>` vengono utilizzati per aggiungere un nome ai controlli dell'interfaccia utente, come il campo username. Le etichette sono importanti per la leggibilità dei form, ma offrono anche vantaggi aggiuntivi:
+
+- Associaer un'etichetta a un controllo in un form, aiuta gli utenti che utilizzano tecnologie assistite (come unlettore di schremo) a capire quali dati dovrebbero fornire.
+- È possibile fare clic sull'etichetta per portare direttamente il focus sull'input associato, rendendolo più facile da raggiungere su dispositivi basati su touch screen.
+
+> [L'accessibilità](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility) sul Web è un argomento molto importante che spesso viene trascurato. Grazie agli [elementi HTML semantici](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML) non è difficile creare contenuti accessibili se usati correttamente. Si può [leggere di più sull'accessibilità](https://developer.mozilla.org/en-US/docs/Web/Accessibility) per evitare errori comuni e diventare uno sviluppatore responsabile.
+
+Ora si aggiungerà un secondo modulo per la registrazione, appena sotto il precedente:
+
+```html
+<hr/>
+<h2>Register</h2>
+<form id="registerForm">
+  <label for="user">Username</label>
+  <input id="user" name="user" type="text">
+  <label for="currency">Currency</label>
+  <input id="currency" name="currency" type="text" value="$">
+  <label for="description">Description</label>
+  <input id="description" name="description" type="text">
+  <label for="balance">Current balance</label>
+  <input id="balance" name="balance" type="number" value="0">
+  <button>Register</button>
+</form>
+```
+
+Utilizzando l'attributo `value` si può impostare un valore predefinito per un dato input. Si noti inoltre che l'input per il saldo(`balance`) ha il tipo `number` (numero). Sembra diverso dagli altri input? Provare a interagire con esso.
+
+✅ Si può  navigare e interagire con i form utilizzando solo una tastiera? E come si pensa di fare?
+
+## Invio dei dati al server
+
+Ora che si ha un'interfaccia utente funzionale, il passaggio successivo è inviare i dati al server. Fare un rapido test utilizzando il codice attuale: cosa succede se si fa clic sul pulsante *Login* o *Register* ?
+
+Si è notato il cambiamento nella sezione URL del proprio browser?
+
+![Videata della modifica dell'URL del browser dopo aver fatto clic sul pulsante Registra](../images/click-register.png)
+
+L'azione predefinita per un `<form>` consiste nell'inviare il form all'URL del server corrente utilizzando il [metodo GET](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3), aggiungendo i dati del modulo direttamente all'URL. Questo metodo presenta però alcuni difetti:
+
+- I dati inviati sono di dimensioni molto limitate (circa 2000 caratteri)
+- I dati sono direttamente visibili nell'URL (non eccezionale per le password)
+- Non funziona con i caricamenti di file
+
+Ecco perché si può cambiare e utilizzare il [metodo POST](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5) che invia i dati del modulo al server nel corpo della richiesta HTTP, senza nessuna delle limitazioni precedenti.
+
+> Sebbene POST sia il metodo più comunemente utilizzato per inviare i dati, [in alcuni scenari specifici](https://www.w3.org/2001/tag/doc/whenToUseGet.html) è preferibile utilizzare il metodo GET, ad esempio quando si implementa un campo di ricerca.
+
+### Attività
+
+Aggiungere le proprietà `action` e `method` al form di registrazione:
+
+```html
+<form id="registerForm" action="//localhost:5000/api/accounts" method="POST">
+```
+
+Provare ora a registrare un nuovo account con il proprio nome. Dopo aver fatto clic sul pulsante *Register* si dovrebbe vedere qualcosa del genere:
+
+![Una finestra del browser all'indirizzo localhost:5000/api/ accounts, che mostra una stringa JSON con i dati dell'utente](../images/form-post.png)
+
+Se tutto va bene, il server dovrebbe rispondere alla richiesta con una risposta [JSON](https://www.json.org/json-en.html) contenente i dati dell'account che è stato creato.
+
+✅ Provare una nuova registrazione con lo stesso nome. Che cosa accade?
+
+## Invio di dati senza ricaricare la pagina
+
+Come probabilmente si è notato, c'è un piccolo problema con l'approccio appena usato: quando si invia il modulo, si esce dalla propria app e il browser reindirizza all'URL del server. Si sta cercando qui di evitare tutti i ricaricamenti delle pagine con quest app web, poiché si sta creando un'[applicazione a pagina singola (SPA)](https://en.wikipedia.org/wiki/Single-page_application).
+
+Per inviare i dati del modulo al server senza forzare il ricaricamento di una pagina, si deve utilizzare il codice JavaScript. Invece di inserire un URL nella proprietà `action` di un  `<form>`, si può  utilizzare qualsiasi codice JavaScript anteposto dalla stringa `javascript:` per eseguire un'azione personalizzata. Usarlo significa anche che si dovranno implementare alcune attività che erano state precedentemente eseguite automaticamente dal browser:
+
+- Recuperare i dati del form
+- Convertire e codificare i dati del form in un formato adatto
+- Creare la richiesta HTTP e inviarla al server
+
+### Attività
+
+Sostituire `action` nel form di registrazione con:
+
+```html
+<form id="registerForm" action="javascript:register()">
+```
+
+Aprire `app.js` aggiungere una nuova funzione denominata `register`:
+
+```js
+function register() {
+  const registerForm = document.getElementById('registerForm');
+  const formData = new FormData(registerForm);
+  const data = Object.fromEntries(formData);
+  const jsonData = JSON.stringify(data);
+}
+```
+
+Qui si recupera l'elemento form utilizzando `getElementById()` e si utilizza il [metodo di supporto FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData)  per estrarre i valori dai controlli del forma come un insieme di coppie chiave/valore. Quindi si convertono i dati in un oggetto normale utilizzando [`Object.fromEntries()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries) e infine si serializzano i dati in [JSON](https://www.json.org/json-en.html), un formato comunemente utilizzato per lo scambio di dati sul web.
+
+I dati sono ora pronti per essere inviati al server. Creare una nuova funzione denominata `createAccount`:
+
+```js
+async function createAccount(account) {
+  try {
+    const response = await fetch('//localhost:5000/api/accounts', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: account
+    });
+    return await response.json();
+  } catch (error) {
+    return { error: error.message || 'Unknown error' };
+  }
+}
+```
+
+Cosa fa questa funzione? Per prima cosa notare la  parola chiave `async`. Ciò significa che la funzione contiene codice che verrà eseguito [**in modo asincrono**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function). Quando viene utilizzato insieme alla parola chiave `await`, consente di attendere l'esecuzione del codice asincrono, come l'attesa della risposta del server qui, prima di continuare.
+
+Ecco un breve video sull'utilizzo di `async/await`:
+
+[![Async e Await per la](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk " gestione di promesse")
+
+> Fare clic sull'immagine sopra per un video su async/await.
+
+Si usa l'API `fetch()` per inviare dati JSON al server. Questo metodo richiede 2 parametri:
+
+- L'URL del server, quindi rimettere `//localhost:5000/api/accounts` qui.
+- Le impostazioni della richiesta. È qui che si imposta il metodo su `POST` e si fornisce il corpo (`body`) della richiesta. Dato che si inviano dati JSON al server, si deve anche impostare l'intestazione `Content-Type` su `application/json` in modo che il server sappia come interpretare il contenuto.
+
+Poiché il server risponderà alla richiesta con JSON, si può  utilizzare `await response.json()` per analizzare il contenuto JSON e restituire l'oggetto risultante. Notare che questo metodo è asincrono, quindi si usa la parola chiave `await` qui prima di tornare per assicurarsi che vengano rilevati anche eventuali errori durante l'analisi.
+
+Ora aggiungere del codice alla funzione di `register` per chiamare `createAccount()`:
+
+```js
+const result = await createAccount(jsonData);
+```
+
+Poiché qui si usa la parola chiave `await`, si deve aggiungere la parola chiave `async` prima della funzione di registrazione
+
+```js
+async function register() {
+```
+
+Infine, aggiungere alcuni log per verificare il risultato. La funzione finale dovrebbe essere simile a questa:
+
+```js
+async function register() {
+  const registerForm = document.getElementById('registerForm');
+  const formData = new FormData(registerForm);
+  const jsonData = JSON.stringify(Object.fromEntries(formData));
+  const result = await createAccount(jsonData);
+
+  if (result.error) {
+    return console.log('An error occured:', result.error);
+  }
+
+  console.log('Account created!', result);
+}
+```
+
+È stato un po' lungo ma si è arrivati! Se si apre [strumenti di sviluppo del browser](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools) e si prava a registrare un nuovo account, non si dovrebbe  vedere alcun cambiamento nella pagina web ma apparirà un messaggio nella console che conferma che tutto funziona.
+
+![Videata che mostra il messaggio di registro nella console del browser](../images/browser-console.png)
+
+✅ Si pensa che i dati vengano inviati al server in modo sicuro? E se qualcuno fosse in grado di intercettare la richiesta? Si possono leggere informazioni su [HTTPS](https://en.wikipedia.org/wiki/HTTPS) per saperne di più sulla comunicazione sicura dei dati.
+
+## Convalida dati
+
+Se si prova a registrare un nuovo account senza prima impostare un nome utente, si può  vedere che il server restituisce un errore con codice di stato [400 Bad Request](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/400#:~:text=The%20HyperText%20Transfer%20Protocol%20(HTTP,%2C%20or%20deceptive%20request%20routing).), (richiesta non valida)
+
+Prima di inviare i dati a un server è buona norma [convalidare i dati del modulo](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation) in anticipo quando possibile, per assicurarsi di inviare una richiesta valida. I controlli dei form HTML5 forniscono la convalida incorporata utilizzando vari attributi:
+
+- `requested`: il campo deve essere compilato altrimenti il modulo non può essere inviato.
+- `minlength` e `maxlength`: definisce il numero minimo e massimo di caratteri nei campi di testo.
+- `min` e `max`: definisce il valore minimo e massimo di un campo numerico.
+- `type`: definisce il tipo di dati attesi, come `number`, `email`, `file` o [altri tipi incorporati](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input). Questo attributo può anche modificare il rendering visivo del form.
+- `pattern`: permette di definire un modello di [espressione regolare](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions) per verificare se i dati inseriti sono validi o meno.
+
+> Suggerimento: si può  personalizzare l'aspetto dei controlli del form a seconda che siano validi o meno utilizzando le pseudo-classi CSS `:valid` e `:invalid` .
+
+### Attività
+
+Ci sono 2 campi obbligatori per creare un nuovo account valido,  nome utente (username) e la valuta (currency), gli altri campi sono opzionali. Aggiornare l'HTML del form, utilizzando sia l'attributo `required` che il testo nell'etichetta del campo in questo modo:
+
+```html
+<label for="user">Username (required)</label>
+<input id="user" name="user" type="text" required>
+...
+<label for="currency">Currency (required)</label>
+<input id="currency" name="currency" type="text" value="$" required>
+```
+
+Sebbene questa particolare implementazione del server non imponga limiti specifici sulla lunghezza massima dei campi, è sempre buona norma definire limiti ragionevoli per qualsiasi voce di testo inserita dell'utente.
+
+Aggiungere un attributo `maxlength` ai campi di testo:
+
+```html
+<input id="user" name="user" type="text" maxlength="20" required>
+...
+<input id="currency" name="currency" type="text" value="$" maxlength="5" required>
+...
+<input id="description" name="description" type="text" maxlength="100">
+```
+
+Ora se si preme il pulsante *Register* e un campo non rispetta una regola di convalida che è stata definita, si dovrebbe vedere qualcosa del genere:
+
+![Videata che mostra l'errore di convalida durante il tentativo di inviare il form](../images/validation-error.png)
+
+La convalida come questa eseguita *prima* di inviare qualsiasi dato al server è chiamata convalida **lato client** . Tenere presente che non è sempre possibile eseguire tutti i controlli senza inviare i dati. Ad esempio, non si può  verificare qui se esiste già un account con lo stesso nome utente senza inviare una richiesta al server. La convalida aggiuntiva eseguita sul server è denominata convalida **lato server** .
+
+Di solito devono essere implementate entrambe; mentre l'utilizzo della convalida lato client migliora l'esperienza dell'utente fornendo un feedback immediato all'utente, la convalida lato server è fondamentale per assicurarsi che i dati utente da manipolare siano validi e sicuri.
+
+---
+
+## 🚀 Sfida
+
+Mostrare un messaggio di errore nell'HTML se l'utente esiste già.
+
+Ecco un esempio di come può apparire la pagina di accesso finale dopo l'applicazione di un po' di stile:
+
+![Videata della pagina di accesso dopo l'aggiunta di stili CSS](../images/result.png)
+
+## Quiz Post-Lezione
+
+[Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/44?loc=it)
+
+## Revisione e Auto Apprendimento
+
+Gli sviluppatori sono diventati molto creativi nei loro sforzi di costruzione di form, in particolare per quanto riguarda le strategie di convalida. Scoprire i diversi flussi di form cercando su [CodePen](https://codepen.com); si riescono a trovare dei form interessanti e stimolanti?
+
+## Compito
+
+[Dare uno stile alla propria app bancaria](assignment.it.md)
diff --git a/7-bank-project/2-forms/translations/assignment.it.md b/7-bank-project/2-forms/translations/assignment.it.md
new file mode 100644
index 00000000..7c6f2a6e
--- /dev/null
+++ b/7-bank-project/2-forms/translations/assignment.it.md
@@ -0,0 +1,13 @@
+# Dare uno stile alla propria app bancaria
+
+## Istruzioni
+
+Creare un nuovo file `styles.css` e aggiungere un collegamento nel file `index.html` corrente. Nel file CSS appena creato aggiungere uno stile per rendere la pagina di *Login* e *cruscotto* bella e ordinata. Provare a creare un tema cromatico per dare alla app il proprio marchio.
+
+> Suggerimento: si può  modificare l'HTML e aggiungere nuovi elementi e classi se necessario.
+
+## Rubrica
+
+| Criteri | Ottimo | Adeguato | Necessita miglioramento |
+| -------- | ----------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------- |
+|          | Tutte le pagine sembrano pulite e leggibili, con un tema cromatico coerente e le diverse sezioni che risaltano correttamente. | Le pagine hanno uno stile ma senza un tema o con sezioni non chiaramente delimitate. | Le pagine mancano di stile, le sezioni sembrano disorganizzate e le informazioni sono difficili da leggere. |
\ No newline at end of file
diff --git a/7-bank-project/3-data/translations/README.it.md b/7-bank-project/3-data/translations/README.it.md
new file mode 100644
index 00000000..b21e585f
--- /dev/null
+++ b/7-bank-project/3-data/translations/README.it.md
@@ -0,0 +1,334 @@
+# Creazione di un'App Bancaria Parte 3: Metodi di Recupero e Utilizzo Dati
+
+## Quiz Pre-Lezione
+
+[Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/45?loc=it)
+
+### Introduzione
+
+Al centro di ogni applicazione web ci sono i *dati*. I dati possono assumere molte forme, ma il loro scopo principale è sempre quello di mostrare le informazioni all'utente. Con le app web che diventano sempre più interattive e complesse, il modo in cui l'utente accede e interagisce con le informazioni è ora una parte fondamentale dello sviluppo web.
+
+In questa lezione si vedrà come recuperare i dati da un server in modo asincrono e utilizzare questi dati per visualizzare le informazioni su una pagina web senza ricaricare l'HTML.
+
+### Prerequisito
+
+Per questa lezinoe è necessario aver creato la parte [Form di Accesso e Registrazione](../../2-forms/translations/README.it.md) dell'app web. È inoltre necessario installare [Node.js](https://nodejs.org) ed eseguire [l'API del server](../../api/translations/README.it.md)  in locale in modo da ottenere i dati dell'account.
+
+Si può verificare che il server funzioni correttamente eseguendo questo comando in un terminale:
+
+```sh
+curl http://localhost:5000/api
+# -> dovrebbe restituire  "Bank API v1.0.0" come risultato
+```
+
+---
+
+## AJAX e recupero dati
+
+I siti Web tradizionali aggiornano il contenuto visualizzato quando l'utente seleziona un collegamento o invia dati utilizzando un form, ricaricando l'intera pagina HTML. Ogni volta che è necessario caricare nuovi dati, il server web restituisce una nuova pagina HTML che deve essere elaborata dal browser, interrompendo l'azione corrente dell'utente e limitando le interazioni durante il ricaricamento. Questo flusso di lavoro è anche chiamato *Applicazione MultiPagina*   o *MPA* (Multi-Page Application) .
+
+![Aggiornare il flusso di lavoro in un'applicazione multipagina](../images/mpa.png)
+
+Quando le applicazioni web hanno iniziato a diventare più complesse e interattive, è emersa una nuova tecnica chiamata [AJAX (Asynchronous JavaScript and XML)](https://it.wikipedia.org/wiki/AJAX)). Questa tecnica consente alle app web di inviare e recuperare dati da un server in modo asincrono utilizzando JavaScript, senza dover ricaricare la pagina HTML, con conseguenti aggiornamenti più rapidi e interazioni utente più fluide. Quando vengono ricevuti nuovi dati dal server, la pagina HTML corrente può anche essere aggiornata con JavaScript utilizzando l'API [DOM](https://developer.mozilla.org/it/docs/Web/API/Document_Object_Model). Nel tempo, questo approccio si è evoluto in quella che ora viene chiamata [*Applicazione a Pagina Singola* o *SPA*](https://it.wikipedia.org/wiki/Single-page_application)  (Single-Page Application).
+
+![Aggiornare il flusso di lavoro in un'applicazione a pagina singola](../images/spa.png)
+
+Quando è stato introdotto per la prima volta AJAX, l'unica API disponibile per recuperare i dati in modo asincrono era [`XMLHttpRequest`](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest). I browser moderni ora implementano anche l'[API Fetch](https://developer.mozilla.org/it/docs/Web/API/Fetch_API), più conveniente e potente, che utilizza le promesse ed è più adatta per manipolare i dati JSON.
+
+> Sebbene tutti i browser moderni supportino l'`API Fetch`, se si desidera che la propria applicazione web funzioni su browser legacy o vecchi, è sempre una buona idea controllare prima la [tabella di compatibilità su caniuse.com](https://caniuse.com/fetch).
+
+### Attività
+
+[Nella lezione precedente](../../2-forms/translations/README.it.md) si è implementato il form di registrazione per creare un account. Ora verrà aggiunto il codice per accedere utilizzando un account esistente e recuperarne i dati. Aprire il file `app.js` e aggiungere una nuova funzione di accesso (`login`):
+
+```js
+async function login() {
+  const loginForm = document.getElementById('loginForm')
+  const user = loginForm.user.value;
+}
+```
+
+Qui si inizia recuperando l'elemento form con `getElementById()`, quindi si ottiene il nome utente (user) dall'input con `loginForm.user.value`. È possibile accedere a ogni controllo del form tramite il suo nome (impostato nell'HTML utilizzando l'attributo `name`) come proprietà del form.
+
+In modo simile a quanto fatto per la registrazione, verrà creata un'altra funzione per eseguire una richiesta al server, ma questa volta per recuperare i dati dell'account:
+
+```js
+async function getAccount(user) {
+  try {
+    const response = await fetch('//localhost:5000/api/accounts/' + encodeURIComponent(user));
+    return await response.json();
+  } catch (error) {
+    return { error: error.message || 'Unknown error' };
+  }
+}
+```
+
+Si usa l'API `fetch` per richiedere i dati in modo asincrono dal server, ma questa volta non servono parametri aggiuntivi oltre all'URL da chiamare, poiché si sta solo interrogando i dati. Per impostazione predefinita, `fetch` crea una richiesta  HTTP [`GET`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET), che è ciò che serve qui.
+
+✅ `encodeURIComponent()` è una funzione che evita i caratteri speciali per l'URL. Quali problemi si potrebbero avere se non viene chiamata questa funzione e si utilizza direttamente il valore del campo `user` nell'URL?
+
+Aggiornare ora la funzione `login` per utilizzare `getAccount`:
+
+```js
+async function login() {
+  const loginForm = document.getElementById('loginForm')
+  const user = loginForm.user.value;
+  const data = await getAccount(user);
+
+  if (data.error) {
+    return console.log('loginError', data.error);
+  }
+
+  account = data;
+  navigate('/dashboard');
+}
+```
+
+Innanzitutto, poiché `getAccount` è una funzione asincrona, occorre associarla alla parola chiave `await` per attendere il risultato dal server. Come con qualsiasi richiesta al server, occorre anche gestire i casi di errore. Per ora si aggiungerà solo un messaggio di log per visualizzare l'errore e verrà indirizzato più tardi.
+
+Quindi si deve memorizzare i dati da qualche parte in modo da poterli utilizzare in seguito per visualizzare le informazioni nel cruscotto. Poiché la variabile `account` non esiste ancora, verrà creata come variabile globale all'inizio del file:
+
+```js
+let account = null;
+```
+
+Dopo che i dati dell'utente sono stati salvati in una variabile, si può navigare dalla pagina di accessi (*login*) al cruscotto (*dashboard*) utilizzando la funzione `navigate()` che già esiste.
+
+Infine, si deve chiamare la funzione `login` quando viene inviato il form di accesso, modificando l'HTML:
+
+```html
+<form id="loginForm" action="javascript:login()">
+```
+
+Verificare che tutto funzioni correttamente registrando un nuovo account e provando ad accedere utilizzando lo stesso account.
+
+Prima di passare alla parte successiva, si può anche completare la funzione di registrazione (`register`) aggiungendola in fondo alla funzione:
+
+```js
+account = result;
+navigate('/dashboard');
+```
+
+✅ Si sa che per impostazione predefinita, si possono  chiamare solo le API di un server che ha *stesso dominio e porta* della pagina web che si sta visualizzando? Questo è un meccanismo di sicurezza applicato dai browser. Un momento, la nostra app web è in esecuzione su `localhost:3000` mentre l'API del server è in esecuzione su  `localhost:5000`, come mai funziona? Utilizzando una tecnica chiamata CORS [Cross-Origin Resource Sharing](https://developer.mozilla.org/it/docs/Web/HTTP/CORS), è possibile eseguire richieste HTTP con diverse origini (cross-origin) se il server aggiunge intestazioni speciali alla risposta, consentendo eccezioni per domini specifici.
+
+> Ulteriori informazioni sulle API sono disponibili seguendo questa [lezione](https://docs.microsoft.com/en-us/learn/modules/use-apis-discover-museum-art?WT.mc_id=academic-4621-cxa)
+
+## Aggiornare HTML per visualizzare i dati
+
+Ora che si hanno i dati dell'utente, occorre aggiornare l'HTML esistente per visualizzarli. E'  già noto come recuperare un elemento dal DOM utilizzando ad esempio `document.getElementById()`. Dopo aver ottenuto un elemento base, ecco alcune API che si possono utilizzare per modificarlo o aggiungervi elementi figlio:
+
+- Usando la proprietà [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)  si può  cambiare il testo di un elemento. Notare che la modifica di questo valore rimuove tutti i figli dell'elemento (se presenti) e li sostituisce con il testo fornito. In quanto tale, è anche un metodo efficiente per rimuovere tutti i figli di un dato elemento assegnandogli una stringa vuota  `""` .
+
+- Usando [`document.createElement()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement) insieme al metodo [`append()`](https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append) si può  creare e allegare uno o più nuovi elementi figlio.
+
+✅ Utilizzando la proprietà [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) di un elemento è anche possibile modificare il suo contenuto HTML, ma questo dovrebbe essere evitato poiché è vulnerabile agli attacchi di [cross-site scripting (XSS)](https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting) .
+
+### Attività
+
+Prima di passare alla schermata del cruscotto, c'è ancora una cosa da fare nella pagina di accesso (*login*). Attualmente, se si prova ad accedere con un nome utente che non esiste, viene mostrato un messaggio nella console ma per un utente normale non cambia nulla e non sa cosa sta succedendo.
+
+Si aggiunge ora un elemento segnaposto nel form di accesso dove si può  visualizzare un messaggio di errore se necessario. Un buon posto sarebbe subito prima del pulsante (`<button>`) con testo Login:
+
+```html
+...
+<div id="loginError"></div>
+<button>Login</button>
+...
+```
+
+Questo elemento `<div>` è vuoto, il che significa che non verrà visualizzato nulla sullo schermo fino a quando non verrà aggiunto del contenuto. Occorre anche assegnarli un `ID` in modo da poterlo recuperare facilmente con JavaScript.
+
+Tornare al  file `app.js` e creare una nuova funzione di supporto `updateElement`:
+
+```js
+function updateElement(id, text) {
+  const element = document.getElementById(id);
+  element.textContent = text;
+}
+```
+
+Questo è abbastanza semplice: dato un *ID* di un elemento e un *testo*, si aggiornerà il contenuto del testo dell'elemento DOM con l'`id` corrispondente. Si usa questo metodo al posto del precedente messaggio di errore nella funzione `login` :
+
+```js
+if (data.error) {
+  return updateElement('loginError', data.error);
+}
+```
+
+Ora se si prova ad accedere con un account non valido, si dovrebbe vedere qualcosa del genere:
+
+![Videata che mostra il messaggio di errore visualizzato durante l'accesso](../images/login-error.png)
+
+Ora si ha un testo di errore che viene visualizzato, ma se si prova con un lettore di schermo si noterà che non viene annunciato nulla. Affinché il testo che viene aggiunto dinamicamente a una pagina venga annunciato dai lettori di schermo, sarà necessario utilizzare qualcosa chiamato [Live Region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Qui verrà utilizzato un tipo specifico di live region chiamato alert:
+
+```html
+<div id="loginError" role="alert"></div>
+```
+
+Implementare lo stesso comportamento per gli errori della funzione `register` (non dimenticare di aggiornare l'HTML).
+
+## Visualizzare le informazioni sulla dashboard
+
+Utilizzando le stesse tecniche appena viste, ci si occuperà anche di visualizzare le informazioni dell'account nella pagina del cruscotto.
+
+Ecco come appare un oggetto account ricevuto dal server:
+
+```json
+{
+  "user": "test",
+  "currency": "$",
+  "description": "Test account",
+  "balance": 75,
+  "transactions": [
+    { "id": "1", "date": "2020-10-01", "object": "Pocket money", "amount": 50 },
+    { "id": "2", "date": "2020-10-03", "object": "Book", "amount": -10 },
+    { "id": "3", "date": "2020-10-04", "object": "Sandwich", "amount": -5 }
+  ],
+}
+```
+
+> Nota: per semplificare, si può  utilizzare l'account `test` preesistente già popolato di dati.
+
+### Attività
+
+Iniziare sostituendo la sezione "Balance" (saldo) nell'HTML per aggiungere elementi segnaposto:
+
+```html
+<section>
+  Balance: <span id="balance"></span><span id="currency"></span>
+</section>
+```
+
+Si aggiungerà anche una nuova sezione appena sotto per visualizzare la descrizione dell'account:
+
+```html
+<h2 id="description"></h2>
+```
+
+✅ Poiché la descrizione del'account funge da titolo per il contenuto sottostante, viene contrassegnata semanticamente come intestazione (heading). Scoprire di più su come [la struttura delle intestazioni](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) è importante per l'accessibilità ed esaminare la pagina per determinare cos'altro potrebbe essere un'intestazione.
+
+Successivamente, verrà creata una nuova funzione in `app.js` per riempire il segnaposto:
+
+```js
+function updateDashboard() {
+  if (!account) {
+    return navigate('/login');
+  }
+
+  updateElement('description', account.description);
+  updateElement('balance', account.balance.toFixed(2));
+  updateElement('currency', account.currency);
+}
+```
+
+Innanzitutto, controllare di avere i dati dell'account necessari prima di andare oltre. Quindi si usa la funzione `updateElement()` creata in precedenza per aggiornare l'HTML.
+
+> Per rendere la visualizzazione del saldo più bella, si usa il metodo [`toFixed(2)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) per forzare la visualizzazione del valore con 2 cifre per la parte decimale.
+
+Ora occorre chiamare la funzione `updateDashboard()` ogni volta che viene caricato il cruscotto. Se si è già terminato il [compito della lezione 1](../../1-template-route/translations/assignment.it.md) , questo dovrebbe essere immediato, altrimenti si può  utilizzare la seguente implementazione.
+
+Aggiungere questo codice alla fine della funzione `updateRoute()`:
+
+```js
+if (typeof route.init === 'function') {
+  route.init();
+}
+```
+
+Aggiornare la definizione delle rotte con:
+
+```js
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard', init: updateDashboard }
+};
+```
+
+Con questa modifica, ogni volta che viene visualizzata la pagina del cruscotto viene chiamata la funzione `updateDashboard()`. Dopo un accesso, si dovrebbe essere in grado di vedere il saldo del conto, la valuta e la descrizione.
+
+## Creare righe di tabelle dinamicamente con modelli HTML
+
+Nella [prima lezione](../../1-template-route/translations/README.it.md) sono stati utilizzati modelli HTML insieme al metodo [`appendChild()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild) per implementare la navigazione nell'app. I modelli possono anche essere più piccoli e utilizzati per popolare dinamicamente parti ripetitive di una pagina.
+
+Verrà usato un approccio simile per visualizzare l'elenco delle transazioni nella tabella HTML.
+
+### Attività
+
+Aggiungere un nuovo modello nell'elemento HTML `<body>`:
+
+```html
+<template id="transaction">
+  <tr>
+    <td></td>
+    <td></td>
+    <td></td>
+  </tr>
+</template>
+```
+
+Questo modello rappresenta una singola riga di tabella, con le 3 colonne che si vuole popolare: *data*, *oggetto* e *importo* di una transazione.
+
+Aggiungere quindi la proprietà `id` all'elemento `<tbody>` della tabella all'interno del modello del cruscotto per semplificare la ricerca dell'elemento utilizzando JavaScript:
+
+```html
+<tbody id="transactions"></tbody>
+```
+
+L'HTML è pronto, ora si passa al codice JavaScript e si crea una nuova funzione `createTransactionRow`:
+
+```js
+function createTransactionRow(transaction) {
+  const template = document.getElementById('transaction');
+  const transactionRow = template.content.cloneNode(true);
+  const tr = transactionRow.querySelector('tr');
+  tr.children[0].textContent = transaction.date;
+  tr.children[1].textContent = transaction.object;
+  tr.children[2].textContent = transaction.amount.toFixed(2);
+  return transactionRow;
+}
+```
+
+Questa funzione fa esattamente ciò che implica il suo nome: utilizzando il modello creato in precedenza, crea una nuova riga di tabella e riempie il suo contenuto utilizzando i dati della transazione. Verrà usata nella funzione `updateDashboard()` per popolare la tabella:
+
+```js
+const transactionsRows = document.createDocumentFragment();
+for (const transaction of account.transactions) {
+  const transactionRow = createTransactionRow(transaction);
+  transactionsRows.appendChild(transactionRow);
+}
+updateElement('transactions', transactionsRows);
+```
+
+Qui si utilizza il metodo [`document.createDocumentFragment()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment) che crea un nuovo frammento DOM su cui si può  lavorare, prima di collegarlo finalmente alla tabella HTML.
+
+C'è ancora un'altra cosa da fare prima che questo codice possa funzionare, poiché la funzione `updateElement()` attualmente supporta solo contenuto di testo. Occorre cambiare un poco il suo codice:
+
+```js
+function updateElement(id, textOrNode) {
+  const element = document.getElementById(id);
+  element.textContent = ''; // Rimuove tutti i figli
+  element.append(textOrNode);
+}
+```
+
+Si usa il metodo [`append()`](https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append) in quanto consente di allegare testo o [nodi DOM](https://developer.mozilla.org/en-US/docs/Web/API/Node) a un elemento genitore, che è perfetto per tutti i casi d'uso.
+
+Se si prova a utilizzare l'account `test` per accedere, ora si dovrebbe vedere un elenco di transazioni sul cruscotto 🎉.
+
+---
+
+## 🚀 Sfida
+
+Collaborare per far sembrare la pagina del cruscotto una vera app bancaria. Se è già stato definito lo stile della propria app, provare a utilizzare le [media query](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries) per creare una [disposizione reattiva](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks) che funzioni bene sia su dispositivi desktop che mobili.
+
+Ecco un esempio di una pagina cruscotto con applicato uno stile:
+
+![Videata di un risultato di esempio del cruscotto dopo l'applicazione dello stile](../../images/screen2.png)
+
+## Quiz Post-Lezione
+
+[Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/46?loc=it)
+
+## Compito
+
+[Refattorizzare e commentare il codice](assignment.it.md)
diff --git a/7-bank-project/3-data/translations/assignment.it.md b/7-bank-project/3-data/translations/assignment.it.md
new file mode 100644
index 00000000..6baff51a
--- /dev/null
+++ b/7-bank-project/3-data/translations/assignment.it.md
@@ -0,0 +1,15 @@
+# Refattorizzare e commentare il codice
+
+## Istruzioni
+
+Man mano che la base del codice cresce, è importante rifattorizzare il codice frequentemente per mantenerlo leggibile e gestibile nel tempo. Aggiungere commenti e rifattorizzare la propria `app.js` per migliorare la qualità del codice:
+
+- Estrarre costanti, come l'URL di base dell'API del server
+- Fattorizzare codice simile: ad esempio si può creare una funzione `sendRequest()` per raggruppare il codice utilizzato sia in `createAccount()` che in `getAccount()`
+- Riorganizzare il codice per renderlo più facile da leggere e aggiungere commenti
+
+## Rubrica
+
+| Criteri | Ottimo | Adeguato | Necessita miglioramento |
+| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
+|          | Il codice è commentato, ben organizzato in diverse sezioni e di facile lettura. Le costanti vengono estratte ed è stata creata una funzione `sendRequest()` fattorizzata. | Il codice è pulito ma può ancora essere migliorato con più commenti, estrazione di costanti o fattorizzazione. | Il codice è disordinato, non commentato, le costanti non vengono estratte e il codice non è fattorizzato |
diff --git a/7-bank-project/4-state-management/translations/README.it.md b/7-bank-project/4-state-management/translations/README.it.md
new file mode 100644
index 00000000..2af21d74
--- /dev/null
+++ b/7-bank-project/4-state-management/translations/README.it.md
@@ -0,0 +1,281 @@
+# Creare un'App Bancaria Parte 4: Concetti di Gestione dello Stato
+
+## Quiz Pre-Lezione
+
+[Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/47?loc=it)
+
+### Introduzione
+
+Man mano che un'applicazione web cresce, diventa una sfida tenere traccia di tutti i flussi di dati. Quale codice riceve i dati, quale pagina li consuma, dove e quando deve essere aggiornata ... è facile ritrovarsi con codice disordinato e difficile da mantenere. Ciò è particolarmente vero quando è necessario condividere dati tra diverse pagine della propria app, ad esempio i dati dell'utente. Il concetto di *gestione dello stato* è sempre esistito in tutti i tipi di programmi, ma poiché le app web continuano a crescere in complessità, ora è un punto chiave su cui riflettere durante lo sviluppo.
+
+In questa parte finale, si esaminerà l'app creata per ripensare a come viene gestito lo stato, consentendo il supporto per l'aggiornamento del browser in qualsiasi momento e persistendo i dati tra le sessioni utente.
+
+### Prerequisito
+
+È necessario aver completato la parte di [recupero dei dati](../../3-data/translations/README.it.md) dell'app web per questa lezione. È inoltre necessario installare [Node.js](https://nodejs.org) ed [eseguire l'API del server](../../api/translations/README.it.md) in locale in modo da ottenere i dati dell'account.
+
+Si può verificare che il server funzioni correttamente eseguendo questo comando in un terminale:
+
+```sh
+curl http://localhost:5000/api
+# -> dovrebbe restituire "Bank API v1.0.0" come risultato
+```
+
+---
+
+## Ripensare la gestione dello stato
+
+Nella [lezione precedente](../../3-data/translations/README.it.md), è stato introdotto un concetto basico di stato nell'app con la variabile globale `account` che contiene i dati bancari per l'utente attualmente connesso. Tuttavia, l'attuale implementazione presenta alcuni difetti. Si provi ad aggiornare la pagina quando ci si trova nella pagina del cruscotto. Che cosa accade?
+
+Ci sono 3 problemi con il codice corrente:
+
+- Lo stato non è persistente, poiché un aggiornamento del browser riporta alla pagina di accesso.
+- Esistono più funzioni che modificano lo stato. Man mano che l'app cresce, può essere difficile tenere traccia delle modifiche ed è facile dimenticare di aggiornarne una.
+- Lo stato non viene cancellato, quando si fa clic su *Logout* i dati dell'account sono ancora lì anche se si è nella pagina di accesso.
+
+Si potrebbe aggiornare il codice per affrontare questi problemi uno per uno, ma creerebbe più duplicazioni del codice e renderebbe l'app più complessa e difficile da mantenere. Oppure ci si potrebbe fermare per qualche minuto e ripensare alla strategia.
+
+> Quali problemi si stanno davvero cercando di risolvere qui?
+
+La [gestione dello stato](https://en.wikipedia.org/wiki/State_management) consiste nel trovare un buon approccio per risolvere questi due problemi particolari:
+
+- Come mantenere comprensibile il flusso di dati in un'app?
+- Come mantenere i dati di stato sempre sincronizzati con l'interfaccia utente (e viceversa)?
+
+Una volta che ci si è preso cura di questi, qualsiasi altro problema che si potrebbe avere potrebbe essere già stato risolto o essere diventato più facile da sistemare. Ci sono molti possibili approcci per risolvere questi problemi, ma si andrà con una soluzione comune che consiste nel **centralizzare i dati e le modalità per cambiarli**. Il flusso di dati andrebbe così:
+
+![Schema che mostra i flussi di dati tra HTML, azioni dell'utente e stato](../images/data-flow.png)
+
+> Non verrà trattata qui la parte in cui i dati attivano automaticamente l'aggiornamento della vista, poiché è legato a concetti più avanzati di [programmazione reattiva](https://en.wikipedia.org/wiki/Reactive_programming). È un buon argomento da sviluppare successivamente se si è pronti per un'immersione profonda.
+
+✅ Esistono molte librerie con approcci diversi alla gestione dello stato, [Redux](https://redux.js.org)  è un'opzione popolare. Dare un'occhiata ai concetti e ai modelli utilizzati spesso è un buon modo per apprendere quali potenziali problemi si potrebbe dover affrontare nelle grandi app web e come risolverli.
+
+### Attività
+
+Si inizierà con un po' di refattorizzazione. Sostituire la dichiarazione di `account` :
+
+```js
+let account = null;
+```
+
+Con:
+
+```js
+let state = {
+  account: null
+};
+```
+
+L'idea è *centralizzare* tutti i dati dell'app in un unico oggetto di stato. Per ora c'è solo `account` nello stato, quindi non cambia molto, ma crea un percorso per le evoluzioni.
+
+Si devono anche aggiornare le funzioni che lo utilizzano. Nelle funzioni `register()` e `login()` , sostituire `account = ...` con `state.account = ...`;
+
+Nella parte superiore della funzione `updateDashboard()`, aggiungere questa riga:
+
+```js
+const account = state.account;
+```
+
+Questa refattorizzazione di per sé non ha portato molti miglioramenti, ma l'idea era di gettare le basi per i prossimi cambiamenti.
+
+## Tenere traccia delle modifiche ai dati
+
+Ora che si è impostato l'oggetto `state` per memorizzare i dati, il passaggio successivo è centralizzare gli aggiornamenti. L'obiettivo è rendere più facile tenere traccia di eventuali modifiche e quando si verificano.
+
+Per evitare che vengano apportate modifiche all'oggetto `state` è anche una buona pratica considerarlo [*immutabile*](https://en.wikipedia.org/wiki/Immutable_object), nel senso che non può essere modificato affatto. Significa anche che si deve creare un nuovo oggetto di stato se si vuole cambiare qualcosa in esso. In questo modo, si crea una protezione [dagli effetti collaterali](https://it.wikipedia.org/wiki/Effetto_collaterale_(informatica)) potenzialmente indesiderati e si aprono possibilità per nuove funzionalità nella propria app come l'implementazione di funzioni di annulla/ripristina, semplificando anche il debug. Ad esempio, è possibile registrare tutte le modifiche apportate allo stato e conservare una cronologia delle modifiche per comprendere l'origine di un bug.
+
+In JavaScript, si può  utilizzare [`Object.freeze()`](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) per creare una versione immutabile di un oggetto. Se si prova ad apportare modifiche a un oggetto immutabile, verrà sollevata un'eccezione.
+
+✅ Si conosce la differenza tra un oggetto *shallow* e uno *deep* immutabile? Si può leggere [qui](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze) per saperne di più.
+
+### Attività
+
+Creare una nuova funzione `updateState()` :
+
+```js
+function updateState(property, newData) {
+  state = Object.freeze({
+    ...state,
+    [property]: newData
+  });
+}
+```
+
+In questa funzione, si crea un nuovo oggetto di stato e si copiano i dati dallo stato precedente utilizzando l' [*operatore spread (`...`)*](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Operators/Spread_syntax). Quindi si sovrascrive una particolare proprietà dell'oggetto state con i nuovi dati usando la [notazione tra parentesi quadre](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties) `[property]` per l'assegnazione. Infine, si blocca l'oggetto per impedire modifiche utilizzando `Object.freeze()`. Per ora si ha solo la proprietà `account` memorizzata nello stato, ma con questo approccio si possono aggiungere tutte le proprietà che servono nello stato.
+
+Si aggiornerà anche l'inizializzazione di `state` per assicurarsi che anche lo stato iniziale sia congelato:
+
+```js
+let state = Object.freeze({
+  account: null
+});
+```
+
+Successivamente, aggiornare la funzione `register` sostituendo l'istruzione `state.account = result;` con:
+
+```js
+updateState('account', result);
+```
+
+Fare lo stesso con la funzione `login` , sostituendo `state.account = data;` con:
+
+```js
+updateState('account', data);
+```
+
+Si coglie ora l'occasione per risolvere il problema della mancata cancellazione dei dati dell'account quando l'utente fa clic su *Logout*.
+
+Creare una nuova funzione `logout ()`:
+
+```js
+function logout() {
+  updateState('account', null);
+  navigate('/login');
+}
+```
+
+In `updateDashboard()`, sostituire il reindirizzamento `return navigate('/ login');` con `return logout()`;
+
+Provare a registrare un nuovo account, a disconnettersi e ad accedere nuovamente per verificare che tutto funzioni ancora correttamente.
+
+> Suggerimento: si può dare un'occhiata a tutti i cambiamenti di stato aggiungendo `console.log (state)` nella parte inferiore di `updateState()` e aprendo la console negli strumenti di sviluppo del  browser.
+
+## Persistere lo stato
+
+La maggior parte delle app web  deve conservare i dati per poter funzionare correttamente. Tutti i dati critici vengono solitamente archiviati su un database e accessibili tramite un'API del server, come nel nostro caso i dati dell'account utente. Ma a volte è anche interessante mantenere alcuni dati sulla parte client dell'app in esecuzione nel browser, per una migliore esperienza utente o per migliorare le prestazioni di caricamento.
+
+Quando si vuole mantenere i dati nel browser, ci sono alcune domande importanti da porsi:
+
+- *I dati sono sensibili?* Si dovrebbe evitare di memorizzare dati sensibili sul client, come le password degli utenti.
+- *Per quanto tempo si ha bisogno di conservare questi dati?* Si prevede di accedere a questi dati solo per la sessione corrente o si desidera che vengano memorizzati per sempre?
+
+Esistono diversi modi per archiviare le informazioni all'interno di un'app web, a seconda di ciò che si desidera ottenere. Ad esempio, si possono utilizzare gli URL per memorizzare una interrogazione di ricerca e renderla condivisibile tra gli utenti. Si possono anche utilizzare i [cookie HTTP](https://developer.mozilla.org/it/docs/Web/HTTP/Cookies) se i dati devono essere condivisi con il server, come le informazioni di [autenticazione](https://it.wikipedia.org/wiki/Autenticazione) .
+
+Un'altra opzione è utilizzare una delle tante API del browser per la memorizzazione dei dati. Due di loro sono particolarmente interessanti:
+
+- [`localStorage`](https://developer.mozilla.org/it/docs/Web/API/Window/localStorage): un [archivio chiave/valore](https://en.wikipedia.org/wiki/Key%E2%80%93value_database) che consente di persistere i dati specifici del sito Web corrente in diverse sessioni. I dati salvati in esso non scadono mai.
+- [`sessionStorage`](https://developer.mozilla.org/it/docs/Web/API/Window/sessionStorage): funziona come `localStorage` tranne per il fatto che i dati in esso memorizzati vengono cancellati al termine della sessione (alla chiusura del browser).
+
+Notare che entrambe queste API consentono solo di memorizzare [stringhe](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/String). Se si desidera archiviare oggetti complessi, si dovranno serializzare nel formato [JSON](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/JSON) utilizzando [`JSON.stringify()`](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify).
+
+✅ Se si desidera creare un'app web che non funziona con un server, è anche possibile creare un database sul client utilizzando l' [`API` IndexedDB](https://developer.mozilla.org/it/docs/Web/API/IndexedDB_API). Questo è riservato a casi d'uso avanzati o se è necessario archiviare una quantità significativa di dati, poiché è più complesso da usare.
+
+### Attività
+
+Si vuole che gli utenti rimangano collegati fino a quando non fanno clic esplicitamente sul pulsante *Logout* , quindi si utilizzerà `localStorage` per memorizzare i dati dell'account. Per prima cosa, si definisce una chiave che verrà usata per memorizzare i  dati.
+
+```js
+const storageKey = 'savedAccount';
+```
+
+Aggiungere quindi questa riga alla fine della funzione `updateState()`:
+
+```js
+localStorage.setItem(storageKey, JSON.stringify(state.account));
+```
+
+Con questo, i dati dell'account utente verranno mantenuti e sempre aggiornati poiché si sono centralizzati in precedenza tutti gli aggiornamenti di stato. È qui che si inizia a trarre vantaggio da tutte le rifattorizzazioni precedenti 🙂.
+
+Poiché i dati vengono salvati, ci si deve anche occupare di ripristinarli quando l'app viene caricata. Dato che si inizierà ad avere più codice di inizializzazione, potrebbe essere una buona idea creare una nuova funzione di inizializzazione `init` , che includa anche il codice precedente nella parte inferiore di `app.js`:
+
+```js
+function init() {
+  const savedAccount = localStorage.getItem(storageKey);
+  if (savedAccount) {
+    updateState('account', JSON.parse(savedAccount));
+  }
+
+  // Il codice di inizializzazione precedente
+  window.onpopstate = () => updateRoute();
+  updateRoute();
+}
+
+init();
+```
+
+Qui si recuperano i dati salvati e, se ce ne sono, si aggiorna lo stato di conseguenza. È importante farlo *prima* di aggiornare la rotta, poiché potrebbe esserci del codice che si basa sullo stato durante l'aggiornamento della pagina.
+
+Si può anche rendere la pagina del *cruscotto* la pagina predefinita dell'applicazione, poiché ora si sta persistendo i dati dell'account. Se non vengono trovati dati, il cruscotto si occupa comunque di reindirizzare alla pagina di *Login* . In `updateRoute()`, sostituire le istruzioni di contingenza `return navigate ('/login');` con `return navigate ('/dashboard') ;`.
+
+Ora accedere all'app e provare ad aggiornare la pagina, si dovrebbe rimanere sul cruscotto. Con quell'aggiornamento ci si è presi cura di tutti i problemi iniziali...
+
+## Aggiornare i dati
+
+...Si potrebbe uttavia anche averne creato uno nuovo. Oops!
+
+Andare al cruscotto utilizzando l'account `test`, quindi eseguire questo comando su un terminale per creare una nuova transazione:
+
+```sh
+curl --request POST \
+     --header "Content-Type: application/json" \
+     --data "{ \"date\": \"2020-07-24\", \"object\": \"Bought book\", \"amount\": -20 }" \
+     http://localhost:5000/api/accounts/test/transactions
+```
+
+Provare subito ad aggiornare la pagina del cruscotto nel browser. Che cosa accade? Si vede la nuova transazione?
+
+Lo stato viene mantenuto indefinitamente grazie a `localStorage`, ma ciò significa anche che non viene aggiornato fino a quando non si esce dall'app e si accede di nuovo!
+
+Una possibile strategia per risolvere questo problema è ricaricare i dati dell'account ogni volta che viene caricato il cruscotto, per evitare lo stallo dei dati.
+
+### Attività
+
+Creare una nuova funzione `updateAccountData`:
+
+```js
+async function updateAccountData() {
+  const account = state.account;
+  if (!account) {
+    return logout();
+  }
+
+  const data = await getAccount(account.user);
+  if (data.error) {
+    return logout();
+  }
+
+  updateState('account', data);
+}
+```
+
+Questo metodo controlla che si sia attualmente collegati, quindi ricarica i dati dell'account dal server.
+
+Creare un'altra funzione chiamata `refresh`:
+
+```js
+async function refresh() {
+  await updateAccountData();
+  updateDashboard();
+}
+```
+
+Questa aggiorna i dati dell'account, quindi si occupa dell'aggiornamento dell'HTML della pagina del cruscotto. È ciò che si deve chiamare quando viene caricata la rotta del cruscotto (dashboard). Aggiornare la definizione del percorso con:
+
+```js
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard', init: refresh }
+};
+```
+
+Provare a ricaricare il cruscotto ora, dovrebbe visualizzare i dati dell'account aggiornati.
+
+---
+
+## 🚀 Sfida
+
+Ora che i dati dell'account vengono ricaricati ogni volta che viene caricato il cruscotto, si pensa che sia ancora necessario persistere *tutti i dati dell'account* ?
+
+Provare a lavorare insieme per cambiare ciò che viene salvato e caricato da `localStorage` per includere solo ciò che è assolutamente necessario per il funzionamento dell'app.
+
+## Quiz Post-Lezione
+
+[Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/48?loc=it)
+
+## Compito
+
+[Implementare la finestra di dialogo "Aggiungi transazione"](assignment.it.md)
+
+Ecco un esempio di risultato dopo aver completato il compito:
+
+![Videata che mostra un esempio di dialogo "Aggiungi transazione"](../images/dialog.png)
diff --git a/7-bank-project/4-state-management/translations/assignment.it.md b/7-bank-project/4-state-management/translations/assignment.it.md
new file mode 100644
index 00000000..0b665b7d
--- /dev/null
+++ b/7-bank-project/4-state-management/translations/assignment.it.md
@@ -0,0 +1,25 @@
+# Implementare la finestra di dialogo "Aggiungi transazione"
+
+## Istruzioni
+
+All'app bancaria manca ancora una caratteristica importante: la possibilità di inserire nuove transazioni.
+Utilizzando tutto quanto appreso nelle quattro lezioni precedenti, implementare una finestra di dialogo "Aggiungi transazione":
+
+- Aggiungere un pulsante "Aggiungi transazione" nella pagina del cruscotto
+- Creare una nuova pagina con un modello HTML o usare JavaScript per mostrare/nascondere l'HTML della finestra di dialogo senza lasciare la pagina del cruscotto (si può  usare la proprietà [`hidden`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden) per quello o le classi CSS)
+- Assicurarsi di gestire l' [accessibilità dalla tastiera e dal lettore di schermo](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/) per la finestra di dialogo
+- Implementare un form HTML per ricevere i dati di input
+- Creare dati JSON dai dati del form e inviarli all'API
+- Aggiorna la pagina del cruscotto con i nuovi dati
+
+Guardare [le specifiche dell'API del server](../api/README.md) per vedere quale API si devono chiamare e qual è il formato JSON previsto.
+
+Ecco un esempio di risultato dopo aver completato il compito:
+
+![Videata che mostra un esempio di dialogo "Aggiungi transizione"](../images/dialog.png)
+
+## Rubrica
+
+| Criteri | Ottimo | Adeguato | Necessita miglioramento |
+| -------- | ------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------- | --------------------------------------------|
+|          | L'aggiunta di una transazione viene implementata seguendo completamente tutte le migliori pratiche viste nelle lezioni. | L'aggiunta di una transazione è implementata, ma non seguendo le migliori pratiche viste nelle lezioni o funzionante solo parzialmente. | L'aggiunta di una transazione non funziona affatto. |
diff --git a/7-bank-project/api/translations/README.it.md b/7-bank-project/api/translations/README.it.md
new file mode 100644
index 00000000..f4e0ba50
--- /dev/null
+++ b/7-bank-project/api/translations/README.it.md
@@ -0,0 +1,33 @@
+# API Bank
+
+> Bank API è costruita con [Node.js](https://nodejs.org) + [Express](https://expressjs.com/).
+
+L'API è già costruita e non fa parte dell'esercizio.
+
+Tuttavia, se interessa imparare come creare un'API come questa, si può seguire questa serie di video: https://aka.ms/NodeBeginner (i video da 17 a 21 riguardano questa specifica API).
+
+Si può anche dare un'occhiata a questo tutorial interattivo: https://aka.ms/learn/express-api
+
+## Mettere in esecuzione il server
+
+Assicurarsi di aver [installato](https://nodejs.org) Node.js.
+
+1. Eseguire il comando `git clone` per questo repository.
+2. Aprire un terminale nella cartella `api` , quindi eseguire `npm install`.
+3. Eseguire `npm start`.
+
+Il server dovrebbe mettersi in ascolto sulla porta `5000`.
+
+> Nota: tutte le voci vengono archiviate in memoria e non sono persistenti, quindi quando il server viene arrestato tutti i dati vengono persi.
+
+## Dettagli API
+
+| Rotta | Descrizione |
+---------------------------------------------|------------------------------------
+| GET /api/ | Ottiene informazioni sul server |
+| POST /api/accounts/ | Crea un account, ad es.: `{user: "Giovanni", description: "Il mio budget", currency: "EUR", balance: 100}` |
+| GET /api/accounts/:user | Ottiene tutti i dati per l'account specificato |
+| DELETE /api/accounts/: user | Rimuove l'account specificato |
+| POST /api/account/:user/transactions | Aggiunge una transazione, ad es .: `{date: '2020-07-23T18:25:43.511Z', object: "Acquistato un libro", amount: -20}` |
+| DELETE  /api/accounts/:user/transactions/:id | Rimuove la transazione specificata |
+
diff --git a/7-bank-project/solution/translations/README.it.md b/7-bank-project/solution/translations/README.it.md
new file mode 100644
index 00000000..ad75f742
--- /dev/null
+++ b/7-bank-project/solution/translations/README.it.md
@@ -0,0 +1,13 @@
+# App Bancaria
+
+> Soluzione di esempio per il progetto app bancaria, costruito con semplice HTML5, CSS e JavaScript (non è stata usato alcun framework o libreria).
+
+## Eseguire l'app
+
+Per prima cosa assicurarsi di avere in esecuzione il [server API](../../api/translations/README.it.md).
+
+Può essere usato un qualsiasi server web per eseguire l'app, ma visto che si dovrebbe avere installato comunque [Node.js](https://nodejs.org) per eseguire l'API, è possibile:
+
+1. Utilizzare il comando `git clone` con questo repository.
+2. Aprire un terminale, poi eseguire `npx lite-server solution`. Verrà fatto partire un server web di sviluppo sulla porta `3000`
+3. Aprire `http://localhost:3000` in un browser per eseguire l'app.
diff --git a/7-bank-project/translations/README.it.md b/7-bank-project/translations/README.it.md
new file mode 100644
index 00000000..1c8aae8d
--- /dev/null
+++ b/7-bank-project/translations/README.it.md
@@ -0,0 +1,21 @@
+# :dollar: Costruire una Banca
+
+In questo progetto si imparerà come costruire una banca immaginaria. Queste lezioni includono istruzioni su come disporre un'app web e fornire rotte, creare form, gestire lo stato e recuperare  dati da un'API da cui è possibile ottenere i dati della banca.
+
+| ![Videata1](../images/screen1.png) | ![Videata2](../images/screen2.png) |
+|--------------------------------|--------------------------------|
+
+## Lezioni
+
+1. [Modelli HTML e Rotte in un'app Web](../1-template-route/translations/README.it.md)
+2. [Creare un Form di Accesso e Registrazione](../2-forms/translations/README.it.md)
+3. [Metodi di Recupero e Utilizzo Dati](../3-data/translations/README.it.md)
+4. [Concetti di Gestione dello Stato](../4-state-management/translations/README.it.md)
+
+### Crediti
+
+Queste lezioni sono state scritte con il :hearts: da [Yohan Lasorsa](https://twitter.com/sinedied).
+
+Se interessati a imparare come costruire l' [API del server](../../api/tranlations/README.it.md) utilizzata in queste lezioni, è possibile seguire [questa serie di video](https://aka.ms/NodeBeginner) (in particolare i video da 17 a 21).
+
+Si può anche dare un'occhiata a [questo tutorial interattivo di apprendimento](https://aka.ms/learn/express-api).
\ No newline at end of file
diff --git a/quiz-app/src/App.vue b/quiz-app/src/App.vue
index d2867aac..d024add2 100644
--- a/quiz-app/src/App.vue
+++ b/quiz-app/src/App.vue
@@ -10,6 +10,7 @@
         <option>hi</option>
         <option>it</option>
         <option>gr</option>
+        <option>ms</option>
       </select>
     </nav>
     <div id="app">
diff --git a/quiz-app/src/assets/translations/index.js b/quiz-app/src/assets/translations/index.js
index a70a20a6..a8dfe116 100644
--- a/quiz-app/src/assets/translations/index.js
+++ b/quiz-app/src/assets/translations/index.js
@@ -6,6 +6,7 @@ import hi from './hi.json';
 import it from './it.json';
 import ja from './ja.json';
 import gr from './gr.json';
+import ms from './ms.json';
 
 //export const defaultLocale = 'en';
 
@@ -17,6 +18,7 @@ const messages = {
 	it: it[0],
 	ja: ja[0],
 	gr: gr[0],
+	ms: ms[0],
 };
 
 export default messages;
diff --git a/quiz-app/src/assets/translations/ms.json b/quiz-app/src/assets/translations/ms.json
new file mode 100644
index 00000000..2cd9561b
--- /dev/null
+++ b/quiz-app/src/assets/translations/ms.json
@@ -0,0 +1,2509 @@
+[
+	{
+		"title": "Pembangunan Web untuk Pemula: Kuiz",
+		"complete": "Tahniah, anda telah menyelesaikan kuiz!",
+		"error": "Maaf, cuba lagi",
+		"quizzes": [
+			{
+				"id": 1,
+				"title": "Pelajaran 1 - Pengenalan Bahasa Pengaturcaraan: Kuiz Pra Kuliah",
+				"quiz": [
+					{
+						"questionText": "Program boleh dibuat tanpa pencipta menulis kod apa pun",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "false"
+							}
+						]
+					},
+					{
+						"questionText": "Bahasa tahap rendah adalah pilihan yang popular untuk",
+						"answerOptions": [
+							{
+								"answerText": "Websites",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Hardware",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "Perisian permainan video",
+								"isCorrect": "false"
+							}
+						]
+					},
+					{
+						"questionText": "Alat mana yang kemungkinan besar terdapat di persekitaran pembangun web?",
+						"answerOptions": [
+							{
+								"answerText": "Perkakasan, seperti Raspberry Pi",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "DevTools Penyemak Imbas",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "Dokumentasi sistem operasi",
+								"isCorrect": "false"
+							}
+						]
+					}
+				]
+			},
+			{
+				"id": 2,
+				"title": "Pelajaran 1 - Pengenalan Bahasa Pengaturcaraan: Kuiz Pasca Kuliah",
+				"quiz": [
+					{
+						"questionText": "Bahasa apa yang kemungkinan besar anda gunakan untuk membuat laman web?",
+						"answerOptions": [
+							{
+								"answerText": "Kod Mesin",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "JavaScript",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "Bash",
+								"isCorrect": "false"
+							}
+						]
+					},
+					{
+						"questionText": "Persekitaran pembangunan adalah unik bagi setiap pembangun",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "false"
+							}
+						]
+					},
+					{
+						"questionText": "Apa yang akan dilakukan oleh pembangun untuk memperbaiki kod kereta?",
+						"answerOptions": [
+							{
+								"answerText": "Penyorotan sintaks",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Debugging",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "Pemformatan kod",
+								"isCorrect": "false"
+							}
+						]
+					}
+				]
+			},
+			{
+				"id": 3,
+				"title": "Pelajaran 2 - Pengenalan kepada GitHub: Kuiz Pra Kuliah",
+				"quiz": [
+					{
+						"questionText": "Bagaimana anda membuat repo Git?",
+						"answerOptions": [
+							{
+								"answerText": "git create",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "git start",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "git init",
+								"isCorrect": "true"
+							}
+						]
+					},
+					{
+						"questionText": "Apa yang dilakukan oleh git add?",
+						"answerOptions": [
+							{
+								"answerText": "Komit kod anda",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Menambah fail anda ke kawasan pementasan untuk mengesan",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "Menambah fail anda ke GitHub",
+								"isCorrect": "false"
+							}
+						]
+					},
+					{
+						"questionText": "Bagaimana anda memeriksa sama ada git dipasang pada komputer anda?",
+						"answerOptions": [
+							{
+								"answerText": "taip git --version",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "taip git --installed",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "taip git --init",
+								"isCorrect": "false"
+							}
+						]
+					}
+				]
+			},
+			{
+				"id": 4,
+				"title": "Pelajaran 2 - Pengenalan kepada GitHub: Kuiz Pasca Kuliah",
+				"quiz": [
+					{
+						"questionText": "Tempat untuk membandingkan dan membincangkan perbezaan yang diperkenalkan di cabang dengan ulasan, komen, ujian bersepadu, dan banyak lagi adalah:",
+						"answerOptions": [
+							{
+								"answerText": "GitHub",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Pull Request",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "Feature branch",
+								"isCorrect": "false"
+							}
+						]
+					},
+					{
+						"questionText": "Bagaimana anda mendapat semua komit dari remote branch?",
+						"answerOptions": [
+							{
+								"answerText": "git fetch",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "git pull",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "git commits -r",
+								"isCorrect": "false"
+							}
+						]
+					},
+					{
+						"questionText": "Bagaimana anda beralih ke branch?",
+						"answerOptions": [
+							{
+								"answerText": "git switch [branch-name]",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "git checkout [branch-name]",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "git load [branch-name]",
+								"isCorrect": "false"
+							}
+						]
+					}
+				]
+			},
+			{
+				"id": 5,
+				"title": "Pelajaran 3 - Membuat Laman Web yang Boleh Diakses: Kuiz Pra Kuliah",
+				"quiz": [
+					{
+						"questionText": "Laman web yang boleh diakses boleh diperiksa di mana alat penyemak imbas",
+						"answerOptions": [
+							{
+								"answerText": "Lighthouse",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "Deckhouse",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Cleanhouse",
+								"isCorrect": "true"
+							}
+						]
+					},
+					{
+						"questionText": "Anda memerlukan pembaca skrin fizikal untuk menguji kebolehaksesan bagi pengguna yang cacat penglihatan",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "true"
+							}
+						]
+					},
+					{
+						"questionText": "Kebolehcapaian hanya penting di laman web kerajaan",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "true"
+							}
+						]
+					}
+				]
+			},
+			{
+				"id": 6,
+				"title": "Pelajaran 3 - Membuat Laman Web yang Boleh Diakses: Kuiz Pasca Kuliah",
+				"quiz": [
+					{
+						"questionText": "Rumah Api hanya memeriksa masalah aksesibiliti",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "true"
+							}
+						]
+					},
+					{
+						"questionText": "Palet selamat warna menolong orang",
+						"answerOptions": [
+							{
+								"answerText": "buta warna",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "masalah penglihatan",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "kedua-dua perkara di atas",
+								"isCorrect": "true"
+							}
+						]
+					},
+					{
+						"questionText": "Pautan deskriptif sangat penting untuk laman web yang boleh diakses",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "false"
+							}
+						]
+					}
+				]
+			},
+			{
+				"id": 7,
+				"title": "Pelajaran 4 - Asas JavaScript - Jenis Data: Kuiz Pra Kuliah",
+				"quiz": [
+					{
+						"questionText": "Booleans adalah jenis data yang boleh anda gunakan untuk menguji panjang tali",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "true"
+							}
+						]
+					},
+					{
+						"questionText": "Berikut adalah operasi yang boleh anda lakukan pada rentetan",
+						"answerOptions": [
+							{
+								"answerText": "concatenation",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "appending",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "splicing",
+								"isCorrect": "false"
+							}
+						]
+					},
+					{
+						"questionText": "== dan === boleh ditukar ganti",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "true"
+							}
+						]
+					}
+				]
+			},
+			{
+				"id": 8,
+				"title": "Pelajaran 4 - Asas JavaScript - Jenis Data: Kuiz Pasca Kuliah",
+				"quiz": [
+					{
+						"questionText": "Pemalar adalah sama dengan let dan var untuk menyatakan pemboleh ubah kecuali",
+						"answerOptions": [
+							{
+								"answerText": "Pemalar mesti dimulakan",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "Pemalar boleh diubah",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Pemalar boleh ditugaskan semula",
+								"isCorrect": "false"
+							}
+						]
+					},
+					{
+						"questionText": "Nombor dan ____ adalah primitif JavaScript yang mengendalikan data berangka",
+						"answerOptions": [
+							{
+								"answerText": "bigint",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "boolean",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "star",
+								"isCorrect": "false"
+							}
+						]
+					},
+					{
+						"questionText": "Rentetan boleh berada di antara tanda petik tunggal dan dua",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "false"
+							}
+						]
+					}
+				]
+			},
+			{
+				"id": 9,
+				"title": "Pelajaran 5 - Asas JavaScript - Kaedah dan Fungsi: Kuiz Pra Kuliah",
+				"quiz": [
+					{
+						"questionText": "Apa itu hujah (argument)?",
+						"answerOptions": [
+							{
+								"answerText": "Ini adalah sesuatu yang anda nyatakan dalam definisi fungsi",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Ini adalah sesuatu yang anda gunakan dalam fungsi pada waktu pemanggilan",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "Ini sesuatu yang anda ada dengan orang yang anda kenali",
+								"isCorrect": "false"
+							}
+						]
+					},
+					{
+						"questionText": "Fungsi mesti mengembalikan sesuatu",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "true"
+							}
+						]
+					},
+					{
+						"questionText": "Anda boleh menamakan fungsi apa sahaja",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "benar, tetapi mestilah nama deskriptif",
+								"isCorrect": "true"
+							}
+						]
+					}
+				]
+			},
+			{
+				"id": 10,
+				"title": "Pelajaran 5 - Asas JavaScript - Kaedah dan Fungsi: Kuiz Pasca Kuliah",
+				"quiz": [
+					{
+						"questionText": "Hujah mesti disediakan untuk semua parameter dalam fungsi",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "true"
+							}
+						]
+					},
+					{
+						"questionText": "Apa yang dilakukan oleh nilai lalai?",
+						"answerOptions": [
+							{
+								"answerText": "Menetapkan nilai yang betul",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Memberi nilai permulaan untuk parameter sehingga kod anda masih berkelakuan jika anda menghilangkan argumen untuknya",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "Tidak mempunyai utiliti",
+								"isCorrect": "false"
+							}
+						]
+					},
+					{
+						"questionText": "Fungsi anak panah lemak membolehkan anda melakukannya",
+						"answerOptions": [
+							{
+								"answerText": "Buat fungsi berat",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Hilangkan kata kunci fungsi",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "Buat fungsi tanpa nama",
+								"isCorrect": "false"
+							}
+						]
+					}
+				]
+			},
+			{
+				"id": 11,
+				"title": "Pelajaran 6 - Asas JavaScript - Membuat Keputusan: Kuiz Pra Kuliah",
+				"quiz": [
+					{
+						"questionText": "Pengendali berikut == dipanggil",
+						"answerOptions": [
+							{
+								"answerText": "Kesaksamaan",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "Persamaan yang ketat",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Tugasan",
+								"isCorrect": "false"
+							}
+						]
+					},
+					{
+						"questionText": "Perbandingan dalam JavaScript mengembalikan jenis apa?",
+						"answerOptions": [
+							{
+								"answerText": "boolean",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "null",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "string",
+								"isCorrect": "false"
+							}
+						]
+					},
+					{
+						"questionText": "The ! simbol dalam JavaScript bermaksud:",
+						"answerOptions": [
+							{
+								"answerText": "Tidak logik",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "Penting",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Sama",
+								"isCorrect": "false"
+							}
+						]
+					}
+				]
+			},
+			{
+				"id": 12,
+				"title": "Pelajaran 6 - Asas JavaScript - Membuat Keputusan: Kuiz Pasca Kuliah",
+				"quiz": [
+					{
+						"questionText": "Apakah kod berikut yang akan dikembalikan: '1' == 1",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "null",
+								"isCorrect": "false"
+							}
+						]
+					},
+					{
+						"questionText": "Apakah kod berikut yang akan dikembalikan: '1' === 1",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "null",
+								"isCorrect": "false"
+							}
+						]
+					},
+					{
+						"questionText": "Pilih operator yang betul untuk menyatakan 'atau' logik",
+						"answerOptions": [
+							{
+								"answerText": "a | b",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "a || b",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "a or b",
+								"isCorrect": "false"
+							}
+						]
+					}
+				]
+			},
+			{
+				"id": 13,
+				"title": "Pelajaran 7 - Asas JavaScript - Susunan dan Gelung: Kuiz Pra Kuliah",
+				"quiz": [
+					{
+						"questionText": "Untuk merujuk pada item tertentu dalam array, anda akan menggunakan a",
+						"answerOptions": [
+							{
+								"answerText": "pendakap persegi []",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "indeks",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "pendakap kerinting {}",
+								"isCorrect": "false"
+							}
+						]
+					},
+					{
+						"questionText": "Bagaimana anda mendapatkan bilangan item dalam satu array?",
+						"answerOptions": [
+							{
+								"answerText": "Kaedah 'len (array)'",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Properti `size` pada array",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Properti `length` pada array",
+								"isCorrect": "true"
+							}
+						]
+					},
+					{
+						"questionText": "Dalam JavaScript, indeks bermula pada",
+						"answerOptions": [
+							{
+								"answerText": "0",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "1",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "2",
+								"isCorrect": "false"
+							}
+						]
+					}
+				]
+			},
+			{
+				"id": 14,
+				"title": "Pelajaran 7 - Asas JavaScript - Susunan dan Gelung: Kuiz Pasca Kuliah",
+				"quiz": [
+					{
+						"questionText": "Bahagian mana untuk loop yang perlu anda ubah untuk meningkatkan lelarannya dengan 5?",
+						"answerOptions": [
+							{
+								"answerText": "kondisi",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "counter",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "ekspresi-iterasi",
+								"isCorrect": "false"
+							}
+						]
+					},
+					{
+						"questionText": "Apa perbezaan antara while dan for loop untuk",
+						"answerOptions": [
+							{
+								"answerText": "A for-loop mempunyai pembilang dan ekspresi iterasi, di mana while hanya mempunyai keadaan",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "Sebuah while memiliki penghitung dan ekspresi-iterasi di mana for-loop hanya memiliki kondisi",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Mereka sama, hanya alias untuk satu sama lain",
+								"isCorrect": "false"
+							}
+						]
+					},
+					{
+						"questionText": "Diberikan kode for (let i = 1; i <5; i ++), berapa banyak iterasi yang akan dilakukan?",
+						"answerOptions": [
+							{
+								"answerText": "5",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "4",
+								"isCorrect": "true"
+							}
+						]
+					}
+				]
+			},
+			{
+				"id": 15,
+				"title": "Pelajaran 8 - Projek Terrarium - Pengenalan HTML: Kuiz Pra Kuliah",
+				"quiz": [
+					{
+						"questionText": "HTML bermaksud 'HyperText Mockup Language'",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "true"
+							}
+						]
+					},
+					{
+						"questionText": "Semua tag HTML memerlukan tag pembuka dan penutup",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "true"
+							}
+						]
+					},
+					{
+						"questionText": "Menggunakan penanda semantik adalah yang paling penting untuk",
+						"answerOptions": [
+							{
+								"answerText": "kebolehbacaan kod",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "pembaca skrin",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "penyelenggaraan",
+								"isCorrect": "false"
+							}
+						]
+					}
+				]
+			},
+			{
+				"id": 16,
+				"title": "Pelajaran 8 - Projek Terrarium - Pengenalan HTML: Kuiz Pasca Kuliah",
+				"quiz": [
+					{
+						"questionText": "Span dan Div boleh ditukar ganti",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "true"
+							}
+						]
+					},
+					{
+						"questionText": "Ketua dokumen HTML boleh mengandungi:",
+						"answerOptions": [
+							{
+								"answerText": "tag title",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "metadata",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "semua di atas",
+								"isCorrect": "true"
+							}
+						]
+					},
+					{
+						"questionText": "Anda tidak boleh menggunakan teg yang tidak digunakan dalam markup anda",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "salah, tapi mereka sudah tidak digunakan lagi karena alasan yang baik",
+								"isCorrect": "true"
+							}
+						]
+					}
+				]
+			},
+			{
+				"id": 17,
+				"title": "Pelajaran 9 - Projek Terrarium - Pengenalan kepada CSS: Kuiz Pra Kuliah",
+				"quiz": [
+					{
+						"questionText": "Elemen HTML mesti mempunyai kelas atau id untuk digayakan",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "true"
+							}
+						]
+					},
+					{
+						"questionText": "CSS bermaksud 'Complete Style Sheets'",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "true"
+							}
+						]
+					},
+					{
+						"questionText": "CSS can be used to create animations",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "false"
+							}
+						]
+					}
+				]
+			},
+			{
+				"id": 18,
+				"title": "Pelajaran 9 - Projek Terrarium - Pengenalan kepada CSS: Kuiz Pasca Kuliah",
+				"quiz": [
+					{
+						"questionText": "Anda boleh menulis CSS secara langsung di bahagian utama fail HTML anda",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "false"
+							}
+						]
+					},
+					{
+						"questionText": "Selalu perlu memasukkan CSS dalam aplikasi anda",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "false, tetapi jika anda mahu ia kelihatan baik, anda mungkin memerlukan CSS",
+								"isCorrect": "true"
+							}
+						]
+					},
+					{
+						"questionText": "Alat penyemak imbas mana yang boleh digunakan untuk memeriksa CSS?",
+						"answerOptions": [
+							{
+								"answerText": "Elemen",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Gaya",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "Rangkaian",
+								"isCorrect": "false"
+							}
+						]
+					}
+				]
+			},
+			{
+				"id": 19,
+				"title": "Pelajaran 10 - Projek Terrarium - Manipulasi DOM dan Penutupan: Kuiz Pra Kuliah",
+				"quiz": [
+					{
+						"questionText": "DOM bermaksud 'Document Object Management'",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "true"
+							}
+						]
+					},
+					{
+						"questionText": "DOM boleh dianggap sebagai pokok",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "false"
+							}
+						]
+					},
+					{
+						"questionText": "Dengan menggunakan Web API, anda boleh memanipulasi DOM",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "false"
+							}
+						]
+					}
+				]
+			},
+			{
+				"id": 20,
+				"title": "Pelajaran 10 - Projek Terrarium - Manipulasi DOM dan Penutupan: Kuiz Pasca Kuliah",
+				"quiz": [
+					{
+						"questionText": "DOM adalah model untuk mewakili dokumen di web",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "false"
+							}
+						]
+					},
+					{
+						"questionText": "Gunakan penutupan JavaScript untuk melakukan perkara berikut:",
+						"answerOptions": [
+							{
+								"answerText": "menulis fungsi dalam fungsi",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "sertakan DOM",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "tutup blok skrip",
+								"isCorrect": "false"
+							}
+						]
+					},
+					{
+						"questionText": "Isi tempat kosong: Penutupan berguna apabila satu atau lebih fungsi perlu mengakses fungsi luar ...",
+						"answerOptions": [
+							{
+								"answerText": "tatasusunan(array)",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "skop",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "fungsi",
+								"isCorrect": "false"
+							}
+						]
+					}
+				]
+			},
+			{
+				"id": 21,
+				"title": "Pelajaran 11 - Permainan Menaip: Kuiz Pra Kuliah",
+				"quiz": [
+					{
+						"questionText": "Pengaturcaraan berdasarkan acara adalah ketika pengguna",
+						"answerOptions": [
+							{
+								"answerText": "klik pada butang",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "mengubah nilai",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "berinteraksi dengan halaman",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "mana-mana perkara di atas",
+								"isCorrect": "true"
+							}
+						]
+					},
+					{
+						"questionText": "Dalam pengaturcaraan prosedur, fungsi dipanggil",
+						"answerOptions": [
+							{
+								"answerText": "bila-bila masa",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "mengikut urutan tertentu",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "kiri ke kanan",
+								"isCorrect": "false"
+							}
+						]
+					},
+					{
+						"questionText": "Kaedah universal yang dinyatakan dalam DOM untuk mendaftar pengendali acara dipanggil",
+						"answerOptions": [
+							{
+								"answerText": "addEventListener",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "addListener",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "addEvent",
+								"isCorrect": "false"
+							}
+						]
+					}
+				]
+			},
+			{
+				"id": 22,
+				"title": "Pelajaran 11 - Permainan Menaip: Kuiz Pasca Kuliah",
+				"quiz": [
+					{
+						"questionText": "Apa sahaja yang dilakukan pengguna di halaman menimbulkan peristiwa",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "false"
+							}
+						]
+					},
+					{
+						"questionText": "Acara biasa merangkumi",
+						"answerOptions": [
+							{
+								"answerText": "click_event",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "select_event",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "input_event",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "semua di atas",
+								"isCorrect": "true"
+							}
+						]
+					},
+					{
+						"questionText": "Anda boleh menggunakan fungsi tanpa nama untuk membuat pengendali acara",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "false"
+							}
+						]
+					}
+				]
+			},
+			{
+				"id": 23,
+				"title": "Pelajaran 12 - Projek Penyambungan Penyemak Imbas - Semua mengenai Penyemak Imbas: Kuiz Pra Kuliah",
+				"quiz": [
+					{
+						"questionText": "Anda boleh mendapatkan pelanjutan penyemak imbas dari",
+						"answerOptions": [
+							{
+								"answerText": "WalMart",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Kedai pelanjutan penyemak imbas",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "App store",
+								"isCorrect": "false"
+							}
+						]
+					},
+					{
+						"questionText": "NPM bermaksud",
+						"answerOptions": [
+							{
+								"answerText": "Node Package Manager",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "Netscape Primary Mix",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Natural Processing Manager",
+								"isCorrect": "false"
+							}
+						]
+					},
+					{
+						"questionText": "Penyemak imbas anda dapat melayani laman web dengan selamat dan tidak selamat",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "false"
+							}
+						]
+					}
+				]
+			},
+			{
+				"id": 24,
+				"title": "Pelajaran 12 - Projek Penyambungan Penyemak Imbas - Semua mengenai Penyemak Imbas: Kuiz Pasca Kuliah",
+				"quiz": [
+					{
+						"questionText": "World Wide Web dicipta oleh",
+						"answerOptions": [
+							{
+								"answerText": "Tom Barnard-Loft",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Tim Berners-Lee",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "Trish Berth-Pool",
+								"isCorrect": "false"
+							}
+						]
+					},
+					{
+						"questionText": "Penyemak imbas pertama dipanggil",
+						"answerOptions": [
+							{
+								"answerText": "WorldWideWeb",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "Mozilla",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Netscape",
+								"isCorrect": "false"
+							}
+						]
+					},
+					{
+						"questionText": "Penyemak imbas boleh menyimpan sejarah penyemakan imbas pengguna",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "false"
+							}
+						]
+					}
+				]
+			},
+			{
+				"id": 25,
+				"title": "Pelajaran 13 - Projek Penyambungan Penyemak Imbas - Panggil API, gunakan Penyimpanan Tempatan: Kuiz Pra-Kuliah",
+				"quiz": [
+					{
+						"questionText": "APIs bremaksud",
+						"answerOptions": [
+							{
+								"answerText": "Application Programming Interfaces",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "A Programming Inference",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Anti Proven Intentions",
+								"isCorrect": "false"
+							}
+						]
+					},
+					{
+						"questionText": "Gunakan API untuk berinteraksi",
+						"answerOptions": [
+							{
+								"answerText": "Aset lain yang disambungkan ke web",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Pangkalan data",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Salah satu perkara di atas",
+								"isCorrect": "true"
+							}
+						]
+					},
+					{
+						"questionText": "Sesiapa sahaja boleh membuat API",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "false"
+							}
+						]
+					}
+				]
+			},
+			{
+				"id": 26,
+				"title": "Pelajaran 13 - Projek Penyambungan Penyemak Imbas - Panggil API, gunakan Penyimpanan Tempatan: Kuiz Pasca Kuliah",
+				"quiz": [
+					{
+						"questionText": "LocalStorage dibersihkan setiap kali anda menutup tetingkap penyemak imbas",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "true"
+							}
+						]
+					},
+					{
+						"questionText": "Tetingkap penyemak imbas utama mengawal LocalStorage pelanjutan penyemak imbas",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "false"
+							}
+						]
+					},
+					{
+						"questionText": "REST dalam konteks API bermaksud",
+						"answerOptions": [
+							{
+								"answerText": "Representational State Transfer",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "Returning State Tasks",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Rendering State To Browser",
+								"isCorrect": "false"
+							}
+						]
+					}
+				]
+			},
+			{
+				"id": 27,
+				"title": "Pelajaran 14 - Projek Sambungan Penyemak Imbas - Ketahui mengenai Tugas dan Prestasi Latar Belakang: Kuiz Pra Kuliah",
+				"quiz": [
+					{
+						"questionText": "Uji prestasi aplikasi anda",
+						"answerOptions": [
+							{
+								"answerText": "Menggunakan alat penyemak imbas",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "Menggunakan pakej perisian yang berasingan",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Secara manual",
+								"isCorrect": "false"
+							}
+						]
+					},
+					{
+						"questionText": "Prestasi' laman web adalah analisis mengenai",
+						"answerOptions": [
+							{
+								"answerText": "Berapa cepat ia memuatkan",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Seberapa pantas kod di dalamnya berjalan",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Kedua-dua di atas",
+								"isCorrect": "true"
+							}
+						]
+					},
+					{
+						"questionText": "Secara keseluruhan, 'berat' laman web sejak beberapa tahun kebelakangan ini",
+						"answerOptions": [
+							{
+								"answerText": "semakin ringan",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "semakin berat",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "sama",
+								"isCorrect": "false"
+							}
+						]
+					}
+				]
+			},
+			{
+				"id": 28,
+				"title": "Pelajaran 14 - Projek Pelanjutan Penyemak Imbas - Ketahui mengenai Tugas dan Prestasi Latar Belakang: Kuiz Pasca Kuliah",
+				"quiz": [
+					{
+						"questionText": "Untuk mendapatkan gambaran yang lebih baik mengenai prestasi laman web anda, kosongkan cache dan muatkan semula profiler tersebut",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "false"
+							}
+						]
+					},
+					{
+						"questionText": "Sambungan penyemak imbas sememangnya berprestasi",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "true"
+							}
+						]
+					},
+					{
+						"questionText": "Analisis yang berikut untuk masalah prestasi",
+						"answerOptions": [
+							{
+								"answerText": "DOM traversals",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "JavaScript optimizations",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Asset management",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Semua di atas",
+								"isCorrect": "true"
+							}
+						]
+					}
+				]
+			},
+			{
+				"id": 29,
+				"title": "Pelajaran 15 - Permainan Angkasa - Pengenalan: Kuiz Pra Kuliah",
+				"quiz": [
+					{
+						"questionText": "JavaScript adalah bahasa yang tidak popular untuk membina permainan",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "true"
+							}
+						]
+					},
+					{
+						"questionText": "Pub / Sub adalah corak pilihan untuk menguruskan aset dan aliran permainan",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "false"
+							}
+						]
+					},
+					{
+						"questionText": "Pewarisan objek dapat dikendalikan dengan menggunakan kelas atau komposisi",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "false"
+							}
+						]
+					}
+				]
+			},
+			{
+				"id": 30,
+				"title": "Pelajaran 15 - Permainan Angkasa - Pengenalan: Kuiz Pasca Kuliah",
+				"quiz": [
+					{
+						"questionText": "Kelas bergantung pada pewarisan untuk menganggap tingkah laku",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "false"
+							}
+						]
+					},
+					{
+						"questionText": "Komposisi adalah corak reka bentuk yang disukai untuk objek permainan",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "true"
+							}
+						]
+					},
+					{
+						"questionText": "Pub/Sub bermaksud:",
+						"answerOptions": [
+							{
+								"answerText": "Publish/Subscribe",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "Print/Staple",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Publish/Sanitize",
+								"isCorrect": "false"
+							}
+						]
+					}
+				]
+			},
+			{
+				"id": 31,
+				"title": "Pelajaran 16 - Permainan Angkasa - Lukis Pahlawan dan Monster ke Kanvas: Kuiz Pra Kuliah",
+				"quiz": [
+					{
+						"questionText": "Elemen Canvas adalah yang anda gunakan untuk melukis di skrin",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "false"
+							}
+						]
+					},
+					{
+						"questionText": "Anda hanya dapat melukis bentuk geometri sederhana menggunakan Canvas API",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "true"
+							}
+						]
+					},
+					{
+						"questionText": "Titik 0,0 berada di kiri bawah",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "true"
+							}
+						]
+					}
+				]
+			},
+			{
+				"id": 32,
+				"title": "Pelajaran 16 - Permainan Angkasa - Lukis Pahlawan dan Monster ke Kanvas: Kuiz Pasca Kuliah",
+				"quiz": [
+					{
+						"questionText": "Anda boleh melakukan operasi melukis terus di Kanvas",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "true"
+							}
+						]
+					},
+					{
+						"questionText": "Anda mendengar peristiwa muatan untuk mengetahui bila gambar dimuat secara tidak segerak",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "false"
+							}
+						]
+					},
+					{
+						"questionText": "Anda melukis gambar ke skrin dengan operasi yang disebut:",
+						"answerOptions": [
+							{
+								"answerText": "paintImage()",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "drawImage()",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "draw()",
+								"isCorrect": "false"
+							}
+						]
+					}
+				]
+			},
+			{
+				"id": 33,
+				"title": "Pelajaran 17 - Permainan Angkasa - Menambah Gerak: Kuiz Pra Kuliah",
+				"quiz": [
+					{
+						"questionText": "Sebarang objek di layar dapat menerima acara papan kekunci",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "false"
+							}
+						]
+					},
+					{
+						"questionText": "Anda boleh menggunakan kaedah yang sama untuk mendengarkan peristiwa penting dan acara tetikus",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "true"
+							}
+						]
+					},
+					{
+						"questionText": "Untuk membuat sesuatu berlaku secara berkala, anda menggunakan fungsi apa?",
+						"answerOptions": [
+							{
+								"answerText": "setInterval()",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "setTimeout()",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "sleep()",
+								"isCorrect": "false"
+							}
+						]
+					}
+				]
+			},
+			{
+				"id": 34,
+				"title": "Pelajaran 17 - Permainan Angkasa - Menambah Gerak: Kuiz Pasca Kuliah",
+				"quiz": [
+					{
+						"questionText": "Anda selalu perlu melukis semula skrin",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "true"
+							}
+						]
+					},
+					{
+						"questionText": "Apakah gelung permainan (game loop) ?",
+						"answerOptions": [
+							{
+								"answerText": "Fungsi yang memastikan permainan dapat dimulakan semula",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Fungsi yang menentukan seberapa pantas permainan harus dijalankan",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Fungsi yang dipanggil secara berkala dan menarik apa yang pengguna harus lihat",
+								"isCorrect": "true"
+							}
+						]
+					},
+					{
+						"questionText": "Kes yang baik untuk melukis semula skrin adalah",
+						"answerOptions": [
+							{
+								"answerText": "Interaksi pengguna berlaku",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Sesuatu telah bergerak",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "Masa telah berlalu",
+								"isCorrect": "false"
+							}
+						]
+					}
+				]
+			},
+			{
+				"id": 35,
+				"title": "Pelajaran 18 - Permainan Angkasa - Menambah Laser dan Mengesan Perlanggaran: Kuiz Pra Kuliah",
+				"quiz": [
+					{
+						"questionText": "Pengesanan perlanggaran adalah bagaimana kita mengesan jika dua perkara bertembung",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "false"
+							}
+						]
+					},
+					{
+						"questionText": "Bagaimana kita boleh mengeluarkan item dari skrin?",
+						"answerOptions": [
+							{
+								"answerText": "Hubungi pemungut sampah",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Tandakan sebagai mati, hanya cat bukan benda mati lain kali kita melukis skrin",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "Letakkan item pada koordinat negatif",
+								"isCorrect": "false"
+							}
+						]
+					},
+					{
+						"questionText": "Kaedah yang baik untuk mensimulasikan penembakan laser dalam JavaScript adalah:",
+						"answerOptions": [
+							{
+								"answerText": "membuat elemen visual bertindak balas terhadap peristiwa penting",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "buat gif animasi",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "membuat musuh meletup pada selang waktu",
+								"isCorrect": "false"
+							}
+						]
+					}
+				]
+			},
+			{
+				"id": 36,
+				"title": "Pelajaran 18 - Permainan Angkasa - Menambah Laser dan Mengesan Perlanggaran: Kuiz Pasca Kuliah",
+				"quiz": [
+					{
+						"questionText": "Dalam pengesanan perlanggaran anda membandingkan dua",
+						"answerOptions": [
+							{
+								"answerText": "bulatan dan sama ada mereka bersilang",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "segi empat tepat dan sama ada mereka bersilang",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "jarak antara dua titik",
+								"isCorrect": "false"
+							}
+						]
+					},
+					{
+						"questionText": "Sebab untuk melaksanakan kesan cooldown adalah kerana",
+						"answerOptions": [
+							{
+								"answerText": "Menjadikan permainan lebih sukar kerana anda tidak dapat menembak laser berulang kali untuk menghancurkan musuh",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "JavaScript hanya dapat menghasilkan sejumlah peristiwa per unit waktu, jadi anda perlu menghadkannya",
+								"isCorrect": "true"
+							}
+						]
+					},
+					{
+						"questionText": "Pemalar dikenal pasti dalam kod kerana",
+						"answerOptions": [
+							{
+								"answerText": "mereka ditulis dengan huruf besar",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "mereka mempunyai nama tertentu",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "mereka ditulis dalam kes kebab-seperti ini",
+								"isCorrect": "false"
+							}
+						]
+					}
+				]
+			},
+			{
+				"id": 37,
+				"title": "Pelajaran 19 - Permainan Angkasa - Pemarkahan dan Kehidupan: Kuiz Pra Kuliah",
+				"quiz": [
+					{
+						"questionText": "Bagaimana anda melukis teks pada layar menggunakan elemen Canvas?",
+						"answerOptions": [
+							{
+								"answerText": "Letakkan teks di dalam elemen div atau span",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Panggil drawText () pada elemen Kanvas",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Panggil fillText () pada objek konteks",
+								"isCorrect": "true"
+							}
+						]
+					},
+					{
+						"questionText": "Mengapa anda mempunyai konsep 'nyawa' dalam permainan?",
+						"answerOptions": [
+							{
+								"answerText": "Untuk menunjukkan berapa banyak kerosakan yang boleh anda ambil",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Supaya permainan tidak berakhir dengan segera, tetapi anda mempunyai banyak peluang sebelum permainan berakhir",
+								"isCorrect": "true"
+							}
+						]
+					},
+					{
+						"questionText": "Tambahkan warna pada teks pada Kanvas menggunakan",
+						"answerOptions": [
+							{
+								"answerText": "fillColor",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "fillStyle",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "textAlign",
+								"isCorrect": "false"
+							}
+						]
+					}
+				]
+			},
+			{
+				"id": 38,
+				"title": "Pelajaran 19 - Permainan Angkasa - Pemarkahan dan Kehidupan: Kuiz Pasca Kuliah",
+				"quiz": [
+					{
+						"questionText": "Apa cara yang menyeronokkan untuk menunjukkan berapa banyak nyawa yang ditinggalkan oleh pemain?",
+						"answerOptions": [
+							{
+								"answerText": "sebilangan kapal",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "sistem mata",
+								"isCorrect": "true"
+							}
+						]
+					},
+					{
+						"questionText": "Bagaimana anda memusatkan teks di tengah-tengah skrin menggunakan elemen Canvas?",
+						"answerOptions": [
+							{
+								"answerText": "Guna Flexbox",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Anda mengarahkan teks dilukis pada koordinat x lebar tetingkap klien / 2",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "Anda menetapkan properti textAlign ke pusat nilai pada objek konteks",
+								"isCorrect": "false"
+							}
+						]
+					},
+					{
+						"questionText": "Dalam kod, tolak kehidupan seperti ini:",
+						"answerOptions": [
+							{
+								"answerText": "this.life-",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "this.life--",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "this.life++",
+								"isCorrect": "false"
+							}
+						]
+					}
+				]
+			},
+			{
+				"id": 39,
+				"title": "Pelajaran 20 - Permainan Angkasa - Tamat dan Mulakan Semula: Kuiz Pra Kuliah",
+				"quiz": [
+					{
+						"questionText": "Bilakah masa yang baik untuk memulakan semula permainan",
+						"answerOptions": [
+							{
+								"answerText": "apabila pemain menang atau kalah",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "bila-bila masa",
+								"isCorrect": "false"
+							}
+						]
+					},
+					{
+						"questionText": "Bilakah permainan harus berakhir",
+						"answerOptions": [
+							{
+								"answerText": "ketika kapal musuh musnah",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "apabila kapal wira musnah",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "semasa mata dikumpulkan",
+								"isCorrect": "false"
+							}
+						]
+					},
+					{
+						"questionText": "Cara yang baik untuk menambahkan tahap ke permainan anda adalah:",
+						"answerOptions": [
+							{
+								"answerText": "Menambah jumlah mata yang diperlukan untuk menyelesaikan tahap tertentu",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "Tambahkan lebih banyak pemain ke permainan",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Tambahkan lebih banyak grafik ke permainan",
+								"isCorrect": "false"
+							}
+						]
+					}
+				]
+			},
+			{
+				"id": 40,
+				"title": "Pelajaran 20 - Permainan Angkasa - Tamat dan Mulakan Semula: Kuiz Pasca Kuliah",
+				"quiz": [
+					{
+						"questionText": "Apakah corak yang baik untuk digunakan apabila keadaan akhir permainan dipenuhi?",
+						"answerOptions": [
+							{
+								"answerText": "Paparkan mesej yang sesuai",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Hentikan permainan",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Paparkan mesej yang sesuai, tawarkan pemain untuk memulakan semula, dan tunjukkan kunci apa yang harus dipukul untuk tindakan itu",
+								"isCorrect": "true"
+							}
+						]
+					},
+					{
+						"questionText": "Anda harus menawarkan memulakan semula hanya apabila permainan telah berakhir",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "true"
+							}
+						]
+					},
+					{
+						"questionText": "Cara yang baik untuk membersihkan EventEmitter ketika mengakhiri permainan adalah:",
+						"answerOptions": [
+							{
+								"answerText": "membersihkan pendengar",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "membersihkan skrin",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "menutup tingkap permainan",
+								"isCorrect": "false"
+							}
+						]
+					}
+				]
+			},
+			{
+				"id": 41,
+				"title": "Pelajaran 21 - Projek Bank - Templat dan Laluan HTML dalam Aplikasi Web: Kuiz Pra Kuliah",
+				"quiz": [
+					{
+						"questionText": "Anda perlu membuat banyak fail HTML untuk memaparkan skrin yang berbeza dalam aplikasi web",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "true"
+							}
+						]
+					},
+					{
+						"questionText": "Anda boleh menyimpan dan menyimpan data secara tempatan dalam aplikasi web",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "false"
+							}
+						]
+					},
+					{
+						"questionText": "Apakah penyedia data terbaik untuk aplikasi web?",
+						"answerOptions": [
+							{
+								"answerText": "Pangkalan data tempatan",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Objek JavaScript",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Pelayan dengan JSON API",
+								"isCorrect": "true"
+							}
+						]
+					}
+				]
+			},
+			{
+				"id": 42,
+				"title": "Pelajaran 21 - Templat dan Laluan HTML Projek Bank dalam Aplikasi Web: Kuiz Pasca Kuliah",
+				"quiz": [
+					{
+						"questionText": "Templat HTML adalah sebahagian dari DOM secara lalai",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "true"
+							}
+						]
+					},
+					{
+						"questionText": "Bahagian URL mana yang diperlukan untuk penghalaan?",
+						"answerOptions": [
+							{
+								"answerText": "window.location.pathname",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "window.location.origin",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "kedua-duanya",
+								"isCorrect": "true"
+							}
+						]
+					},
+					{
+						"questionText": "Apakah nama peristiwa yang dicetuskan ketika memanggil fungsi history.pushState ()?",
+						"answerOptions": [
+							{
+								"answerText": "pushstate",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "popstate",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "navigate",
+								"isCorrect": "false"
+							}
+						]
+					}
+				]
+			},
+			{
+				"id": 43,
+				"title": "Pelajaran 22 - Projek Bank - Bina Log Masuk dan Pendaftaran: Kuiz Pra Kuliah",
+				"quiz": [
+					{
+						"questionText": "Bentuk HTML membolehkan anda mengirim input pengguna ke pelayan tanpa menggunakan JavaScript",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "false"
+							}
+						]
+					},
+					{
+						"questionText": "Elemen <label> adalah wajib bagi setiap kawalan bentuk",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "true"
+							}
+						]
+					},
+					{
+						"questionText": "Adalah selamat untuk menghantar data borang ke pelayan melalui HTTP",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "true"
+							}
+						]
+					}
+				]
+			},
+			{
+				"id": 44,
+				"title": "Pelajaran 22 - Projek Bank - Bina Log Masuk dan Pendaftaran: Kuiz Pasca Kuliah",
+				"quiz": [
+					{
+						"questionText": "Menggunakan elemen <label> dalam bentuk hanya untuk menjadikan bentuknya cantik",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "true"
+							}
+						]
+					},
+					{
+						"questionText": "URL dihantar ke pelayan di bahagian mana borang?",
+						"answerOptions": [
+							{
+								"answerText": "atribut tindakan",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "atribut kaedah",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "kedua-duanya",
+								"isCorrect": "false"
+							}
+						]
+					},
+					{
+						"questionText": "Atribut mana yang boleh anda gunakan untuk menetapkan ukuran maksimum teks <input>?",
+						"answerOptions": [
+							{
+								"answerText": "max",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "maxlength",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "pattern",
+								"isCorrect": "false"
+							}
+						]
+					}
+				]
+			},
+			{
+				"id": 45,
+				"title": "Pelajaran 23 - Projek Bank - Kaedah Mengambil dan Menggunakan Data: Kuiz Pra Kuliah",
+				"quiz": [
+					{
+						"questionText": "Anda biasanya mengambil data dari pelayan secara serentak dalam penyemak imbas",
+						"answerOptions": [
+							{
+								"answerText": "true, tetapi async adalah yang terbaik!",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "false"
+							}
+						]
+					},
+					{
+						"questionText": "Apakah format yang paling biasa digunakan untuk menukar data di web?",
+						"answerOptions": [
+							{
+								"answerText": "HTML",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "XML",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "JSON",
+								"isCorrect": "true"
+							}
+						]
+					},
+					{
+						"questionText": "Tidak ada cara untuk menghalang laman web mengakses API pelayan awam",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "true"
+							}
+						]
+					}
+				]
+			},
+			{
+				"id": 46,
+				"title": "Pelajaran 23 - Kaedah Projek Bank Mengambil dan Menggunakan Data: Kuiz Pasca Kuliah",
+				"quiz": [
+					{
+						"questionText": "Dalam aplikasi Satu halaman, HTML dimuat sekali dan tidak pernah dikemas kini",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "true"
+							}
+						]
+					},
+					{
+						"questionText": "Mengapakah penting untuk tidak mempercayai data yang berasal dari input pengguna?",
+						"answerOptions": [
+							{
+								"answerText": "kerana menggunakan watak khas boleh menjadikan UI jelek.",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "kerana boleh mengandungi kata-kata yang tidak masuk akal atau menyinggung perasaan.",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "kerana dapat digunakan sebagai vektor serangan untuk melaksanakan skrip jahat.",
+								"isCorrect": "true"
+							}
+						]
+					},
+					{
+						"questionText": "Apakah nama API untuk menghantar permintaan HTTP tidak segerak ke pelayan web?",
+						"answerOptions": [
+							{
+								"answerText": "request()",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "fetch()",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "ajax()",
+								"isCorrect": "false"
+							}
+						]
+					}
+				]
+			},
+			{
+				"id": 47,
+				"title": "Pelajaran 24 - Projek Bank - Konsep Pengurusan Negeri: Kuiz Pra Kuliah",
+				"quiz": [
+					{
+						"questionText": "Apakah objek yang tidak berubah?",
+						"answerOptions": [
+							{
+								"answerText": "Objek yang ditakrifkan sebagai pemalar",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Objek yang tidak dapat diubah setelah dibuat ",
+								"isCorrect": "true"
+							},
+							{
+								"answerText": "Salinan objek yang ada",
+								"isCorrect": "false"
+							}
+						]
+					},
+					{
+						"questionText": "Apa faedah yang anda peroleh daripada menggunakan pengurusan negeri?",
+						"answerOptions": [
+							{
+								"answerText": "Anda boleh mengesan setiap tempat yang dikemas kini negeri ini",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Lebih mudah untuk menyahpepijat kod",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Semua di atas",
+								"isCorrect": "true"
+							}
+						]
+					},
+					{
+						"questionText": "Apakah kaedah terbaik untuk mengekalkan data pengguna kritikal dalam pelbagai sesi?",
+						"answerOptions": [
+							{
+								"answerText": "Guna fail",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Menggunakan API LocalStorage penyemak imbas",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "In a database behind a server API",
+								"isCorrect": "true"
+							}
+						]
+					}
+				]
+			},
+			{
+				"id": 48,
+				"title": "Pelajaran 24 - Projek Bank - Konsep Pengurusan Negeri: Kuiz Pasca Kuliah",
+				"quiz": [
+					{
+						"questionText": "Apa pendapat anda tentang pengurusan negeri?",
+						"answerOptions": [
+							{
+								"answerText": "Penguatkuasaan undang-undang & ketertiban",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Mencatat keadaan antara muka pengguna dari masa ke masa",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Menjaga aliran data aplikasi anda bersih dan menyegerakkan antara muka pengguna dengan data",
+								"isCorrect": "true"
+							}
+						]
+					},
+					{
+						"questionText": "Bagaimana anda dapat mengawasi keadaan sesi pengguna?",
+						"answerOptions": [
+							{
+								"answerText": "HTTP cookies",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Storan tempatan atau sesi",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "Semua di atas",
+								"isCorrect": "true"
+							}
+						]
+					},
+					{
+						"questionText": "Mematikan objek selalu merupakan kaedah terbaik untuk mengemasinya",
+						"answerOptions": [
+							{
+								"answerText": "true",
+								"isCorrect": "false"
+							},
+							{
+								"answerText": "false",
+								"isCorrect": "true"
+							}
+						]
+					}
+				]
+			}
+		]
+	}
+]
\ No newline at end of file