diff --git a/2023/Programming3/prezentacia.pdf b/2023/Programming3/prezentacia.pdf
new file mode 100644
index 0000000..a7bb59d
Binary files /dev/null and b/2023/Programming3/prezentacia.pdf differ
diff --git a/2023/Programming3/readme.md b/2023/Programming3/readme.md
index ec3aa8c..cf4cf36 100644
--- a/2023/Programming3/readme.md
+++ b/2023/Programming3/readme.md
@@ -30,5 +30,9 @@ Ako budeme hru ďalej rozvíjať, závisí od šikovnosti účastníkov. Možnos
 
 - [Priprava pre ucastnikov](priprava/priprava.md)
 
+## Prezentacia
+
+- [Prezentacia](prezentacia.pdf)
+
 ## Ulohy
 - [Zoznam uloh](ulohy.md)
diff --git a/2023/Programming3/ukazky/kluce.html b/2023/Programming3/ukazky/kluce.html
new file mode 100644
index 0000000..7a738bc
--- /dev/null
+++ b/2023/Programming3/ukazky/kluce.html
@@ -0,0 +1,111 @@
+<div id="hra"></div>
+
+<script>
+var hra = document.getElementById("hra");
+
+for (var y=0; y<10; y++)
+{
+  for (var x=0; x<10; x++)
+    hra.innerHTML += `<span id='cell_${x}_${y}'></span>`;
+  hra.innerHTML += "<br>";
+}
+
+var mapa = [
+  "##########",
+  "#    #e  #",
+  "# ## #   #",
+  "#    # #d#",
+  "#  x ###d#",
+  "# #      #",
+  "# #. #####",
+  "# #  d  k#",
+  "#k#  #  k#",
+  "##########"];
+
+for (var y=0; y<10; y++)
+{
+  for (var x=0; x<10; x++)
+  {
+    var cell = document.getElementById(`cell_${x}_${y}`);
+    cell.style.display = "inline-block";
+    cell.style.overflow = "hidden";
+    cell.style.width = "55px";
+    cell.style.height = "55px";// = "display: inline-block; width:50px; height:50px; clip:rect(0px, 0px, 50px, 50px)";
+    cell.style.background = "url(tiles.png)";
+    cell.style.backgroundRepeat = "no-repeat";
+    cell.style.fontSize = "40px"
+    cell.style.textAlign = "center";
+    cell.style.lineHeight = "60px"
+    switch (mapa[y][x])
+    {
+      case "#": cell.style.backgroundPosition = "-4px -2px"; break;
+      case " ": 
+      case "k":
+      case "d":
+      case "e":
+        switch (Math.floor(Math.random()*4))
+        {
+          case 0: cell.style.backgroundPosition = "-2px -128px"; break;
+          case 1: cell.style.backgroundPosition = "-126px -128px"; break;
+          case 2: cell.style.backgroundPosition = "-250px -128px"; break;
+          case 3: cell.style.backgroundPosition = "-374px -128px"; break;
+        }
+      break;
+    }
+    switch (mapa[y][x])
+    {
+      case "k": cell.innerHTML = "&#x1f511;"; break;
+      case "d": cell.innerHTML = "&#x1f6aa;"; break;
+      case "e": cell.innerHTML = "&#x1F353;"; break;
+    }
+  }
+}
+
+var x = 5;
+var y = 5;
+
+var leftKey = 37, upKey = 38, rightKey = 39, downKey = 40, spaceKey = 32;
+document.addEventListener("keydown", e => {
+  switch (e.keyCode)
+  {
+    case leftKey: pohyb(-1, 0); break;
+    case rightKey: pohyb(+1, 0); break;
+    case upKey: pohyb(0, -1); break;
+    case downKey: pohyb(0, +1); break;
+  }
+});
+
+String.prototype.replaceAt = function(index, replacement) {
+    return this.substring(0, index) + replacement + this.substring(index + replacement.length);
+}
+
+pohyb(0, 0);
+var klucov = 0;
+function pohyb(dx, dy)
+{       	
+  if (mapa[y+dy][x+dx] == "e")
+  {
+    mapa[y+dy] = mapa[y+dy].replaceAt(x+dx, " ");
+    alert("Hura!");
+  }
+  if (mapa[y+dy][x+dx] == "k")
+  {
+    klucov++;
+    mapa[y+dy] = mapa[y+dy].replaceAt(x+dx, " ");
+  }
+  if (mapa[y+dy][x+dx] == "d" && klucov > 0)
+  {
+    klucov--;
+    mapa[y+dy] = mapa[y+dy].replaceAt(x+dx, " ");
+  }
+  if (mapa[y+dy][x+dx] != " ")
+    return;
+
+  var cell = document.getElementById(`cell_${x}_${y}`);
+  cell.innerHTML = ""
+  x = x + dx;
+  y = y + dy;
+  var cell = document.getElementById(`cell_${x}_${y}`);
+  cell.innerHTML = "&#x1f600;"
+}
+</script>
\ No newline at end of file
diff --git a/2023/Programming3/ukazky/sokoban.html b/2023/Programming3/ukazky/sokoban.html
new file mode 100644
index 0000000..59b7ed1
--- /dev/null
+++ b/2023/Programming3/ukazky/sokoban.html
@@ -0,0 +1,155 @@
+<div id="hra"></div>
+
+<script>
+var hra = document.getElementById("hra");
+
+for (var y=0; y<13; y++)
+{
+  for (var x=0; x<19; x++)
+    hra.innerHTML += `<span id='cell_${x}_${y}'></span>`;
+  hra.innerHTML += "<br>";
+}
+
+var mapa = [
+  "                   ",
+  "    #####          ",
+  "    #   #          ",
+  "    #x  #          ",
+  "  ###  x##         ",
+  "  #  x x #         ",
+  "### # ## #   ######",
+  "#   # ## #####  ..#",
+  "# x  x          ..#",
+  "##### ### # ##  ..#",
+  "    #     #########",
+  "    #######        ",
+  "                   ",
+  "                   "];
+
+for (var y=0; y<13; y++)
+{ 
+  mapa[y] = mapa[y].split("");
+  for (var x=0; x<19; x++)
+  {
+    var cell = document.getElementById(`cell_${x}_${y}`);
+    cell.style.display = "inline-block";
+    cell.style.overflow = "hidden";
+    cell.style.width = "55px";
+    cell.style.height = "55px";// = "display: inline-block; width:50px; height:50px; clip:rect(0px, 0px, 50px, 50px)";
+    cell.style.background = "url(tiles.png)";
+    cell.style.backgroundRepeat = "no-repeat";
+    cell.style.fontSize = "40px"
+    cell.style.textAlign = "center";
+    cell.style.lineHeight = "60px"
+    switch (mapa[y][x])
+    {
+      case "#": cell.style.backgroundPosition = "-4px -2px"; break;
+      case " ": 
+      case "k":
+      case "d":
+      case "e":
+      case ".": 
+      case "x": 
+        switch (Math.floor(Math.random()*4))
+        {
+          case 0: cell.style.backgroundPosition = "-2px -128px"; break;
+          case 1: cell.style.backgroundPosition = "-126px -128px"; break;
+          case 2: cell.style.backgroundPosition = "-250px -128px"; break;
+          case 3: cell.style.backgroundPosition = "-374px -128px"; break;
+        }
+      break;
+    }
+    switch (mapa[y][x])
+    {
+      case "k": cell.innerHTML = "&#x1f511;"; break;
+      case "d": cell.innerHTML = "&#x1f6aa;"; break;
+      case "e": cell.innerHTML = "&#x1F353;"; break;
+      case "x": cell.innerHTML = "&#x1F30d;"; break;
+      case ".": cell.innerHTML = "&#x1F310;"; break;
+    }
+  }
+}
+
+var x = 11;
+var y = 9;
+
+var leftKey = 37, upKey = 38, rightKey = 39, downKey = 40, spaceKey = 32;
+document.addEventListener("keydown", e => {
+  switch (e.keyCode)
+  {
+    case leftKey: pohyb(-1, 0); break;
+    case rightKey: pohyb(+1, 0); break;
+    case upKey: pohyb(0, -1); break;
+    case downKey: pohyb(0, +1); break;
+  }
+});
+
+String.prototype.replaceAt = function(index, replacement) {
+    return this.substring(0, index) + replacement + this.substring(index + replacement.length);
+}
+
+pohyb(0, 0);
+var klucov = 0;
+function pohyb(dx, dy)
+{       	
+  if (mapa[y+dy][x+dx] == "x")
+  {
+    if (mapa[y+dy*2][x+dx*2] == " ")
+    {
+      mapa[y+dy][x+dx] = " ";
+      mapa[y+dy*2][x+dx*2] = "x";
+      var cell = document.getElementById(`cell_${x+dx*2}_${y+dy*2}`);
+      cell.innerHTML = "&#x1F30d;"
+    }
+    if (mapa[y+dy*2][x+dx*2] == ".")
+    {
+      mapa[y+dy][x+dx] = " ";
+      mapa[y+dy*2][x+dx*2] = "X";
+      var cell = document.getElementById(`cell_${x+dx*2}_${y+dy*2}`);
+      cell.innerHTML = "&#x1F315;"
+    }
+  }
+  if (mapa[y+dy][x+dx] == "X")
+  {
+    if (mapa[y+dy*2][x+dx*2] == " ")
+    {
+      mapa[y+dy][x+dx] = ".";
+      mapa[y+dy*2][x+dx*2] = "x";
+      var cell = document.getElementById(`cell_${x+dx*2}_${y+dy*2}`);
+      cell.innerHTML = "&#x1F30d;"
+    }
+    if (mapa[y+dy*2][x+dx*2] == ".")
+    {
+      mapa[y+dy][x+dx] = ".";
+      mapa[y+dy*2][x+dx*2] = "X";
+      var cell = document.getElementById(`cell_${x+dx*2}_${y+dy*2}`);
+      cell.innerHTML = "&#x1F315;"
+    }
+  }
+
+  if (mapa[y+dy][x+dx] == "e")
+  {
+    mapa[y+dy][x+dx] = " ";
+    alert("Hura!");
+  }
+  if (mapa[y+dy][x+dx] == "k")
+  {
+    klucov++;
+    mapa[y+dy][x+dx] = " ";
+  }
+  if (mapa[y+dy][x+dx] == "d" && klucov > 0)
+  {
+    klucov--;
+    mapa[y+dy][x+dx] = " ";
+  }
+  if (mapa[y+dy][x+dx] != " " && mapa[y+dy][x+dx] != ".")
+    return;
+
+  var cell = document.getElementById(`cell_${x}_${y}`);
+  cell.innerHTML = mapa[y][x] == "." ? "&#x1F310;" : "";
+  x = x + dx;
+  y = y + dy;
+  var cell = document.getElementById(`cell_${x}_${y}`);
+  cell.innerHTML = "&#x1f600;"
+}
+</script>
\ No newline at end of file
diff --git a/2023/Programming3/ukazky/tile.html b/2023/Programming3/ukazky/tile.html
new file mode 100644
index 0000000..569910f
--- /dev/null
+++ b/2023/Programming3/ukazky/tile.html
@@ -0,0 +1,11 @@
+<span id="cell"></span>
+<script>
+var cell = document.getElementById(`cell`);
+cell.style.display = "inline-block";
+cell.style.overflow = "hidden";
+cell.style.width = "55px";
+cell.style.height = "55px";
+cell.style.background = "url(tiles.png)";
+cell.style.backgroundRepeat = "no-repeat";
+cell.style.backgroundPosition = "-250px -128px";
+</script>
\ No newline at end of file
diff --git a/2023/Programming3/ukazky/tiles.png b/2023/Programming3/ukazky/tiles.png
new file mode 100644
index 0000000..de72461
Binary files /dev/null and b/2023/Programming3/ukazky/tiles.png differ
diff --git a/2023/Programming3/ukazky/utf.html b/2023/Programming3/ukazky/utf.html
new file mode 100644
index 0000000..ce2814c
--- /dev/null
+++ b/2023/Programming3/ukazky/utf.html
@@ -0,0 +1,14 @@
+<span id="cell"></span>
+
+<script>
+  var cell = document.getElementById(`cell`)
+  cell.style.display = "inline-block"
+  cell.style.overflow = "hidden"
+  cell.style.width = "55px"
+  cell.style.height = "55px"
+  cell.style.fontSize = "40px"
+  cell.style.textAlign = "center"
+  cell.style.lineHeight = "60px"
+  cell.style.background = "#d0d0d0"
+  cell.innerHTML = "&#x1f511;"
+</script>
\ No newline at end of file
diff --git a/2023/Programming3/ulohy.md b/2023/Programming3/ulohy.md
index 4be8547..76e52f8 100644
--- a/2023/Programming3/ulohy.md
+++ b/2023/Programming3/ulohy.md
@@ -24,6 +24,15 @@ console.log("Pismeno na piatom mieste je " + abeceda[5])
 console.log("Pismeno na piatom mieste je ", abeceda[5])
 console.log(`Pismeno na piatom mieste je ${abeceda[5]}`)
 
