Merge branch 'main' into dependabot/npm_and_yarn/7-bank-project/api/word-wrap-1.2.4

2025-08-13 18:24:33 +02:00 · 2025-05-29 12:24:40 -04:00
parent 7777b289da 595e9d21f4
commit 6c9a208eef
59 changed files with 4286 additions and 20594 deletions
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@@ -0,0 +1,15 @@
+{
+  "image": "mcr.microsoft.com/devcontainers/universal:2",
+  "features": {
+    "ghcr.io/devcontainers/features/github-cli:1": {}
+  },
+    "customizations": {
+    "vscode": {
+      "extensions": [        
+        "GitHub.copilot",
+        "ms-vscode.azure-account",
+        "ms-azuretools.vscode-azurestaticwebapps"
+      ]
+    }
+  }
+}
--- a/.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml
+++ b/.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml
@@ -1,13 +1,6 @@
 name: Azure Static Web Apps CI/CD

-on:
-  push:
-    branches:
-      - main
-  pull_request:
-    types: [opened, synchronize, reopened, closed]
-    branches:
-      - main
+on: workflow_dispatch

 jobs:
  build_and_deploy_job:
--- a/.github/workflows/links.yml
+++ b/.github/workflows/links.yml
@@ -0,0 +1,29 @@
+name: Links
+
+on:
+  repository_dispatch:
+  workflow_dispatch:
+  schedule:
+    - cron: "00 18 * * 0"
+
+jobs:
+  linkChecker:
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write # required for peter-evans/create-issue-from-file
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Link Checker
+        id: lychee
+        uses: lycheeverse/lychee-action@v2
+        with:
+          fail: false
+
+      - name: Create Issue From File
+        if: steps.lychee.outputs.exit_code != 0
+        uses: peter-evans/create-issue-from-file@v5
+        with:
+          title: Link Checker Report
+          content-filepath: ./lychee/out.md
+          labels: report, automated issue
--- a/1-getting-started-lessons/1-intro-to-programming-languages/README.md
+++ b/1-getting-started-lessons/1-intro-to-programming-languages/README.md
@@ -6,7 +6,7 @@ This lesson covers the basics of programming languages. The topics covered here
 > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)

 ## Pre-Lecture Quiz
