diff --git a/exercise-11/index.html b/exercise-11/index.html
new file mode 100644
index 0000000..81f123b
--- /dev/null
+++ b/exercise-11/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+        
+        <!-- Latest compiled and minified CSS -->
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+        
+        <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
+        
+        <script type="text/javascript">
+            /* global $ */
+            
+            var czechWords = [ "dům", "auto", "slovo", "škola", "den", "strom", "sopka"];
+            var englishWords = [ "house", "car", "word", "school", "day", "tree", "vulcan"];
+            
+            function buttonClickHandler(event) {
+                var message;
+                if (event.target.textContent == "slovo") {
+                    message = "Congratulation! Correct answer.";
+                    $("#statusIcon").addClass("glyphicon-ok").removeClass("glyphicon-remove");
+                } else {
+                    message = "Incorrect answer. Try again.";
+                    $("#statusIcon").addClass("glyphicon-remove").removeClass("glyphicon-ok");
+                }
+                $("#status").text(message);
+            }
+
+            function documentReady() {
+                $(".btn").click(buttonClickHandler);
+            }
+        
+            $( document ).ready(documentReady);
+        </script>
+        
+    </head>
+    <body>
+        <h1>Word catcher</h1>
+        <div>word</div>
+        <div>
+            <button type="button" class="btn btn-default">dům</button>
+            <button type="button" class="btn btn-default">auto</button>
+            <button type="button" class="btn btn-default">slovo</button>
+            <button type="button" class="btn btn-default">škola</button>
+        </div> 
+        <div>
+            <span id="statusIcon" class="glyphicon" ></span>
+            <span id="status">...select word...</span>
+        </div>
+    </body>
+</html>
\ No newline at end of file
diff --git a/exercise-12/index.html b/exercise-12/index.html
new file mode 100644
index 0000000..1a8aec9
--- /dev/null
+++ b/exercise-12/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+        
+        <!-- Latest compiled and minified CSS -->
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+        
+        <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
+        
+        <script type="text/javascript">
+            /* global $ */
+            
+            var czechWords = [ "dům", "auto", "slovo", "škola", "den", "strom", "sopka"];
+            var englishWords = [ "house", "car", "word", "school", "day", "tree", "vulcan"];
+            var primaryWordIndex = 0;
+            
+            function buttonClickHandler(event) {
+                var message;
+                if (event.target.textContent == "slovo") {
+                    message = "Congratulation! Correct answer.";
+                    $("#statusIcon").addClass("glyphicon-ok").removeClass("glyphicon-remove");
+                } else {
+                    message = "Incorrect answer. Try again.";
+                    $("#statusIcon").addClass("glyphicon-remove").removeClass("glyphicon-ok");
+                }
+                $("#status").text(message);
+            }
+
+            function documentReady() {
+                $(".btn").click(buttonClickHandler);
+                primaryWordIndex = Math.floor(Math.random() * englishWords.length);
+                $("#primaryWord").text(englishWords[primaryWordIndex]);
+            }
+        
+            $( document ).ready(documentReady);
+        </script>
+        
+    </head>
+    <body>
+        <h1>Word catcher</h1>
+        <div id="primaryWord">word</div>
+        <div>
+            <button type="button" class="btn btn-default">dům</button>
+            <button type="button" class="btn btn-default">auto</button>
+            <button type="button" class="btn btn-default">slovo</button>
+            <button type="button" class="btn btn-default">škola</button>
+        </div> 
+        <div>
+            <span id="statusIcon" class="glyphicon" ></span>
+            <span id="status">...select word...</span>
+        </div>
+    </body>
+</html>
\ No newline at end of file
diff --git a/exercise-13/index.html b/exercise-13/index.html
new file mode 100644
index 0000000..b90630f
--- /dev/null
+++ b/exercise-13/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+        
+        <!-- Latest compiled and minified CSS -->
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+        
+        <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
+        
+        <script type="text/javascript">
+            /* global $ */
+            
+            var czechWords = [ "dům", "auto", "slovo", "škola", "den", "strom", "sopka"];
+            var englishWords = [ "house", "car", "word", "school", "day", "tree", "vulcan"];
+            var primaryWordIndex = 0;
+            var secondaryWord = "";
+            
+            function buttonClickHandler(event) {
+                var message;
+                if (event.target.textContent == secondaryWord) {
+                    message = "Congratulation! Correct answer.";
+                    $("#statusIcon").addClass("glyphicon-ok").removeClass("glyphicon-remove");
+                } else {
+                    message = "Incorrect answer. Try again.";
+                    $("#statusIcon").addClass("glyphicon-remove").removeClass("glyphicon-ok");
+                }
+                $("#status").text(message);
+            }
+
+            function documentReady() {
+                $(".btn").click(buttonClickHandler);
+                primaryWordIndex = Math.floor(Math.random() * englishWords.length);
+                $("#primaryWord").text(englishWords[primaryWordIndex]);
+                secondaryWord = czechWords[primaryWordIndex];
+            }
+        
+            $( document ).ready(documentReady);
+        </script>
+        
+    </head>
+    <body>
+        <h1>Word catcher</h1>
+        <div id="primaryWord">word</div>
+        <div>
+            <button type="button" class="btn btn-default">dům</button>
+            <button type="button" class="btn btn-default">auto</button>
+            <button type="button" class="btn btn-default">slovo</button>
+            <button type="button" class="btn btn-default">škola</button>
+        </div> 
+        <div>
+            <span id="statusIcon" class="glyphicon" ></span>
+            <span id="status">...select word...</span>
+        </div>
+    </body>
+</html>
\ No newline at end of file
diff --git a/exercise-14/index.html b/exercise-14/index.html
new file mode 100644
index 0000000..2a4d28f
--- /dev/null
+++ b/exercise-14/index.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+        
+        <!-- Latest compiled and minified CSS -->
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+        
+        <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
+        
+        <script type="text/javascript">
+            /* global $ */
+            
+            var czechWords = [ "dům", "auto", "slovo", "škola", "den", "strom", "sopka"];
+            var englishWords = [ "house", "car", "word", "school", "day", "tree", "vulcan"];
+            var primaryWordIndex = 0;
+            var secondaryWord = "";
+            
+            function buttonClickHandler(event) {
+                var message;
+                if (event.target.textContent == secondaryWord) {
+                    message = "Congratulation! Correct answer.";
+                    $("#statusIcon").addClass("glyphicon-ok").removeClass("glyphicon-remove");
+                } else {
+                    message = "Incorrect answer. Try again.";
+                    $("#statusIcon").addClass("glyphicon-remove").removeClass("glyphicon-ok");
+                }
+                $("#status").text(message);
+            }
+
+            function generateWord() {
+                primaryWordIndex = Math.floor(Math.random() * englishWords.length);
+                $("#primaryWord").text(englishWords[primaryWordIndex]);
+                secondaryWord = czechWords[primaryWordIndex];
+                
+                var wordIndex;
+                var index;
+                for (index = 0; index < 4; index++) {
+                    wordIndex = Math.floor(Math.random() * englishWords.length);
+                    $("#button" + index).text(czechWords[wordIndex]);
+                }
+                index = Math.floor(Math.random() * 4);
+                $("#button" + index).text(secondaryWord);
+            }
+
+            function documentReady() {
+                $(".btn").click(buttonClickHandler);
+                generateWord();
+            }
+        
+            $( document ).ready(documentReady);
+        </script>
+        
+    </head>
+    <body>
+        <h1>Word catcher</h1>
+        <div id="primaryWord">word</div>
+        <div>
+            <button id="button0" type="button" class="btn btn-default">dům</button>
+            <button id="button1" type="button" class="btn btn-default">auto</button>
+            <button id="button2" type="button" class="btn btn-default">slovo</button>
+            <button id="button3" type="button" class="btn btn-default">škola</button>
+        </div> 
+        <div>
+            <span id="statusIcon" class="glyphicon" ></span>
+            <span id="status">...select word...</span>
+        </div>
+    </body>
+</html>
\ No newline at end of file
diff --git a/exercise-15/index.html b/exercise-15/index.html
new file mode 100644
index 0000000..a80fa2c
--- /dev/null
+++ b/exercise-15/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+        
+        <!-- Latest compiled and minified CSS -->
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+        
+        <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
+        
+        <script type="text/javascript">
+            /* global $ */
+            
+            var czechWords = [ "dům", "auto", "slovo", "škola", "den", "strom", "sopka"];
+            var englishWords = [ "house", "car", "word", "school", "day", "tree", "vulcan"];
+            var primaryWordIndex = 0;
+            var secondaryWord = "";
+            
+            function buttonClickHandler(event) {
+                var message;
+                if (event.target.textContent == secondaryWord) {
+                    message = "Congratulation! Correct answer.";
+                    $("#statusIcon").addClass("glyphicon-ok").removeClass("glyphicon-remove");
+                    generateWord();
+                } else {
+                    message = "Incorrect answer. Try again.";
+                    $("#statusIcon").addClass("glyphicon-remove").removeClass("glyphicon-ok");
+                }
+                $("#status").text(message);
+            }
+
+            function generateWord() {
+                primaryWordIndex = Math.floor(Math.random() * englishWords.length);
+                $("#primaryWord").text(englishWords[primaryWordIndex]);
+                secondaryWord = czechWords[primaryWordIndex];
+                
+                var wordIndex;
+                var index;
+                for (index = 0; index < 4; index++) {
+                    wordIndex = Math.floor(Math.random() * englishWords.length);
+                    $("#button" + index).text(czechWords[wordIndex]);
+                }
+                index = Math.floor(Math.random() * 4);
+                $("#button" + index).text(secondaryWord);
+            }
+
+            function documentReady() {
+                $(".btn").click(buttonClickHandler);
+                generateWord();
+            }
+        
+            $( document ).ready(documentReady);
+        </script>
+        
+    </head>
+    <body>
+        <h1>Word catcher</h1>
+        <div id="primaryWord">word</div>
+        <div>
+            <button id="button0" type="button" class="btn btn-default">dům</button>
+            <button id="button1" type="button" class="btn btn-default">auto</button>
+            <button id="button2" type="button" class="btn btn-default">slovo</button>
+            <button id="button3" type="button" class="btn btn-default">škola</button>
+        </div> 
+        <div>
+            <span id="statusIcon" class="glyphicon" ></span>
+            <span id="status">...select word...</span>
+        </div>
+    </body>
+</html>
\ No newline at end of file
diff --git a/exercise-16/index.html b/exercise-16/index.html
new file mode 100644
index 0000000..e386ea2
--- /dev/null
+++ b/exercise-16/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+        
+        <!-- Latest compiled and minified CSS -->
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+        
+        <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
+        
+        <script type="text/javascript">
+            /* global $ */
+            
+            var czechWords = [ "dům", "auto", "slovo", "škola", "den", "strom", "sopka"];
+            var englishWords = [ "house", "car", "word", "school", "day", "tree", "vulcan"];
+            var primaryWordIndex = 0;
+            var secondaryWord = "";
+            
+            function buttonClickHandler(event) {
+                var message;
+                if (event.target.textContent == secondaryWord) {
+                    message = "Congratulation! Correct answer.";
+                    $("#statusIcon").addClass("glyphicon-ok").removeClass("glyphicon-remove");
+                    setTimeout(generateWord, 3000);
+                } else {
+                    message = "Incorrect answer. Try again.";
+                    $("#statusIcon").addClass("glyphicon-remove").removeClass("glyphicon-ok");
+                }
+                $("#status").text(message);
+            }
+
+            function generateWord() {
+                primaryWordIndex = Math.floor(Math.random() * englishWords.length);
+                $("#primaryWord").text(englishWords[primaryWordIndex]);
+                secondaryWord = czechWords[primaryWordIndex];
+                
+                var wordIndex;
+                var index;
+                for (index = 0; index < 4; index++) {
+                    wordIndex = Math.floor(Math.random() * englishWords.length);
+                    $("#button" + index).text(czechWords[wordIndex]);
+                }
+                index = Math.floor(Math.random() * 4);
+                $("#button" + index).text(secondaryWord);
+            }
+
+            function documentReady() {
+                $(".btn").click(buttonClickHandler);
+                generateWord();
+            }
+        
+            $( document ).ready(documentReady);
+        </script>
+        
+    </head>
+    <body>
+        <h1>Word catcher</h1>
+        <div id="primaryWord">word</div>
+        <div>
+            <button id="button0" type="button" class="btn btn-default">dům</button>
+            <button id="button1" type="button" class="btn btn-default">auto</button>
+            <button id="button2" type="button" class="btn btn-default">slovo</button>
+            <button id="button3" type="button" class="btn btn-default">škola</button>
+        </div> 
+        <div>
+            <span id="statusIcon" class="glyphicon" ></span>
+            <span id="status">...select word...</span>
+        </div>
+    </body>
+</html>
\ No newline at end of file
diff --git a/exercise-17/index.html b/exercise-17/index.html
new file mode 100644
index 0000000..bc6cd75
--- /dev/null
+++ b/exercise-17/index.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+        
+        <!-- Latest compiled and minified CSS -->
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+        
+        <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
+        
+        <script type="text/javascript">
+            /* global $ */
+            
+            var czechWords = [ "dům", "auto", "slovo", "škola", "den", "strom", "sopka"];
+            var englishWords = [ "house", "car", "word", "school", "day", "tree", "vulcan"];
+            var primaryWordIndex = 0;
+            var secondaryWord = "";
+            
+            function buttonClickHandler(event) {
+                var message;
+                if (event.target.textContent == secondaryWord) {
+                    message = "Congratulation! Correct answer.";
+                    $("#statusIcon").addClass("glyphicon-ok").removeClass("glyphicon-remove");
+                    $("#status").fadeOut(3000);
+                    setTimeout(generateWord, 3000);
+                } else {
+                    message = "Incorrect answer. Try again.";
+                    $("#statusIcon").addClass("glyphicon-remove").removeClass("glyphicon-ok");
+                }
+                $("#status").text(message);
+            }
+
+            function generateWord() {
+                primaryWordIndex = Math.floor(Math.random() * englishWords.length);
+                $("#primaryWord").text(englishWords[primaryWordIndex]);
+                secondaryWord = czechWords[primaryWordIndex];
+                
+                var wordIndex;
+                var index;
+                for (index = 0; index < 4; index++) {
+                    wordIndex = Math.floor(Math.random() * englishWords.length);
+                    $("#button" + index).text(czechWords[wordIndex]);
+                }
+                index = Math.floor(Math.random() * 4);
+                $("#button" + index).text(secondaryWord);
+            }
+
+            function documentReady() {
+                $(".btn").click(buttonClickHandler);
+                generateWord();
+            }
+        
+            $( document ).ready(documentReady);
+        </script>
+        
+    </head>
+    <body>
+        <h1>Word catcher</h1>
+        <div id="primaryWord">word</div>
+        <div>
+            <button id="button0" type="button" class="btn btn-default">dům</button>
+            <button id="button1" type="button" class="btn btn-default">auto</button>
+            <button id="button2" type="button" class="btn btn-default">slovo</button>
+            <button id="button3" type="button" class="btn btn-default">škola</button>
+        </div> 
+        <div>
+            <span id="statusIcon" class="glyphicon" ></span>
+            <span id="status">...select word...</span>
+        </div>
+    </body>
+</html>
\ No newline at end of file
diff --git a/exercise-18/index.html b/exercise-18/index.html
new file mode 100644
index 0000000..31a1075
--- /dev/null
+++ b/exercise-18/index.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+        
+        <!-- Latest compiled and minified CSS -->
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+        
+        <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
+        
+        <script type="text/javascript">
+            /* global $ */
+            
+            var czechWords = [ "dům", "auto", "slovo", "škola", "den", "strom", "sopka"];
+            var englishWords = [ "house", "car", "word", "school", "day", "tree", "vulcan"];
+            var primaryWordIndex = 0;
+            var secondaryWord = "";
+            
+            function buttonClickHandler(event) {
+                var message;
+                $("#status").show();
+                if (event.target.textContent == secondaryWord) {
+                    message = "Congratulation! Correct answer.";
+                    $("#statusIcon").addClass("glyphicon-ok").removeClass("glyphicon-remove");
+                     $("#status").fadeOut(3000);
+                    setTimeout(generateWord, 3000);
+                } else {
+                    message = "Incorrect answer. Try again.";
+                    $("#statusIcon").addClass("glyphicon-remove").removeClass("glyphicon-ok");
+                }
+                $("#status").text(message);
+            }
+
+            function generateWord() {
+                primaryWordIndex = Math.floor(Math.random() * englishWords.length);
+                $("#primaryWord").text(englishWords[primaryWordIndex]);
+                secondaryWord = czechWords[primaryWordIndex];
+                
+                var wordIndex;
+                var index;
+                for (index = 0; index < 4; index++) {
+                    wordIndex = Math.floor(Math.random() * englishWords.length);
+                    $("#button" + index).text(czechWords[wordIndex]);
+                }
+                index = Math.floor(Math.random() * 4);
+                $("#button" + index).text(secondaryWord);
+            }
+
+            function documentReady() {
+                $(".btn").click(buttonClickHandler);
+                generateWord();
+            }
+        
+            $( document ).ready(documentReady);
+        </script>
+        
+    </head>
+    <body>
+        <h1>Word catcher</h1>
+        <div id="primaryWord">word</div>
+        <div>
+            <button id="button0" type="button" class="btn btn-default">dům</button>
+            <button id="button1" type="button" class="btn btn-default">auto</button>
+            <button id="button2" type="button" class="btn btn-default">slovo</button>
+            <button id="button3" type="button" class="btn btn-default">škola</button>
+        </div> 
+        <div>
+            <span id="statusIcon" class="glyphicon" ></span>
+            <span id="status">...select word...</span>
+        </div>
+    </body>
+</html>
\ No newline at end of file