+// split a join
+veta = "Toto je moja jednoducha rozvita veta"
+slova = veta.split(" ")
+novaveta = slova.join(",")
+cisla = [5, 6, 7, 2, 1, 9, 0]
+cisla.join(" a ")
+"jablko".split("")
+"jablko".split("").join("  ")
+
 // pokrocile funkcie
 abeceda.substr(5, 4)
 abeceda.indexOf("m")
@@ -39,20 +48,22 @@ abeceda.length
 <div id="mojdiv">Toto je moj div</div>
 ```
 
-```javascript
+```html
+<script>
 document.getElementById("mojdiv").innerHTML = "Bla bla"
 document.getElementById("mojdiv").style.background = "red"
 document.getElementById("mojdiv").style.background = "#00d0ff"
 document.getElementById("mojdiv").style.fontSize = "100px"
 document.getElementById("mojdiv").style.textColor = "gray"
+</script>
 ```
 
 ## Loopy
 
 - pouzitie prikazu `for` a vnoreny `for`
 
-- Uloha: napiste vase meno bielou na ciernom pozadi
-- Uloha: dopln kod s prikazom `for`
+- Uloha 1: napiste vase meno bielou na ciernom pozadi
+- Uloha 2: dopln kod s prikazom `for`
 
 ```javascript
 for (var i=0; i<20; i++)
@@ -60,9 +71,10 @@ for (var i=0; i<20; i++)
   document.getElementById("mojdiv").innerHTML += `obvod stvorca so stranou ${i} je ?`;
 }
 ```
