From ed2de720d9bea7f6950a7507bd67b43ae8b9b519 Mon Sep 17 00:00:00 2001
From: my8bit <mail@my8bit.name>
Date: Tue, 24 Aug 2021 23:35:18 +0200
Subject: [PATCH] introduce 12 chapters with JsLIGO

---
 .../Drawer/Drawer.controller.tsx              |  12 +-
 .../app/App.components/Drawer/Drawer.view.tsx |   2 +-
 src/frontend/src/app/App.routes.tsx           |   6 +
 .../src/pages/Chapter/Chapter.data.tsx        |  58 +++++++++
 .../src/pages/Chapter/Chapter.view.tsx        |   1 +
 .../Chapters/JS/ChapterConditionals/course.md |  63 ++++++++++
 .../JS/ChapterConditionals/exercise.ligo      |   8 ++
 .../Chapters/JS/ChapterConditionals/index.ts  |  11 ++
 .../JS/ChapterConditionals/solution.ligo      |  16 +++
 .../Chapters/JS/ChapterFunctions/course.md    |  73 +++++++++++
 .../JS/ChapterFunctions/exercise.ligo         |   4 +
 .../Chapters/JS/ChapterFunctions/index.ts     |  11 ++
 .../JS/ChapterFunctions/solution.ligo         |   4 +
 .../pages/Chapters/JS/ChapterLists/course.md  |  73 +++++++++++
 .../Chapters/JS/ChapterLists/exercise.ligo    |   1 +
 .../pages/Chapters/JS/ChapterLists/index.ts   |  11 ++
 .../Chapters/JS/ChapterLists/solution.ligo    |   4 +
 .../Chapters/JS/ChapterMainFunction/course.md |  76 ++++++++++++
 .../JS/ChapterMainFunction/exercise.ligo      |  23 ++++
 .../Chapters/JS/ChapterMainFunction/index.ts  |  11 ++
 .../JS/ChapterMainFunction/solution.ligo      |  23 ++++
 .../pages/Chapters/JS/ChapterMaps/course.md   |  76 ++++++++++++
 .../Chapters/JS/ChapterMaps/exercise.ligo     |   2 +
 .../pages/Chapters/JS/ChapterMaps/index.ts    |  11 ++
 .../Chapters/JS/ChapterMaps/solution.ligo     |   8 ++
 .../pages/Chapters/JS/ChapterMath/course.md   | 116 ++++++++++++++++++
 .../Chapters/JS/ChapterMath/exercise.ligo     |   1 +
 .../pages/Chapters/JS/ChapterMath/index.ts    |  11 ++
 .../Chapters/JS/ChapterMath/solution.ligo     |   4 +
 .../Chapters/JS/ChapterRecords/course.md      |  49 ++++++++
 .../Chapters/JS/ChapterRecords/exercise.ligo  |   4 +
 .../pages/Chapters/JS/ChapterRecords/index.ts |  11 ++
 .../Chapters/JS/ChapterRecords/solution.ligo  |  14 +++
 .../Chapters/JS/ChapterStrings/course.md      |  64 ++++++++++
 .../Chapters/JS/ChapterStrings/exercise.ligo  |   3 +
 .../pages/Chapters/JS/ChapterStrings/index.ts |  11 ++
 .../Chapters/JS/ChapterStrings/solution.ligo  |   4 +
 .../pages/Chapters/JS/ChapterTuples/course.md |  42 +++++++
 .../Chapters/JS/ChapterTuples/exercise.ligo   |   1 +
 .../pages/Chapters/JS/ChapterTuples/index.ts  |  11 ++
 .../Chapters/JS/ChapterTuples/solution.ligo   |   5 +
 .../pages/Chapters/JS/ChapterTypes/course.md  |  62 ++++++++++
 .../Chapters/JS/ChapterTypes/exercise.ligo    |   1 +
 .../pages/Chapters/JS/ChapterTypes/index.ts   |  11 ++
 .../Chapters/JS/ChapterTypes/solution.ligo    |   3 +
 .../Chapters/JS/ChapterVariables/course.md    |  41 +++++++
 .../JS/ChapterVariables/exercise.ligo         |   3 +
 .../Chapters/JS/ChapterVariables/index.ts     |  11 ++
 .../JS/ChapterVariables/solution.ligo         |   4 +
 .../Chapters/JS/ChapterVariant/course.md      |  71 +++++++++++
 .../Chapters/JS/ChapterVariant/exercise.ligo  |   1 +
 .../pages/Chapters/JS/ChapterVariant/index.ts |  11 ++
 .../Chapters/JS/ChapterVariant/solution.ligo  |   2 +
 src/frontend/src/pages/Home/Home.style.tsx    |   2 +-
 src/frontend/src/pages/Home/Home.view.tsx     |  15 +++
 55 files changed, 1172 insertions(+), 5 deletions(-)
 create mode 100644 src/frontend/src/pages/Chapters/JS/ChapterConditionals/course.md
 create mode 100644 src/frontend/src/pages/Chapters/JS/ChapterConditionals/exercise.ligo
 create mode 100644 src/frontend/src/pages/Chapters/JS/ChapterConditionals/index.ts
 create mode 100644 src/frontend/src/pages/Chapters/JS/ChapterConditionals/solution.ligo
 create mode 100644 src/frontend/src/pages/Chapters/JS/ChapterFunctions/course.md
 create mode 100644 src/frontend/src/pages/Chapters/JS/ChapterFunctions/exercise.ligo
 create mode 100644 src/frontend/src/pages/Chapters/JS/ChapterFunctions/index.ts
 create mode 100644 src/frontend/src/pages/Chapters/JS/ChapterFunctions/solution.ligo
 create mode 100644 src/frontend/src/pages/Chapters/JS/ChapterLists/course.md
 create mode 100644 src/frontend/src/pages/Chapters/JS/ChapterLists/exercise.ligo
 create mode 100644 src/frontend/src/pages/Chapters/JS/ChapterLists/index.ts
 create mode 100644 src/frontend/src/pages/Chapters/JS/ChapterLists/solution.ligo
 create mode 100644 src/frontend/src/pages/Chapters/JS/ChapterMainFunction/course.md
 create mode 100644 src/frontend/src/pages/Chapters/JS/ChapterMainFunction/exercise.ligo
 create mode 100644 src/frontend/src/pages/Chapters/JS/ChapterMainFunction/index.ts
 create mode 100644 src/frontend/src/pages/Chapters/JS/ChapterMainFunction/solution.ligo
 create mode 100644 src/frontend/src/pages/Chapters/JS/ChapterMaps/course.md
 create mode 100644 src/frontend/src/pages/Chapters/JS/ChapterMaps/exercise.ligo
 create mode 100644 src/frontend/src/pages/Chapters/JS/ChapterMaps/index.ts
 create mode 100644 src/frontend/src/pages/Chapters/JS/ChapterMaps/solution.ligo
 create mode 100644 src/frontend/src/pages/Chapters/JS/ChapterMath/course.md
 create mode 100644 src/frontend/src/pages/Chapters/JS/ChapterMath/exercise.ligo
 create mode 100644 src/frontend/src/pages/Chapters/JS/ChapterMath/index.ts
 create mode 100644 src/frontend/src/pages/Chapters/JS/ChapterMath/solution.ligo
 create mode 100644 src/frontend/src/pages/Chapters/JS/ChapterRecords/course.md
 create mode 100644 src/frontend/src/pages/Chapters/JS/ChapterRecords/exercise.ligo
 create mode 100644 src/frontend/src/pages/Chapters/JS/ChapterRecords/index.ts
 create mode 100644 src/frontend/src/pages/Chapters/JS/ChapterRecords/solution.ligo
 create mode 100644 src/frontend/src/pages/Chapters/JS/ChapterStrings/course.md
 create mode 100644 src/frontend/src/pages/Chapters/JS/ChapterStrings/exercise.ligo
 create mode 100644 src/frontend/src/pages/Chapters/JS/ChapterStrings/index.ts
 create mode 100644 src/frontend/src/pages/Chapters/JS/ChapterStrings/solution.ligo
 create mode 100644 src/frontend/src/pages/Chapters/JS/ChapterTuples/course.md
 create mode 100644 src/frontend/src/pages/Chapters/JS/ChapterTuples/exercise.ligo
 create mode 100644 src/frontend/src/pages/Chapters/JS/ChapterTuples/index.ts
 create mode 100644 src/frontend/src/pages/Chapters/JS/ChapterTuples/solution.ligo
 create mode 100644 src/frontend/src/pages/Chapters/JS/ChapterTypes/course.md
 create mode 100644 src/frontend/src/pages/Chapters/JS/ChapterTypes/exercise.ligo
 create mode 100644 src/frontend/src/pages/Chapters/JS/ChapterTypes/index.ts
 create mode 100644 src/frontend/src/pages/Chapters/JS/ChapterTypes/solution.ligo
 create mode 100644 src/frontend/src/pages/Chapters/JS/ChapterVariables/course.md
 create mode 100644 src/frontend/src/pages/Chapters/JS/ChapterVariables/exercise.ligo
 create mode 100644 src/frontend/src/pages/Chapters/JS/ChapterVariables/index.ts
 create mode 100644 src/frontend/src/pages/Chapters/JS/ChapterVariables/solution.ligo
 create mode 100644 src/frontend/src/pages/Chapters/JS/ChapterVariant/course.md
 create mode 100644 src/frontend/src/pages/Chapters/JS/ChapterVariant/exercise.ligo
 create mode 100644 src/frontend/src/pages/Chapters/JS/ChapterVariant/index.ts
 create mode 100644 src/frontend/src/pages/Chapters/JS/ChapterVariant/solution.ligo