-[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1)
+[Pre-lecture quiz](https://forms.office.com/r/dru4TE0U9n?origin=lprLink)

 ## Introduction

@@ -120,7 +120,7 @@ Developers rely on editors for a few additional reasons:
  - [teletype](https://atom.io/packages/teletype)
  - [atom-beautify](https://atom.io/packages/atom-beautify)
  
- [www.sublimetext](https://www.sublimetext.com/)
+- [Sublimetext](https://www.sublimetext.com/)
  - [emmet](https://emmet.io/)
  - [SublimeLinter](http://www.sublimelinter.com/en/stable/)

--- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.zh-cn.md
+++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.zh-cn.md
@@ -2,7 +2,7 @@

 这节课涵盖了编程语言的基础知识，涉及到的内容适用于如今大多数现代编程语言。在“工具介绍”部分，你会了解到一些对开发者很有用的软件。

-![Intro Programming](/sketchnotes/webdev101-programming.png)
+![Intro Programming](../../../sketchnotes/webdev101-programming.png)
 > 涂鸦笔记作者：[Tomomi Imura](https://twitter.com/girlie_mac)

 ## 课前小测
--- a/2-js-basics/3-making-decisions/README.md
+++ b/2-js-basics/3-making-decisions/README.md
@@ -1,9 +1,11 @@
 # JavaScript Basics: Making Decisions

 ![JavaScript Basics - Making decisions](../../sketchnotes/webdev101-js-decisions.png)
+
 > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)

 ## Pre-Lecture Quiz
+
 [Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/11)

 Making decisions and controlling the order in which your code runs makes your code reusable and robust. This section covers the syntax for controlling data flow in JavaScript and its significance when used with Boolean data types
@@ -13,9 +15,10 @@ Making decisions and controlling the order in which your code runs makes your co
 > 🎥 Click the image above for a video about making decisions.

 > You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon)!
+
 ## A Brief Recap on Booleans

-Booleans can be only two values: `true` or `false`. Booleans help make decisions on which lines of code should run when certain conditions are met.
+Booleans can have only two values: `true` or `false`. Booleans help make decisions on which lines of code should run when certain conditions are met.

 Set your boolean to be true or false like this:

@@ -44,7 +47,7 @@ Operators are used to evaluate conditions by making comparisons that will create
 The if statement will run code in between its blocks if the condition is true.

 ```javascript
-if (condition){
+if (condition) {
  //Condition is true. Code in this block will run.
 }
 ```
@@ -55,7 +58,7 @@ Logical operators are often used to form the condition.
 let currentMoney;
 let laptopPrice;

-if (currentMoney >= laptopPrice){
+if (currentMoney >= laptopPrice) {
  //Condition is true. Code in this block will run.
  console.log("Getting a new laptop!");
 }
@@ -69,11 +72,10 @@ The `else` statement will run the code in between its blocks when the condition
 let currentMoney;
 let laptopPrice;

-if (currentMoney >= laptopPrice){
+if (currentMoney >= laptopPrice) {
  //Condition is true. Code in this block will run.
  console.log("Getting a new laptop!");
-}
-else{
+} else {
  //Condition is false. Code in this block will run.
  console.log("Can't afford a new laptop, yet!");
 }
@@ -81,13 +83,12 @@ else{

 ✅ Test your understanding of this code and the following code by running it in a browser console. Change the values of the currentMoney and laptopPrice variables to change the returned `console.log()`.

-
 ## Switch Statement

-The `switch` statement is used to perform different actions based on different conditions.Use the `switch` statement to select one of many code blocks to be executed.
+The `switch` statement is used to perform different actions based on different conditions. Use the `switch` statement to select one of many code blocks to be executed.

 ```javascript
-switch(expression) {
+switch (expression) {
  case x:
    // code block
    break;
@@ -104,21 +105,20 @@ switch(expression) {
 let a = 2;

 switch (a) {
-
  case 1:
-        a = 'one';
+    a = "one";
    break;
  case 2:
-        a = 'two';
+    a = "two";
    break;
  default:
-        a = 'not found';
+    a = "not found";
    break;
 }
 console.log(`The value is ${a}`);
 ```
-✅ Test your understanding of this code and the following code by running it in a browser console. Change the values of the varaiable a to change the returned `console.log()`.

+✅ Test your understanding of this code and the following code by running it in a browser console. Change the values of the variable a to change the returned `console.log()`.

 ## Logical Operators and Booleans

@@ -137,13 +137,12 @@ Logical operators can be used to form conditions in if..else statements.
 ```javascript
 let currentMoney;
 let laptopPrice;
-let laptopDiscountPrice = laptopPrice - (laptopPrice * .20) //Laptop price at 20 percent off
+let laptopDiscountPrice = laptopPrice - laptopPrice * 0.2; //Laptop price at 20 percent off

-if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice){
+if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice) {
  //Condition is true. Code in this block will run.
  console.log("Getting a new laptop!");
-}
-else {
+} else {
  //Condition is true. Code in this block will run.
  console.log("Can't afford a new laptop, yet!");
 }
@@ -151,7 +150,7 @@ else {

 ### Negation operator

-You've seen so far how if you can use an `if...else` statement to create conditional logic. Anything that goes into an `if` needs to evaluate to true/false. By using the `!` operator you can _negate_ the expression. It would look like so:
+You've seen so far how you can use an `if...else` statement to create conditional logic. Anything that goes into an `if` needs to evaluate to true/false. By using the `!` operator you can _negate_ the expression. It would look like so:

 ```javascript
 if (!condition) {
@@ -173,13 +172,14 @@ Below is a more tangible example:

 ```javascript
 let firstNumber = 20;
-let secondNumber = 10
-let biggestNumber = firstNumber > secondNumber ? firstNumber: secondNumber;
+let secondNumber = 10;
+let biggestNumber = firstNumber > secondNumber ? firstNumber : secondNumber;
 ```

 ✅ Take a minute to read this code a few times. Do you understand how these operators are working?

 The above states that
+
 - if `firstNumber` is larger than `secondNumber`
 - then assign `firstNumber` to `biggestNumber`
 - else assign `secondNumber`.
@@ -202,7 +202,9 @@ if (firstNumber > secondNumber) {
 Create a program that is written first with logical operators, and then rewrite it using a ternary expression. What's your preferred syntax?

 ---
+
 ## Post-Lecture Quiz
+
 [Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/12)

 ## Review & Self Study
--- a/5-browser-extension/solution/package-lock.json
+++ b/5-browser-extension/solution/package-lock.json
@@ -9,10 +9,10 @@
 			"version": "1.0.0",
 			"license": "MIT",
 			"dependencies": {
-				"axios": "^1.4.0"
+				"axios": "^1.8.2"
 			},
 			"devDependencies": {
-				"webpack": "^5.88.1",
+				"webpack": "^5.94.0",
 				"webpack-cli": "^5.1.4"
 			},
 			"engines": {
@@ -30,105 +30,88 @@
 			}
 		},
 		"node_modules/@jridgewell/gen-mapping": {
-			"version": "0.3.3",
-			"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
-			"integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
+			"version": "0.3.5",
+			"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
+			"integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
 			"dev": true,
 			"dependencies": {
-				"@jridgewell/set-array": "^1.0.1",
+				"@jridgewell/set-array": "^1.2.1",
 				"@jridgewell/sourcemap-codec": "^1.4.10",
-				"@jridgewell/trace-mapping": "^0.3.9"
+				"@jridgewell/trace-mapping": "^0.3.24"
 			},
 			"engines": {
 				"node": ">=6.0.0"
 			}
 		},
 		"node_modules/@jridgewell/resolve-uri": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
-			"integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+			"integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
 			"dev": true,
 			"engines": {
 				"node": ">=6.0.0"
 			}
 		},
 		"node_modules/@jridgewell/set-array": {
-			"version": "1.1.2",
-			"resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
-			"integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
+			"integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
 			"dev": true,
 			"engines": {
 				"node": ">=6.0.0"
 			}
 		},
 		"node_modules/@jridgewell/source-map": {
-			"version": "0.3.5",
-			"resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.5.tgz",
-			"integrity": "sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ==",
+			"version": "0.3.6",
+			"resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz",
+			"integrity": "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==",
 			"dev": true,
 			"dependencies": {
-				"@jridgewell/gen-mapping": "^0.3.0",
-				"@jridgewell/trace-mapping": "^0.3.9"
+				"@jridgewell/gen-mapping": "^0.3.5",
+				"@jridgewell/trace-mapping": "^0.3.25"
 			}
 		},
 		"node_modules/@jridgewell/sourcemap-codec": {
-			"version": "1.4.14",
-			"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
-			"integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
+			"version": "1.5.0",
+			"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+			"integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
 			"dev": true
 		},
 		"node_modules/@jridgewell/trace-mapping": {
-			"version": "0.3.18",
-			"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz",
-			"integrity": "sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==",
+			"version": "0.3.25",
+			"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+			"integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
 			"dev": true,
 			"dependencies": {
-				"@jridgewell/resolve-uri": "3.1.0",
-				"@jridgewell/sourcemap-codec": "1.4.14"
-			}
-		},
-		"node_modules/@types/eslint": {
-			"version": "8.40.2",
-			"resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.40.2.tgz",
-			"integrity": "sha512-PRVjQ4Eh9z9pmmtaq8nTjZjQwKFk7YIHIud3lRoKRBgUQjgjRmoGxxGEPXQkF+lH7QkHJRNr5F4aBgYCW0lqpQ==",
-			"dev": true,
-			"dependencies": {
-				"@types/estree": "*",
-				"@types/json-schema": "*"
-			}
-		},
-		"node_modules/@types/eslint-scope": {
-			"version": "3.7.4",
-			"resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.4.tgz",
-			"integrity": "sha512-9K4zoImiZc3HlIp6AVUDE4CWYx22a+lhSZMYNpbjW04+YF0KWj4pJXnEMjdnFTiQibFFmElcsasJXDbdI/EPhA==",
-			"dev": true,
-			"dependencies": {
-				"@types/eslint": "*",
-				"@types/estree": "*"
+				"@jridgewell/resolve-uri": "^3.1.0",
+				"@jridgewell/sourcemap-codec": "^1.4.14"
 			}
 		},
 		"node_modules/@types/estree": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.1.tgz",
-			"integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==",
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+			"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
 			"dev": true
 		},
 		"node_modules/@types/json-schema": {
-			"version": "7.0.12",
-			"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.12.tgz",
-			"integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==",
+			"version": "7.0.15",
+			"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+			"integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
 			"dev": true
 		},
 		"node_modules/@types/node": {
-			"version": "20.3.3",
-			"resolved": "https://registry.npmjs.org/@types/node/-/node-20.3.3.tgz",
-			"integrity": "sha512-wheIYdr4NYML61AjC8MKj/2jrR/kDQri/CIpVoZwldwhnIrD/j9jIU5bJ8yBKuB2VhpFV7Ab6G2XkBjv9r9Zzw==",
-			"dev": true
+			"version": "22.5.1",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.1.tgz",
+			"integrity": "sha512-KkHsxej0j9IW1KKOOAA/XBA0z08UFSrRQHErzEfA3Vgq57eXIMYboIlHJuYIfd+lwCQjtKqUu3UnmKbtUc9yRw==",
+			"dev": true,
+			"dependencies": {
+				"undici-types": "~6.19.2"
+			}
 		},
 		"node_modules/@webassemblyjs/ast": {
-			"version": "1.11.6",
-			"resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz",
-			"integrity": "sha512-IN1xI7PwOvLPgjcf180gC1bqn3q/QaOCwYUahIOhbYUu8KA/3tw2RT/T0Gidi1l7Hhj5D/INhJxiICObqpMu4Q==",
+			"version": "1.12.1",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.12.1.tgz",
+			"integrity": "sha512-EKfMUOPRRUTy5UII4qJDGPpqfwjOmZ5jeGFwid9mnoqIFK+e0vqoi1qH56JpmZSzEL53jKnNzScdmftJyG5xWg==",
 			"dev": true,
 			"dependencies": {
 				"@webassemblyjs/helper-numbers": "1.11.6",
@@ -148,9 +131,9 @@
 			"dev": true
 		},
 		"node_modules/@webassemblyjs/helper-buffer": {
-			"version": "1.11.6",
-			"resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.6.tgz",
-			"integrity": "sha512-z3nFzdcp1mb8nEOFFk8DrYLpHvhKC3grJD2ardfKOzmbmJvEf/tPIqCY+sNcwZIY8ZD7IkB2l7/pqhUhqm7hLA==",
+			"version": "1.12.1",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.12.1.tgz",
+			"integrity": "sha512-nzJwQw99DNDKr9BVCOZcLuJJUlqkJh+kVzVl6Fmq/tI5ZtEyWT1KZMyOXltXLZJmDtvLCDgwsyrkohEtopTXCw==",
 			"dev": true
 		},
 		"node_modules/@webassemblyjs/helper-numbers": {
@@ -171,15 +154,15 @@
 			"dev": true
 		},
 		"node_modules/@webassemblyjs/helper-wasm-section": {
-			"version": "1.11.6",
-			"resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.6.tgz",
-			"integrity": "sha512-LPpZbSOwTpEC2cgn4hTydySy1Ke+XEu+ETXuoyvuyezHO3Kjdu90KK95Sh9xTbmjrCsUwvWwCOQQNta37VrS9g==",
+			"version": "1.12.1",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.12.1.tgz",
+			"integrity": "sha512-Jif4vfB6FJlUlSbgEMHUyk1j234GTNG9dBJ4XJdOySoj518Xj0oGsNi59cUQF4RRMS9ouBUxDDdyBVfPTypa5g==",
 			"dev": true,
 			"dependencies": {
-				"@webassemblyjs/ast": "1.11.6",
-				"@webassemblyjs/helper-buffer": "1.11.6",
+				"@webassemblyjs/ast": "1.12.1",
+				"@webassemblyjs/helper-buffer": "1.12.1",
 				"@webassemblyjs/helper-wasm-bytecode": "1.11.6",
-				"@webassemblyjs/wasm-gen": "1.11.6"
+				"@webassemblyjs/wasm-gen": "1.12.1"
 			}
 		},
 		"node_modules/@webassemblyjs/ieee754": {
@@ -207,28 +190,28 @@
 			"dev": true
 		},
 		"node_modules/@webassemblyjs/wasm-edit": {
-			"version": "1.11.6",
-			"resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.6.tgz",
-			"integrity": "sha512-Ybn2I6fnfIGuCR+Faaz7YcvtBKxvoLV3Lebn1tM4o/IAJzmi9AWYIPWpyBfU8cC+JxAO57bk4+zdsTjJR+VTOw==",
+			"version": "1.12.1",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.12.1.tgz",
+			"integrity": "sha512-1DuwbVvADvS5mGnXbE+c9NfA8QRcZ6iKquqjjmR10k6o+zzsRVesil54DKexiowcFCPdr/Q0qaMgB01+SQ1u6g==",
 			"dev": true,
 			"dependencies": {
-				"@webassemblyjs/ast": "1.11.6",
-				"@webassemblyjs/helper-buffer": "1.11.6",
+				"@webassemblyjs/ast": "1.12.1",
+				"@webassemblyjs/helper-buffer": "1.12.1",
 				"@webassemblyjs/helper-wasm-bytecode": "1.11.6",
-				"@webassemblyjs/helper-wasm-section": "1.11.6",
-				"@webassemblyjs/wasm-gen": "1.11.6",
-				"@webassemblyjs/wasm-opt": "1.11.6",
-				"@webassemblyjs/wasm-parser": "1.11.6",
-				"@webassemblyjs/wast-printer": "1.11.6"
+				"@webassemblyjs/helper-wasm-section": "1.12.1",
+				"@webassemblyjs/wasm-gen": "1.12.1",
+				"@webassemblyjs/wasm-opt": "1.12.1",
+				"@webassemblyjs/wasm-parser": "1.12.1",
+				"@webassemblyjs/wast-printer": "1.12.1"
 			}
 		},
 		"node_modules/@webassemblyjs/wasm-gen": {
-			"version": "1.11.6",
-			"resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.6.tgz",
-			"integrity": "sha512-3XOqkZP/y6B4F0PBAXvI1/bky7GryoogUtfwExeP/v7Nzwo1QLcq5oQmpKlftZLbT+ERUOAZVQjuNVak6UXjPA==",
+			"version": "1.12.1",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.12.1.tgz",
+			"integrity": "sha512-TDq4Ojh9fcohAw6OIMXqiIcTq5KUXTGRkVxbSo1hQnSy6lAM5GSdfwWeSxpAo0YzgsgF182E/U0mDNhuA0tW7w==",
 			"dev": true,
 			"dependencies": {
-				"@webassemblyjs/ast": "1.11.6",
+				"@webassemblyjs/ast": "1.12.1",
 				"@webassemblyjs/helper-wasm-bytecode": "1.11.6",
 				"@webassemblyjs/ieee754": "1.11.6",
 				"@webassemblyjs/leb128": "1.11.6",
@@ -236,24 +219,24 @@
 			}
 		},
 		"node_modules/@webassemblyjs/wasm-opt": {
-			"version": "1.11.6",
-			"resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.6.tgz",
-			"integrity": "sha512-cOrKuLRE7PCe6AsOVl7WasYf3wbSo4CeOk6PkrjS7g57MFfVUF9u6ysQBBODX0LdgSvQqRiGz3CXvIDKcPNy4g==",
+			"version": "1.12.1",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.12.1.tgz",
+			"integrity": "sha512-Jg99j/2gG2iaz3hijw857AVYekZe2SAskcqlWIZXjji5WStnOpVoat3gQfT/Q5tb2djnCjBtMocY/Su1GfxPBg==",
 			"dev": true,
 			"dependencies": {
-				"@webassemblyjs/ast": "1.11.6",
-				"@webassemblyjs/helper-buffer": "1.11.6",
-				"@webassemblyjs/wasm-gen": "1.11.6",
-				"@webassemblyjs/wasm-parser": "1.11.6"
+				"@webassemblyjs/ast": "1.12.1",
+				"@webassemblyjs/helper-buffer": "1.12.1",
+				"@webassemblyjs/wasm-gen": "1.12.1",
+				"@webassemblyjs/wasm-parser": "1.12.1"
 			}
 		},
 		"node_modules/@webassemblyjs/wasm-parser": {
-			"version": "1.11.6",
-			"resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.6.tgz",
-			"integrity": "sha512-6ZwPeGzMJM3Dqp3hCsLgESxBGtT/OeCvCZ4TA1JUPYgmhAx38tTPR9JaKy0S5H3evQpO/h2uWs2j6Yc/fjkpTQ==",
+			"version": "1.12.1",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.12.1.tgz",
+			"integrity": "sha512-xikIi7c2FHXysxXe3COrVUPSheuBtpcfhbpFj4gmu7KRLYOzANztwUU0IbsqvMqzuNK2+glRGWCEqZo1WCLyAQ==",
 			"dev": true,
 			"dependencies": {
-				"@webassemblyjs/ast": "1.11.6",
+				"@webassemblyjs/ast": "1.12.1",
 				"@webassemblyjs/helper-api-error": "1.11.6",
 				"@webassemblyjs/helper-wasm-bytecode": "1.11.6",
 				"@webassemblyjs/ieee754": "1.11.6",
@@ -262,12 +245,12 @@
 			}
 		},
 		"node_modules/@webassemblyjs/wast-printer": {
-			"version": "1.11.6",
-			"resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.6.tgz",
-			"integrity": "sha512-JM7AhRcE+yW2GWYaKeHL5vt4xqee5N2WcezptmgyhNS+ScggqcT1OtXykhAb13Sn5Yas0j2uv9tHgrjwvzAP4A==",
+			"version": "1.12.1",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.12.1.tgz",
+			"integrity": "sha512-+X4WAlOisVWQMikjbcvY2e0rwPsKQ9F688lksZhBcPycBBuii3O7m8FACbDMWDojpAqvjIncrG8J0XHKyQfVeA==",
 			"dev": true,
 			"dependencies": {
-				"@webassemblyjs/ast": "1.11.6",
+				"@webassemblyjs/ast": "1.12.1",
 				"@xtuc/long": "4.2.2"
 			}
 		},
@@ -328,9 +311,9 @@
 			"dev": true
 		},
 		"node_modules/acorn": {
-			"version": "8.10.0",
-			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
-			"integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
+			"version": "8.12.1",
+			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
+			"integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==",
 			"dev": true,
 			"bin": {
 				"acorn": "bin/acorn"
@@ -339,10 +322,10 @@
 				"node": ">=0.4.0"
 			}
 		},
-		"node_modules/acorn-import-assertions": {
-			"version": "1.9.0",
-			"resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz",
-			"integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==",
+		"node_modules/acorn-import-attributes": {
+			"version": "1.9.5",
+			"resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz",
+			"integrity": "sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==",
 			"dev": true,
 			"peerDependencies": {
 				"acorn": "^8"
@@ -379,19 +362,20 @@
 			"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
 		},
 		"node_modules/axios": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz",
-			"integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==",
+			"version": "1.8.2",
+			"resolved": "https://registry.npmjs.org/axios/-/axios-1.8.2.tgz",
+			"integrity": "sha512-ls4GYBm5aig9vWx8AWDSGLpnpDQRtWAfrjU+EuytuODrFBkqesN2RkOQCBzrA1RQNHw1SmRMSDDDSwzNAYQ6Rg==",
+			"license": "MIT",
 			"dependencies": {
-				"follow-redirects": "^1.15.0",
+				"follow-redirects": "^1.15.6",
 				"form-data": "^4.0.0",
 				"proxy-from-env": "^1.1.0"
 			}
 		},
 		"node_modules/browserslist": {
-			"version": "4.21.9",
-			"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.9.tgz",
-			"integrity": "sha512-M0MFoZzbUrRU4KNfCrDLnvyE7gub+peetoTid3TBIqtunaDJyXlwhakT+/VkvSXcfIzFfK/nkCs4nmyTmxdNSg==",
+			"version": "4.23.3",
+			"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.3.tgz",
+			"integrity": "sha512-btwCFJVjI4YWDNfau8RhZ+B1Q/VLoUITrm3RlP6y1tYGWIOa+InuYiRGXUBXo8nA1qKmHMyLB/iVQg5TT4eFoA==",
 			"dev": true,
 			"funding": [
 				{
@@ -408,10 +392,10 @@
 				}
 			],
 			"dependencies": {
-				"caniuse-lite": "^1.0.30001503",
-				"electron-to-chromium": "^1.4.431",
-				"node-releases": "^2.0.12",
-				"update-browserslist-db": "^1.0.11"
+				"caniuse-lite": "^1.0.30001646",
+				"electron-to-chromium": "^1.5.4",
+				"node-releases": "^2.0.18",
+				"update-browserslist-db": "^1.1.0"
 			},
 			"bin": {
 				"browserslist": "cli.js"
@@ -427,9 +411,9 @@
 			"dev": true
 		},
 		"node_modules/caniuse-lite": {
-			"version": "1.0.30001512",
-			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001512.tgz",
-			"integrity": "sha512-2S9nK0G/mE+jasCUsMPlARhRCts1ebcp2Ji8Y8PWi4NDE1iRdLCnEPHkEfeBrGC45L4isBx5ur3IQ6yTE2mRZw==",
+			"version": "1.0.30001653",
+			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001653.tgz",
+			"integrity": "sha512-XGWQVB8wFQ2+9NZwZ10GxTYC5hk0Fa+q8cSkr0tgvMhYhMHP/QC+WTgrePMDBWiWc/pV+1ik82Al20XOK25Gcw==",
 			"dev": true,
 			"funding": [
 				{
@@ -515,15 +499,15 @@
 			}
 		},
 		"node_modules/electron-to-chromium": {
-			"version": "1.4.450",
-			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.450.tgz",
-			"integrity": "sha512-BLG5HxSELlrMx7dJ2s+8SFlsCtJp37Zpk2VAxyC6CZtbc+9AJeZHfYHbrlSgdXp6saQ8StMqOTEDaBKgA7u1sw==",
+			"version": "1.5.13",
+			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.13.tgz",
+			"integrity": "sha512-lbBcvtIJ4J6sS4tb5TLp1b4LyfCdMkwStzXPyAgVgTRAsep4bvrAGaBOP7ZJtQMNJpSQ9SqG4brWOroNaQtm7Q==",
 			"dev": true
 		},
 		"node_modules/enhanced-resolve": {
-			"version": "5.15.0",
-			"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz",
-			"integrity": "sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==",
+			"version": "5.17.1",
+			"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
+			"integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==",
 			"dev": true,
 			"dependencies": {
 				"graceful-fs": "^4.2.4",
@@ -552,9 +536,9 @@
 			"dev": true
 		},
 		"node_modules/escalade": {
-			"version": "3.1.1",
-			"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
-			"integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
+			"integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==",
 			"dev": true,
 			"engines": {
 				"node": ">=6"
@@ -647,9 +631,9 @@
 			}
 		},
 		"node_modules/follow-redirects": {
-			"version": "1.15.2",
-			"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
-			"integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
+			"version": "1.15.6",
+			"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+			"integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
 			"funding": [
 				{
 					"type": "individual",
@@ -872,9 +856,9 @@
 			"dev": true
 		},
 		"node_modules/node-releases": {
-			"version": "2.0.12",
-			"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.12.tgz",
-			"integrity": "sha512-QzsYKWhXTWx8h1kIvqfnC++o0pEmpRQA/aenALsL2F4pqNVr7YzcdMlDij5WBnwftRbJCNJL/O7zdKaxKPHqgQ==",
+			"version": "2.0.18",
+			"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz",
+			"integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==",
 			"dev": true
 		},
 		"node_modules/p-limit": {
@@ -938,9 +922,9 @@
 			"dev": true
 		},
 		"node_modules/picocolors": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-			"integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
+			"integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
 			"dev": true
 		},
 		"node_modules/pkg-dir": {
@@ -961,9 +945,9 @@
 			"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
 		},
 		"node_modules/punycode": {
-			"version": "2.3.0",
-			"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
-			"integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==",
+			"version": "2.3.1",
+			"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+			"integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
 			"dev": true,
 			"engines": {
 				"node": ">=6"
@@ -1067,9 +1051,9 @@
 			}
 		},
 		"node_modules/serialize-javascript": {
-			"version": "6.0.1",
-			"resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.1.tgz",
-			"integrity": "sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==",
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
+			"integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
 			"dev": true,
 			"dependencies": {
 				"randombytes": "^2.1.0"
@@ -1164,9 +1148,9 @@
 			}
 		},
 		"node_modules/terser": {
-			"version": "5.18.2",
-			"resolved": "https://registry.npmjs.org/terser/-/terser-5.18.2.tgz",
-			"integrity": "sha512-Ah19JS86ypbJzTzvUCX7KOsEIhDaRONungA4aYBjEP3JZRf4ocuDzTg4QWZnPn9DEMiMYGJPiSOy7aykoCc70w==",
+			"version": "5.31.6",
+			"resolved": "https://registry.npmjs.org/terser/-/terser-5.31.6.tgz",
+			"integrity": "sha512-PQ4DAriWzKj+qgehQ7LK5bQqCFNMmlhjR2PFFLuqGCpuCAauxemVBWwWOxo3UIwWQx8+Pr61Df++r76wDmkQBg==",
 			"dev": true,
 			"dependencies": {
 				"@jridgewell/source-map": "^0.3.3",
@@ -1182,16 +1166,16 @@
 			}
 		},
 		"node_modules/terser-webpack-plugin": {
-			"version": "5.3.9",
-			"resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.9.tgz",
-			"integrity": "sha512-ZuXsqE07EcggTWQjXUj+Aot/OMcD0bMKGgF63f7UxYcu5/AJF53aIpK1YoP5xR9l6s/Hy2b+t1AM0bLNPRuhwA==",
+			"version": "5.3.10",
+			"resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.10.tgz",
+			"integrity": "sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==",
 			"dev": true,
 			"dependencies": {
-				"@jridgewell/trace-mapping": "^0.3.17",
+				"@jridgewell/trace-mapping": "^0.3.20",
 				"jest-worker": "^27.4.5",
 				"schema-utils": "^3.1.1",
 				"serialize-javascript": "^6.0.1",
-				"terser": "^5.16.8"
+				"terser": "^5.26.0"
 			},
 			"engines": {
 				"node": ">= 10.13.0"
@@ -1215,10 +1199,16 @@
 				}
 			}
 		},
+		"node_modules/undici-types": {
+			"version": "6.19.8",
+			"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
+			"integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
+			"dev": true
+		},
 		"node_modules/update-browserslist-db": {
-			"version": "1.0.11",
-			"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz",
-			"integrity": "sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==",
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz",
+			"integrity": "sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==",
 			"dev": true,
 			"funding": [
 				{
@@ -1235,8 +1225,8 @@
 				}
 			],
 			"dependencies": {
-				"escalade": "^3.1.1",
-				"picocolors": "^1.0.0"
+				"escalade": "^3.1.2",
+				"picocolors": "^1.0.1"
 			},
 			"bin": {
 				"update-browserslist-db": "cli.js"
@@ -1255,9 +1245,9 @@
 			}
 		},
 		"node_modules/watchpack": {
-			"version": "2.4.0",
-			"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
-			"integrity": "sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==",
+			"version": "2.4.2",
+			"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.2.tgz",
+			"integrity": "sha512-TnbFSbcOCcDgjZ4piURLCbJ3nJhznVh9kw6F6iokjiFPl8ONxe9A6nMDVXDiNbrSfLILs6vB07F7wLBrwPYzJw==",
 			"dev": true,
 			"dependencies": {
 				"glob-to-regexp": "^0.4.1",
@@ -1268,34 +1258,33 @@
 			}
 		},
 		"node_modules/webpack": {
-			"version": "5.88.1",
-			"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.88.1.tgz",
-			"integrity": "sha512-FROX3TxQnC/ox4N+3xQoWZzvGXSuscxR32rbzjpXgEzWudJFEJBpdlkkob2ylrv5yzzufD1zph1OoFsLtm6stQ==",
+			"version": "5.94.0",
+			"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.94.0.tgz",
+			"integrity": "sha512-KcsGn50VT+06JH/iunZJedYGUJS5FGjow8wb9c0v5n1Om8O1g4L6LjtfxwlXIATopoQu+vOXXa7gYisWxCoPyg==",
 			"dev": true,
 			"dependencies": {
-				"@types/eslint-scope": "^3.7.3",
-				"@types/estree": "^1.0.0",
-				"@webassemblyjs/ast": "^1.11.5",
-				"@webassemblyjs/wasm-edit": "^1.11.5",
-				"@webassemblyjs/wasm-parser": "^1.11.5",
+				"@types/estree": "^1.0.5",
+				"@webassemblyjs/ast": "^1.12.1",
+				"@webassemblyjs/wasm-edit": "^1.12.1",
+				"@webassemblyjs/wasm-parser": "^1.12.1",
 				"acorn": "^8.7.1",
-				"acorn-import-assertions": "^1.9.0",
-				"browserslist": "^4.14.5",
+				"acorn-import-attributes": "^1.9.5",
+				"browserslist": "^4.21.10",
 				"chrome-trace-event": "^1.0.2",
-				"enhanced-resolve": "^5.15.0",
+				"enhanced-resolve": "^5.17.1",
 				"es-module-lexer": "^1.2.1",
 				"eslint-scope": "5.1.1",
 				"events": "^3.2.0",
 				"glob-to-regexp": "^0.4.1",
-				"graceful-fs": "^4.2.9",
+				"graceful-fs": "^4.2.11",
 				"json-parse-even-better-errors": "^2.3.1",
 				"loader-runner": "^4.2.0",
 				"mime-types": "^2.1.27",
 				"neo-async": "^2.6.2",
 				"schema-utils": "^3.2.0",
 				"tapable": "^2.1.1",
-				"terser-webpack-plugin": "^5.3.7",
-				"watchpack": "^2.4.0",
+				"terser-webpack-plugin": "^5.3.10",
+				"watchpack": "^2.4.1",
 				"webpack-sources": "^3.2.3"
 			},
 			"bin": {
--- a/5-browser-extension/solution/package.json
+++ b/5-browser-extension/solution/package.json
@@ -20,10 +20,10 @@
 	"author": "Microsoft Cloud Advocacy Team",
 	"license": "MIT",
 	"devDependencies": {
-		"webpack": "^5.88.1",
+		"webpack": "^5.94.0",
 		"webpack-cli": "^5.1.4"
 	},
 	"dependencies": {
-		"axios": "^1.4.0"
+		"axios": "^1.8.2"
 	}
 }
--- a/5-browser-extension/start/package-lock.json
+++ b/5-browser-extension/start/package-lock.json
--- a/5-browser-extension/start/package.json
+++ b/5-browser-extension/start/package.json
@@ -20,10 +20,10 @@
 	"author": "Microsoft Cloud Advocacy Team",
 	"license": "MIT",
 	"devDependencies": {
-		"webpack": "^5.88.1",
+		"webpack": "^5.99.9",
 		"webpack-cli": "^5.1.4"
 	},
 	"dependencies": {
-		"axios": "^1.4.0"
+		"axios": "^1.7.4"
 	}
 }
--- a/7-bank-project/1-template-route/README.md
+++ b/7-bank-project/1-template-route/README.md
@@ -12,7 +12,7 @@ In this lesson, we're going to lay out the foundations to create bank web app, u

 ### Prerequisite

-You need a local web server to test the web app we'll build in this lesson. If don't have one, you can install [Node.js](https://nodejs.org) and use the command `npx lite-server` from your project folder. It will create a local web server and open your app in a browser.
+You need a local web server to test the web app we'll build in this lesson. If you don't have one, you can install [Node.js](https://nodejs.org) and use the command `npx lite-server` from your project folder. It will create a local web server and open your app in a browser.

 ### Preparation

@@ -36,12 +36,12 @@ On your computer, create a folder named `bank` with a file named `index.html` in

 ## HTML templates

-If you want to create multiples screens for a web page, one solution would be to create one HTML file for every screen you want to display. However, this solution comes with some inconvenience:
+If you want to create multiple screens for a web page, one solution would be to create one HTML file for every screen you want to display. However, this solution comes with some inconvenience:

 - You have to reload the entire HTML when switching screen, which can be slow.
 - It's difficult to share data between the different screens.

-Another approach is have only one HTML file, and define multiple [HTML templates](https://developer.mozilla.org/docs/Web/HTML/Element/template) using the `<template>` element. A template is a reusable HTML block that is not displayed by the browser, and needs to be instantiated at runtime using JavaScript.
+Another approach is to have only one HTML file, and define multiple [HTML templates](https://developer.mozilla.org/docs/Web/HTML/Element/template) using the `<template>` element. A template is a reusable HTML block that is not displayed by the browser, and needs to be instantiated at runtime using JavaScript.

 ### Task

@@ -103,7 +103,7 @@ Then we'll add another HTML template for the dashboard page. This page will cont

 ## Displaying templates with JavaScript

-If you try your current HTML file in a browser, you'll see that it get stuck displaying `Loading...`. That's because we need to add some JavaScript code to instantiate and display the HTML templates.
+If you try your current HTML file in a browser, you'll see that it gets stuck displaying `Loading...`. That's because we need to add some JavaScript code to instantiate and display the HTML templates.

 Instantiating a template is usually done in 3 steps:

@@ -145,7 +145,7 @@ updateRoute('login');

 ## Creating routes

-When talking about a web app, we call *Routing* the intent to map **URLs** to specific screens that should be displayed. On a web site with multiple HTML files, this is done automatically as the file paths are reflected on the URL. For example, with these files in your project folder:
+When talking about a web app, we call *Routing* the intent to map **URLs** to specific screens that should be displayed. On a website with multiple HTML files, this is done automatically as the file paths are reflected on the URL. For example, with these files in your project folder:

 ```
 mywebsite/index.html
--- a/7-bank-project/2-forms/README.md
+++ b/7-bank-project/2-forms/README.md
@@ -16,7 +16,7 @@ You need to have completed the [HTML templates and routing](../1-template-route/

 **Take note**
 You will have two terminals running at the same time as listed below.
-1. For the the main bank app we built in the [HTML templates and routing](../1-template-route/README.md) lesson
+1. For the main bank app we built in the [HTML templates and routing](../1-template-route/README.md) lesson
 2. For the [Bank APP server API](../api/README.md) we just setup above.

 You need two of the servers up and running to follow through with the rest of the lesson. They are listening on different ports(port `3000` and port `5000`) so everything should work just fine.
@@ -70,7 +70,7 @@ Let's start by adding a form to the `login` template. We'll need a *username* fi
 </template>
 ```

-If you take a closer look, you can notice that we also added a `<label>` element here. `<label>` elements are used to add a name to UI controls, such as our username field. Labels are important for the readability of your forms, but also comes with additional benefits:
+If you take a closer look, you can notice that we also added a `<label>` element here. `<label>` elements are used to add a name to UI controls, such as our username field. Labels are important for the readability of your forms, but also come with additional benefits:

 - By associating a label to a form control, it helps users using assistive technologies (like a screen reader) to understand what data they're expected to provide.
 - You can click on the label to directly put focus on the associated input, making it easier to reach on touch-screen based devices.
@@ -193,7 +193,7 @@ Here's a quick video about `async/await` usage:
 We use the `fetch()` API to send JSON data to the server. This method takes 2 parameters:

 - The URL of the server, so we put back `//localhost:5000/api/accounts` here.
- The settings of the request. That's where we set the method to `POST` and provide the `body` for the request. As we're sending JSON data to the server, we also need to set the `Content-Type` header to `application/json` so the server know how to interpret the content.
+- The settings of the request. That's where we set the method to `POST` and provide the `body` for the request. As we're sending JSON data to the server, we also need to set the `Content-Type` header to `application/json` so the server knows how to interpret the content.

 As the server will respond to the request with JSON, we can use `await response.json()` to parse the JSON content and return the resulting object. Note that this method is asynchronous, so we use the `await` keyword here before returning to make sure any errors during parsing are also caught.

@@ -274,7 +274,7 @@ Now if you press the *Register* button and a field does not respect a validation

 ![Screenshot showing the validation error when trying to submit the form](./images/validation-error.png)

-Validation like this performed *before* sending any data to the server is called **client-side** validation. But note that's it's not always possible to perform all checks without sending the data. For example, we cannot check here if an account already exists with the same username without sending a request to the server. Additional validation performed on the server is called **server-side** validation.
+Validation like this performed *before* sending any data to the server is called **client-side** validation. But note that it's not always possible to perform all checks without sending the data. For example, we cannot check here if an account already exists with the same username without sending a request to the server. Additional validation performed on the server is called **server-side** validation.

 Usually both need to be implemented, and while using client-side validation improves the user experience by providing instant feedback to the user, server-side validation is crucial to make sure the user data you manipulate is sound and safe.

--- a/7-bank-project/4-state-management/README.md
+++ b/7-bank-project/4-state-management/README.md
@@ -80,7 +80,7 @@ This refactoring by itself did not bring much improvements, but the idea was to

 ## Track data changes

-Now that we have put in place the `state` object to store our data, the next step is centralize the updates. The goal is to make it easier to keep track of any changes and when they happen.
+Now that we have put in place the `state` object to store our data, the next step is to centralize the updates. The goal is to make it easier to keep track of any changes and when they happen.

 To avoid having changes made to the `state` object, it's also a good practice to consider it [*immutable*](https://en.wikipedia.org/wiki/Immutable_object), meaning that it cannot be modified at all. It also means that you have to create a new state object if you want to change anything in it. By doing this, you build a protection about potentially unwanted [side effects](https://en.wikipedia.org/wiki/Side_effect_(computer_science)), and open up possibilities for new features in your app like implementing undo/redo, while also making it easier to debug. For example, you could log every change made to the state and keep a history of the changes to understand the source of a bug.

@@ -142,7 +142,7 @@ Try registering a new account, logging out and in again to check that everything

 ## Persist the state

-Most web apps needs to persist data to be able to work correctly. All the critical data is usually stored on a database and accessed via a server API, like as the user account data in our case. But sometimes, it's also interesting to persist some data on the client app that's running in your browser, for a better user experience or to improve loading performance.
+Most web apps need to persist data to be able to work correctly. All the critical data is usually stored on a database and accessed via a server API, like as the user account data in our case. But sometimes, it's also interesting to persist some data on the client app that's running in your browser, for a better user experience or to improve loading performance.

 When you want to persist data in your browser, there are a few important questions you should ask yourself:

@@ -201,7 +201,7 @@ Now login in the app and try refreshing the page. You should stay on the dashboa

 ## Refresh the data

-...But we might also have a created a new one. Oops!
+...But we might also have created a new one. Oops!

 Go to the dashboard using the `test` account, then run this command on a terminal to create a new transaction:

--- a/7-bank-project/api/package-lock.json
+++ b/7-bank-project/api/package-lock.json
--- a/7-bank-project/api/package.json
+++ b/7-bank-project/api/package.json
@@ -20,9 +20,9 @@
    "prettier": "^2.0.5"
  },
  "dependencies": {
-    "body-parser": "^1.20.1",
+    "body-parser": "^1.20.3",
    "cors": "^2.8.5",
-    "express": "^4.18.2"
+    "express": "^4.21.2"
  },
  "engines": {
    "node": ">=10"
--- a/7-bank-project/solution/index.html
+++ b/7-bank-project/solution/index.html
@@ -37,8 +37,8 @@
            <input id="currency" name="currency" type="text" maxlength="5" value="$" required>
            <label for="description">Description</label>
            <input id="description" name="description" type="text" maxlength="100">
-            <label for="balance">Current balance</label>
-            <input id="balance" name="balance" type="number" value="0">
+            <label for="current-balance">Current balance</label>
+            <input id="current-balance" name="balance" type="number" value="0">
            <div id="registerError" class="error" role="alert"></div>
            <button>Register</button>
          </form>
@@ -52,17 +52,17 @@
    <section class="dashboard-page">
      <header class="dashboard-header">
        <img class="dashboard-logo" src="logo.svg" alt="Squirrel Banking Logo">
-        <h1 class="dashboard-title hide-xs">Squirrel Banking</span>
+        <h1 class="dashboard-title hide-xs">Squirrel Banking</h1>
        <button onclick="logout()">Logout</button>
      </header>
      <div class="balance">
        <div>Balance</div>
        <span id="balance"></span>
-        <span id="currency"></span>
+        <span id="balance-currency"></span>
      </div>
      <div class="dashboard-content">
        <div class="transactions-title">
-          <h2 id="description"></h2>
+          <h2 id="transactions-description"></h2>
          <button onclick="addTransaction()">Add transaction</button>
        </div>
        <table class="transactions-table" aria-label="Transactions">
--- a/7-bank-project/solution/translations/README.es.md
+++ b/7-bank-project/solution/translations/README.es.md
@@ -1,6 +1,6 @@
 # Aplicación bancaria

-> Solución de ejemplo para el proyecto de la aplicación bancaria, construida con HTML5 vanilla, CSS y JavaScript (sin marcos ni bibliotecas).
+> Solución de ejemplo para el proyecto de la aplicación bancaria, construida con HTML5 vanilla, CSS y JavaScript (sin entorno de trabajos ni bibliotecas).

 ## Ejecutando la aplicación

--- a/8-code-editor/1-using-a-code-editor/README.md
+++ b/8-code-editor/1-using-a-code-editor/README.md
@@ -99,7 +99,7 @@ To view the changes you made to your project, select the file(s) in the `Changes

 ![View changes](../images/working-tree.png)

-If you are safisfied with the changes you made, hover on the `Changes` folder and click the `+` button to stage the changes. Staging simply means preparing your changes to commit them to GitHub.
+If you are satisfied with the changes you made, hover on the `Changes` folder and click the `+` button to stage the changes. Staging simply means preparing your changes to commit them to GitHub.

 If however you are not comfortable with some changes and you want to discard them, hover on the `Changes` folder and select the `undo` icon.

@@ -113,7 +113,7 @@ Once done working on your project, select the `hamburger menu icon` at the top l
 Installing extensions on VSCode allows you to add new features and customized development environment options on your editor to improve your development workflow. These extensions also help you add support for multiple programming languages and are often either generic extensions or language-based extensions.

 To browse through the list of all available extensions, click the _`Extensions icon`_ on the activity bar and start typing the name of the extension on the text field labelled _'Search Extensions in Marketplace'_.
-You will see a list of extensions, each one containing **the extension name, publisher's name, a 1 sentense description, number of downloads** and **a star rating**.
+You will see a list of extensions, each one containing **the extension name, publisher's name, a 1 sentence description, number of downloads** and **a star rating**.

 ![Extension details](../images/extension-details.png)

--- a/README.md
+++ b/README.md
@@ -8,37 +8,98 @@
 [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
 [![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)

+[![](https://dcbadge.vercel.app/api/server/ByRwuEEgH4)](https://discord.gg/zxKYvhSnVp?WT.mc_id=academic-000002-leestott)
+
 [![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)

 # Web Development for Beginners - A Curriculum

-Learn the fundamentals of JavaScript, CSS, and HTML with our comprehensive 12-week course, brought to you by Microsoft Cloud Advocates. Each of the 24 lessons includes pre- and post-lesson quizzes, detailed written instructions, solutions, assignments, and much more. With a project-based approach to learning, our curriculum is designed to help you develop practical skills through hands-on building. Enhance your skills and optimize your knowledge retention with our effective project-based pedagogy.
+Learn the fundamentals of web development with our 12-week comprehensive course by Microsoft Cloud Advocates. Each of the 24 lessons dives into JavaScript, CSS, and HTML through hands-on projects like terrariums, browser extensions, and space games. Engage with quizzes, discussions, and practical assignments. Enhance your skills and optimize your knowledge retention with our effective project-based pedagogy. Start your coding journey today!

-### _Are you a student?_
+#### 🧑‍🎓 _Are you a student?_

 Visit [**Student Hub page**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) where you will find beginner resources, Student packs and even ways to get a free certificate voucher. This is the page you want to bookmark and check from time to time as we switch out content monthly.

-# Getting Started
+### 📣 Announcement - _New Curriculum_ on Generative AI for JavaScript was just released
+
+Don't miss our new Generative AI curriculum!
+
+Visit [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) to get started!
+
+<div>
+  <img src="./images/background.png" width="600px" />
+</div>
+
+- Lessons covering everything from basics to RAG.
+- Interact with historical characters using GenAI and our companion app.
+- Fun and engaging narrative, you'll be time traveling!
+
+<div>
+  <img src="./images/character.png" width="600px" />
+</div>
+
+Each lesson includes an assignment to complete, a knowledge check and a challenge to guide you on learning topics like:
+- Prompting and prompt engineering
+- Text and image app generation
+- Search apps
+
+Visit [https://aka.ms/genai-js-course]([https://aka.ms/genai-js-course) to get started!
+
+
+
+## 🌱 Getting Started

 > **Teachers**, we have [included some suggestions](for-teachers.md) on how to use this curriculum. We'd love your feedback [in our discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!

-> **[Students](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, to fully benefit from this curriculum, we encourage you to fork the entire repository and engage in self-study. Start with a pre-lecture quiz and follow through with reading the lecture material and completing the various activities. Emphasize on comprehending the lessons rather than just copying the solution code. However, if needed, the solution code can be found in the */solutions folders* within each project-based lesson. Another great way to enhance your learning experience is to form a study group with your peers and work through the curriculum together. To further your education, we highly recommend exploring [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) for additional study materials..
+**[Learners](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, for each lesson, start with a pre-lecture quiz and follow through with reading the lecture material, completing the various activities and check your understanding with the post-lecture quiz.

-## Pedagogy
+To enhance your learning experience, connect with your peers to work on the projects together! Discussions are encouraged in our [discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) where our team of moderators will be available to answer your questions.

-Our curriculum is designed with two key pedagogical principles in mind: project-based learning and frequent quizzes. The program teaches the fundamentals of JavaScript, HTML, and CSS, as well as the latest tools and techniques used by today's web developers. Students will have the opportunity to develop hands-on experience by building a typing game, virtual terrarium, eco-friendly browser extension, space-invader-style game, and a banking app for businesses. By the end of the series, students will have gained a solid understanding of web development.
+To further your education, we highly recommend exploring [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) for additional study materials.

-> 🎓 You can take the first few lessons in this curriculum as a [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) on Microsoft Learn!
+### 📋 Setting up your environment

-By ensuring that the content aligns with projects, the process is made more engaging for students and retention of concepts will be augmented. We also wrote several starter lessons in JavaScript basics to introduce concepts, paired with a video from the "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" collection of video tutorials, some of whose authors contributed to this curriculum.
+This curriculum has a development environment ready to go! As you get started you can choose to run the curriculum in a [Codespace](https://github.com/features/codespaces/) (_a browser-based, no installs needed environment_), or locally on your computer using a text editor such as [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).

-In addition, a low-stakes quiz before a class sets the intention of the student towards learning a topic, while a second quiz after class ensures further retention. This curriculum was designed to be flexible and fun and can be taken in whole or in part. The projects start small and become increasingly complex by the end of the 12-week cycle.
+#### Create your repository
+For you to easily save your work, it is recommended that you create your own copy of this repository. You can do this by clicking the **Use this template** button at the top of the page. This will create a new repository in your GitHub account with a copy of the curriculum.

-While we have purposefully avoided introducing JavaScript frameworks to concentrate on the basic skills needed as a web developer before adopting a framework, a good next step to completing this curriculum would be learning about Node.js via another collection of videos: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
+Follow these steps:
+1. **Fork the Repository**: Click on the "Fork" button at the top-right corner of this page.
+2. **Clone the Repository**:   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`

-> Find our [Code of Conduct](CODE_OF_CONDUCT.md), [Contributing](CONTRIBUTING.md), and [Translation](TRANSLATIONS.md) guidelines. We welcome your constructive feedback!
+#### Running the curriculum in a Codespace

-## Each lesson includes:
+In your copy of this repository that you created, click the **Code** button and select **Open with Codespaces**. This will create a new Codespace for you to work in.
+
+<img src="./images/createcodespace.png" alt="Create codespace" style="width:270px;"/>
+
+#### Running the curriculum locally on your computer
+
+To run this curriculum locally on your computer, you will need a text editor, a browser and a command line tool. Our first lesson, [Introduction to Programming Languages and Tools of the Trade](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/1-getting-started-lessons/1-intro-to-programming-languages), will walk you through various options for each of these tools for you to select what works best for you.
+
+Our recommendation is to use [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) as your editor, which also has a built-in [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). You can download Visual Studio Code [here](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
+
+
+1. Clone your repository to your computer. You can do this by clicking the **Code** button and copying the URL:
+
+    <img src="./images/createcodespace.png" alt="Copy your repository URL" style="width:270px;"/>
+
+    Then, open [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) within [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) and run the following command, replacing `<your-repository-url>` with the URL you just copied:
+
+    ```bash 
+    git clone <your-repository-url>
+    ```
+
+2. Open the folder in Visual Studio Code. You can do this by clicking **File** > **Open Folder** and selecting the folder you just cloned.
+
+
+>  Recommended Visual Studio Code extensions:
+>
+> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - to preview HTML pages within Visual Studio Code
+> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - to help you write code faster
+
+## 📂 Each lesson includes:

 - optional sketchnote
 - optional supplemental video
@@ -51,9 +112,9 @@ While we have purposefully avoided introducing JavaScript frameworks to concentr
 - assignment
 - post-lesson quiz

-> **A note about quizzes**: All quizzes are contained [in this app](https://ashy-river-0debb7803.1.azurestaticapps.net/), for 48 total quizzes of three questions each. They are linked from within the lessons but the quiz app can be run locally; follow the instruction in the `quiz-app` folder. They are gradually being localized.
+> **A note about quizzes**: All quizzes are contained in the Quiz-app folder, 48 total quizzes of three questions each. They are linked from within the lessons the quiz app can be run locally or deployed to Azure; follow the instruction in the `quiz-app` folder. They are gradually being localized.

-## Lessons
+## 🗃️ Lessons

 |     |                       Project Name                       |                            Concepts Taught                             | Learning Objectives                                                                                                                 |                                                         Linked Lesson                                                          |         Author          |
 | :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
@@ -82,23 +143,52 @@ While we have purposefully avoided introducing JavaScript frameworks to concentr
 | 23  |         [Banking App](/7-bank-project/solution/README.md)          |                   Methods of Fetching and Using Data                   | How data flows in and out of your app, how to fetch it, store it, and dispose of it                                                 |                                            [Data](/7-bank-project/3-data/README.md)                                            |          Yohan          |
 | 24  |         [Banking App](/7-bank-project/solution/README.md)          |                      Concepts of State Management                      | Learn how your app retains state and how to manage it programmatically                                                              |                                [State Management](/7-bank-project/4-state-management/README.md)                                |          Yohan          |

-## Offline access
+
+## 🏫 Pedagogy
+
+Our curriculum is designed with two key pedagogical principles in mind:
+* project-based learning
+* frequent quizzes
+
+The program teaches the fundamentals of JavaScript, HTML, and CSS, as well as the latest tools and techniques used by today's web developers. Students will have the opportunity to develop hands-on experience by building a typing game, virtual terrarium, eco-friendly browser extension, space-invader-style game, and a banking app for businesses. By the end of the series, students will have gained a solid understanding of web development.
+
+> 🎓 You can take the first few lessons in this curriculum as a [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) on Microsoft Learn!
+
+By ensuring that the content aligns with projects, the process is made more engaging for students and retention of concepts will be augmented. We also wrote several starter lessons in JavaScript basics to introduce concepts, paired with a video from the "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" collection of video tutorials, some of whose authors contributed to this curriculum.
+
+In addition, a low-stakes quiz before a class sets the intention of the student towards learning a topic, while a second quiz after class ensures further retention. This curriculum was designed to be flexible and fun and can be taken in whole or in part. The projects start small and become increasingly complex by the end of the 12-week cycle.
+
+While we have purposefully avoided introducing JavaScript frameworks to concentrate on the basic skills needed as a web developer before adopting a framework, a good next step to completing this curriculum would be learning about Node.js via another collection of videos: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
+
+> Visit our [Code of Conduct](CODE_OF_CONDUCT.md) and [Contributing](CONTRIBUTING.md) guidelines. We welcome your constructive feedback!
+
+
+## 🧭 Offline access

 You can run this documentation offline by using [Docsify](https://docsify.js.org/#/). Fork this repo, [install Docsify](https://docsify.js.org/#/quickstart) on your local machine, and then in the root folder of this repo, type `docsify serve`. The website will be served on port 3000 on your localhost: `localhost:3000`.

-## PDF
+## 📘 PDF

 A PDF of all of the lessons can be found [here](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).

-## Other Curricula

-Our team produces other curricula! Check out:
+## 🎒 Other Courses

+Our team produces other courses! Check out:
+
+- [Generative AI for Beginners](https://aka.ms/genai-beginners)
+- [Generative AI for Beginners .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
+- [Generative AI with JavaScript](https://github.com/microsoft/generative-ai-with-javascript)
 - [AI for Beginners](https://aka.ms/ai-beginners)
 - [Data Science for Beginners](https://aka.ms/datascience-beginners)
+- [ML for Beginners](https://aka.ms/ml-beginners)
+- [Cybersecurity for Beginners](https://github.com/microsoft/Security-101)
+- [Web Dev for Beginners](https://aka.ms/webdev-beginners)
 - [IoT for Beginners](https://aka.ms/iot-beginners)
- [Machine Learning for Beginners](https://aka.ms/ml-beginners)
- [XR Development for Beginners](https://aka.ms/xr-dev-for-beginners)
+- [XR Development for Beginners](https://github.com/microsoft/xr-development-for-beginners)
+- [Mastering GitHub Copilot for Paired Programming](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
+- [Mastering GitHub Copilot for C#/.NET Developers](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
+- [Choose Your Own Copilot Adventure](https://github.com/microsoft/CopilotAdventures)

 ## License

--- a/images/background.png
+++ b/images/background.png
--- a/images/character.png
+++ b/images/character.png
--- a/images/clone_repo.png
+++ b/images/clone_repo.png
--- a/images/createcodespace.png
+++ b/images/createcodespace.png
--- a/index.html
+++ b/index.html
@@ -3,12 +3,13 @@
 <head>
  <meta charset="UTF-8">
  <title>Web Dev for Beginners</title>
-  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="description" content="Description">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="icon" type="image/png" href="images/favicon.png">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css"></head>
-  <link rel="stylesheet" href="/index.css"></head>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css">
+  <link rel="stylesheet" href="index.css">
+  </head>
 <body>
  <div id="app"></div>
  <script type="text/javascript">
--- a/package-lock.json
+++ b/package-lock.json
@@ -227,12 +227,12 @@
 			}
 		},
 		"node_modules/braces": {
-			"version": "3.0.2",
-			"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-			"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+			"integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
 			"dev": true,
 			"dependencies": {
-				"fill-range": "^7.0.1"
+				"fill-range": "^7.1.1"
 			},
 			"engines": {
 				"node": ">=8"
@@ -569,19 +569,23 @@
 			"dev": true
 		},
 		"node_modules/depd": {
-			"version": "1.1.2",
-			"resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
-			"integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=",
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+			"integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
 			"dev": true,
 			"engines": {
-				"node": ">= 0.6"
+				"node": ">= 0.8"
 			}
 		},
 		"node_modules/destroy": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
-			"integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=",
-			"dev": true
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
+			"integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
+			"dev": true,
+			"engines": {
+				"node": ">= 0.8",
+				"npm": "1.2.8000 || >= 1.4.16"
+			}
 		},
 		"node_modules/docsify": {
 			"version": "4.13.0",
@@ -632,25 +636,27 @@
 			}
 		},
 		"node_modules/docsify-server-renderer": {
-			"version": "4.12.1",
-			"resolved": "https://registry.npmjs.org/docsify-server-renderer/-/docsify-server-renderer-4.12.1.tgz",
-			"integrity": "sha512-IYakkc+UxPS89N/Mq8MF4SKTQ1gtxN5nDEFAnJPf5TvQO+1fuxszHgv/hMprG5z/ms7PJb1w4nMykUfRW36+/A==",
+			"version": "4.13.1",
+			"resolved": "https://registry.npmjs.org/docsify-server-renderer/-/docsify-server-renderer-4.13.1.tgz",
+			"integrity": "sha512-XNJeCK3zp+mVO7JZFn0bH4hNBAMMC1MbuCU7CBsjLHYn4NHrjIgCBGmylzEan3/4Qm6kbSzQx8XzUK5T7GQxHw==",
+			"deprecated": "docsify-server-renderer 4.x and below is no longer supported while we investigate the future of SSR and SSG for Docsify",
 			"dev": true,
+			"license": "MIT",
 			"dependencies": {
-				"debug": "^4.3.2",
-				"docsify": "^4.12.0",
-				"dompurify": "^2.2.6",
-				"node-fetch": "^2.6.0",
+				"debug": "^4.3.3",
+				"docsify": "^4.12.4",
+				"node-fetch": "^2.6.6",
 				"resolve-pathname": "^3.0.0"
 			}
 		},
 		"node_modules/docsify-server-renderer/node_modules/debug": {
-			"version": "4.3.2",
-			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
-			"integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
+			"version": "4.4.1",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
+			"integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
 			"dev": true,
+			"license": "MIT",
 			"dependencies": {
-				"ms": "2.1.2"
+				"ms": "^2.1.3"
 			},
 			"engines": {
 				"node": ">=6.0"
@@ -662,10 +668,11 @@
 			}
 		},
 		"node_modules/docsify-server-renderer/node_modules/ms": {
-			"version": "2.1.2",
-			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-			"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-			"dev": true
+			"version": "2.1.3",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+			"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+			"dev": true,
+			"license": "MIT"
 		},
 		"node_modules/docsify-to-pdf": {
 			"version": "0.0.5",
@@ -689,12 +696,6 @@
 				"docsify-to-pdf": ".bin/cli.js"
 			}
 		},
-		"node_modules/dompurify": {
-			"version": "2.2.9",
-			"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.2.9.tgz",
-			"integrity": "sha512-+9MqacuigMIZ+1+EwoEltogyWGFTJZWU3258Rupxs+2CGs4H914G9er6pZbsme/bvb5L67o2rade9n21e4RW/w==",
-			"dev": true
-		},
 		"node_modules/dot-prop": {
 			"version": "5.3.0",
 			"resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
@@ -804,7 +805,7 @@
 		"node_modules/etag": {
 			"version": "1.8.1",
 			"resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
-			"integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=",
+			"integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
 			"dev": true,
 			"engines": {
 				"node": ">= 0.6"
@@ -844,9 +845,9 @@
 			}
 		},
 		"node_modules/fill-range": {
-			"version": "7.0.1",
-			"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-			"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+			"version": "7.1.1",
+			"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+			"integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
 			"dev": true,
 			"dependencies": {
 				"to-regex-range": "^5.0.1"
@@ -895,7 +896,7 @@
 		"node_modules/fresh": {
 			"version": "0.5.2",
 			"resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
-			"integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=",
+			"integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
 			"dev": true,
 			"engines": {
 				"node": ">= 0.6"
@@ -1089,19 +1090,28 @@
 			"dev": true
 		},
 		"node_modules/http-errors": {
-			"version": "1.7.3",
-			"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz",
-			"integrity": "sha512-ZTTX0MWrsQ2ZAhA1cejAwDLycFsd7I7nVtnkT3Ol0aqodaKW+0CTZDQ1uBv5whptCnc8e8HeRRJxRs0kmm/Qfw==",
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
+			"integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
 			"dev": true,
 			"dependencies": {
-				"depd": "~1.1.2",
+				"depd": "2.0.0",
 				"inherits": "2.0.4",
-				"setprototypeof": "1.1.1",
-				"statuses": ">= 1.5.0 < 2",
-				"toidentifier": "1.0.0"
+				"setprototypeof": "1.2.0",
+				"statuses": "2.0.1",
+				"toidentifier": "1.0.1"
 			},
 			"engines": {
-				"node": ">= 0.6"
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/http-errors/node_modules/statuses": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+			"integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+			"dev": true,
+			"engines": {
+				"node": ">= 0.8"
 			}
 		},
 		"node_modules/https-proxy-agent": {
@@ -1831,10 +1841,11 @@
 			}
 		},
 		"node_modules/prismjs": {
-			"version": "1.27.0",
-			"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.27.0.tgz",
-			"integrity": "sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==",
+			"version": "1.30.0",
+			"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
+			"integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
 			"dev": true,
+			"license": "MIT",
 			"engines": {
 				"node": ">=6"
 			}
@@ -1938,9 +1949,9 @@
 			"dev": true
 		},
 		"node_modules/puppeteer/node_modules/ws": {
-			"version": "6.2.2",
-			"resolved": "https://registry.npmjs.org/ws/-/ws-6.2.2.tgz",
-			"integrity": "sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==",
+			"version": "6.2.3",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-6.2.3.tgz",
+			"integrity": "sha512-jmTjYU0j60B+vHey6TfR3Z7RD61z/hmxBS3VMSGIrroOWXQEneK1zNuotOUrGyBHQj0yrpsLHPWtigEFd13ndA==",
 			"dev": true,
 			"dependencies": {
 				"async-limiter": "~1.0.0"
@@ -2143,50 +2154,80 @@
 			}
 		},
 		"node_modules/send": {
-			"version": "0.17.1",
-			"resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz",
-			"integrity": "sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==",
+			"version": "0.19.0",
+			"resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz",
+			"integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==",
 			"dev": true,
 			"dependencies": {
 				"debug": "2.6.9",
-				"depd": "~1.1.2",
-				"destroy": "~1.0.4",
+				"depd": "2.0.0",
+				"destroy": "1.2.0",
 				"encodeurl": "~1.0.2",
 				"escape-html": "~1.0.3",
 				"etag": "~1.8.1",
 				"fresh": "0.5.2",
-				"http-errors": "~1.7.2",
+				"http-errors": "2.0.0",
 				"mime": "1.6.0",
-				"ms": "2.1.1",
-				"on-finished": "~2.3.0",
+				"ms": "2.1.3",
+				"on-finished": "2.4.1",
 				"range-parser": "~1.2.1",
-				"statuses": "~1.5.0"
+				"statuses": "2.0.1"
 			},
 			"engines": {
 				"node": ">= 0.8.0"
 			}
 		},
 		"node_modules/send/node_modules/ms": {
-			"version": "2.1.1",
-			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
-			"integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
+			"version": "2.1.3",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+			"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
 			"dev": true
 		},
-		"node_modules/serve-static": {
-			"version": "1.14.1",
-			"resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.1.tgz",
-			"integrity": "sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==",
+		"node_modules/send/node_modules/on-finished": {
+			"version": "2.4.1",
+			"resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+			"integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
 			"dev": true,
 			"dependencies": {
-				"encodeurl": "~1.0.2",
+				"ee-first": "1.1.1"
+			},
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/send/node_modules/statuses": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+			"integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+			"dev": true,
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/serve-static": {
+			"version": "1.16.2",
+			"resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz",
+			"integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==",
+			"dev": true,
+			"dependencies": {
+				"encodeurl": "~2.0.0",
 				"escape-html": "~1.0.3",
 				"parseurl": "~1.3.3",
-				"send": "0.17.1"
+				"send": "0.19.0"
 			},
 			"engines": {
 				"node": ">= 0.8.0"
 			}
 		},
+		"node_modules/serve-static/node_modules/encodeurl": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+			"integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+			"dev": true,
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
 		"node_modules/set-blocking": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
@@ -2194,9 +2235,9 @@
 			"dev": true
 		},
 		"node_modules/setprototypeof": {
-			"version": "1.1.1",
-			"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
-			"integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==",
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+			"integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
 			"dev": true
 		},
 		"node_modules/signal-exit": {
@@ -2346,9 +2387,9 @@
 			}
 		},
 		"node_modules/toidentifier": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
-			"integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==",
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+			"integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
 			"dev": true,
 			"engines": {
 				"node": ">=0.6"
@@ -2641,9 +2682,9 @@
 			}
 		},
 		"node_modules/ws": {
-			"version": "7.5.0",
-			"resolved": "https://registry.npmjs.org/ws/-/ws-7.5.0.tgz",
-			"integrity": "sha512-6ezXvzOZupqKj4jUqbQ9tXuJNo+BR2gU8fFRk3XCP3e0G6WT414u5ELe6Y0vtp7kmSJ3F7YWObSNr1ESsgi4vw==",
+			"version": "7.5.10",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
+			"integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
 			"dev": true,
 			"engines": {
 				"node": ">=8.3.0"
@@ -2970,12 +3011,12 @@
 			}
 		},
 		"braces": {
-			"version": "3.0.2",
-			"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-			"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+			"integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
 			"dev": true,
 			"requires": {
-				"fill-range": "^7.0.1"
+				"fill-range": "^7.1.1"
 			}
 		},
 		"buffer-crc32": {
@@ -3240,15 +3281,15 @@
 			"dev": true
 		},
 		"depd": {
-			"version": "1.1.2",
-			"resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
-			"integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=",
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+			"integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
 			"dev": true
 		},
 		"destroy": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
-			"integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=",
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
+			"integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
 			"dev": true
 		},
 		"docsify": {
@@ -3292,31 +3333,30 @@
 			}
 		},
 		"docsify-server-renderer": {
-			"version": "4.12.1",
-			"resolved": "https://registry.npmjs.org/docsify-server-renderer/-/docsify-server-renderer-4.12.1.tgz",
-			"integrity": "sha512-IYakkc+UxPS89N/Mq8MF4SKTQ1gtxN5nDEFAnJPf5TvQO+1fuxszHgv/hMprG5z/ms7PJb1w4nMykUfRW36+/A==",
+			"version": "4.13.1",
+			"resolved": "https://registry.npmjs.org/docsify-server-renderer/-/docsify-server-renderer-4.13.1.tgz",
+			"integrity": "sha512-XNJeCK3zp+mVO7JZFn0bH4hNBAMMC1MbuCU7CBsjLHYn4NHrjIgCBGmylzEan3/4Qm6kbSzQx8XzUK5T7GQxHw==",
 			"dev": true,
 			"requires": {
-				"debug": "^4.3.2",
-				"docsify": "^4.12.0",
-				"dompurify": "^2.2.6",
-				"node-fetch": "^2.6.0",
+				"debug": "^4.3.3",
+				"docsify": "^4.12.4",
+				"node-fetch": "^2.6.6",
 				"resolve-pathname": "^3.0.0"
 			},
 			"dependencies": {
 				"debug": {
-					"version": "4.3.2",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
-					"integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
+					"version": "4.4.1",
+					"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
+					"integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
 					"dev": true,
 					"requires": {
-						"ms": "2.1.2"
+						"ms": "^2.1.3"
 					}
 				},
 				"ms": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-					"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+					"version": "2.1.3",
+					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+					"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
 					"dev": true
 				}
 			}
@@ -3339,12 +3379,6 @@
 				"yesno": "^0.2.0"
 			}
 		},
-		"dompurify": {
-			"version": "2.2.9",
-			"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.2.9.tgz",
-			"integrity": "sha512-+9MqacuigMIZ+1+EwoEltogyWGFTJZWU3258Rupxs+2CGs4H914G9er6pZbsme/bvb5L67o2rade9n21e4RW/w==",
-			"dev": true
-		},
 		"dot-prop": {
 			"version": "5.3.0",
 			"resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
@@ -3432,7 +3466,7 @@
 		"etag": {
 			"version": "1.8.1",
 			"resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
-			"integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=",
+			"integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
 			"dev": true
 		},
 		"extract-zip": {
@@ -3463,9 +3497,9 @@
 			"dev": true
 		},
 		"fill-range": {
-			"version": "7.0.1",
-			"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-			"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+			"version": "7.1.1",
+			"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+			"integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
 			"dev": true,
 			"requires": {
 				"to-regex-range": "^5.0.1"
@@ -3505,7 +3539,7 @@
 		"fresh": {
 			"version": "0.5.2",
 			"resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
-			"integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=",
+			"integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
 			"dev": true
 		},
 		"fs-extra": {
@@ -3646,16 +3680,24 @@
 			"dev": true
 		},
 		"http-errors": {
-			"version": "1.7.3",
-			"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz",
-			"integrity": "sha512-ZTTX0MWrsQ2ZAhA1cejAwDLycFsd7I7nVtnkT3Ol0aqodaKW+0CTZDQ1uBv5whptCnc8e8HeRRJxRs0kmm/Qfw==",
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
+			"integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
 			"dev": true,
 			"requires": {
-				"depd": "~1.1.2",
+				"depd": "2.0.0",
 				"inherits": "2.0.4",
-				"setprototypeof": "1.1.1",
-				"statuses": ">= 1.5.0 < 2",
-				"toidentifier": "1.0.0"
+				"setprototypeof": "1.2.0",
+				"statuses": "2.0.1",
+				"toidentifier": "1.0.1"
+			},
+			"dependencies": {
+				"statuses": {
+					"version": "2.0.1",
+					"resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+					"integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+					"dev": true
+				}
 			}
 		},
 		"https-proxy-agent": {
@@ -4201,9 +4243,9 @@
 			"dev": true
 		},
 		"prismjs": {
-			"version": "1.27.0",
-			"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.27.0.tgz",
-			"integrity": "sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==",
+			"version": "1.30.0",
+			"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
+			"integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
 			"dev": true
 		},
 		"process-nextick-args": {
@@ -4281,9 +4323,9 @@
 					"dev": true
 				},
 				"ws": {
-					"version": "6.2.2",
-					"resolved": "https://registry.npmjs.org/ws/-/ws-6.2.2.tgz",
-					"integrity": "sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==",
+					"version": "6.2.3",
+					"resolved": "https://registry.npmjs.org/ws/-/ws-6.2.3.tgz",
+					"integrity": "sha512-jmTjYU0j60B+vHey6TfR3Z7RD61z/hmxBS3VMSGIrroOWXQEneK1zNuotOUrGyBHQj0yrpsLHPWtigEFd13ndA==",
 					"dev": true,
 					"requires": {
 						"async-limiter": "~1.0.0"
@@ -4451,44 +4493,67 @@
 			}
 		},
 		"send": {
-			"version": "0.17.1",
-			"resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz",
-			"integrity": "sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==",
+			"version": "0.19.0",
+			"resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz",
+			"integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==",
 			"dev": true,
 			"requires": {
 				"debug": "2.6.9",
-				"depd": "~1.1.2",
-				"destroy": "~1.0.4",
+				"depd": "2.0.0",
+				"destroy": "1.2.0",
 				"encodeurl": "~1.0.2",
 				"escape-html": "~1.0.3",
 				"etag": "~1.8.1",
 				"fresh": "0.5.2",
-				"http-errors": "~1.7.2",
+				"http-errors": "2.0.0",
 				"mime": "1.6.0",
-				"ms": "2.1.1",
-				"on-finished": "~2.3.0",
+				"ms": "2.1.3",
+				"on-finished": "2.4.1",
 				"range-parser": "~1.2.1",
-				"statuses": "~1.5.0"
+				"statuses": "2.0.1"
 			},
 			"dependencies": {
 				"ms": {
-					"version": "2.1.1",
-					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
-					"integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
+					"version": "2.1.3",
+					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+					"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+					"dev": true
+				},
+				"on-finished": {
+					"version": "2.4.1",
+					"resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+					"integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+					"dev": true,
+					"requires": {
+						"ee-first": "1.1.1"
+					}
+				},
+				"statuses": {
+					"version": "2.0.1",
+					"resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+					"integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
 					"dev": true
 				}
 			}
 		},
 		"serve-static": {
-			"version": "1.14.1",
-			"resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.1.tgz",
-			"integrity": "sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==",
+			"version": "1.16.2",
+			"resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz",
+			"integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==",
 			"dev": true,
 			"requires": {
-				"encodeurl": "~1.0.2",
+				"encodeurl": "~2.0.0",
 				"escape-html": "~1.0.3",
 				"parseurl": "~1.3.3",
-				"send": "0.17.1"
+				"send": "0.19.0"
+			},
+			"dependencies": {
+				"encodeurl": {
+					"version": "2.0.0",
+					"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+					"integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+					"dev": true
+				}
 			}
 		},
 		"set-blocking": {
@@ -4498,9 +4563,9 @@
 			"dev": true
 		},
 		"setprototypeof": {
-			"version": "1.1.1",
-			"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
-			"integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==",
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+			"integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
 			"dev": true
 		},
 		"signal-exit": {
@@ -4616,9 +4681,9 @@
 			}
 		},
 		"toidentifier": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
-			"integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==",
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+			"integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
 			"dev": true
 		},
 		"tr46": {
@@ -4855,9 +4920,9 @@
 			}
 		},
 		"ws": {
-			"version": "7.5.0",
-			"resolved": "https://registry.npmjs.org/ws/-/ws-7.5.0.tgz",
-			"integrity": "sha512-6ezXvzOZupqKj4jUqbQ9tXuJNo+BR2gU8fFRk3XCP3e0G6WT414u5ELe6Y0vtp7kmSJ3F7YWObSNr1ESsgi4vw==",
+			"version": "7.5.10",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
+			"integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
 			"dev": true,
 			"requires": {}
 		},
--- a/quiz-app/.eslintrc.cjs
+++ b/quiz-app/.eslintrc.cjs
@@ -0,0 +1,11 @@
+/* eslint-env node */
+module.exports = {
+  root: true,
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended'
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  }
+}
--- a/quiz-app/.eslintrc.js
+++ b/quiz-app/.eslintrc.js
@@ -1,8 +0,0 @@
-module.exports = {
-  extends: [
-    'plugin:vue/vue3-recommended',
-  ],
-  rules: {
-    'vue/multi-word-component-names': 'off'
-  }
-}
--- a/quiz-app/.gitignore
+++ b/quiz-app/.gitignore
@@ -1 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+.vscode
 node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
--- a/quiz-app/.vscode/settings.json
+++ b/quiz-app/.vscode/settings.json
@@ -1,5 +0,0 @@
-{
-    "staticWebApps.appSubpath": "/",
-    "staticWebApps.apiSubpath": "api",
-    "staticWebApps.outputSubpath": "dist"
-}
--- a/quiz-app/LICENSE
+++ b/quiz-app/LICENSE
@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2020 Arpan Adhikari
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
--- a/quiz-app/README.md
+++ b/quiz-app/README.md
@@ -1,33 +1,177 @@
-# Quizzes
+# Quiz app

-These quizzes are the pre- and post-lecture quizzes for the web development for beginners curriculum at https://aka.ms/webdev-beginners
+These quizzes are the pre- and post-lecture quizzes for the data science curriculum at https://aka.ms/webdev-beginners

-## Project setup
+## Adding a translated quiz set
+
+Add a quiz translation by creating matching quiz structures in the `assets/translations` folders. The canonical quizzes are in `assets/translations/en`. The quizzes are broken into several groupings. Make sure to align the numbering with the proper quiz section. There are 40 quizzes total in this curriculum, with the count starting at 0.
+
+  
+<details>
+<summary>Here's the shape of a translation file:</summary>

 ```
-npm install
+[
+    {
+        "title": "A title",
+        "complete": "A complete button title",
+        "error": "An error message upon selecting the wrong answer",
+        "quizzes": [
+            {
+                "id": 1,
+                "title": "Title",
+                "quiz": [
+                    {
+                        "questionText": "The question asked",
+                        "answerOptions": [
+                            {
+                                "answerText": "Option 1 title",
+                                "isCorrect": true
+                            },
+                            {
+                                "answerText": "Option 2 title",
+                                "isCorrect": false
+                            }
+                        ]
+                    }
+                ]
+            }
+        ]
+    }
+]
 ```
+</details>

-### Compiles and hot-reloads for development
+After editing the translations, edit the index.js file in the translation folder to import all the files following the conventions in `en`.
+
+Edit the `index.js` file in `assets/translations` to import the new translated files. 
+
+For example, if your translation JSON is in `ex.json`,  make 'ex' the localization key, then enter it as shown below to import it 
+
+<details>
+<summary>index.js</summary>

 ```
-npm run serve
+import ex from "./ex.json";
+
+// if 'ex' is localization key then enter it like so in `messages` to expose it 
+
+const messages = {
+  ex: ex[0],
+};
+
+export default messages;
 ```

-### Compiles and minifies for production
+</details>

-```
-npm run build
-```
+## Run the Quiz App locally

-### Lints and fixes files
+### Prerequisites

-```
-npm run lint
-```
+- A GitHub account
+- [Node.js and Git](https://nodejs.org/)

-### Customize configuration
+### Install & Setup

-See [Configuration Reference](https://cli.vuejs.org/config/).
+1. Create a repository from this [template](https://github.com/new?template_name=Web-Dev-For-Beginners&template_owner=microsoft) 

-Credits: Thanks to the original version of this quiz app: https://github.com/arpan45/simple-quiz-vue
+1. Clone your new repository, and navigate to the quiz-app
+
+   ```bash
+   git clone https://github.com/your-github-organization/repo-name
+   cd repo-name/quiz-app
+   ```
+
+1. Install the npm packages & dependencies
+
+   ```bash
+   npm install
+   ```
+
+### Build the app
+
+1. To build the solution, run:
+
+   ```bash
+   npm run build
+   ```
+
+### Start the App
+
+1. To run the solution, run:
+
+    ```bash
+    npm run dev
+    ```
+
+### [Optional] Linting
+
+1. To ensure the code is linted, run:
+
+    ```bash
+    npm run lint
+    ```
+
+## Deploy the Quiz-app to Azure 
+
+### Prerequisites
+- An Azure Subscription. Sign up for one for free [here](https://aka.ms/azure-free).
+
+    _Cost Estimate to deploy this quiz-app: FREE_
+
+[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.StaticApp)
+
+Once you are signed in on Azure through the link above, select a subscription and resource group then:
+
+- Static Web App details: Provide a name and select a hosting plan
+- GitHub Login: Set your deployment source as GitHub then log in and fill in the required fields on the form:
+    - *Organization* – Choose your organization.
+    - *Repository* – Select the Web Dev for Beginners curriculum repository. 
+    - *Branch* - Select a branch (main) 
+- Build Presets: Azure Static Web Apps uses a detection algorithm to detect the framework used in your application. 
+    - *App location* - ./quiz-app
+    - *Api location* -
+    - *Output location* - dist
+- Deployment: Click 'Review + Create', then 'Create'
+
+    Once deployed, a workflow file will be created in the *.github* directory of your repo.  This workflow file contains instructions of events that will trigger a re-deployment of the app to Azure, for example, _a **push** on branch **main**_ etc.
+
+    <details>
+    <summary>Example Workflow File</summary>
+    Here’s an example of what the GitHub Actions workflow file might look like:
+    name: Azure Static Web Apps CI/CD
+
+    ```
+    on:
+    push:
+        branches:
+        - main
+    pull_request:
+        types: [opened, synchronize, reopened, closed]
+        branches:
+        - main
+
+    jobs:
+    build_and_deploy_job:
+        runs-on: ubuntu-latest
+        name: Build and Deploy Job
+        steps:
+        - uses: actions/checkout@v2
+        - name: Build And Deploy
+            id: builddeploy
+            uses: Azure/static-web-apps-deploy@v1
+            with:
+            azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
+            repo_token: ${{ secrets.GITHUB_TOKEN }}
+            action: "upload"
+            app_location: "quiz-app" # App source code path
+            api_location: ""API source code path optional
+            output_location: "dist" #Built app content directory - optional
+    ```
+
+    </details>
+
+- Post-Deployment: After deployment is complete, click on 'Go to Deployment' then 'View app in browser'.
+
+Once your GitHub Action (workflow) is executed successfully, refresh the live page to view your application.
--- a/quiz-app/index.html
+++ b/quiz-app/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/quiz-app/jsconfig.json
+++ b/quiz-app/jsconfig.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}
--- a/quiz-app/package-lock.json
+++ b/quiz-app/package-lock.json
--- a/quiz-app/package.json
+++ b/quiz-app/package.json
@@ -1,48 +1,22 @@
 {
-  "name": "quizzes",
-  "version": "0.1.0",
+  "name": "quizapp",
+  "version": "1.0.0",
  "private": true,
-  	"engines": {
-		"npm": ">=9.0.0",
-		"node": ">=18.0.0"
-	},
+  "type": "module",
  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
  },
  "dependencies": {
-    "core-js": "^3.6.5",
-    "vue": "^2.6.11",
-    "vue-router": "^3.2.0",
-    "vue-i18n": "^8.28.2"
+    "vue": "^3.4.29",
+    "vue-router": "^4.3.3"
  },
  "devDependencies": {
-    "babel-eslint": "^10.1.0",
-    "eslint": "^7.5.0",
-    "@vue/cli-plugin-babel": "~5.0.8",
-    "@vue/cli-plugin-eslint": "~5.0.8",
-    "@vue/cli-service": "~5.0.8",
-    "eslint-plugin-vue": "^9.14.1",
-    "vue-template-compiler": "^2.6.11"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended"
-    ],
-    "parserOptions": {
-      "parser": "babel-eslint"
-    },
-    "rules": {}
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead"
-  ]
+    "@vitejs/plugin-vue": "^5.2.4",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.23.0",
+    "vite": "^6.3.5"
+  }
 }
--- a/quiz-app/public/favicon.ico
+++ b/quiz-app/public/favicon.ico
--- a/quiz-app/public/index.html
+++ b/quiz-app/public/index.html
@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>
--- a/quiz-app/public/routes.json
+++ b/quiz-app/public/routes.json
@@ -1,8 +0,0 @@
-{
-	"routes": [
-		{
-			"route": "/*",
-			"serve": "/index.html"
-		}
-	]
-}
--- a/quiz-app/src/App.vue
+++ b/quiz-app/src/App.vue
@@ -1,116 +1,84 @@
-<template>
-  <div>
-    <nav>
-      <router-link
-        class="navlink"
-        to="/"
-      >
-        Home
-      </router-link>
-      <label for="locale">locale</label>
-      <select v-model="locale">
-        <option
-          v-for="localeName in availableLocales"
-          :key="localeName"
-        >
-          {{ localeName }}
-        </option>
-      </select>
-    </nav>
-    <div id="app">
-      <h1>{{ $t("title") }}</h1>
-      <router-view>
-        <Quiz />
-      </router-view>
-    </div>
-  </div>
-</template>
-
-<script>
-import Quiz from "@/components/Quiz.vue";
-import messages from "@/assets/translations";
-
-export default {
-  name: "App",
-  i18n: { messages },
-  components: {
-    Quiz,
-  },
-  data() {
-    return {
-      locale: "en",
-      availableLocales: Object.keys(messages).sort(),
-    };
-  },
-  watch: {
-    locale(val) {
-      this.$root.$i18n.locale = val;
-    },
-  },
-  created() {
-    if (this.$route.query.loc) {
-      this.locale = this.$route.query.loc;
-    }
-  },
-};
+<script setup>
+import { RouterLink, RouterView } from 'vue-router'
+import QuizGreeting from './components/QuizGreeting.vue'
 </script>

-<style>
-html {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  color: #252d4a;
+<template>
+  <header>
+    
+    <div class="wrapper">
+      <QuizGreeting msg="Quiz app" />
+
+      <nav>
+        <RouterLink to="/">Home</RouterLink>
+        <RouterLink to="/about">About</RouterLink>
+      </nav>
+    </div>
+  </header>
+
+  <RouterView />
+</template>
+
+<style scoped>
+header {
+  line-height: 1.5;
+  max-height: 100vh;
 }
+
+.logo {
+  display: block;
+  margin: 0 auto 2rem;
+}
+
 nav {
-  background-color: #252d4a;
-  padding: 1em;
-  margin-bottom: 20px;
+  width: 100%;
+  font-size: 12px;
+  text-align: center;
+  margin-top: 2rem;
+}
+
+nav a.router-link-exact-active {
+  color: var(--color-text);
+}
+
+nav a.router-link-exact-active:hover {
+  background-color: transparent;
 }

 nav a {
-  color: white;
-  text-align: right;
+  display: inline-block;
+  padding: 0 1rem;
+  border-left: 1px solid var(--color-border);
 }

-.link {
-  display: list-item;
+nav a:first-of-type {
+  border: 0;
 }

-h1,
-h2,
-h3,
-.message {
-  text-align: center;
-}
-.error {
-  color: red;
-}
-.card {
-  width: 60%;
-  border: #252d4a solid;
-  border-radius: 5px;
-  margin: auto;
-  padding: 1em;
-}
-.btn {
-  min-width: 50%;
-  font-size: 16px;
-  text-align: center;
-  cursor: pointer;
-  margin-bottom: 5px;
-  width: 50%;
-  font-size: 16px;
-  color: #ffffff;
-  background-color: #252d4a;
-  border-radius: 5px;
-  padding: 5px;
-  justify-content: flex-start;
-  align-items: center;
-}
-.ans-btn {
-  justify-content: center;
+@media (min-width: 1024px) {
+  header {
    display: flex;
-  margin: 4px auto;
+    place-items: center;
+    padding-right: calc(var(--section-gap) / 2);
+  }
+
+  .logo {
+    margin: 0 2rem 0 0;
+  }
+
+  header .wrapper {
+    display: flex;
+    place-items: flex-start;
+    flex-wrap: wrap;
+  }
+
+  nav {
+    text-align: left;
+    margin-left: -1rem;
+    font-size: 1rem;
+
+    padding: 1rem 0;
+    margin-top: 1rem;
+  }
 }
 </style>
--- a/quiz-app/src/assets/base.css
+++ b/quiz-app/src/assets/base.css
@@ -0,0 +1,86 @@
+/* color palette from <https://github.com/vuejs/theme> */
+:root {
+  --vt-c-white: #ffffff;
+  --vt-c-white-soft: #f8f8f8;
+  --vt-c-white-mute: #f2f2f2;
+
+  --vt-c-black: #181818;
+  --vt-c-black-soft: #222222;
+  --vt-c-black-mute: #282828;
+
+  --vt-c-indigo: #2c3e50;
+
+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+  --vt-c-text-light-1: var(--vt-c-indigo);
+  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+  --vt-c-text-dark-1: var(--vt-c-white);
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+}
+
+/* semantic color variables for this project */
+:root {
+  --color-background: var(--vt-c-white);
+  --color-background-soft: var(--vt-c-white-soft);
+  --color-background-mute: var(--vt-c-white-mute);
+
+  --color-border: var(--vt-c-divider-light-2);
+  --color-border-hover: var(--vt-c-divider-light-1);
+
+  --color-heading: var(--vt-c-text-light-1);
+  --color-text: var(--vt-c-text-light-1);
+
+  --section-gap: 160px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: var(--vt-c-black);
+    --color-background-soft: var(--vt-c-black-soft);
+    --color-background-mute: var(--vt-c-black-mute);
+
+    --color-border: var(--vt-c-divider-dark-2);
+    --color-border-hover: var(--vt-c-divider-dark-1);
+
+    --color-heading: var(--vt-c-text-dark-1);
+    --color-text: var(--vt-c-text-dark-2);
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  font-weight: normal;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--color-text);
+  background: var(--color-background);
+  transition:
+    color 0.5s,
+    background-color 0.5s;
+  line-height: 1.6;
+  font-family:
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Fira Sans',
+    'Droid Sans',
+    'Helvetica Neue',
+    sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
--- a/quiz-app/src/assets/logo.svg
+++ b/quiz-app/src/assets/logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
--- a/quiz-app/src/assets/main.css
+++ b/quiz-app/src/assets/main.css
@@ -0,0 +1,35 @@
+@import './base.css';
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  font-weight: normal;
+}
+
+a,
+.green {
+  text-decoration: none;
+  color: hsla(160, 100%, 37%, 1);
+  transition: 0.4s;
+  padding: 3px;
+}
+
+@media (hover: hover) {
+  a:hover {
+    background-color: hsla(160, 100%, 37%, 0.2);
+  }
+}
+
+@media (min-width: 1024px) {
+  body {
+    display: flex;
+    place-items: center;
+  }
+
+  #app {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    padding: 0 2rem;
+  }
+}
--- a/quiz-app/src/components/Quiz.vue
+++ b/quiz-app/src/components/Quiz.vue
@@ -1,84 +0,0 @@
-<template>
-  <div class="card">
-    <div
-      v-for="q in questions"
-      :key="q.id"
-    >
-      <div v-if="route == q.id">
-        <h2>{{ q.title }}</h2>
-        <hr>
-        <h3
-          v-if="complete"
-          class="message"
-        >
-          {{ $t("complete") }}
-        </h3>
-        <div v-else>
-          <h3
-            v-if="error"
-            class="error"
-          >
-            {{ $t("error") }}
-          </h3>
-          <h2>
-            {{ q.quiz[currentQuestion].questionText }}
-          </h2>
-          <div>
-            <button
-              v-for="(option, index) in q.quiz[currentQuestion].answerOptions"
-              :key="index"
-              class="btn ans-btn"
-              @click="handleAnswerClick(option.isCorrect)"
-            >
-              {{ option.answerText }}
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import messages from "@/assets/translations";
-
-export default {
-  name: "Quiz",
-  data() {
-    return {
-      currentQuestion: 0,
-      complete: false,
-      error: false,
-      route: "",
-      locale: "",
-    };
-  },
-  computed: {
-    questions() {
-      return this.$t("quizzes");
-    },
-  },
-
-  i18n: { messages },
-  created() {
-    this.route = this.$route.params.id;
-    this.locale = this.$route.query.loc;
-  },
-  methods: {
-    handleAnswerClick(isCorrect) {
-      this.error = false;
-      let nextQuestion = this.currentQuestion + 1;
-      if (isCorrect == "true") {
-        //always 3 questions per quiz
-        if (nextQuestion < 3) {
-          this.currentQuestion = nextQuestion;
-        } else {
-          this.complete = true;
-        }
-      } else {
-        this.error = true;
-      }
-    },
-  },
-};
-</script>
--- a/quiz-app/src/components/QuizComponent.vue
+++ b/quiz-app/src/components/QuizComponent.vue
@@ -0,0 +1,128 @@
+<style scoped>
+.button {
+  margin: 10px;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}
+
+.button:hover {
+  background-color: black;
+  color: white;
+}
+
+.error {
+  color: red;
+  background-color: pink;
+}
+
+</style>
+<template>
+    <div class="card">
+        Back to <router-link to="/">Quizzes</router-link>
+    </div>
+    <div class="card">
+      <div
+        v-for="q in questions"
+        :key="q.id"
+      >
+        <div v-if="route == q.id">
+          <h2>{{ q.title }}</h2>
+          <hr>
+          <h3
+            v-if="complete"
+            class="message"
+          >
+            {{ file.complete }}
+          </h3>
+          <div v-else>
+            <h3
+              v-if="error"
+              class="error"
+            >
+              {{ file.error }}
+            </h3>
+            <h2>
+              {{ q.quiz[currentQuestion].questionText }}
+            </h2>
+            <div>
+              <button
+                v-for="(option, index) in q.quiz[currentQuestion].answerOptions"
+                :key="index"
+                class="btn ans-btn button"
+                @click="handleAnswerClick(option.isCorrect)"
+              >
+                {{ option.answerText }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+
+  function getFileByLocale(locale) {
+    // loop keys in messages, if key is the start of locale, return that file
+    let file = {
+        complete: "Complete",
+        error: "Error",
+        quizzes: [],
+        title: "Default Quiz",
+    };
+    for (let key in messages) {
+      if (locale.startsWith(key)) {
+        file = messages[key];
+        break;
+      }
+    }
+    return file;
+  }
+
+  import messages from "@/assets/translations";
+  let locale = navigator.language || navigator.userLanguage;
+  console.log("locale", locale);
+  console.log("messages", messages);
+  
+  
+  export default {
+    name: "QuizComponent",
+    data() {
+      return {
+        currentQuestion: 0,
+        complete: false,
+        error: false,
+        route: "",
+        locale: "",
+        file: getFileByLocale(locale),
+      };
+    },
+    computed: {
+      questions() {
+        return this.file.quizzes;
+      },
+    },
+    created() {
+      this.route = this.$route.params.id;
+      this.locale = this.$route.query.loc;
+    },
+    methods: {
+      handleAnswerClick(isCorrect) {
+        this.error = false;
+        let nextQuestion = this.currentQuestion + 1;
+        if (isCorrect == "true") {
+          //always 3 questions per quiz
+          if (nextQuestion < 3) {
+            this.currentQuestion = nextQuestion;
+          } else {
+            this.complete = true;
+          }
+        } else {
+          this.error = true;
+        }
+      },
+    },
+  };
+  </script>
+  
--- a/quiz-app/src/components/QuizGreeting.vue
+++ b/quiz-app/src/components/QuizGreeting.vue
@@ -0,0 +1,42 @@
+<script setup>
+defineProps({
+  msg: {
+    type: String,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <div class="greetings">
+    <h1 class="green">{{ msg }}</h1>
+    <h3>
+     Welcome to the quiz app! This is a simple quiz app that allows you to take quizzes and test your knowledge.
+    </h3>
+  </div>
+</template>
+
+<style scoped>
+h1 {
+  font-weight: 500;
+  font-size: 2.6rem;
+  position: relative;
+  top: -10px;
+}
+
+h3 {
+  font-size: 1.2rem;
+}
+
+.greetings h1,
+.greetings h3 {
+  text-align: center;
+}
+
+@media (min-width: 1024px) {
+  .greetings h1,
+  .greetings h3 {
+    text-align: left;
+  }
+}
+</style>
--- a/quiz-app/src/components/QuizzesComponent.vue
+++ b/quiz-app/src/components/QuizzesComponent.vue
@@ -0,0 +1,59 @@
+<style>
+    .question {
+      margin: 10px;
+      padding: 10px;
+      border: 1px solid #ccc;
+      border-radius: 5px;
+    }
+
+</style>
+<template>
+    <div class="question" v-for="q in questions" :key="q.id" >
+      <router-link
+        
+        :key="q.id"
+        :to="`quiz/${q.id}`"
+        class="link"
+      >
+        {{ q.title }}
+      </router-link>
+    </div>
+  </template>
+  
+  <script>
+  import messages from "@/assets/translations";
+  
+  function getFileByLocale(locale) {
+    // loop keys in messages, if key is the start of locale, return that file
+    let file = {
+        complete: "Complete",
+        error: "Error",
+        quizzes: [],
+        title: "Default Quiz",
+    };
+    for (let key in messages) {
+      if (locale.startsWith(key)) {
+        file = messages[key];
+        break;
+      }
+    }
+    return file;
+  }
+
+  let locale = navigator.language || navigator.userLanguage;
+
+  export default {
+    name: "QuizzesComponent",
+    data() {
+      return {
+        file: getFileByLocale(locale),
+      };
+    },
+    computed: {
+      questions() {
+        return this.file.quizzes;
+      },
+    },
+    i18n: { messages },
+  };
+  </script>
--- a/quiz-app/src/components/icons/IconCommunity.vue
+++ b/quiz-app/src/components/icons/IconCommunity.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
+    />
+  </svg>
+</template>
--- a/quiz-app/src/components/icons/IconDocumentation.vue
+++ b/quiz-app/src/components/icons/IconDocumentation.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
+    <path
+      d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
+    />
+  </svg>
+</template>
--- a/quiz-app/src/components/icons/IconEcosystem.vue
+++ b/quiz-app/src/components/icons/IconEcosystem.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
+    <path
+      d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
+    />
+  </svg>
+</template>
--- a/quiz-app/src/components/icons/IconSupport.vue
+++ b/quiz-app/src/components/icons/IconSupport.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
+    />
+  </svg>
+</template>
--- a/quiz-app/src/components/icons/IconTooling.vue
+++ b/quiz-app/src/components/icons/IconTooling.vue
@@ -0,0 +1,19 @@
+<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    aria-hidden="true"
+    role="img"
+    class="iconify iconify--mdi"
+    width="24"
+    height="24"
+    preserveAspectRatio="xMidYMid meet"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</template>
--- a/quiz-app/src/main.js
+++ b/quiz-app/src/main.js
@@ -1,14 +1,11 @@
-import Vue from 'vue';
-import App from './App.vue';
-Vue.config.productionTip = false;
-import router from './router';
+import './assets/main.css'

-import VueI18n from 'vue-i18n';
-Vue.use(VueI18n);
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'

-const i18n = new VueI18n({
-	locale: 'en',
-	fallbackLocale: 'en',
-});
+const app = createApp(App)

-new Vue({ i18n, router, render: (h) => h(App) }).$mount('#app');
+app.use(router)
+
+app.mount('#app')
--- a/quiz-app/src/router/index.js
+++ b/quiz-app/src/router/index.js
@@ -1,34 +1,29 @@
-import Vue from 'vue';
-import Router from 'vue-router';
-import Home from '@/views/Home.vue';
-import Quiz from '@/components/Quiz.vue';
-import NotFound from '@/views/NotFound.vue';
-Vue.use(Router);
+import { createRouter, createWebHistory } from 'vue-router'
+import HomeView from '../views/HomeView.vue'
+import QuizComponent from '@/components/QuizComponent.vue'

-const router = new Router({
-	mode: 'history',
-	base: process.env.BASE_URL,
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
-			component: Home,
+      component: HomeView
    },
    {
      path: '/quiz/:id',
-			name: 'Quiz',
-			component: Quiz,
+      name: 'quiz-detail',
+      component: QuizComponent
    },
    {
-			path: '/:pathMatch(.*)*',
-			name: 'NotFound',
-			component: NotFound,
-			meta: { title: 'Not Found' },
-		},
-	],
-});
+      path: '/about',
+      name: 'about',
+      // route level code-splitting
+      // this generates a separate chunk (About.[hash].js) for this route
+      // which is lazy-loaded when the route is visited.
+      component: () => import('../views/AboutView.vue')
+    }
+  ]
+})

-router.beforeEach((to, from, next) => {
-	next();
-});
-export default router;
+export default router
--- a/quiz-app/src/views/AboutView.vue
+++ b/quiz-app/src/views/AboutView.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="about">
+    <h1>Quiz app</h1>
+    This is the about page for the quiz app.
+  </div>
+</template>
+
+<style>
+@media (min-width: 1024px) {
+  .about {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+  }
+}
+</style>
--- a/quiz-app/src/views/Home.vue
+++ b/quiz-app/src/views/Home.vue
@@ -1,26 +0,0 @@
-<template>
-  <div>
-    <router-link
-      v-for="q in questions"
-      :key="q.id"
-      :to="`quiz/${q.id}`"
-      class="link"
-    >
-      {{ q.title }}
-    </router-link>
-  </div>
-</template>
-
-<script>
-import messages from "@/assets/translations";
-
-export default {
-  name: "Home",
-  computed: {
-    questions() {
-      return this.$t("quizzes");
-    },
-  },
-  i18n: { messages },
-};
-</script>
--- a/quiz-app/src/views/HomeView.vue
+++ b/quiz-app/src/views/HomeView.vue
@@ -0,0 +1,9 @@
+<script setup>
+import QuizzesComponent from '@/components/QuizzesComponent.vue';
+</script>
+
+<template>
+  <main>
+    <QuizzesComponent />
+  </main>
+</template>
--- a/quiz-app/src/views/NotFound.vue
+++ b/quiz-app/src/views/NotFound.vue
@@ -1,5 +0,0 @@
-<template>
-  <div>
-    <p>Sorry, wrong number!</p>
-  </div>
-</template>
--- a/quiz-app/vite.config.js
+++ b/quiz-app/vite.config.js
@@ -0,0 +1,16 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  }
+})
--- a/translations/README.el.md
+++ b/translations/README.el.md
@@ -12,7 +12,7 @@

 # Ανάπτυξη Ιστού για Αρχάριους - Πρόγραμμα Μαθημάτων

-Οι Azure Could Advocates της Microsoft, είναι στην ευχάριστη θέση να σας προσφέρουν ένα πρόγραμμα μαθημάτων διάρκειας 12 εβδομάδων, 24 μαθήματα στο σύνολο, για τα βασικά της JavaScript, CSS και HTML. Κάθε μάθημα περιλαμβάνει ένα κουίζ στην αρχή και στο τέλος του, γραπτές οδηγίες για την ολοκλήρωση του μαθήματος, μια λύση, εργασία και άλλα. Η παιδαγωγική μας αρχή που στηρίζεται στις εργασίες, επιτρέπει να μαθαίνετε ενώ χτίζετε, ενας αποδεδειγμένος τρόπος να «κολλήσουν» νέες δεξιότητες.
+Οι Azure Cloud Advocates της Microsoft, είναι στην ευχάριστη θέση να σας προσφέρουν ένα πρόγραμμα μαθημάτων διάρκειας 12 εβδομάδων, 24 μαθήματα στο σύνολο, για τα βασικά της JavaScript, CSS και HTML. Κάθε μάθημα περιλαμβάνει ένα κουίζ στην αρχή και στο τέλος του, γραπτές οδηγίες για την ολοκλήρωση του μαθήματος, μια λύση, εργασία και άλλα. Η παιδαγωγική μας αρχή που στηρίζεται στις εργασίες, επιτρέπει να μαθαίνετε ενώ χτίζετε, ενας αποδεδειγμένος τρόπος να «κολλήσουν» νέες δεξιότητες.

 **Ευχαριστούμε θερμά τους συγγραφείς μας Jen Looper, Chris Noring, Christopher Harrison, Jasmine Greenaway, Yohan Lasorsa, Floor Drees, and sketchnote artist Tomomi Imura!**
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>`