-- Uloha: Vypis pre kazdy rozmer stvorca v rozsahu 1..10 jeho obvod a obsah
-- Uloha: Vypis svoje meno 100 krat
-- Uloha: Vypis svoje meno 100 krat, tak aby bolo v kazdom riadku prave 10 krat
+- Uloha 3: Uprav program aby vypisal kazdy obvod na samostatny riadok
+- Uloha 4: Vypis pre kazdy rozmer stvorca v rozsahu 1..10 jeho obvod a obsah
+- Uloha 5: Vypis svoje meno 100 krat
+- Uloha 6: Vypis svoje meno 100 krat, tak aby bolo v kazdom riadku prave 10 krat
 
 ## Dvojrozmerne pole a DOM
 
@@ -76,9 +88,9 @@ var slova = [
   ];
 ```
 
-- Uloha: Ako ziskat prvy a posledny prvok?
-- Uloha: Ako ziskat treti znak stvrteho slova?
-- Uloha: Doplnte nasledujuci kod tak, aby ste vytvorili maticu 5x5 elementov a kazdy z nich bude obsahovat prislusny znak podla pola `slova`
+- Uloha 7: Ako ziskat prvy a posledny prvok?
+- Uloha 8: Ako ziskat treti znak stvrteho slova?
+- Uloha 9: Doplnte nasledujuci kod tak, aby ste vytvorili maticu 5x5 elementov a kazdy z nich bude obsahovat prislusny znak podla pola `slova`
 
 ```html
 <div id="hra"></div>