diff --git a/src/frontend/src/app/App.components/Drawer/Drawer.controller.tsx b/src/frontend/src/app/App.components/Drawer/Drawer.controller.tsx
index 893ae8b..91d2805 100644
--- a/src/frontend/src/app/App.components/Drawer/Drawer.controller.tsx
+++ b/src/frontend/src/app/App.components/Drawer/Drawer.controller.tsx
@@ -16,6 +16,7 @@ export const Drawer = () => {
 
   let defaultLanguage = 'PascaLIGO'
   if (pathname.match(/pascal/i)) defaultLanguage = 'PascaLIGO'
+  if (pathname.match(/js/i)) defaultLanguage = 'JsLIGO'
   if (pathname.match(/camel/i)) defaultLanguage = 'CameLIGO'
   if (pathname.match(/reason/i)) defaultLanguage = 'ReasonLIGO'
   const [activeLanguage, setActiveLanguage] = useState(defaultLanguage)
@@ -23,6 +24,7 @@ export const Drawer = () => {
   useEffect(() => {
     let defaultLanguage = 'PascaLIGO'
     if (pathname.match(/pascal/i)) defaultLanguage = 'PascaLIGO'
+    if (pathname.match(/js/i)) defaultLanguage = 'JsLIGO'
     if (pathname.match(/camel/i)) defaultLanguage = 'CameLIGO'
     if (pathname.match(/reason/i)) defaultLanguage = 'ReasonLIGO'
     setActiveLanguage(defaultLanguage)
@@ -37,15 +39,19 @@ export const Drawer = () => {
   function changeLanguageCallback(e: string) {
     console.log(e)
     if (e === 'PascaLIGO') {
-      history.push(pathname.replace(new RegExp('camel|reason', 'i'), 'pascal'))
+      history.push(pathname.replace(new RegExp('camel|reason|js', 'i'), 'pascal'))
       setActiveLanguage('PascaLIGO')
     }
+    if (e === 'JsLIGO') {
+      history.push(pathname.replace(new RegExp('camel|reason|pascal', 'i'), 'js'))
+      setActiveLanguage('JsLIGO')
+    }
     if (e === 'CameLIGO') {
-      history.push(pathname.replace(new RegExp('pascal|reason', 'i'), 'camel'))
+      history.push(pathname.replace(new RegExp('pascal|reason|js', 'i'), 'camel'))
       setActiveLanguage('CameLIGO')
     }
     if (e === 'ReasonLIGO') {
-      history.push(pathname.replace(new RegExp('camel|pascal', 'i'), 'reason'))
+      history.push(pathname.replace(new RegExp('camel|pascal|js', 'i'), 'reason'))
       setActiveLanguage('ReasonLIGO')
     }
   }
diff --git a/src/frontend/src/app/App.components/Drawer/Drawer.view.tsx b/src/frontend/src/app/App.components/Drawer/Drawer.view.tsx
index a0941a3..90b10b1 100644
--- a/src/frontend/src/app/App.components/Drawer/Drawer.view.tsx
+++ b/src/frontend/src/app/App.components/Drawer/Drawer.view.tsx
@@ -31,7 +31,7 @@ export const DrawerView = ({
       <h1>Menu</h1>
 
       <Select
-        options={['PascaLIGO', 'CameLIGO', 'ReasonLIGO']}
+        options={['PascaLIGO', 'CameLIGO', 'ReasonLIGO', 'JsLIGO']}
         defaultOption={activeLanguage}
         selectCallback={(e) => changeLanguageCallback(e)}
       />
diff --git a/src/frontend/src/app/App.routes.tsx b/src/frontend/src/app/App.routes.tsx
index ac4fa09..2501a1a 100644
--- a/src/frontend/src/app/App.routes.tsx
+++ b/src/frontend/src/app/App.routes.tsx
@@ -37,6 +37,9 @@ export const AppRoutes = ({ location }: any) => (
     <Route exact path="/pascal/chapter-about">
       <ChapterAbout />
     </Route>
+    <Route exact path="/js/chapter-about">
+      <ChapterAbout />
+    </Route>
     <Route exact path="/reason/chapter-about">
       <ChapterAbout />
     </Route>
@@ -46,6 +49,9 @@ export const AppRoutes = ({ location }: any) => (
     <Route path="/pascal/chapter-*">
       <Chapter />
     </Route>
+    <Route path="/js/chapter-*">
+      <Chapter />
+    </Route>
     <Route path="/reason/chapter-*">
       <Chapter />
     </Route>
diff --git a/src/frontend/src/pages/Chapter/Chapter.data.tsx b/src/frontend/src/pages/Chapter/Chapter.data.tsx
index e08d519..992f5de 100644
--- a/src/frontend/src/pages/Chapter/Chapter.data.tsx
+++ b/src/frontend/src/pages/Chapter/Chapter.data.tsx
@@ -58,6 +58,7 @@ import { data as pascalDataTuples } from '../Chapters/Pascal/ChapterTuples'
 import { data as pascalDataTypes } from '../Chapters/Pascal/ChapterTypes'
 import { data as pascalDataVariables } from '../Chapters/Pascal/ChapterVariables'
 import { data as pascalDataVariant } from '../Chapters/Pascal/ChapterVariant'
+
 import { data as reasonDataAddresses } from '../Chapters/Reason/ChapterAddresses'
 import { data as reasonDataBuiltIns } from '../Chapters/Reason/ChapterBuiltIns'
 import { data as reasonDataConditionals } from '../Chapters/Reason/ChapterConditionals'
@@ -88,6 +89,19 @@ import { data as reasonDataVariables } from '../Chapters/Reason/ChapterVariables
 import { data as reasonDataVariant } from '../Chapters/Reason/ChapterVariant'
 import { data as reasonDataFA20Hook } from '../Chapters/Reason/ChapterFA20Hook'
 
+import { data as jsDataConditionals } from '../Chapters/JS/ChapterConditionals'
+import { data as jsDataFunctions } from '../Chapters/JS/ChapterFunctions'
+import { data as jsDataLists } from '../Chapters/JS/ChapterLists'
+import { data as jsDataMainFunction } from '../Chapters/JS/ChapterMainFunction'
+import { data as jsDataMaps } from '../Chapters/JS/ChapterMaps'
+import { data as jsDataMath } from '../Chapters/JS/ChapterMath'
+import { data as jsDataRecords } from '../Chapters/JS/ChapterRecords'
+import { data as jsDataStrings } from '../Chapters/JS/ChapterStrings'
+import { data as jsDataTuples } from '../Chapters/JS/ChapterTuples'
+import { data as jsDataTypes } from '../Chapters/JS/ChapterTypes'
+import { data as jsDataVariables } from '../Chapters/JS/ChapterVariables'
+import { data as jsDataVariant } from '../Chapters/JS/ChapterVariant'
+
 export const chapterData = [
   {
     pathname: '/pascal/chapter-about',
@@ -225,6 +239,50 @@ export const chapterData = [
     data: pascalDataFA20Hook,
   },
 
+  {
+    pathname: '/js/chapter-about',
+    language: 'JsLIGO',
+    name: '1 - JS - About',
+    data: { course: undefined, exercise: undefined, solution: undefined, supports: {} },
+  },
+  { pathname: '/js/chapter-types', language: 'JsLIGO', name: '2 - JS - Types', data: jsDataTypes },
+  {
+    pathname: '/js/chapter-variables',
+    language: 'JsLIGO',
+    name: '3 - JS - Variables',
+    data: jsDataVariables,
+  },
+  { pathname: '/js/chapter-math', language: 'JsLIGO', name: '4 - JS - Math', data: jsDataMath },
+  { pathname: '/js/chapter-strings', language: 'JsLIGO', name: '5 - JS - Strings', data: jsDataStrings },
+  {
+    pathname: '/js/chapter-functions',
+    language: 'JsLIGO',
+    name: '6 - JS - Functions',
+    data: jsDataFunctions,
+  },
+  {
+    pathname: '/js/chapter-conditionals',
+    language: 'JsLIGO',
+    name: '7 - JS - Conditionals',
+    data: jsDataConditionals,
+  },
+  { pathname: '/js/chapter-tuples', language: 'JsLIGO', name: '8 - JS - Tuples', data: jsDataTuples },
+  { pathname: '/js/chapter-records', language: 'JsLIGO', name: '9 - JS - Records', data: jsDataRecords },
+  { pathname: '/js/chapter-lists', language: 'JsLIGO', name: '10 - JS - Lists', data: jsDataLists },
+  { pathname: '/js/chapter-maps', language: 'JsLIGO', name: '11 - JS - Maps', data: jsDataMaps },
+  {
+    pathname: '/js/chapter-variants',
+    language: 'JsLIGO',
+    name: '12 - JS - Variants',
+    data: jsDataVariant,
+  },
+  {
+    pathname: '/js/chapter-main-function',
+    language: 'JsLIGO',
+    name: '13 - JS - Main function',
+    data: jsDataMainFunction,
+  },
+
   {
     pathname: '/camel/chapter-about',
     language: 'CameLIGO',
diff --git a/src/frontend/src/pages/Chapter/Chapter.view.tsx b/src/frontend/src/pages/Chapter/Chapter.view.tsx
index 509444d..423541a 100644
--- a/src/frontend/src/pages/Chapter/Chapter.view.tsx
+++ b/src/frontend/src/pages/Chapter/Chapter.view.tsx
@@ -202,6 +202,7 @@ export const ChapterView = ({
 
   let extension = ''
   if (pathname.match(/pascal/i)) extension = 'ligo'
+  if (pathname.match(/js/i)) extension = 'jsligo'
   if (pathname.match(/camel/i)) extension = 'mligo'
   if (pathname.match(/reason/i)) extension = 'religo'
 
diff --git a/src/frontend/src/pages/Chapters/JS/ChapterConditionals/course.md b/src/frontend/src/pages/Chapters/JS/ChapterConditionals/course.md
new file mode 100644
index 0000000..8c19225
--- /dev/null
+++ b/src/frontend/src/pages/Chapters/JS/ChapterConditionals/course.md
@@ -0,0 +1,63 @@
+# Chapter 7 : Conditionals
+
+<dialog character="robot">[DROID-1242] INVALID CONDITIONAL INSTRUCTIONS. ERR %%$7834[[{23e3}]] PLEASE SPECIFY CONDITIONAL INSTRUCTIONS.</dialog>
+
+## Booleans
+
+Booleans are typed _bool_ in LIGO :
+
+```
+let a: bool = true; // or false
+```
+
+## Comparing Values
+
+Only values of the same type can be natively compared, i.e. int, nat, string, tez, timestamp, address, etc... However some values of the same type are not natively comparable, i.e. maps, sets or lists. You will have to write your own comparison functions for those.
+
+```
+// Comparing strings
+let a: string = "Alice";
+let b: string = "Alice";
+let c: bool = (a == b); // true
+
+// Comparing numbers
+let a: int = 5;
+let b: int = 4;
+let c: bool = (a == b);
+let d: bool = (a > b);
+let e: bool = (a < b);
+let f: bool = (a <= b);
+let g: bool = (a >= b);
+let h: bool = (a != b);
+
+// Comparing tez
+let a: tez = 5 as mutez;
+let b: tez = 10 as mutez;
+let c: bool = (a == b); // false
+```
+
+## Conditionals
+
+Conditional logic enables forking the control flow depending on the state.
+
+```
+let isSmall = (n : nat) : bool => {
+  if (n < (10 as nat)) { return true; } else { return false; };
+};
+```
+
+## Your mission
+
+We want to conditionally change the engine attribute (third number) to 1 only if it is equal to 0.
+
+<!-- prettier-ignore -->1- Refactor *modified\_ship* as a variable equal to *my\_ship*
+
+<!-- prettier-ignore -->2- Then define a condition _if_ the engine attribute equal 0. Don't forget the attributes are defined as strings.
+
+<!-- prettier-ignore -->3- If the condition is met, change *modified\_ship* to it new value. Otherwise, _skip_ the instructions.
+
+<!-- prettier-ignore -->⚠️ If you have installed LIGO then you can test the execution of the *modify\_ship* function by running the following command:
+
+```
+ligo run-function main.ligo modify_ship '("010433")'
+```
diff --git a/src/frontend/src/pages/Chapters/JS/ChapterConditionals/exercise.ligo b/src/frontend/src/pages/Chapters/JS/ChapterConditionals/exercise.ligo
new file mode 100644
index 0000000..0160ae1
--- /dev/null
+++ b/src/frontend/src/pages/Chapters/JS/ChapterConditionals/exercise.ligo
@@ -0,0 +1,8 @@
+type ship_code = string;
+let my_ship: ship_code = "020433";
+my_ship = "222031";
+const my_ship_price : tez = 3 as tez * 1.20;
+
+let modify_ship = (my_ship: ship_code): ship_code => {
+    // Type your solution below
+}
diff --git a/src/frontend/src/pages/Chapters/JS/ChapterConditionals/index.ts b/src/frontend/src/pages/Chapters/JS/ChapterConditionals/index.ts
new file mode 100644
index 0000000..cf687e8
--- /dev/null
+++ b/src/frontend/src/pages/Chapters/JS/ChapterConditionals/index.ts
@@ -0,0 +1,11 @@
+/* eslint import/no-webpack-loader-syntax: off */
+// @ts-ignore
+import course from "!raw-loader!./course.md";
+/* eslint import/no-webpack-loader-syntax: off */
+// @ts-ignore
+import exercise from "!raw-loader!./exercise.ligo";
+/* eslint import/no-webpack-loader-syntax: off */
+// @ts-ignore
+import solution from "!raw-loader!./solution.ligo";
+
+export const data = { course, exercise, solution, supports: {} };
diff --git a/src/frontend/src/pages/Chapters/JS/ChapterConditionals/solution.ligo b/src/frontend/src/pages/Chapters/JS/ChapterConditionals/solution.ligo
new file mode 100644
index 0000000..1a9c69f
--- /dev/null
+++ b/src/frontend/src/pages/Chapters/JS/ChapterConditionals/solution.ligo
@@ -0,0 +1,16 @@
+type ship_code = string;
+let my_ship: ship_code = "020433";
+my_ship = "222031";
+const my_ship_price : tez = 3 as tez * 1.20;
+
+let modify_ship = (my_ship: ship_code): ship_code => {
+    // Type your solution below
+    let modify_ship: ship_code = my_ship;
+    if (String.sub(2 as nat, 1 as nat, my_ship) == "0") {
+        return  "" + String.sub(0 as nat, 2 as nat, my_ship) + "1" + String.sub(3 as nat, 3 as nat, my_ship)
+    } else {
+        return modify_ship;
+    }
+}
+ 
+
diff --git a/src/frontend/src/pages/Chapters/JS/ChapterFunctions/course.md b/src/frontend/src/pages/Chapters/JS/ChapterFunctions/course.md
new file mode 100644
index 0000000..3ca8928
--- /dev/null
+++ b/src/frontend/src/pages/Chapters/JS/ChapterFunctions/course.md
@@ -0,0 +1,73 @@
+# Chapter 6 : Functions
+
+<dialog character="mechanics">Captain, why are you trying to change the part yourself? Just write a function on the terminal and send it to a droid.</dialog>
+
+LIGO functions are the basic building block of contracts. Each entrypoint of a contract is a function and each smart contract must have at least one function named _main_ that dispatches the control flow to other functions.
+
+When calling a function, LIGO makes a copy of the arguments but also the environment variables. Therefore any modification to these will not be reflected outside the scope of the function and will be lost if not explicitly returned by the function.
+
+Functions in JsLIGO are defined using the let or const keyword, like other values. The difference is that parameters are provided after the value name, with its type, then followed by the return type.
+
+Here is how you define a basic function that sums two integers:
+
+```
+let add = ([a, b]: [int, int]): int => a + b;
+```
+
+If the body contains more than a single expression, you use block between braces:
+
+```
+let myFun = ([x, y]: [int, int]): int => {
+  let doubleX = x + x;
+  let doubleY = y + y;
+  return doubleX + doubleY;
+};
+```
+
+Note that JsLIGO, like JavaScript, requires the return keyword to indicate what is being returned. If return is not used, it will be the same as return unit.
+
+<!-- prettier-ignore -->By default, LIGO will warn about unused arguments inside functions. In case we do not use an argument, we can use the wildcard _\__ to prevent warnings. Either use _\__ instead of the argument identifier:
+
+```
+let k = ([x, _] : [int, int]) : int => x;
+```
+
+or use an identifier starting with wildcard:
+
+```
+let k = ([x, _y] : [int, int]) : int => x;
+```
+
+## Anonymous functions (a.k.a. lambdas)
+
+It is possible to define functions without assigning them a name. They are useful when you want to pass them as arguments, or assign them to a key in a record or a map.
+
+```
+let increment = (b: int): int => ((a: int): int => a + 1) (b);
+let a: int = increment(1); // a == 2
+```
+
+If the example above seems contrived, here is a more common design pattern for lambdas: to be used as parameters to functions. Consider the use case of having a list of integers and mapping the increment function to all its elements.
+
+```
+let incr_map = (l: list<int>): list<int> => List.map((i: int) => i + 1, l);
+```
+
+## Nested functions (also known as closures)
+
+It's possible to place functions inside other functions. These functions have access to variables in the same scope.
+
+```
+let closure_example = (i: int): int => {
+  let closure = (j: int): int => i + j;
+  return closure(i);
+};
+```
+
+## Your mission
+
+<!-- prettier-ignore -->1- Write an block function *modify\_ship* taking as argument *my\_ship* of type *ship\_code* and returning a varible of type *ship\_code* as well.
+
+<!-- prettier-ignore -->2- In the block, copy/cut the code from the previous chapter that modified the third attribute from 0 to 1 and assign the result to a constant *modified\_ship*
+
+<!-- prettier-ignore -->3- Return *modified\_ship*
diff --git a/src/frontend/src/pages/Chapters/JS/ChapterFunctions/exercise.ligo b/src/frontend/src/pages/Chapters/JS/ChapterFunctions/exercise.ligo
new file mode 100644
index 0000000..b8dee95
--- /dev/null
+++ b/src/frontend/src/pages/Chapters/JS/ChapterFunctions/exercise.ligo
@@ -0,0 +1,4 @@
+type ship_code = string;
+let my_ship: ship_code = "020433";
+// Modify the code below
+my_ship = "" + String.sub(0 as nat, 2 as nat, my_ship) + "1" + String.sub(3 as nat, 3 as nat, my_ship)
diff --git a/src/frontend/src/pages/Chapters/JS/ChapterFunctions/index.ts b/src/frontend/src/pages/Chapters/JS/ChapterFunctions/index.ts
new file mode 100644
index 0000000..42ec3b8
--- /dev/null
+++ b/src/frontend/src/pages/Chapters/JS/ChapterFunctions/index.ts
@@ -0,0 +1,11 @@
+/* eslint import/no-webpack-loader-syntax: off */
+// @ts-ignore
+import exercise from "!raw-loader!./exercise.ligo";
+/* eslint import/no-webpack-loader-syntax: off */
+// @ts-ignore
+import solution from "!raw-loader!./solution.ligo";
+/* eslint import/no-webpack-loader-syntax: off */
+// @ts-ignore
+import course from "!raw-loader!./course.md";
+
+export const data = { course, exercise, solution, supports: {} };
diff --git a/src/frontend/src/pages/Chapters/JS/ChapterFunctions/solution.ligo b/src/frontend/src/pages/Chapters/JS/ChapterFunctions/solution.ligo
new file mode 100644
index 0000000..706cef8
--- /dev/null
+++ b/src/frontend/src/pages/Chapters/JS/ChapterFunctions/solution.ligo
@@ -0,0 +1,4 @@
+type ship_code = string;
+let my_ship: ship_code = "020433";
+// Modify the code below
+let modify_ship = (my_ship: ship_code): ship_code => "" + String.sub(0 as nat, 2 as nat, my_ship) + "1" + String.sub(3 as nat, 3 as nat, my_ship)
diff --git a/src/frontend/src/pages/Chapters/JS/ChapterLists/course.md b/src/frontend/src/pages/Chapters/JS/ChapterLists/course.md
new file mode 100644
index 0000000..3bf4a73
--- /dev/null
+++ b/src/frontend/src/pages/Chapters/JS/ChapterLists/course.md
@@ -0,0 +1,73 @@
+# Chapter 11 : Lists and Sets
+
+<dialog character="pilot">Please now plot our course as a list of destinations.</dialog>
+
+Lists are linear collections of elements of the same type. Linear means that, in order to reach an element in a list, we must visit all the elements before (sequential access). Elements can be repeated, as only their order in the collection matters. The first element is called the head, and the sub-list after the head is called the tail.
+
+## Lists
+
+To define an empty list :
+
+```
+let empty_list: list<int> = list([]);
+```
+
+To define list with values:
+
+```
+let my_list: list<int> = list([1, 2, 2]); // The head is 1
+```
+
+You can add elements to an existing list using the cons operator _..._ :
+
+```
+let larger_list: list<int> = list([5, ...my_list]); // [5,1,2,2]
+```
+
+You cannot access element directly in list but you can access the first element, the head or the rest of the list, the tail. The two function to access those are List.head_opt and List.tail_opt
+
+```
+let head: option<int> = List.head_opt(my_list); // 1
+let tail: option<list<int>> = List.tail_opt(my_list); // [2,2]
+```
+
+## Sets
+
+Sets are unordered collections of values of the same type, like lists are ordered collections. Elements of sets in LIGO are unique, whereas they can be repeated in a list. To define an empty set:
+
+```
+let my_set: set<int> = Set.empty;
+```
+
+and non-empty set:
+
+```
+let my_set: set<int> = Set.add(3, Set.add(2, Set.add(2, Set.add(1, Set.empty as set<int>))));
+```
+
+You can test membership with the _Set.mem_ operator :
+
+```
+let contains_3: bool = Set.mem(3, my_set);
+```
+
+You can get the size of a set using the _Set.size_ operator :
+
+```
+let cardinal: nat = Set.size(my_set);
+```
+
+To update a set :
+
+```
+let larger_set: set<int> = Set.add(4, my_set);
+let smaller_set: set<int> = Set.remove(3, my_set);
+```
+
+## Your mission
+
+<!-- prettier-ignore -->1- Define a variable _itinary_ as a list of string names of celestial bodies representing your course. Start with _"earth"_
+
+<!-- prettier-ignore -->2- On the next line, add _"sun"_ to the itinary.
+
+<!-- prettier-ignore -->2- On the next line, add _"alpha-centauri"_ to the itinary.
diff --git a/src/frontend/src/pages/Chapters/JS/ChapterLists/exercise.ligo b/src/frontend/src/pages/Chapters/JS/ChapterLists/exercise.ligo
new file mode 100644
index 0000000..3788732
--- /dev/null
+++ b/src/frontend/src/pages/Chapters/JS/ChapterLists/exercise.ligo
@@ -0,0 +1 @@
+// Type your solution below
diff --git a/src/frontend/src/pages/Chapters/JS/ChapterLists/index.ts b/src/frontend/src/pages/Chapters/JS/ChapterLists/index.ts
new file mode 100644
index 0000000..cf687e8
--- /dev/null
+++ b/src/frontend/src/pages/Chapters/JS/ChapterLists/index.ts
@@ -0,0 +1,11 @@
+/* eslint import/no-webpack-loader-syntax: off */
+// @ts-ignore
+import course from "!raw-loader!./course.md";
+/* eslint import/no-webpack-loader-syntax: off */
+// @ts-ignore
+import exercise from "!raw-loader!./exercise.ligo";
+/* eslint import/no-webpack-loader-syntax: off */
+// @ts-ignore
+import solution from "!raw-loader!./solution.ligo";
+
+export const data = { course, exercise, solution, supports: {} };
diff --git a/src/frontend/src/pages/Chapters/JS/ChapterLists/solution.ligo b/src/frontend/src/pages/Chapters/JS/ChapterLists/solution.ligo
new file mode 100644
index 0000000..556d2d2
--- /dev/null
+++ b/src/frontend/src/pages/Chapters/JS/ChapterLists/solution.ligo
@@ -0,0 +1,4 @@
+// Type your solution below
+let itinary: set<string> = Set.add("earth", Set.empty as set<string>);
+itinary = Set.add("sun", itinary);
+itinary = Set.add("moon", itinary);
diff --git a/src/frontend/src/pages/Chapters/JS/ChapterMainFunction/course.md b/src/frontend/src/pages/Chapters/JS/ChapterMainFunction/course.md
new file mode 100644
index 0000000..6f26754
--- /dev/null
+++ b/src/frontend/src/pages/Chapters/JS/ChapterMainFunction/course.md
@@ -0,0 +1,76 @@
+# Chapter 13 : Main function
+
+<dialog character="admiral">God damn it rookie! What are you still doing at the space port? Take off already and go shoot some alien!!</dialog>
+
+Smart contracts are small programs that are stored and executed on the blockchain. They allow people to cooperate and exchange tokens without requiring them to trust one another.
+
+A LIGO contract is made of a series of constant and function declarations. Only functions having a special type can be called when the contract is activated: we call them main functions. A main function takes two parameters, the contract parameter and the on-chain storage, and returns a pair made of a list of operations and a (new) storage.
+
+When the contract is originated, the initial value of the storage is provided. When a main function is later called, only the parameter is provided, but the type of a main function contains both.
+
+The type of the contract parameter and the storage are up to the contract designer, but the type for list operations is not. The return type of a main function is as follows, assuming that the type storage has been defined elsewhere. (Note that you can use any type with any name for the storage.)
+
+```
+type storage = ...;  // Any name, any type
+type return_ = [list<operation>, storage];
+```
+
+The contract storage can only be modified by activating a main function: given the state of the storage on-chain, a main function specifies how to create another state for it, depending on the contract's parameter.
+
+Here is an example where the storage is a single natural number that is updated by the parameter.
+
+```
+type parameter = nat;
+type storage = nat;
+type return_ = [list<operation>, storage];
+
+let save =([action, store]: [parameter, storage]) : return_ =>
+  ((list([]) : list (operation)), store)
+```
+
+## Entrypoints
+
+In LIGO, the design pattern is to have one main function called main, that dispatches the control flow according to its parameter. Those functions called for those actions are called entrypoints.
+
+As an analogy, in the C programming language, the main function is the unique main function and any function called from it would be an entrypoint.
+
+The parameter of the contract is then a variant type, and, depending on the constructors of that type, different functions in the contract are called. In other terms, the unique main function dispatches the control flow depending on a pattern matching on the contract parameter.
+
+In the following example, the storage contains a counter of type nat and a name of type string. Depending on the parameter of the contract, either the counter or the name is updated.
+
+```
+type parameter =
+| ["Action_A", string]
+| ["Action_B", string];
+
+type storage = {
+  stored_string_A: string,
+  stored_string_B: string
+};
+
+type return_ = [list<operation>, storage];
+
+let entry_A = ([input_string, store]: [string, storage]): return_ =>
+  [(list([]) as list<operation>), {...store, stored_string_A: input_string}];
+
+let entry_B = ([input_string, store]: [string, storage]): return_ =>
+  [(list([]) as list<operation>), {...store, stored_string_B: input_string}];
+
+let main = ([action, store]: [parameter, storage]): return_ =>
+  match(action, {
+    Action_A: (input_string: string) => entry_A([input_string, store]),
+    Action_B: (input_string: string) => entry_B([input_string, store])
+  });
+```
+
+ℹ️ Now that you created a main function, you can now transpile your code into Michaelson and deploy it on Tezos. Try it out on the <a href="https://ide.ligolang.org/" target="_blank">LIGOlang IDE</a>
+
+## Your mission
+
+<!-- prettier-ignore -->1- The editor contains an example of main function with two functions. In the parameter variant, replace *Action\_A* and *Action\_B* with our actions *Set\_ship\_code* and *Go\_to*
+
+<!-- prettier-ignore -->2- In the storage record, replace *stored\_string\_A* and *stored\_string\_B* with the strings we want to store in the contract: *ship\_code* and *destination*
+
+<!-- prettier-ignore -->3- Modify the name of our entrypoints *entry\_A* and *entry\_B* to *set\_ship\_code* and *go\_to*
+
+<!-- prettier-ignore -->4- Modify the main function to reflect the new names above
diff --git a/src/frontend/src/pages/Chapters/JS/ChapterMainFunction/exercise.ligo b/src/frontend/src/pages/Chapters/JS/ChapterMainFunction/exercise.ligo
new file mode 100644
index 0000000..47106f7
--- /dev/null
+++ b/src/frontend/src/pages/Chapters/JS/ChapterMainFunction/exercise.ligo
@@ -0,0 +1,23 @@
+// Modify the code below
+type parameter =
+| ["Action_A", string]
+| ["Action_B", string];
+
+type storage = {
+  stored_string_A: string,
+  stored_string_B: string
+};
+
+type return_ = [list<operation>, storage];
+
+let action_A = ([input_string, store]: [string, storage]): return_ =>
+  [(list([]) as list<operation>), {...store, stored_string_A: input_string}];
+
+let action_B = ([input_string, store]: [string, storage]): return_ =>
+  [(list([]) as list<operation>), {...store, stored_string_B: input_string}];
+
+let main = ([action, store]: [parameter, storage]): return_ =>
+  match(action, {
+    Action_A: (input_string: string) => action_A([input_string, store]),
+    Action_B: (input_string: string) => action_B([input_string, store])
+  });
diff --git a/src/frontend/src/pages/Chapters/JS/ChapterMainFunction/index.ts b/src/frontend/src/pages/Chapters/JS/ChapterMainFunction/index.ts
new file mode 100644
index 0000000..cf687e8
--- /dev/null
+++ b/src/frontend/src/pages/Chapters/JS/ChapterMainFunction/index.ts
@@ -0,0 +1,11 @@
+/* eslint import/no-webpack-loader-syntax: off */
+// @ts-ignore
+import course from "!raw-loader!./course.md";
+/* eslint import/no-webpack-loader-syntax: off */
+// @ts-ignore
+import exercise from "!raw-loader!./exercise.ligo";
+/* eslint import/no-webpack-loader-syntax: off */
+// @ts-ignore
+import solution from "!raw-loader!./solution.ligo";
+
+export const data = { course, exercise, solution, supports: {} };
diff --git a/src/frontend/src/pages/Chapters/JS/ChapterMainFunction/solution.ligo b/src/frontend/src/pages/Chapters/JS/ChapterMainFunction/solution.ligo
new file mode 100644
index 0000000..4892023
--- /dev/null
+++ b/src/frontend/src/pages/Chapters/JS/ChapterMainFunction/solution.ligo
@@ -0,0 +1,23 @@
+// Modify the code below
+type parameter =
+| ["Set_ship_code", string]
+| ["Go_to", string];
+
+type storage = {
+  ship_code: string,
+  destination: string
+};
+
+type return_ = [list<operation>, storage];
+
+let set_ship_code = ([input_string, store]: [string, storage]): return_ =>
+  [(list([]) as list<operation>), {...store, ship_code: input_string}];
+
+let go_to = ([input_string, store]: [string, storage]): return_ =>
+  [(list([]) as list<operation>), {...store, destination: input_string}];
+
+let main = ([action, store]: [parameter, storage]): return_ =>
+  match(action, {
+    Set_ship_code: (input_string: string) => set_ship_code([input_string, store]),
+    Go_to: (input_string: string) => go_to([input_string, store])
+  });
diff --git a/src/frontend/src/pages/Chapters/JS/ChapterMaps/course.md b/src/frontend/src/pages/Chapters/JS/ChapterMaps/course.md
new file mode 100644
index 0000000..a8bb554
--- /dev/null
+++ b/src/frontend/src/pages/Chapters/JS/ChapterMaps/course.md
@@ -0,0 +1,76 @@
+# Chapter 10 : Maps
+
+<dialog character="pilot">Ok it's now time to open our star map and decide where we want to go.</dialog>
+
+Maps are a data structure which associate values of the same type to values of the same type. The former are called key and the latter values. Together they make up a binding. An additional requirement is that the type of the keys must be comparable, in the Michelson sense.
+
+## Declaration
+
+Maps are declared as
+
+```
+type balances = map<string, nat>;
+```
+
+## Instantiation
+
+To create an empty map :
+
+```
+let empty: balances = Map.empty;
+```
+
+To create an non-empty map :
+
+```
+let moves: balances = Map.literal(list([
+    ["tim", 5 as nat],
+    ["mark", 0 as nat]
+]));
+```
+
+## Access
+
+Use the postfix [] operator to read a value of the map :
+
+```
+let my_balance: option<nat> = Map.find_opt("tim", moves);
+```
+
+ℹ️ The keyword option shows that this value is optional. More on this later.
+
+## Update
+
+The values of a map can be updated using _Map.update_ built-in function:
+
+```
+let user_balances: balances = Map.update("tim", Some(14 as nat), moves);
+```
+
+## Insertion
+
+To add a new value in the map, use _Map.add_ :
+
+```
+let user_balances: balances = Map.add("ed", 39 as nat, moves);
+```
+
+## Removal
+
+A key-value can be removed from the mapping as follows :
+
+```
+Map.remove("tim", moves);
+```
+
+## Big Maps
+
+<!-- prettier-ignore -->Maps load their entries into the environment, which is fine for small maps, but for maps holding millions of entries, the cost of loading such map would be too expensive. For this we use *big\_maps*. Their syntax is the same as for regular maps.
+
+## Your mission
+
+<!-- prettier-ignore -->1- Notice we defined _coordinates_ as a 3D tuple.
+
+<!-- prettier-ignore -->2- Define the type *name\_to\_coordinates* as a mapping from the celestial body name to its coordinates.
+
+<!-- prettier-ignore -->3- Create a new map called *star\_map* and add values for _earth_ at 2,7,1 , the _sun_ at 0,0,0 and _alpha-centauri_ at 2232,7423,12342 .
diff --git a/src/frontend/src/pages/Chapters/JS/ChapterMaps/exercise.ligo b/src/frontend/src/pages/Chapters/JS/ChapterMaps/exercise.ligo
new file mode 100644
index 0000000..bffec99
--- /dev/null
+++ b/src/frontend/src/pages/Chapters/JS/ChapterMaps/exercise.ligo
@@ -0,0 +1,2 @@
+type coordinates = [int, int, int];
+// Type your solution below
diff --git a/src/frontend/src/pages/Chapters/JS/ChapterMaps/index.ts b/src/frontend/src/pages/Chapters/JS/ChapterMaps/index.ts
new file mode 100644
index 0000000..cf687e8
--- /dev/null
+++ b/src/frontend/src/pages/Chapters/JS/ChapterMaps/index.ts
@@ -0,0 +1,11 @@
+/* eslint import/no-webpack-loader-syntax: off */
+// @ts-ignore
+import course from "!raw-loader!./course.md";
+/* eslint import/no-webpack-loader-syntax: off */
+// @ts-ignore
+import exercise from "!raw-loader!./exercise.ligo";
+/* eslint import/no-webpack-loader-syntax: off */
+// @ts-ignore
+import solution from "!raw-loader!./solution.ligo";
+
+export const data = { course, exercise, solution, supports: {} };
diff --git a/src/frontend/src/pages/Chapters/JS/ChapterMaps/solution.ligo b/src/frontend/src/pages/Chapters/JS/ChapterMaps/solution.ligo
new file mode 100644
index 0000000..85840db
--- /dev/null
+++ b/src/frontend/src/pages/Chapters/JS/ChapterMaps/solution.ligo
@@ -0,0 +1,8 @@
+type coordinates = [int, int, int];
+// Type your solution below
+type name_to_coordinates = map<string, coordinates>;
+let star_map: name_to_coordinates = Map.literal(list([
+    ["earth", [2,7,1]],
+    ["sun", [0,0,0]],
+    ["alpha-centauri", [2232,7423,12342]]
+]));
diff --git a/src/frontend/src/pages/Chapters/JS/ChapterMath/course.md b/src/frontend/src/pages/Chapters/JS/ChapterMath/course.md
new file mode 100644
index 0000000..60f6f5d
--- /dev/null
+++ b/src/frontend/src/pages/Chapters/JS/ChapterMath/course.md
@@ -0,0 +1,116 @@
+# Chapter 4 : Math
+
+<dialog character="scientist">Hello, I'm Dr Zod, I hope you didn't sleep during your Math class in the academy because you're gonna need it! Your ship needs at least 1.21 gigawatts to function properly. Battery packs are 0.16 gigawatts per unit. How many battery packs do you need? Seems easy, right? Well, no, because the system doesn't run floating point numbers, so... good luck with that!</dialog>
+ 
+LIGO offers three built-in numerical types:
+
+- _int_ are integers, such as 10, -6 and 0. But there is only one canonical zero: 0 (so, for instance, -0 and 00 are invalid).
+
+- _nat_ are natural numbers (integral numbers greater than or equal to zero). They are followed by follwed by the annotation _as nat_ such as 3 _as nat_, 12 _as nat_ and 0 _as nat_ for the natural zero. The same restriction on zero as integers applies: 0 _as nat_ is the only way to specify the natural zero.
+
+- _tez_ are units of measure of Tezos tokens. They can be decimals and are followed by annotation _tez_ such as 3 _as tez_. You can also type units of millionth of tez, using the annotation _as mutez_ after a natural literal, such as 10000 _as mutez_ or _0 as mutez_.
+
+⚠️ Notice there are no floating point types in LIGO as they are not determinist in hardware modules.
+
+<!-- prettier-ignore -->
+ℹ️Large integral values can be expressed using underscores to separate groups of digits, like 1\_000 _as mutez_ or 0.000\_004 _as tez_. Notice 1 _as tez_ = 1\_000\_000 _as mutez_.
+
+## Addition
+
+Addition in LIGO is accomplished by means of the + infix operator. Some type constraints apply, for example you cannot add a value of type tez to a value of type nat.
+
+```
+let a: int = 5 + 10; // int + int yields int
+let b: int = (5 as nat) + 10; // nat + int yields int
+let c: tez = (5 as mutez) + (1 as tez); // tez + tez yields tez
+// let d : tez = (5 as mutez) + (10 as nat); // tez + int or tez + nat is invalid:
+let e: nat = (5 as nat) + (10 as nat); // two nats yield a nat
+// let f : nat = (5 as nat) + 10; // nat + int yields an int: invalid
+```
+
+⚠️ You cannot add a tez and a int.
+
+ℹ️ You can use underscores for readability when defining large numbers:
+
+```
+let sum : tez = 100_000 as mutez;
+```
+
+## Subtraction
+
+Subtractions follow the same principles.
+⚠️ Even when subtracting two nats, the result is an int
+
+```
+let a: int = 5 - 10;
+let b: int = (5 as nat) - (2 as nat); // Subtraction of two nats yields an int
+// let c : nat = (5 as nat) - (2 as nat); // Therefore the following is invalid
+let d: tez = (5 as mutez) - (1 as mutez);
+```
+
+## Multiplication
+
+Multiplications follow the same principles.
+
+```
+let a: int = 5 * 5;
+let b: nat = (5 as nat) * (5 as nat);
+// You can also multiply `nat` and `tez`
+let c: tez = (5 as nat) * (5 as mutez);
+```
+
+## Division
+
+Divisions follow the same principles.
+
+```
+let a: int = 10 / 3;
+let b: nat = (10 as nat) / (3 as nat);
+let c: nat = (10 as mutez) / (3 as mutez);
+```
+
+⚠️ Remember that there are no floating point numbers in LIGO so dividing 9 by 2 will output 4 and not 4.5
+
+## Modulo
+
+The behaviour of the _%_ operator in JsLIGO is different from JavaScript. In JsLIGO, _%_ is a modulus operator and in JavaScript it's a remainder operator. In the case of positive numbers everything is the same, but not with negative numbers.
+
+```
+let a: int = 120;
+let b: int = 9;
+let rem1: nat = a % b;  // 3
+let c: nat = 120 as nat;
+let rem2: nat = c % b;  // 3
+let d: nat = 9 as nat;
+let rem3: nat = c % d;  // 3
+let rem4: nat = a % d;  // 3
+```
+
+For cases when you need both the quotient and the remainder, LIGO provides the ediv operation. _ediv x y_ returns _Some (quotient, remainder)_, unless _y_ is zero, in which case it returns _None_
+
+```
+let a: int = 37;
+let b: int = 5;
+let ediv1 : option<[int , nat]> = ediv(a, b);  // Some (7, 2)
+let c: nat = 37 as nat;
+let ediv2: option<[int , nat]> = ediv(c, b);  // Some (7, 2)
+let d: nat = 5 as nat;
+let ediv3: option<[nat , nat]> = ediv(c, d);  // Some (7, 2)
+let ediv4: option<[int , nat]> = ediv(a, d);  // Some (7, 2)
+```
+
+## Checking a nat
+
+You can check if a value is a nat by using a predefined cast function which accepts an int and returns an optional nat: if the result is not None, then the provided integer was indeed a natural number, and not otherwise.
+
+```
+let is_a_nat: option<nat> = Michelson.is_nat(1);
+```
+
+## Your mission
+
+<!-- prettier-ignore -->1- In the editor, define *required\_energy* for 1.21 gigawatts. Since Tezos doesn't support floating point numbers, let's work in megawatts instead so that you can write the amount of energy as an _int_.
+
+<!-- prettier-ignore -->2- Define *energy\_per\_battery\_pack* for 0.16 gigawatts.
+
+<!-- prettier-ignore -->3- Define and compute *required\_battery\_packs* as the number of battery packs required to power your ship. Remember that floating point numbers are truncated to an integer, e.g. 10 / 3 = 3 in LIGO and not 3.33333333....
diff --git a/src/frontend/src/pages/Chapters/JS/ChapterMath/exercise.ligo b/src/frontend/src/pages/Chapters/JS/ChapterMath/exercise.ligo
new file mode 100644
index 0000000..3788732
--- /dev/null
+++ b/src/frontend/src/pages/Chapters/JS/ChapterMath/exercise.ligo
@@ -0,0 +1 @@
+// Type your solution below
diff --git a/src/frontend/src/pages/Chapters/JS/ChapterMath/index.ts b/src/frontend/src/pages/Chapters/JS/ChapterMath/index.ts
new file mode 100644
index 0000000..42ec3b8
--- /dev/null
+++ b/src/frontend/src/pages/Chapters/JS/ChapterMath/index.ts
@@ -0,0 +1,11 @@
+/* eslint import/no-webpack-loader-syntax: off */
+// @ts-ignore
+import exercise from "!raw-loader!./exercise.ligo";
+/* eslint import/no-webpack-loader-syntax: off */
+// @ts-ignore
+import solution from "!raw-loader!./solution.ligo";
+/* eslint import/no-webpack-loader-syntax: off */
+// @ts-ignore
+import course from "!raw-loader!./course.md";
+
+export const data = { course, exercise, solution, supports: {} };
diff --git a/src/frontend/src/pages/Chapters/JS/ChapterMath/solution.ligo b/src/frontend/src/pages/Chapters/JS/ChapterMath/solution.ligo
new file mode 100644
index 0000000..4ed4b86
--- /dev/null
+++ b/src/frontend/src/pages/Chapters/JS/ChapterMath/solution.ligo
@@ -0,0 +1,4 @@
+// Type your solution below
+const required_energy: int = 1210;
+const energy_per_battery_pack: int = 160;
+const required_battery_packs: int = required_energy / energy_per_battery_pack + 1
diff --git a/src/frontend/src/pages/Chapters/JS/ChapterRecords/course.md b/src/frontend/src/pages/Chapters/JS/ChapterRecords/course.md
new file mode 100644
index 0000000..c04497d
--- /dev/null
+++ b/src/frontend/src/pages/Chapters/JS/ChapterRecords/course.md
@@ -0,0 +1,49 @@
+# Chapter 9 : Records
+
+<dialog character="pilot">Thanks for the coordinates captain but I'm not sure I understand which value corresponds to which coordinate. You mean x,y,z ? You may want to be more explicit.</dialog>
+
+Records are like tuples but with named parameters. In other words, they hold a set of key/data pairs. To instantiate a record, you must first declare its type as follows :
+
+```
+type user = {
+  id       : nat,
+  is_admin : bool,
+  name     : string
+};
+```
+
+And here is how to define an associated record value :
+
+```
+let alice : user = {
+  id       : 1 as nat,
+  is_admin : true,
+  name     : "Alice"
+};
+```
+
+## Access
+
+You can access the whole record or get one key in particular :
+
+```
+let alice_admin: bool = alice.is_admin;
+```
+
+## Update
+
+You can modify values in a record as follows :
+
+```
+let change_name = (u: user): user => ({...u, name: "Mark"});
+```
+
+⚠️ Note that user has not been changed by the function. Rather, the function returned a nameless new version of it with the modified name.
+
+## Your mission
+
+<!-- prettier-ignore -->1- Refactor the type of *coordinates* as a record instead of a tuple. Name the parameters x, y and z.
+
+<!-- prettier-ignore -->2- Refactor *earth\_coordinates* with the record type.
+
+<!-- prettier-ignore -->2- Refactor the *earth\_coordinates* update of the last parameters with the record type.
diff --git a/src/frontend/src/pages/Chapters/JS/ChapterRecords/exercise.ligo b/src/frontend/src/pages/Chapters/JS/ChapterRecords/exercise.ligo
new file mode 100644
index 0000000..cb78fef
--- /dev/null
+++ b/src/frontend/src/pages/Chapters/JS/ChapterRecords/exercise.ligo
@@ -0,0 +1,4 @@
+// Modify the code below
+type coordinates =  [int, int, int];
+let earth_coordinates: coordinates = [2, 7, 1];
+earth_coordinates[1] = 5 as int;
diff --git a/src/frontend/src/pages/Chapters/JS/ChapterRecords/index.ts b/src/frontend/src/pages/Chapters/JS/ChapterRecords/index.ts
new file mode 100644
index 0000000..cf687e8
--- /dev/null
+++ b/src/frontend/src/pages/Chapters/JS/ChapterRecords/index.ts
@@ -0,0 +1,11 @@
+/* eslint import/no-webpack-loader-syntax: off */
+// @ts-ignore
+import course from "!raw-loader!./course.md";
+/* eslint import/no-webpack-loader-syntax: off */
+// @ts-ignore
+import exercise from "!raw-loader!./exercise.ligo";
+/* eslint import/no-webpack-loader-syntax: off */
+// @ts-ignore
+import solution from "!raw-loader!./solution.ligo";
+
+export const data = { course, exercise, solution, supports: {} };
diff --git a/src/frontend/src/pages/Chapters/JS/ChapterRecords/solution.ligo b/src/frontend/src/pages/Chapters/JS/ChapterRecords/solution.ligo
new file mode 100644
index 0000000..a7e95b1
--- /dev/null
+++ b/src/frontend/src/pages/Chapters/JS/ChapterRecords/solution.ligo
@@ -0,0 +1,14 @@
+// Modify the code below
+type coordinates = {
+  x: int,
+  y: int,
+  z: int
+};
+
+let earth_coordinates: coordinates = {
+    x: 2 as int,
+    y: 7 as int,
+    z: 1 as int,
+}
+
+earth_coordinates = ({...earth_coordinates, z: 5}) 
diff --git a/src/frontend/src/pages/Chapters/JS/ChapterStrings/course.md b/src/frontend/src/pages/Chapters/JS/ChapterStrings/course.md
new file mode 100644
index 0000000..6a90f7d
--- /dev/null
+++ b/src/frontend/src/pages/Chapters/JS/ChapterStrings/course.md
@@ -0,0 +1,64 @@
+# Chapter 5 : Strings
+
+<dialog character="mechanics">Red alert captain! When you powered the ship, the engines exploded... Seems like someone sabotaged the igniter! We should find out later. For now, you need to replace the damaged part.</dialog>
+
+Strings are defined using the built-in string type as follows:
+
+```
+const a: string = "Hello Captain Rogers";
+```
+
+or with single quotes
+
+```
+const a: string = 'Hello Captain Rogers';
+```
+
+## Concatenating Strings
+
+Strings can be concatenated using the _+_ operator.
+
+```
+const name: string = "Captain Rogers";
+const greeting: string = "Hello";
+const full_greeting: string = greeting + " " + name;
+```
+
+## Slicing Strings
+
+Strings can be sliced using a built-in function _String.sub_ which takes three parameters:
+
+- an _offset_ describing the index of first character that will be copied
+- the _length_ describing the number of characters that will be copied (starting from the given offset)
+- the _string_ being sliced
+
+The function _String.sub_ can be used as follows:
+
+```
+const name: string = "Captain Rogers";
+const slice: string = String.sub(0 as nat, 1 as nat, name);
+```
+
+⚠️ Notice that the offset and length of the sub function are natural numbers.
+
+If you want to concatenate to substrings you need to add an empty string before the expression to help Ligo make a proper type conversion:
+
+```
+const name: string = "Captain Rogers";
+const slice: string = "" + String.sub(8 as nat, 6 as nat, name) + ", welcome on board!";
+```
+
+⚠️ Notice that in more mature versions of JsLIGO this might be not necessary.
+
+## Length of Strings
+
+The length of a string can be found using a built-in function _String.length_ as follows:
+
+```
+const name: string = "Captain Rogers";
+const length: nat = String.length(name); // length = 14
+```
+
+## Your mission
+
+<!-- prettier-ignore -->1 - Reassign *my\_ship* by modifying the engine attribute (third number) from 0 to 1. Use substrings for the attributes before and after to make sure they are untouched.
diff --git a/src/frontend/src/pages/Chapters/JS/ChapterStrings/exercise.ligo b/src/frontend/src/pages/Chapters/JS/ChapterStrings/exercise.ligo
new file mode 100644
index 0000000..66a3ed3
--- /dev/null
+++ b/src/frontend/src/pages/Chapters/JS/ChapterStrings/exercise.ligo
@@ -0,0 +1,3 @@
+type ship_code = string;
+let my_ship: ship_code = "020433";
+// Type your solution below
diff --git a/src/frontend/src/pages/Chapters/JS/ChapterStrings/index.ts b/src/frontend/src/pages/Chapters/JS/ChapterStrings/index.ts
new file mode 100644
index 0000000..cf687e8
--- /dev/null
+++ b/src/frontend/src/pages/Chapters/JS/ChapterStrings/index.ts
@@ -0,0 +1,11 @@
+/* eslint import/no-webpack-loader-syntax: off */
+// @ts-ignore
+import course from "!raw-loader!./course.md";
+/* eslint import/no-webpack-loader-syntax: off */
+// @ts-ignore
+import exercise from "!raw-loader!./exercise.ligo";
+/* eslint import/no-webpack-loader-syntax: off */
+// @ts-ignore
+import solution from "!raw-loader!./solution.ligo";
+
+export const data = { course, exercise, solution, supports: {} };
diff --git a/src/frontend/src/pages/Chapters/JS/ChapterStrings/solution.ligo b/src/frontend/src/pages/Chapters/JS/ChapterStrings/solution.ligo
new file mode 100644
index 0000000..732f3c6
--- /dev/null
+++ b/src/frontend/src/pages/Chapters/JS/ChapterStrings/solution.ligo
@@ -0,0 +1,4 @@
+type ship_code = string;
+let my_ship: ship_code = "020433";
+// Type your solution below
+my_ship = "" + String.sub(0 as nat, 2 as nat, my_ship) + "1" + String.sub(3 as nat, 3 as nat, my_ship)
diff --git a/src/frontend/src/pages/Chapters/JS/ChapterTuples/course.md b/src/frontend/src/pages/Chapters/JS/ChapterTuples/course.md
new file mode 100644
index 0000000..5f894e3
--- /dev/null
+++ b/src/frontend/src/pages/Chapters/JS/ChapterTuples/course.md
@@ -0,0 +1,42 @@
+# Chapter 8 : Tuples
+
+<dialog character="pilot">Hey captain, I'm lieutenant Washburne, the pilot of this piece of junk. Just let me know the coordinates of where you want to go and I'll try my best to bring us there in one piece...</dialog>
+
+Tuples gather multiple values in a specific order which can be retrieved with their indexes.
+
+To define a tuple, use _\[ \]_ operator :
+
+```
+type name = [string, string];
+```
+
+And to define a value of this type :
+
+```
+let my_name: name = ["Jack", "Oneill"];
+```
+
+## Access
+
+You can access each component of a tuple by their position:
+
+```
+const my_name_first_name: string = my_name[0];
+const my_name_last_name: string = my_name[1];
+```
+
+## Update
+
+You can modify a component of tuple by assigning values as if it were a variable :
+
+```
+my_name[0] = "Carter"
+```
+
+## Your mission
+
+<!-- prettier-ignore -->1- Create a tuple type *coordinates* representing a 3D location.
+
+<!-- prettier-ignore -->2- Define *earth_coordinates* at coordinates 2,7,1.
+
+<!-- prettier-ignore -->3- Let's say you made a mistake in the definition. Change the last parameter of *earth_coordinates* to 5.
diff --git a/src/frontend/src/pages/Chapters/JS/ChapterTuples/exercise.ligo b/src/frontend/src/pages/Chapters/JS/ChapterTuples/exercise.ligo
new file mode 100644
index 0000000..3788732
--- /dev/null
+++ b/src/frontend/src/pages/Chapters/JS/ChapterTuples/exercise.ligo
@@ -0,0 +1 @@
+// Type your solution below
diff --git a/src/frontend/src/pages/Chapters/JS/ChapterTuples/index.ts b/src/frontend/src/pages/Chapters/JS/ChapterTuples/index.ts
new file mode 100644
index 0000000..cf687e8
--- /dev/null
+++ b/src/frontend/src/pages/Chapters/JS/ChapterTuples/index.ts
@@ -0,0 +1,11 @@
+/* eslint import/no-webpack-loader-syntax: off */
+// @ts-ignore
+import course from "!raw-loader!./course.md";
+/* eslint import/no-webpack-loader-syntax: off */
+// @ts-ignore
+import exercise from "!raw-loader!./exercise.ligo";
+/* eslint import/no-webpack-loader-syntax: off */
+// @ts-ignore
+import solution from "!raw-loader!./solution.ligo";
+
+export const data = { course, exercise, solution, supports: {} };
diff --git a/src/frontend/src/pages/Chapters/JS/ChapterTuples/solution.ligo b/src/frontend/src/pages/Chapters/JS/ChapterTuples/solution.ligo
new file mode 100644
index 0000000..2acec60
--- /dev/null
+++ b/src/frontend/src/pages/Chapters/JS/ChapterTuples/solution.ligo
@@ -0,0 +1,5 @@
+// Type your solution below
+type coordinates =  [int, int, int];
+let earth_coordinates: coordinates = [2, 7, 1];
+earth_coordinates[1] = 5 as int;
+
diff --git a/src/frontend/src/pages/Chapters/JS/ChapterTypes/course.md b/src/frontend/src/pages/Chapters/JS/ChapterTypes/course.md
new file mode 100644
index 0000000..b360a8c
--- /dev/null
+++ b/src/frontend/src/pages/Chapters/JS/ChapterTypes/course.md
@@ -0,0 +1,62 @@
+# Chapter 2 : Types
+
+<dialog character="mechanics">Welcome onboard captain, I'm the ship's mechanic. The first thing to do before departing is to define your ship's parameters. Go ahead!</dialog>
+
+LIGO is a strongly and statically typed language. This means that the compiler checks how your contract processes data. If it passes the test, your contract will not fail at run-time due to inconsistent assumptions on your data. This is called type checking.
+
+## Built-in types
+
+LIGO comes with all basic types built-in like _string_, _int_ or _tez_ for account balance or monetary transactions. You can find all built-in types on <a href="https://gitlab.com/ligolang/ligo/blob/dev/src/passes/operators/operators.ml#L35" target="_blank">the LIGO gitlab</a>.
+
+## Type aliases
+
+Type aliasing consists in renaming a given type, when the context calls for a more precise name. This increases readability and maintainability of your smart contracts. For example we can choose to alias a string type as an animal breed - this will allow us to comunicate our intent with added clarity.
+
+```
+type breed = string;
+let dog_breed: breed = "Saluki";
+```
+
+## Simple types
+
+The type account_balances denotes a map from addresses to tez
+
+```
+type account_balances = map<address, tez>;
+
+let ledger: account_balances =
+  Map.literal
+    (list([["tz1KqTpEZ7Yob7QbPE4Hy4Wo8fHG8LhKxZSx" as address, 10 as mutez]]));
+```
+
+ℹ️We will look more deeply into the _map_ construct in the following chapters.
+
+## Structured types
+
+Often contracts require complex data structures, which in turn require well-typed storage or functions to work with. LIGO offers a simple way to compose simple types into structured types.
+The first of those structured types is the record, which aggregates types as fields and index them with a field name. In the example below we define an account type whick keeps the balance and number of previous transactions for a given account.
+
+```
+type account = address;
+type number_of_transactions = nat;
+
+type account_data = {
+  balance: tez,
+  transactions: number_of_transactions
+};
+
+let my_account : account = {
+  balance: 10 as mutez,
+  transactions: 5 as nat,
+};
+```
+
+ℹ️We will look more deeply into the _record_ construct in the following chapters.
+
+## Your mission
+
+<!-- prettier-ignore -->1- There is an online editor in the top right corner of this page. In the editor, define *ship\_code* as a string type.
+
+<!-- prettier-ignore -->2- Then define the constant *my\_ship* as a *ship\_code* of value _"020433"_.
+
+<!-- prettier-ignore -->3- Then go ahead and validate your mission for a comparative view with the solution.
diff --git a/src/frontend/src/pages/Chapters/JS/ChapterTypes/exercise.ligo b/src/frontend/src/pages/Chapters/JS/ChapterTypes/exercise.ligo
new file mode 100644
index 0000000..3788732
--- /dev/null
+++ b/src/frontend/src/pages/Chapters/JS/ChapterTypes/exercise.ligo
@@ -0,0 +1 @@
+// Type your solution below
diff --git a/src/frontend/src/pages/Chapters/JS/ChapterTypes/index.ts b/src/frontend/src/pages/Chapters/JS/ChapterTypes/index.ts
new file mode 100644
index 0000000..42ec3b8
--- /dev/null
+++ b/src/frontend/src/pages/Chapters/JS/ChapterTypes/index.ts
@@ -0,0 +1,11 @@
+/* eslint import/no-webpack-loader-syntax: off */
+// @ts-ignore
+import exercise from "!raw-loader!./exercise.ligo";
+/* eslint import/no-webpack-loader-syntax: off */
+// @ts-ignore
+import solution from "!raw-loader!./solution.ligo";
+/* eslint import/no-webpack-loader-syntax: off */
+// @ts-ignore
+import course from "!raw-loader!./course.md";
+
+export const data = { course, exercise, solution, supports: {} };
diff --git a/src/frontend/src/pages/Chapters/JS/ChapterTypes/solution.ligo b/src/frontend/src/pages/Chapters/JS/ChapterTypes/solution.ligo
new file mode 100644
index 0000000..874e4a3
--- /dev/null
+++ b/src/frontend/src/pages/Chapters/JS/ChapterTypes/solution.ligo
@@ -0,0 +1,3 @@
+// Type your solution below
+type ship_code = string;
+const my_ship: ship_code = "020433";
diff --git a/src/frontend/src/pages/Chapters/JS/ChapterVariables/course.md b/src/frontend/src/pages/Chapters/JS/ChapterVariables/course.md
new file mode 100644
index 0000000..22f95bf
--- /dev/null
+++ b/src/frontend/src/pages/Chapters/JS/ChapterVariables/course.md
@@ -0,0 +1,41 @@
+# Chapter 3 : Variables
+
+<dialog character="mechanics">Seems like you have locked-in the parameters. You should unlock them so we can later change the ship configuration if need be.</dialog>
+
+## Constants
+
+Constants are immutable by design, which means their values cannot be reassigned. Put in another way, they can be assigned once, at their declaration. When defining a constant you need to provide a name, type and a value:
+
+```
+const age: int = 25;
+age = 3; // gives an error
+```
+
+Unlike the other syntaxes, JsLIGO doesn't allow variable names to be reused in the same block scope:
+
+```
+let x = (a: int): int => {
+  const age: int = 25;
+  const age: int = 3; // will give an error
+};
+```
+
+## Variables
+
+Variables, unlike constants, are mutable. They cannot be declared in a global scope, but they can be declared and used within functions, or as function parameters.
+
+```
+let add = (a: int, b: int): int => {
+  let c = a;
+  c = c + b;
+  return c
+}
+```
+
+⚠️ Please be wary that mutation only works within the function scope itself, values outside of the function scope will not be affected. In other words, when a function is called, its arguments are copied, as well as the environment. Any side-effect to that environment is therefore lost when the function returns.
+
+## Your mission
+
+<!-- prettier-ignore -->1- In the top right editor, modify the code from the previous chapter to make *my\_ship* a variable.
+
+<!-- prettier-ignore -->2- On the next line, modify its value to _"222031"_
diff --git a/src/frontend/src/pages/Chapters/JS/ChapterVariables/exercise.ligo b/src/frontend/src/pages/Chapters/JS/ChapterVariables/exercise.ligo
new file mode 100644
index 0000000..874e4a3
--- /dev/null
+++ b/src/frontend/src/pages/Chapters/JS/ChapterVariables/exercise.ligo
@@ -0,0 +1,3 @@
+// Type your solution below
+type ship_code = string;
+const my_ship: ship_code = "020433";
diff --git a/src/frontend/src/pages/Chapters/JS/ChapterVariables/index.ts b/src/frontend/src/pages/Chapters/JS/ChapterVariables/index.ts
new file mode 100644
index 0000000..42ec3b8
--- /dev/null
+++ b/src/frontend/src/pages/Chapters/JS/ChapterVariables/index.ts
@@ -0,0 +1,11 @@
+/* eslint import/no-webpack-loader-syntax: off */
+// @ts-ignore
+import exercise from "!raw-loader!./exercise.ligo";
+/* eslint import/no-webpack-loader-syntax: off */
+// @ts-ignore
+import solution from "!raw-loader!./solution.ligo";
+/* eslint import/no-webpack-loader-syntax: off */
+// @ts-ignore
+import course from "!raw-loader!./course.md";
+
+export const data = { course, exercise, solution, supports: {} };
diff --git a/src/frontend/src/pages/Chapters/JS/ChapterVariables/solution.ligo b/src/frontend/src/pages/Chapters/JS/ChapterVariables/solution.ligo
new file mode 100644
index 0000000..9bdda77
--- /dev/null
+++ b/src/frontend/src/pages/Chapters/JS/ChapterVariables/solution.ligo
@@ -0,0 +1,4 @@
+// Type your solution below
+type ship_code = string;
+let my_ship: ship_code = "020433";
+my_ship = "222031";
diff --git a/src/frontend/src/pages/Chapters/JS/ChapterVariant/course.md b/src/frontend/src/pages/Chapters/JS/ChapterVariant/course.md
new file mode 100644
index 0000000..d671ad0
--- /dev/null
+++ b/src/frontend/src/pages/Chapters/JS/ChapterVariant/course.md
@@ -0,0 +1,71 @@
+# Chapter 12 : Unit, Variant and Pattern matching
+
+<dialog character="mechanics">Captain, before we go, you may want to setup your commands to set the ship code and go to a destination.</dialog>
+
+Optionals are a pervasive programing pattern in OCaml. Since Michelson and LIGO are both inspired by OCaml, optional types are available in LIGO as well. Similarly, OCaml features a unit type, and LIGO features it as well. Both the option type and the unit types are instances of a more general kind of types: variant types (sometimes called sum types).
+
+## Unit
+
+The unit type in Michelson or LIGO is a predefined type that contains only one value that carries no information. It is used when no relevant information is required or produced. Here is how it used.
+
+In JsLIGO, the unique value of the unit type is _unit_.
+
+```
+let n: unit = unit;
+```
+
+## Variant
+
+A variant type is a user-defined or a built-in type (in case of options) that defines a type by cases, so a value of a variant type is either this, or that or... The simplest variant type is equivalent to the enumerated types found in Java, C++, JavaScript etc.
+
+Here is how we define a coin as being either head or tail (and nothing else):
+
+```
+type coin = ["Head"] | ["Tail"];
+
+let head: coin = Head();
+let tail: coin = Tail();
+```
+
+The names Head and Tail in the definition of the type coin are called data constructors, or variants. In this particular, they carry no information beyond their names, so they are called constant constructors.
+
+In general, it is interesting for variants to carry some information, and thus go beyond enumerated types. In the following, we show how to define different kinds of users of a system.
+
+```
+type id = nat;
+
+type user =
+  ["Admin", id]
+| ["Manager", id]
+| ["Guest"];
+
+let u: user = Admin(1000 as nat);
+let g: user = Guest();
+```
+
+In LIGO, a constant constructor is equivalent to the same constructor taking an argument of type unit, so, for example, Guest is the same value as Guest (unit).
+
+## Pattern matching
+
+Pattern matching is similar to the switch construct in Javascript, and can be used to route the program's control flow based on the value of a variant. Consider for example the definition of a function flip that flips a coin.
+
+```
+type coin = ["Head"] | ["Tail"];
+
+let flip = (input_coin: coin): coin => match(input_coin, {
+    Head: () => Tail(),
+    Tail: () => Head(),
+});
+```
+
+## Your mission
+
+<!-- prettier-ignore -->1- Create the type _parameter_ as a variant.
+
+<!-- prettier-ignore -->2- Define the first option of the variant as *Set\_ship\_code* which will be our action to set the ship code. Notice this will take a string as an input.
+
+<!-- prettier-ignore -->3- Define the second option of the variant as *Go\_to* which will be our action to set the ship on course to a new destination. Notice this will also take a string as an input.
+
+```
+
+```
diff --git a/src/frontend/src/pages/Chapters/JS/ChapterVariant/exercise.ligo b/src/frontend/src/pages/Chapters/JS/ChapterVariant/exercise.ligo
new file mode 100644
index 0000000..3788732
--- /dev/null
+++ b/src/frontend/src/pages/Chapters/JS/ChapterVariant/exercise.ligo
@@ -0,0 +1 @@
+// Type your solution below
diff --git a/src/frontend/src/pages/Chapters/JS/ChapterVariant/index.ts b/src/frontend/src/pages/Chapters/JS/ChapterVariant/index.ts
new file mode 100644
index 0000000..cf687e8
--- /dev/null
+++ b/src/frontend/src/pages/Chapters/JS/ChapterVariant/index.ts
@@ -0,0 +1,11 @@
+/* eslint import/no-webpack-loader-syntax: off */
+// @ts-ignore
+import course from "!raw-loader!./course.md";
+/* eslint import/no-webpack-loader-syntax: off */
+// @ts-ignore
+import exercise from "!raw-loader!./exercise.ligo";
+/* eslint import/no-webpack-loader-syntax: off */
+// @ts-ignore
+import solution from "!raw-loader!./solution.ligo";
+
+export const data = { course, exercise, solution, supports: {} };
diff --git a/src/frontend/src/pages/Chapters/JS/ChapterVariant/solution.ligo b/src/frontend/src/pages/Chapters/JS/ChapterVariant/solution.ligo
new file mode 100644
index 0000000..07ec66c
--- /dev/null
+++ b/src/frontend/src/pages/Chapters/JS/ChapterVariant/solution.ligo
@@ -0,0 +1,2 @@
+// Type your solution below
+type parameter = ["Set_ship_code", string] | ["Go_to", string]
diff --git a/src/frontend/src/pages/Home/Home.style.tsx b/src/frontend/src/pages/Home/Home.style.tsx
index 27a3e50..c63b213 100644
--- a/src/frontend/src/pages/Home/Home.style.tsx
+++ b/src/frontend/src/pages/Home/Home.style.tsx
@@ -298,7 +298,7 @@ export const HomeLanguage = styled.div`
 
 export const HomeLanguageGrid = styled.div`
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
   grid-gap: 20px;
   margin: 50px;
 
diff --git a/src/frontend/src/pages/Home/Home.view.tsx b/src/frontend/src/pages/Home/Home.view.tsx
index e0b7331..a35f455 100644
--- a/src/frontend/src/pages/Home/Home.view.tsx
+++ b/src/frontend/src/pages/Home/Home.view.tsx
@@ -162,6 +162,21 @@ export const HomeView = () => {
               </Button>
             </Link>
           </div>
+
+          <div>
+            <h3>JsLIGO</h3>
+            <p>JsLIGO has a syntax close to JavaScript, great for web developers.</p>
+            <img alt="js" src="/images/reason.svg" />
+            <Link to="/js/chapter-about">
+              <Button>
+                <ButtonBorder />
+                <ButtonText onClick={() => {}}>
+                  <img alt="rocket" src="/icons/rocket.svg" />
+                  START WITH JS
+                </ButtonText>
+              </Button>
+            </Link>
+          </div>
         </HomeLanguageGrid>
       </HomeLanguage>