@@ -95,7 +107,7 @@ for (var y=0; y<?; y++)
 </script>
 ```
 
-- Uloha: Preiterujte pole este raz a tie bunkam ktore obsahuju samohlasku nastavte zelene pozadie
+- Uloha 10: Preiterujte pole este raz a tym bunkam ktore obsahuju samohlasku nastavte zelene pozadie
 
 ```javascript
 for (var y=0; y<?; y++)
@@ -108,7 +120,7 @@ for (var y=0; y<?; y++)
 }
 ```
 
-- Uloha: upravte predosly program tak aby ste pouzili prikaz `switch`:
+- Uloha 11: upravte predosly program tak aby ste pouzili prikaz `switch`:
 
 ```javascript
   switch (nieco)
@@ -121,11 +133,11 @@ for (var y=0; y<?; y++)
   }
 ```
 
-- Uloha: nastavte kazdej bunke rozmery 55x55 pixelov (`cell.style.width = "55px"`, `cell.style.height = "55px"`, `cell.style.display = "inline-block"`)
+- Uloha 12: nastavte kazdej bunke rozmery 55x55 pixelov (`cell.style.width = "55px"`, `cell.style.height = "55px"`, `cell.style.display = "inline-block"`)
 
 ## Mapa hry
 
-- Uloha: Vytvorte s pomocou znakov mriezka a medzera bludisko
+- Uloha 13: Vytvorte s pomocou znakov mriezka a medzera bludisko
 
 ```javascript
 var mapa = [
@@ -141,13 +153,13 @@ var mapa = [
   "##########"];
 ```
 
-- Uloha: Vykreslite bludisko, prazdny priestor sivou a steny cervenou
-- Uloha: Ulozte do premennych `hracx` a `hracy` suradnicu (x - stlpec, y - riadok) kde ma hrac zacinat
+- Uloha 14: Vykreslite bludisko, prazdny priestor sivou a steny cervenou
+- Uloha 15: Ulozte do premennych `hracx` a `hracy` suradnicu (x - stlpec, y - riadok) kde ma hrac zacinat
 
 ## Pohyb po hracom poli
 
-- Uloha: Vyfarbite policko urcene tymito suradnicami namodro
-- Uloha: Doplnte funkciu `pohyb` tak, aby sa hrac presuval po bludisku
+- Uloha 16: Vyfarbite policko urcene tymito suradnicami namodro
+- Uloha 17: Doplnte funkciu `pohyb` tak, aby sa hrac presuval po bludisku
 
 ```javascript
 function pohyb(dx, dy)
@@ -167,33 +179,66 @@ document.addEventListener("keydown", e => {
 });
 ```
 
-- Uloha: Osetrite situaciu kedy by sa chcel hrac posunut na miesto kde sa pred tym nachadzala stena (prikaz `if`)
+- Uloha 18: Osetrite situaciu kedy by sa chcel hrac posunut na miesto kde sa pred tym nachadzala stena (prikaz `if`)
 - Checkpoint 1: bludisko so smajlikom
 
 ## UTF8 symboly
-- Uloha: Hraca vykreslite ako hviezdicku `*` (s nastavenim `innerHTML`)
-- Uloha: Hraca vykreslite s pomocou symbolu `"&#x1f600;"`
-- Uloha: Vyberte iny symbol na zobrazenie hraca
+- Uloha 19: Hraca vykreslite ako hviezdicku `*` (s nastavenim `innerHTML`)
+- Uloha 20: Hraca vykreslite s pomocou symbolu `"&#x1f600;"`
+- Uloha 21: Vyberte iny symbol na zobrazenie hraca
 
 - Utf8 symboly: 
+  - [utf8-icons.com](https://utf8-icons.com/subset/miscellaneous-symbols-and-pictographs)
   - [symbl.cc - emoticons](https://symbl.cc/en/unicode/blocks/emoticons/)
   - [symbl.cc - misc](https://symbl.cc/en/unicode/blocks/miscellaneous-symbols-and-pictographs/)
-  - [utf8-icons.com](https://utf8-icons.com/subset/miscellaneous-symbols-and-pictographs)
   - [unicode.org](https://unicode.org/emoji/charts/full-emoji-list.html)
 
 - nastylovanie textu (overflow, fontSize, textAlign, lineHeight)
-- pridanie ciela
-- pridanie kluca a dveri
+
+```html
+<span id="cell"></span>
+
+<script>
+  var cell = document.getElementById(`cell`)
+  cell.style.display = "inline-block"
+  cell.style.overflow = "hidden"
+  cell.style.width = "55px"
+  cell.style.height = "55px"
+  cell.style.fontSize = "40px"
+  cell.style.textAlign = "center"
+  cell.style.lineHeight = "60px"
+  cell.style.background = "#d0d0d0"
+  cell.innerHTML = "&#x1f511;"
+</script>
+```
+
+- Uloha 22: Pridanie ciela
+- Uloha 23: Pridanie kluca a dveri (treba prerobit mapu z pola retazov na pole poli znakov s prikazom `split`)
 
 - Checkpoint 2: puzzle s cielom
 
 ## Tile map
-- pridanie tile map (background, backgroundRepeat, backgroundPosition)
-- Checkpoint 3: otexturovana mapa
+
+```html
+<span id="cell"></span>
+<script>
+var cell = document.getElementById(`cell`);
+cell.style.display = "inline-block";
+cell.style.overflow = "hidden";
+cell.style.width = "55px";
+cell.style.height = "55px";
+cell.style.background = "url(tiles.png)";
+cell.style.backgroundRepeat = "no-repeat";
+cell.style.backgroundPosition = "-250px -128px";
+</script>
+```
+- Uloha 24: Cez element inspector upravit `backgroundPosition` atribut tak, aby sme ziskali tehlovu stenu
+- Uloha 25: Pridanie tile map do hry (background, backgroundRepeat, backgroundPosition)
+- Checkpoint 3: Otexturovana mapa
 
 ## Sokoban
-- pridanie predmetov a posuvanie
-- pouzite level:
+- Uloha 26: pridanie predmetov a posuvanie
+- Uloha 27: pouzite level:
   - [sokoban/level01.js](sokoban/level01.js)
   - [sokoban/level02.js](sokoban/level02.js)
   - [sokoban/level03.js](sokoban/level03.js)