diff --git a/ComSemApp/administrator/views.py b/ComSemApp/administrator/views.py
index 8fa6f9f8..4542ba1d 100644
--- a/ComSemApp/administrator/views.py
+++ b/ComSemApp/administrator/views.py
@@ -8,7 +8,9 @@
 from django.views.generic import ListView, CreateView, UpdateView, FormView, DeleteView
 from django.views import View
 from django.core.mail import send_mail
+from django.core.validators import validate_email
 from django.contrib import messages
+import re
 from django.contrib.auth.models import User
 
 from ComSemApp.models import *
@@ -17,7 +19,6 @@
 from ComSemApp.libs.mixins import RoleViewMixin
 
 
-
 class AdminViewMixin(RoleViewMixin):
 
     role_class = Admin
@@ -66,6 +67,104 @@ def _send_email(self, user, password):
             fail_silently=False,
         )
 
+    def db_create_user(self, **kwargs):
+        user = User.objects.create(**kwargs)
+        password = User.objects.make_random_password()
+        user.set_password(password)
+        user.save()
+        self._send_email(user, password)
+        return user
+
+    def db_create_student(self, **kwargs):
+        institution = self.insititution
+        user = self.db_create_user(**kwargs)
+        return Student.objects.create(user=user, institution=institution)
+
+    #handle CSV upload
+    def post(self, request, *args, **kwargs):
+        if (len(request.FILES) > 0): #check to make sure file was uploaded
+            csv_file = request.FILES['file']
+            file_data = csv_file.read().decode("utf-8")	
+            lines = file_data.split("\n")
+            message_content = [""]
+            linecount = 0
+            rejectcount = 0
+            for line in lines:
+                if len(line): #make sure line isnt empty
+                    fields = line.split(",")
+                    okToCreate = True
+                    rejected = False
+                    linecount += 1
+                    if (fields[0] == "" or fields[0] == ""):
+                        #end of file
+                        break
+                    if (len(fields) < 4):
+                        message = "!!! Missing columns, please make sure you have columns as follows: firstname,lastname,email,username"
+                        message_content.append(message)
+                        rejected = True
+                        rejectcount += 1
+                        break
+                    if (fields[0].isalpha() == False or fields[1].isalpha() == False):
+                        message = (str(linecount) + " " + fields[0] + " " + fields[1] + "      " + fields[2] + "       " + fields[3] + "        Invalid First or Last Name \n")
+                        message_content.append(message)
+                        rejectcount += 1
+                        rejected = True
+                        okToCreate = False
+                    for user in Student.objects.filter(institution=self.institution):
+                        if(user.user.email== fields[2]):
+                            okToCreate = False
+                            if (rejected == False):     ##if rejected is false, we need to increment the number of rejects, if its already false, dont increment it but still log error
+                                rejectcount += 1
+                                rejected = True
+                            message = (str(linecount) + " " + fields[0] + " " + fields[1] + "      " + fields[2] + "       " + fields[3] + "        Duplicate Email Address  \n")
+                            message_content.append(message)
+                            
+                        if(user.user.username== fields[3]):
+                            okToCreate = False
+                            if (rejected == False):     ##if rejected is false, we need to increment the number of rejects, if its already false, dont increment it but still log error
+                                rejectcount += 1
+                                rejected = True
+                            message = (str(linecount) + " " + fields[0] + " " + fields[1] + "      " + fields[2] + "       " + fields[3] + "        Duplicate Username  \n")
+                            message_content.append(message)
+                        if(okToCreate == False):
+                            break
+                    
+                    # Check if a valid email address
+                    match = re.match('^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$', fields[2].lower())
+
+                    if (match == None):
+                        if(rejected == False):
+                            rejectcount += 1
+                            rejected = True
+                        okToCreate = False 
+                        message = (str(linecount) + " " + fields[0] + " " + fields[1] + "      " + fields[2] + "       " + fields[3] + "        Invalid Email Address  \n")
+                        message_content.append(message)
+
+                    # Check for valid username
+                    usernameCheck = re.match('^[\w.@+-]+$', fields[3])
+                    if (usernameCheck == None):
+                        if(rejected == False):
+                            rejectcount += 1
+                            rejected = True
+                        okToCreate = False 
+                        message = (str(linecount) + " " + fields[0] + " " + fields[1] + "      " + fields[2] + "       " + fields[3] + "        Invalid Username  \n")
+                        message_content.append(message)
+                        
+                    if (okToCreate == True):
+                        user = {
+                            "first_name": fields[0],
+                            "last_name": fields[1],
+                            "email": fields[2],
+                            "username": fields[3]
+                        }
+                        self.db_create_student(**user)
+                        print("student made")
+            message_content.insert(0, ("" +  str((linecount - rejectcount)) + "/" + str(linecount)+ " Accounts created sucessfully\n" + "The below users were not added, Their line numbers are listed to the left,\nLines with multiple errors will be listed multiple times \n \n"))
+            message_disp = "".join(message_content)
+            messages.add_message(request, messages.ERROR, message_disp)
+            request.FILES.pop('file', None) #delete the csv file from memory
+        return HttpResponseRedirect(self.success_url)
+
     @atomic
     def _create_student(self, **kwargs):
         user = User.objects.create_user(**kwargs)
@@ -134,11 +233,9 @@ def post(self, request):
             messages.add_message(request, messages.ERROR, message)
         return HttpResponseRedirect(self.success_url)
 
-
-    def get_queryset(self):
+    def get_queryset(self):        
         return Student.objects.filter(institution=self.institution)
 
-
 class CourseListView(AdminViewMixin, ListView):
     model = Course
     template_name = 'ComSemApp/admin/course_list.html'
diff --git a/ComSemApp/static/ComSemApp/DKNotus-Tour-master/DKNotusTour.png b/ComSemApp/static/ComSemApp/DKNotus-Tour-master/DKNotusTour.png
new file mode 100755
index 00000000..126344fe
Binary files /dev/null and b/ComSemApp/static/ComSemApp/DKNotus-Tour-master/DKNotusTour.png differ
diff --git a/ComSemApp/static/ComSemApp/DKNotus-Tour-master/LICENSE b/ComSemApp/static/ComSemApp/DKNotus-Tour-master/LICENSE
new file mode 100755
index 00000000..5b132a5e
--- /dev/null
+++ b/ComSemApp/static/ComSemApp/DKNotus-Tour-master/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 DK Notus IT Team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/ComSemApp/static/ComSemApp/DKNotus-Tour-master/README.md b/ComSemApp/static/ComSemApp/DKNotus-Tour-master/README.md
new file mode 100755
index 00000000..630e86e7
--- /dev/null
+++ b/ComSemApp/static/ComSemApp/DKNotus-Tour-master/README.md
@@ -0,0 +1,235 @@
+# DK Notus Tour
+
+#### This compact solution for guided tours has 27 languages support. It requires only two very common dependencies: **jQuery** and **Bootstrap**. Also has useful features like auto scroll and "spotlight". We hope you enjoy it.
+
+![DK Notus Tour](DKNotusTour.png)
+
+We tried to keep all data regarding usage as short as possible.
+## 1. Features
+
+Features that we considerble important:
+
+ - **small requirements** - only jQuery and Bootstrap;
+ - **simple usage** - one function for common usage - yes, it's that simple;
+ - **events** - for advanced programmers usage;
+ - **scroll** - and some more useful features;
+ - **multi elements selection** - you can point more then one element for one tour step;
+ - **translations** - 27 languages support.
+
+## 2. Simple use case
+
+Lets start with two step tour for elements below:
+
+First of all we need to include two common libraries jQuery and Bootstrap. You ca use some CDN for that.
+
+    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
+    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
+
+Then it's time tour library `dknotus-tour.js` or `dknotus-tour.min.js`.
+
+    <script src="dknotus-tour.js"></script>
+
+Finally we can define our own tour and run it with Tour.run(). Yes, it's that simple.
+
+```javascript
+  $(function(){
+    $('#simpleBtn').click(function(){
+      Tour.run([
+        {
+          element: $('#btn1'),
+          content: 'first btn'
+        },
+        {
+          element: $('#btn2'),
+          content: 'and the second one<br>description might be <strong>HTML</strong>'
+        },
+      ]);
+    });
+  });
+```
+
+## 3. Different tour positions
+```javascript
+  $(function(){
+    $('#positionsBtn').click(function(){
+      Tour.run([
+        {
+          element: $('#posBtn'),
+          content: 'by default tour is on the right'
+        },
+        {
+          element: $('#posBtn'),
+          content: 'but it can be on top',
+          position: 'top'
+        },
+        {
+          element: $('#posBtn'),
+          content: 'bottom',
+          position: 'bottom'
+        },
+        {
+          element: $('#posBtn'),
+          content: 'and finally on the left',
+          position: 'left'
+        }
+      ]);
+    });
+  });
+```
+
+## 4. Global and local parameters
+
+Tour may be run with two parameters: tour description (mandatory) and global options (optional) Tour.run(tourDescription, options). If for some tour hint some parameter is not set, then if it's possible it's taken from options.
+
+Possible parameters for hints descriptions and for global options:
+
+Parameter |	Default value | Description
+--------- | ------------- | -----------
+element | *none* | jQuery element (might be more then one), if it's not set then hint is skipped.
+content | *empty string* | It's for contents of particular hints.
+close | true | Defines if close button should be shown.
+language | en | Defines interface language. Available languages:
+|| en | English (default)
+|| pl | Polish
+|| be | Belarusian
+|| ca | Catalan
+|| cs | Czech
+|| da | Danish
+|| de | German
+|| el | Greek
+|| es | Spanish
+|| et | Estonian
+|| fi | Finnish
+|| fr | French
+|| hu | Hungarian
+|| it | Italian
+|| lt | Lithuanian
+|| lv | Latvian
+|| mk | Macedonian
+|| nl | Dutch
+|| no | Norwegian
+|| pt | Portuguese
+|| ru | Russian
+|| sk | Slovak
+|| sl | Slovenian
+|| sq | Albanian
+|| sv | Swedish
+|| tr | Turkish
+|| uk | Ukrainian
+padding | 5 | Extra space around tour exposed elements. (Has only sense when spotlight option is true).
+position | right | Determines where hint should be shown relatively to element it describes.
+||| Possible values: right, left, top and bottom.
+scroll | true | If true then scrolls window so selected element and hint would be as close as possible to the view center.
+spotlight | true | If true then covers everything except selected element and hint with shadow.
+forceCorrectionLeft | 0 | Useful if for some reason left offset needs to be modified.
+forceCorrectionTop | 0 | Useful if for some reason top offset needs to be modified.
+forceCorrectionWidth | 0 | Useful if for some reason width needs to be modified.
+forceCorrectionHeight | 0 | Useful if for some reason height needs to be modified.
+
+All above options can be used for both: single hint description and for global options. With global options previous example can be written like:
+
+```javascript
+  $(function(){
+    $('#positionsShorterBtn').click(function(){
+      var globalOptions = {
+        element: $('#posBtn')
+      };
+
+      var tourDescription = [
+        {
+          content: 'by default tour is on the right'
+        },
+        {
+          content: 'but it can be on top',
+          position: 'top'
+        },
+        {
+          content: 'bottom',
+          position: 'bottom'
+        },
+        {
+          content: 'and finally on the left',
+          position: 'left'
+        }
+      ];
+
+      Tour.run(tourDescription, globalOptions);
+    });
+  });
+```
+
+## 5. Events example
+
+There are four events that can be used by developers:
+
+ - **onstart()** - Triggered when new tour starts ( `Tour.run()` );
+ - **onfinish()** - Triggered when Finish button is clicked;
+ - **onclose()** - Triggered when Close button is pressed ( `Tour.close()` );
+ - **onstep( currentStep )** - Triggered on every step shown ( `Tour.next()` or `Tour.prev()` );
+ - **onresize()** - By default this one is set.
+
+```javascript
+  $(function(){
+    $('#eventsBtn').click(function(){
+      Tour.onstart = function(){
+        console.log('We started!');
+      };
+
+      Tour.onfinish = function(){
+        console.log('The End');
+      };
+
+      Tour.onclose = function(){
+        console.log('Tour interupted');
+      };
+
+      Tour.onstep = function(currentStep){
+        console.log('"That\'s one small step for a man ..."');
+        console.log(currentStep);
+      };
+
+      Tour.run([
+        {
+          element: $('#eventBtn1').add('#eventBtn3'),
+          content: 'You prefer photos?',
+          position: 'top'
+        },
+        {
+          element: $('#eventBtn3').add('#eventBtn4'),
+          content: 'or videos?',
+          onstep: function(currentStep) {
+            console.log('Events defined in step, overwrites global definition');
+          }
+        }
+      ]);
+    });
+  });
+```
+
+## 6. Tour interface
+
+#### Methods
+
+Method | Description
+------ | -----------
+**Tour.run( tourDescription, globlOptions )** | Function for running Tour.
+**Tour.next()** | Goes to next tour step.
+**Tour.prev()** | Goes to previous tour step.
+**Tour.close()** | Interrupts tour and closes it.
+**Tour.current()** | Returns current step description.
+
+#### Events
+
+By default all except `onresize` are set to null.
+
+Event | Description
+----- | -----------
+**Tour.onstart()** | Triggered when new tour starts ( Tour.run() ).
+**Tour.onfinish()** | Triggered when Finish button is clicked.
+**Tour.onclose()** | Triggered when Close button is pressed ( Tour.close() ).
+**Tour.onstep( currentEvent )** | Triggered on every step shown ( Tour.next() or Tour.prev() ).
+**Tour.onresize()** | By default this one is set.
+
+## 7. Contact
+
+Jan Doleczek <jan@doleczek.pl>
diff --git a/ComSemApp/static/ComSemApp/DKNotus-Tour-master/dknotus-tour.js b/ComSemApp/static/ComSemApp/DKNotus-Tour-master/dknotus-tour.js
new file mode 100755
index 00000000..d1d25fd5
--- /dev/null
+++ b/ComSemApp/static/ComSemApp/DKNotus-Tour-master/dknotus-tour.js
@@ -0,0 +1,391 @@
+/*!
+ * DK Notus Tour JavaScript Library v1.2
+ * https://github.com/DKNotusIT/DKNotus-Tour/
+ *
+ * Copyright DK Notus and other contributors
+ * Released under the MIT license
+ * https://github.com/DKNotusIT/DKNotus-Tour/blob/master/LICENSE
+ *
+ * Date: 2018-03-17
+ */
+
+var Tour = (function() {
+  var t = [],
+      o, cur
+      T = {
+        step: {
+          pl: "krok",
+          en: "step",
+          be: "крок",
+          ca: "pas",
+          cs: "krok",
+          da: "trin",
+          de: "Schritt",
+          el: "βήμα",
+          es: "paso",
+          et: "samm",
+          fi: "vaihe",
+          fr: "étape",
+          hu: "lépés",
+          it: "passo",
+          lt: "žingsnis",
+          lv: "solis",
+          mk: "чекор",
+          nl: "stap",
+          no: "trinn",
+          pt: "passo",
+          ru: "шаг",
+          sk: "krok",
+          sl: "korak",
+          sq: "hapi",
+          sv: "steg",
+          tr: "adım",
+          uk: "крок"
+        },
+        Next: {
+          pl: "Następny",
+          en: "Next",
+          be: "Далей",
+          ca: "Següent",
+          cs: "Další",
+          da: "Næste",
+          de: "Weiter",
+          el: "Την επόμενη",
+          es: "Siguiente",
+          et: "Järgmine",
+          fi: "Seuraava",
+          fr: "Prochaine",
+          hu: "Következő",
+          it: "Accanto",
+          lt: "Kitas",
+          lv: "Nākamā",
+          mk: "Следна",
+          nl: "Volgende",
+          no: "Neste",
+          pt: "Próximo",
+          ru: "Далее",
+          sk: "Ďalej",
+          sl: "Naprej",
+          sq: "Tjetër",
+          sv: "Nästa",
+          tr: "Gelecek",
+          uk: "Далі"
+        },
+        Previous: {
+          pl: "Poprzedni",
+          en: "Previous",
+          be: "Папярэдні",
+          ca: "Anteriors",
+          cs: "Předchozí",
+          da: "Tidligere",
+          de: "Vorherige",
+          el: "Προηγούμενο",
+          es: "Anterior",
+          et: "Eelmine",
+          fi: "Edellinen",
+          fr: "Précédente",
+          hu: "Előző",
+          it: "Precedente",
+          lt: "Ankstesnis",
+          lv: "Iepriekšējā",
+          mk: "Претходна",
+          nl: "Vorige",
+          no: "Tidligere",
+          pt: "Anterior",
+          ru: "Предыдущий",
+          sk: "Predchádzajúce",
+          sl: "Prejšnji",
+          sq: "E mëparshme",
+          sv: "Föregående",
+          tr: "Önceki",
+          uk: "Попередній"
+        },
+        Finish: {
+          pl: "Zakończ",
+          en: "Finish",
+          be: "Аздабленне",
+          ca: "Acabat",
+          cs: "Dokončit",
+          da: "Finish",
+          de: "Finish",
+          el: "Τελειώνει",
+          es: "Acabado",
+          et: "Lõpeta",
+          fi: "Loppuun",
+          fr: "Finition",
+          hu: "Befejezés",
+          it: "Finitura",
+          lt: "Apdaila",
+          lv: "Apdare",
+          mk: "Заврши",
+          nl: "Afwerking",
+          no: "Ferdig",
+          pt: "Acabamento",
+          ru: "Отделка",
+          sk: "Povrch",
+          sl: "Zaključek",
+          sq: "Finish",
+          sv: "Avsluta",
+          tr: "Bitir",
+          uk: "Оздоблення"
+        }
+      };
+
+  function _t(s) {
+    return T[s][t[cur].language] || T[s]['en'];
+  }
+
+  function step(n) {
+    cur = n;
+    $('.tourStep, .tourBg').remove();
+
+    if (!t[n]) {
+      return;
+    }
+
+    $('body').append([
+      '<div class="tourStep popover" step="' + n + '">',
+        '<div class="arrow"></div>',
+        '<div class="panel-default">',
+          !t[n].close ? '' : '<button class="tourClose close pull-right">&times;&nbsp;</button>',
+          '<div class="panel-body">',
+            t[n].content,
+          '</div>',
+          '<div class="panel-footer">',
+            '<div class="pull-right">',
+              '<div class="tourPrev btn btn-default btn-sm">' + _t('Previous') + '</div> ',
+              '<div class="tourNext btn btn-primary btn-sm">' + _t('Next') + '</div>',
+            '</div>',
+            '<h6>' + _t('step') + ' ' + (n + 1) + ' / ' + t.length + '</h6>',
+          '</div>',
+        '</div>',
+      '</div>'
+    ].join(''));
+
+    var el = $('.tourStep')
+          .addClass(t[n].position)
+          .css({
+            minWidth: 250
+          }),
+        x = 0,
+        y = 0;
+
+    if (t[n].element && !!t[n].element.length) {
+      var x1 = 1e6,
+          y1 = 1e6,
+          x2 = 0,
+          y2 = 0;
+
+      t[n].element.each(function(k, v) {
+        var ofs = $(v).offset();
+        x1 = Math.min(x1, ofs.left + t[n].forceCorrectionLeft);
+        y1 = Math.min(y1, ofs.top + t[n].forceCorrectionTop);
+
+        x2 = Math.max(x2, ofs.left + t[n].forceCorrectionLeft + t[n].forceCorrectionWidth
+          + parseInt($(v).css('border-left-width'))
+          + parseInt($(v).css('padding-left'))
+          + $(v).width()
+          + parseInt($(v).css('padding-right'))
+          + parseInt($(v).css('border-right-width'))
+        );
+
+        y2 = Math.max(y2, ofs.top + t[n].forceCorrectionTop + t[n].forceCorrectionHeight
+          + parseInt($(v).css('border-top-width'))
+          + parseInt($(v).css('padding-top'))
+          + $(v).height()
+          + parseInt($(v).css('padding-bottom'))
+          + parseInt($(v).css('border-bottom-width'))
+        );
+      });
+
+      switch (t[n].position) {
+        case 'top':
+          y = y1 - el.height();
+          x = ((x1 + x2) >> 1) - (el.width() >> 1);
+          break;
+
+        case 'right':
+          y = ((y1 + y2) >> 1) - (el.height()>> 1);
+          x = x2;
+          break;
+
+        case 'left':
+          y = ((y1 + y2) >> 1) - (el.height()>> 1);
+          x = x1 - el.width();
+          break;
+
+        case 'bottom':
+          y = y2;
+          x = ((x1 + x2) >> 1) - (el.width() >> 1);
+          break;
+      };
+    };
+
+    el
+      .css({
+        position: 'absolute',
+        left: x,
+        top: y
+      })
+      .show();
+
+    if (t[n].spotlight) {
+      var p = t[n].padding;
+      $('body').append(Array(5).join('<div class="tourBg"></div>'));
+
+      var pos = [
+        {
+          bottom: 'auto',
+          height: y1 - p
+        },
+        {
+          top: y2 + p,
+          height: $(document).height() - y2 - p
+        },
+        {
+          right: 'auto',
+          bottom: 'auto',
+          top: y1 - p,
+          width: x1 - p,
+          height: 2 * p + y2 - y1
+        },
+        {
+          left: x2 + p,
+          bottom: 'auto',
+          top: y1 - p,
+          height: 2 * p + y2 - y1
+        }
+      ];
+
+      $('.tourBg')
+        .css({
+          position: 'absolute',
+          zIndex: 1000,
+          top: 0,
+          bottom: 0,
+          right: 0,
+          left: 0,
+          background: '#000',
+          opacity: 0.3
+        }).each(function(k, v){
+          $(v).css(pos[k]);
+        });
+    }
+
+    if (!!t[n].scroll) {
+      var my = ((Math.min(y, y1) + Math.max(y + el.height(), y2)) >> 1) - ($(window).height() >> 1),
+          mx = ((Math.min(x, x1) + Math.max(x + el.width(),  x2)) >> 1) - ($(window).width()  >> 1);
+
+      $('html, body').animate({
+        scrollTop:  Math.max(0, Math.min(y, y1, my)),
+        scrollLeft: Math.max(0, Math.min(x, x1, mx))
+      });
+    }
+
+    if (!n) {
+      $('.tourPrev').remove();
+    }
+
+    if (n > t.length - 2) {
+      $('.tourNext').text(_t('Finish'));
+    }
+
+    $('.tourStep')
+      .on('click', '.tourNext:not([disabled])', Tour.next)
+      .on('click', '.tourPrev:not([disabled])', Tour.prev)
+      .on('click', '.tourClose:not([disabled])', Tour.close);
+
+    (t[n].onstep || Tour.onstep || function(){})(t[n]);
+  }
+
+  $(window).on('resize', function() {
+    if (!!Tour.onresize) {
+      Tour.onresize();
+    }
+  });
+
+  return {
+    run: function(tour, options) {
+      try {
+        t = [];
+        cur = 0;
+
+        o = {
+          close: true,
+          content: '',
+          language: 'en',
+          padding: 5,
+          position: 'right',
+          scroll: true,
+          spotlight: true,
+          forceCorrectionLeft: 0,
+          forceCorrectionTop: 0,
+          forceCorrectionWidth: 0,
+          forceCorrectionHeight: 0,
+          onstep: null,
+        };
+
+        for (var k in options) {
+          o[k] = options[k];
+        }
+
+        $(tour).each(function(k, v) {
+          for (var kk in o) {
+            v[kk] = v[kk] || o[kk];
+          };
+
+          if (v.element && !!v.element.length) {
+            t.push(v);
+          }
+        });
+
+        step(cur);
+
+        if (!!Tour.onstart) {
+          Tour.onstart();
+        }
+      } catch(e) {}
+    },
+
+    next: function() {
+      step(cur + 1);
+
+      if (cur == t.length) {
+        if (!!Tour.onfinish) {
+          Tour.onfinish();
+        }
+      }
+    },
+
+    prev: function(){
+      step(cur - 1);
+    },
+
+    current: function(){
+      return cur;
+    },
+
+    close: function(){
+      step(-1);
+
+      if (!!Tour.onclose) {
+        Tour.onclose();
+      }
+    },
+
+    onstart: null,
+    onfinish: null,
+    onclose: null,
+    onstep: null,
+
+    onresize: function() {
+      var n = cur - 1;
+      step(-1);
+      cur = n;
+
+      setTimeout(function() {
+        Tour.next();
+      }, 20);
+    }
+  };
+})();
diff --git a/ComSemApp/static/ComSemApp/DKNotus-Tour-master/dknotus-tour.min.js b/ComSemApp/static/ComSemApp/DKNotus-Tour-master/dknotus-tour.min.js
new file mode 100755
index 00000000..38939c05
--- /dev/null
+++ b/ComSemApp/static/ComSemApp/DKNotus-Tour-master/dknotus-tour.min.js
@@ -0,0 +1,12 @@
+/*!
+ * DK Notus Tour JavaScript Library v1.2
+ * https://github.com/DKNotusIT/DKNotus-Tour/
+ *
+ * Copyright DK Notus and other contributors
+ * Released under the MIT license
+ * https://github.com/DKNotusIT/DKNotus-Tour/blob/master/LICENSE
+ *
+ * Date: 2018-03-17
+ */
+
+ var Tour=function(){function _t(s){return T[s][t[cur].language]||T[s].en}function step(n){if(cur=n,$(".tourStep, .tourBg").remove(),t[n]){$("body").append(['<div class="tourStep popover" step="'+n+'">','<div class="arrow"></div>','<div class="panel-default">',t[n].close?'<button class="tourClose close pull-right">&times;&nbsp;</button>':"",'<div class="panel-body">',t[n].content,"</div>",'<div class="panel-footer">','<div class="pull-right">','<div class="tourPrev btn btn-default btn-sm">'+_t("Previous")+"</div> ",'<div class="tourNext btn btn-primary btn-sm">'+_t("Next")+"</div>","</div>","<h6>"+_t("step")+" "+(n+1)+" / "+t.length+"</h6>","</div>","</div>","</div>"].join(""));var el=$(".tourStep").addClass(t[n].position).css({minWidth:250}),x=0,y=0;if(t[n].element&&t[n].element.length){var x1=1e6,y1=1e6,x2=0,y2=0;switch(t[n].element.each(function(k,v){var ofs=$(v).offset();x1=Math.min(x1,ofs.left+t[n].forceCorrectionLeft),y1=Math.min(y1,ofs.top+t[n].forceCorrectionTop),x2=Math.max(x2,ofs.left+t[n].forceCorrectionLeft+t[n].forceCorrectionWidth+parseInt($(v).css("border-left-width"))+parseInt($(v).css("padding-left"))+$(v).width()+parseInt($(v).css("padding-right"))+parseInt($(v).css("border-right-width"))),y2=Math.max(y2,ofs.top+t[n].forceCorrectionTop+t[n].forceCorrectionHeight+parseInt($(v).css("border-top-width"))+parseInt($(v).css("padding-top"))+$(v).height()+parseInt($(v).css("padding-bottom"))+parseInt($(v).css("border-bottom-width")))}),t[n].position){case"top":y=y1-el.height(),x=(x1+x2>>1)-(el.width()>>1);break;case"right":y=(y1+y2>>1)-(el.height()>>1),x=x2;break;case"left":y=(y1+y2>>1)-(el.height()>>1),x=x1-el.width();break;case"bottom":y=y2,x=(x1+x2>>1)-(el.width()>>1)}}if(el.css({position:"absolute",left:x,top:y}).show(),t[n].spotlight){var p=t[n].padding;$("body").append(Array(5).join('<div class="tourBg"></div>'));var pos=[{bottom:"auto",height:y1-p},{top:y2+p,height:$(document).height()-y2-p},{right:"auto",bottom:"auto",top:y1-p,width:x1-p,height:2*p+y2-y1},{left:x2+p,bottom:"auto",top:y1-p,height:2*p+y2-y1}];$(".tourBg").css({position:"absolute",zIndex:1e3,top:0,bottom:0,right:0,left:0,background:"#000",opacity:.3}).each(function(k,v){$(v).css(pos[k])})}if(t[n].scroll){var my=(Math.min(y,y1)+Math.max(y+el.height(),y2)>>1)-($(window).height()>>1),mx=(Math.min(x,x1)+Math.max(x+el.width(),x2)>>1)-($(window).width()>>1);$("html, body").animate({scrollTop:Math.max(0,Math.min(y,y1,my)),scrollLeft:Math.max(0,Math.min(x,x1,mx))})}n||$(".tourPrev").remove(),n>t.length-2&&$(".tourNext").text(_t("Finish")),$(".tourStep").on("click",".tourNext:not([disabled])",Tour.next).on("click",".tourPrev:not([disabled])",Tour.prev).on("click",".tourClose:not([disabled])",Tour.close),(t[n].onstep||Tour.onstep||function(){})(t[n])}}var o,cur,t=[];return T={step:{pl:"krok",en:"step",be:"крок",ca:"pas",cs:"krok",da:"trin",de:"Schritt",el:"βήμα",es:"paso",et:"samm",fi:"vaihe",fr:"étape",hu:"lépés",it:"passo",lt:"žingsnis",lv:"solis",mk:"чекор",nl:"stap",no:"trinn",pt:"passo",ru:"шаг",sk:"krok",sl:"korak",sq:"hapi",sv:"steg",tr:"adım",uk:"крок"},Next:{pl:"Następny",en:"Next",be:"Далей",ca:"Següent",cs:"Další",da:"Næste",de:"Weiter",el:"Την επόμενη",es:"Siguiente",et:"Järgmine",fi:"Seuraava",fr:"Prochaine",hu:"Következő",it:"Accanto",lt:"Kitas",lv:"Nākamā",mk:"Следна",nl:"Volgende",no:"Neste",pt:"Próximo",ru:"Далее",sk:"Ďalej",sl:"Naprej",sq:"Tjetër",sv:"Nästa",tr:"Gelecek",uk:"Далі"},Previous:{pl:"Poprzedni",en:"Previous",be:"Папярэдні",ca:"Anteriors",cs:"Předchozí",da:"Tidligere",de:"Vorherige",el:"Προηγούμενο",es:"Anterior",et:"Eelmine",fi:"Edellinen",fr:"Précédente",hu:"Előző",it:"Precedente",lt:"Ankstesnis",lv:"Iepriekšējā",mk:"Претходна",nl:"Vorige",no:"Tidligere",pt:"Anterior",ru:"Предыдущий",sk:"Predchádzajúce",sl:"Prejšnji",sq:"E mëparshme",sv:"Föregående",tr:"Önceki",uk:"Попередній"},Finish:{pl:"Zakończ",en:"Finish",be:"Аздабленне",ca:"Acabat",cs:"Dokončit",da:"Finish",de:"Finish",el:"Τελειώνει",es:"Acabado",et:"Lõpeta",fi:"Loppuun",fr:"Finition",hu:"Befejezés",it:"Finitura",lt:"Apdaila",lv:"Apdare",mk:"Заврши",nl:"Afwerking",no:"Ferdig",pt:"Acabamento",ru:"Отделка",sk:"Povrch",sl:"Zaključek",sq:"Finish",sv:"Avsluta",tr:"Bitir",uk:"Оздоблення"}},$(window).on("resize",function(){Tour.onresize&&Tour.onresize()}),{run:function(tour,options){try{t=[],cur=0,o={close:!0,content:"",language:"en",padding:5,position:"right",scroll:!0,spotlight:!0,forceCorrectionLeft:0,forceCorrectionTop:0,forceCorrectionWidth:0,forceCorrectionHeight:0,onstep:null};for(var k in options)o[k]=options[k];$(tour).each(function(k,v){for(var kk in o)v[kk]=v[kk]||o[kk];v.element&&v.element.length&&t.push(v)}),step(cur),Tour.onstart&&Tour.onstart()}catch(e){}},next:function(){step(cur+1),cur==t.length&&Tour.onfinish&&Tour.onfinish()},prev:function(){step(cur-1)},current:function(){return cur},close:function(){step(-1),Tour.onclose&&Tour.onclose()},onstart:null,onfinish:null,onclose:null,onstep:null,onresize:function(){var n=cur-1;step(-1),cur=n,setTimeout(function(){Tour.next()},20)}}}();
\ No newline at end of file
diff --git a/ComSemApp/static/ComSemApp/DKNotus-Tour-master/examples.html b/ComSemApp/static/ComSemApp/DKNotus-Tour-master/examples.html
new file mode 100755
index 00000000..52867654
--- /dev/null
+++ b/ComSemApp/static/ComSemApp/DKNotus-Tour-master/examples.html
@@ -0,0 +1,768 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>DK Notus Tour - Examples</title>
+  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
+  <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
+  <script src="dknotus-tour.js"></script>
+  <script type="text/javascript">
+    $(function(){
+      $('#languagesCount').html($('#languagesList dd').length);
+    });
+  </script>
+</head>
+<body>
+    <div id="start" class="container">
+      <div class="panel btn-group pull-right">
+        <a href="http://www.dknotus.pl/" target="dkn" class="btn btn-default">DK Notus</a>
+        <a href="https://github.com/DKNotusIT" target="gh" class="btn btn-default">@ GitHub</a>
+      </div>
+
+      <div class="page-header">
+        <h1>DK Notus Tour <small>Examples</small></h1>
+      </div>
+
+      <div class="row">
+        <div class="col-xs-9" style="height: 1200px">
+          <p class="lead">
+            This compact solution for guided tours has
+            <strong>27 languages support</strong>.
+            It  requires only two very common dependencies:
+            <strong>jQuery</strong> and <strong>Bootstrap</strong>.
+            Also has useful features like <strong>auto scroll</strong>
+            and <strong>"spotlight"</strong>.
+            We hope you enjoy it.
+          </p>
+
+          <div>
+            <img src="DKNotusTour.png" alt="DK Notus Tour">
+          </div>
+
+          <p>
+            We tried to keep all data regarding usage as short as possible.
+          </p>
+
+          <h2 id="features">1. Features</h2>
+
+          <p>
+            Features that we considerble important:
+          </p>
+
+          <dl class="dl-horizontal">
+            <dt>small requirements</dt>
+            <dd>only <strong>jQuery</strong> and <strong>Bootstrap</strong>;</dd>
+
+            <dt>simple usage</dt>
+            <dd>one function for common usage - yes, it's that simple;</dd>
+
+            <dt>events</dt>
+            <dd>for advanced programmers usage;</dd>
+
+            <dt>scroll</dt>
+            <dd>and some more useful features;</dd>
+
+            <dt>multi elem. selection</dt>
+            <dd>you can point more then one element for one tour step;</dd>
+
+            <dt>translations</dt>
+            <dd><span id="languagesCount"></span> languages support.</dd>
+          </dl>
+
+          <h2 id="simple">2. Simple use case</h2>
+
+          <p>Lets start with two step tour for elements below:</p>
+
+          <div class="row navbar">
+            <div class="col-md-2">
+              <button id="btn1" class="btn btn-lg btn-primary">#btn1</button>
+            </div>
+            <div class="col-md-2">
+              <button id="btn2" class="btn btn-lg btn-success">#btn2</button>
+            </div>
+          </div>
+
+          <div class="navbar">
+            <button id="simpleBtn" class="btn btn-default">
+              <span class="glyphicon glyphicon-gift"></span>
+              Simple tour: click to run the example.
+            </button>
+          </div>
+
+          <p>
+            First of all we need to include two common libraries
+            <strong>jQuery</strong> and <strong>Bootstrap</strong>.
+            You ca use some CDN for that.
+          </p>
+
+          <div class="highlight">
+            <pre>  &lt;link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
+  &lt;script src="http://code.jquery.com/jquery-1.10.2.min.js"&gt;&lt;/script&gt;</pre>
+          </div>
+
+          <p>
+            Then it's time tour library <code>dknotus-tour.js</code>
+            or <code>dknotus-tour.min.js</code>.
+          </p>
+
+          <div class="highlight">
+            <pre>  &lt;script src="dknotus-tour.js"&gt;&lt;/script&gt;</pre>
+          </div>
+
+          <p>
+            Finally we can define our own tour and run it with
+            <code>Tour.run()</code>. Yes, it's that simple.
+          </p>
+
+          <script>
+            $(function(){
+              $('#simpleBtn').click(function(){
+                Tour.run([
+                  {
+                    element: $('#btn1'),
+                    content: 'first btn'
+                  },
+                  {
+                    element: $('#btn2'),
+                    content: 'and the second one<br>description might be <strong>HTML</strong>'
+                  },
+                ]);
+              });
+            });
+          </script>
+
+          <div class="highlight">
+            <pre>
+  $(function(){
+    $('#simpleBtn').click(function(){
+      Tour.run([
+        {
+          element: $('#btn1'),
+          content: 'first btn'
+        },
+        {
+          element: $('#btn2'),
+          content: 'and the second one&lt;br&gt;description might be &lt;strong&gt;HTML&lt;/strong&gt;'
+        },
+      ]);
+    });
+  });
+            </pre>
+          </div>
+
+          <h2 id="positions">3. Different tour positions</h2>
+
+          <div class="row navbar text-center">
+            <h2>
+              <div id="posBtn" class="label label-primary">Jump around</div>
+            </h2>
+          </div>
+
+          <div class="navbar">
+            <button id="positionsBtn" class="btn btn-default">
+              <span class="glyphicon glyphicon-gift"></span>
+              Different positions: click to run the example.
+            </button>
+          </div>
+
+          <script>
+            $(function(){
+              $('#positionsBtn').click(function(){
+                Tour.run([
+                  {
+                    element: $('#posBtn'),
+                    content: 'by default tour is on the right'
+                  },
+                  {
+                    element: $('#posBtn'),
+                    content: 'but it can be on top',
+                    position: 'top'
+                  },
+                  {
+                    element: $('#posBtn'),
+                    content: 'bottom',
+                    position: 'bottom'
+                  },
+                  {
+                    element: $('#posBtn'),
+                    content: 'and finally on the left',
+                    position: 'left'
+                  }
+                ]);
+              });
+            });
+          </script>
+
+          <div class="highlight">
+            <pre>
+  $(function(){
+    $('#positionsBtn').click(function(){
+      Tour.run([
+        {
+          element: $('#posBtn'),
+          content: 'by default tour is on the right'
+        },
+        {
+          element: $('#posBtn'),
+          content: 'but it can be on top',
+          position: 'top'
+        },
+        {
+          element: $('#posBtn'),
+          content: 'bottom',
+          position: 'bottom'
+        },
+        {
+          element: $('#posBtn'),
+          content: 'and finally on the left',
+          position: 'left'
+        }
+      ]);
+    });
+  });</pre>
+          </div>
+
+          <h2 id="parameters">4. Global and local parameters</h2>
+
+          <p>
+            Tour may be run with two parameters: tour description (mandatory)
+            and global options (optional) <code>Tour.run(tourDescription,
+            options)</code>. If for some tour hint some parameter is not set,
+            then if it's possible it's taken from options.
+          </p>
+
+          <h4>
+            Possible parameters for hints descriptions and for global options
+          </h4>
+
+          <table class="table table-striped">
+            <thead>
+              <tr>
+                <th>Parameter</th>
+                <th>Default&nbsp;value</th>
+                <th>Description</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>element</td>
+                <td><em>none</em></td>
+                <td>
+                  jQuery element (might be more then one),
+                  if it's not set then hint is skipped.
+                </td>
+              </tr>
+              <tr>
+                <td>content</td>
+                <td><em>empty string</em></td>
+                <td>It's for contents of particular hints.</td>
+              </tr>
+              <tr>
+                <td>close</td>
+                <td>true</td>
+                <td>Defines if close button should be shown.</td>
+              </tr>
+              <tr>
+                <td>language</td>
+                <td>en</td>
+                <td>
+                  Defines interface language. Available languages:
+                  <dl id="languagesList" class="dl-horizontal">
+                    <dt>en</dt>
+                    <dd>English (default)</dd>
+
+                    <dt>pl</dt>
+                    <dd>Polish</dd>
+
+                    <dt>be</dt>
+                    <dd>Belarusian</dd>
+
+                    <dt>ca</dt>
+                    <dd>Catalan</dd>
+
+                    <dt>cs</dt>
+                    <dd>Czech</dd>
+
+                    <dt>da</dt>
+                    <dd>Danish</dd>
+
+                    <dt>de</dt>
+                    <dd>German</dd>
+
+                    <dt>el</dt>
+                    <dd>Greek</dd>
+
+                    <dt>es</dt>
+                    <dd>Spanish</dd>
+
+                    <dt>et</dt>
+                    <dd>Estonian</dd>
+
+                    <dt>fi</dt>
+                    <dd>Finnish</dd>
+
+                    <dt>fr</dt>
+                    <dd>French</dd>
+
+                    <dt>hu</dt>
+                    <dd>Hungarian</dd>
+
+                    <dt>it</dt>
+                    <dd>Italian</dd>
+
+                    <dt>lt</dt>
+                    <dd>Lithuanian</dd>
+
+                    <dt>lv</dt>
+                    <dd>Latvian</dd>
+
+                    <dt>mk</dt>
+                    <dd>Macedonian</dd>
+
+                    <dt>nl</dt>
+                    <dd>Dutch</dd>
+
+                    <dt>no</dt>
+                    <dd>Norwegian</dd>
+
+                    <dt>pt</dt>
+                    <dd>Portuguese</dd>
+
+                    <dt>ru</dt>
+                    <dd>Russian</dd>
+
+                    <dt>sk</dt>
+                    <dd>Slovak</dd>
+
+                    <dt>sl</dt>
+                    <dd>Slovenian</dd>
+
+                    <dt>sq</dt>
+                    <dd>Albanian</dd>
+
+                    <dt>sv</dt>
+                    <dd>Swedish</dd>
+
+                    <dt>tr</dt>
+                    <dd>Turkish</dd>
+
+                    <dt>uk</dt>
+                    <dd>Ukrainian</dd>
+                  </dl>
+                </td>
+              </tr>
+              <tr>
+                <td>padding</td>
+                <td>5</td>
+                <td>
+                  Extra space around tour exposed elements.
+                  (Has only sense when spotlight option is true).
+                </td>
+              </tr>
+              <tr>
+                <td>position</td>
+                <td>right</td>
+                <td>
+                  Determines where hint should be shown relativly to element
+                  it describes.<br>
+                  Possible values: right, left, top and bottom.
+                </td>
+              </tr>
+              <tr>
+                <td>scroll</td>
+                <td>true</td>
+                <td>
+                  If true then scrolls window so selected element
+                  and hint would be as close as possible to the view center.
+                </td>
+              </tr>
+              <tr>
+                <td>spotlight</td>
+                <td>true</td>
+                <td>
+                  If true then covers everything except selected element
+                  and hint with shadow.
+                </td>
+              </tr>
+              <tr>
+                <td>forceCorrectionLeft</td>
+                <td>0</td>
+                <td>
+                  Useful if for some reason left offset needs to be modified.
+                </td>
+              </tr>
+              <tr>
+                <td>forceCorrectionTop</td>
+                <td>0</td>
+                <td>
+                  Useful if for some reason top offset needs to be modified.
+                </td>
+              </tr>
+              <tr>
+                <td>forceCorrectionWidth</td>
+                <td>0</td>
+                <td>
+                  Useful if for some reason width needs to be modified.
+                </td>
+              </tr>
+              <tr>
+                <td>forceCorrectionHeight</td>
+                <td>0</td>
+                <td>
+                  Useful if for some reason height needs to be modified.
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <p>
+            All above options can be used for both: single hint description
+            and for global options. With global options previous example
+            can be writen like:
+          </p>
+
+          <div class="highlight">
+            <pre>
+  $(function(){
+    $('#positionsShorterBtn').click(function(){
+      var globalOptions = {
+        element: $('#posBtn')
+      };
+
+      var tourDescription = [
+        {
+          content: 'by default tour is on the right'
+        },
+        {
+          content: 'but it can be on top',
+          position: 'top'
+        },
+        {
+          content: 'bottom',
+          position: 'bottom'
+        },
+        {
+          content: 'and finally on the left',
+          position: 'left'
+        }
+      ];
+
+      Tour.run(tourDescription, globalOptions);
+    });
+  });</pre>
+          </div>
+
+          <script type="text/javascript">
+            $(function(){
+              $('#positionsShorterBtn').click(function(){
+                var globalOptions = {
+                  element: $('#posBtn')
+                };
+
+                var tourDescription = [
+                  {
+                    content: 'by default tour is on the right'
+                  },
+                  {
+                    content: 'but it can be on top',
+                    position: 'top'
+                  },
+                  {
+                    content: 'bottom',
+                    position: 'bottom'
+                  },
+                  {
+                    content: 'and finally on the left',
+                    position: 'left'
+                  }
+                ];
+
+                Tour.run(tourDescription, globalOptions);
+              });
+            });
+          </script>
+
+          <div class="navbar">
+            <button id="positionsShorterBtn" class="btn btn-default">
+              <span class="glyphicon glyphicon-gift"></span>
+              Different positions but shorter: click to run the example.
+            </button>
+          </div>
+
+          <h2 id="events">5. Events example</h2>
+
+          <p>
+            There are four events that can be used by developers:
+          </p>
+
+          <dl class="dl-horizontal">
+            <dt>onstart()</dt>
+            <dd>Triggered when new tour starts ( <code>Tour.run()</code> ).</dd>
+
+            <dt>onfinish()</dt>
+            <dd>Triggered when Finish button is clicked.</dd>
+
+            <dt>onclose()</dt>
+            <dd>
+              Triggered when Close button is pressed
+              ( <code>Tour.close()</code> ).
+            </dd>
+
+            <dt>onstep( currentStep )</dt>
+            <dd>
+              Triggered on every step shown
+              ( <code>Tour.next()</code> or <code>Tour.prev()</code> ).
+            </dd>
+
+            <dt>onresize</dt>
+            <dd>By default this one is set.</dd>
+          </dl>
+
+          <div class="container">
+            <div class="row">
+              <div class="col-xs-6">
+                <button class="btn btn-lg btn-success pull-right" id="eventBtn1">
+                  <span class="glyphicon glyphicon-camera"></span>
+                </button>
+              </div>
+              <div class="col-xs-6">
+                <button class="btn btn-lg btn-success" id="eventBtn2">
+                  <span class="glyphicon glyphicon-plus-sign"></span>
+                </button>
+              </div>
+            </div>
+          </div>
+          <div class="container media">
+            <div class="row">
+              <div class="col-xs-6">
+                <button class="btn btn-lg btn-success pull-right" id="eventBtn3">
+                  <span class="glyphicon glyphicon-picture"></span>
+                </button>
+              </div>
+              <div class="col-xs-6">
+                <button class="btn btn-lg btn-success" id="eventBtn4">
+                  <span class="glyphicon glyphicon-facetime-video"></span>
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <script type="text/javascript">
+            $(function(){
+              $('#eventsBtn').click(function(){
+                Tour.onstart = function(){
+                  console.log('We started!');
+                };
+
+                Tour.onfinish = function(){
+                  console.log('The End');
+                };
+
+                Tour.onclose = function(){
+                  console.log('Tour interupted');
+                };
+
+                Tour.onstep = function(currentStep){
+                  console.log('"That\'s one small step for a man ..."');
+                  console.log(currentStep);
+                };
+
+                Tour.run([
+                  {
+                    element: $('#eventBtn1').add('#eventBtn3'),
+                    content: 'You prefer photos?',
+                    position: 'top'
+                  },
+                  {
+                    element: $('#eventBtn3').add('#eventBtn4'),
+                    content: 'or videos?',
+                    onstep: function(currentStep) {
+                      console.log('Events defined in step, overwrites global definition');
+                    }
+                  }
+                ]);
+              });
+            });
+          </script>
+
+          <div class="navbar">
+            <button id="eventsBtn" class="btn btn-default">
+              <span class="glyphicon glyphicon-gift"></span>
+              Events example: click to run the example.
+            </button>
+          </div>
+
+          <div class="highlight">
+            <pre>
+  $(function(){
+    $('#eventsBtn').click(function(){
+      Tour.onstart = function(){
+        console.log('We started!');
+      };
+
+      Tour.onfinish = function(){
+        console.log('The End');
+      };
+
+      Tour.onclose = function(){
+        console.log('Tour interupted');
+      };
+
+      Tour.onstep = function(currentStep){
+        console.log('"That\'s one small step for a man ..."');
+        console.log(currentStep);
+      };
+
+      Tour.run([
+        {
+          element: $('#eventBtn1').add('#eventBtn3'),
+          content: 'You prefer photos?',
+          position: 'top'
+        },
+        {
+          element: $('#eventBtn3').add('#eventBtn4'),
+          content: 'or videos?',
+          onstep: function(currentStep) {
+            console.log('Events defined in step, overwrites global definition');
+          }
+        }
+      ]);
+    });
+  });</pre>
+          </div>
+
+          <h2 id="interface">6. Tour interface</h2>
+
+          <h3>Methods</h3>
+
+          <table>
+            <thead>
+              <tr>
+                <th>Method</th>
+                <th>Description</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>Tour.run( tourDescription, globlOptions )</td>
+                <td>Function for running Tour;</td>
+              </tr>
+              <tr>
+                <td>Tour.next()</td>
+                <td>Goes to next tour step;</td>
+              </tr>
+              <tr>
+                <td>Tour.prev()</td>
+                <td>Goes to previous tour step;</td>
+              </tr>
+              <tr>
+                <td>Tour.close()</td>
+                <td>Interrupts tour and closes it;</td>
+              </tr>
+              <tr>
+                <td>Tour.current()</td>
+                <td>Returns current step description.</td>
+              </tr>
+            </tbody>
+          </table>
+
+          <h3>Events</h3>
+
+          <p>
+            By default all except onresize are set to null.
+          </p>
+
+          <table>
+            <thead>
+              <tr>
+                <th>Event</th>
+                <th>Description</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>Tour.onstart()</td>
+                <td>
+                  Triggered when new tour starts ( <code>Tour.run()</code> );
+                </td>
+              </tr>
+              <tr>
+                <td>Tour.onfinish()</td>
+                <td>Triggered when Finish button is clicked;</td>
+              </tr>
+              <tr>
+                <td>Tour.onclose()</td>
+                <td>
+                  Triggered when Close button is pressed
+                  ( <code>Tour.close()</code> );
+                </td>
+              </tr>
+              <tr>
+                <td>Tour.onstep( currentStep )</td>
+                <td>
+                  Triggered on every step shown
+                  ( <code>Tour.next()</code> or <code>Tour.prev()</code> );
+                </td>
+              </tr>
+              <tr>
+                <td>Tour.onresize()</td>
+                <td>By default this one is set.</td>
+              </tr>
+            </tbody>
+          </table>
+
+          <h2 id="contact">7. Contact</h2>
+
+          <a href="mailto:jan@doleczek.pl?subject=DKNotusTour feedback" "email me">Jan Doleczek</a>
+
+          <hr/>
+          <small class="pull-right">
+            No animals were harmed during development.
+          </small>
+
+          <small>
+            DK Notus 2016
+          </small>
+
+        </div>
+
+        <div class="col-xs-3">
+          <div class="list-group" style="position: fixed">
+            <a href="#start" class="list-group-item active">
+              <strong>0. Start</strong>
+            </a>
+
+            <a href="#features" class="list-group-item">
+              1. Features
+            </a>
+
+            <a href="#simple" class="list-group-item">
+              2. Simple use case
+            </a>
+
+            <a href="#positions" class="list-group-item">
+              3. Different tour positions
+            </a>
+
+            <a href="#parameters" class="list-group-item">
+              4. Global and local parameters
+            </a>
+
+            <a href="#events" class="list-group-item">
+              5. Events example
+            </a>
+
+            <a href="#interface" class="list-group-item">
+              6. Tour interface
+            </a>
+
+            <a href="#contact" class="list-group-item">
+              7. Contact
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+</body>
+</html>
diff --git a/ComSemApp/student/urls.py b/ComSemApp/student/urls.py
index 1bfe9260..ad457135 100644
--- a/ComSemApp/student/urls.py
+++ b/ComSemApp/student/urls.py
@@ -4,6 +4,9 @@
 app_name = 'student'
 urlpatterns = [
     url(r'^$', views.CourseListView.as_view(), name='courses'),
+
+    # url(r'^course/googleTranscribe/$', views.googleTranscribe, name="googleTranscribe"),
+
     url(r'^course/(?P<course_id>[0-9]+)/$', views.CourseDetailView.as_view(), name='course'),
     url(r'^course/(?P<course_id>[0-9]+)/worksheet/(?P<worksheet_id>[0-9]+)/submission/list/$', views.SubmissionListView.as_view(), name='submission_list'),
     url(r'^course/(?P<course_id>[0-9]+)/worksheet/(?P<worksheet_id>[0-9]+)/submission/create/$', views.SubmissionCreateView.as_view(), name='create_submission'),
@@ -15,4 +18,4 @@
     url(r'^course/(?P<course_id>[0-9]+)/reviewsheet/$', views.ReviewsheetGetView.as_view(), name='create_reviewsheet'),
     url(r'^course/(?P<course_id>[0-9]+)/reviewsheet/$', views.ReviewsheetView.as_view(), name='reviewsheet'),
     url(r'^course/(?P<course_id>[0-9]+)/reviewsheet/save$', views.ReviewAttemptCreateView.as_view(), name='save_reviewsheet'),
-]
\ No newline at end of file
+]
diff --git a/ComSemApp/student/views.py b/ComSemApp/student/views.py
index 82d90b42..612f77b0 100644
--- a/ComSemApp/student/views.py
+++ b/ComSemApp/student/views.py
@@ -18,7 +18,6 @@
 from ComSemApp.models import *
 from ComSemApp.libs.mixins import RoleViewMixin, CourseViewMixin, WorksheetViewMixin, SubmissionViewMixin
 
-
 class StudentViewMixin(RoleViewMixin):
 
     role_class = Student
@@ -71,15 +70,48 @@ def get_object(self):
 
     def get_context_data(self, **kwargs):
         context = super(CourseDetailView, self).get_context_data(**kwargs)
+        worksheets = self.course.worksheets.filter(status=teacher_constants.WORKSHEET_STATUS_RELEASED)
+        submissions = StudentSubmission.objects.filter(student=self.student)
+        expressionList = []
+        context['complete'] = 0
+        context['incomplete'] = 0
+        context['ungraded']= 0
+        context['expressionCount']= 0
+
         worksheets = self.course.worksheets.filter(status=teacher_constants.WORKSHEET_STATUS_RELEASED).order_by('-date')
 
-        # TODO should this logic be in the worksheet model ?
+        # TODO should this logic be in the worksheet model?
         for worksheet in worksheets: 
+            expression_filters = Q(worksheet=worksheet)
+            if not worksheet.display_all_expressions:
+                expression_filters &= (Q(student=self.student) | Q(student=None) | Q(all_do=True) | Q(worksheet=worksheet))
+            expressions = Expression.objects.filter(expression_filters)
+
             complete_submission = worksheet.complete_submission(self.student) # vhl checks for complete submissions.
             complete_submission_status = 'complete' if complete_submission else "none"
-        
+
             last_submission = worksheet.last_submission(self.student)
             last_submission_status = last_submission.status if last_submission else "none"
+
+            # Loop through and count status of worksheets/expressions
+            if last_submission_status == "incomplete" or last_submission_status == "none":
+                context['incomplete'] += 1
+                for expression in expressions:
+                    if expression.worksheet == worksheet:
+                        expressionList.append(expression.expression)
+            if last_submission_status == "complete":
+                context['complete'] += 1
+                for expression in expressions:
+                    print('COMPLETE')
+                    print(expression.expression)
+                    if expression.worksheet == worksheet:
+                        context['expressionCount'] += 1
+            if last_submission_status == "ungraded":
+                context['ungraded'] += 1
+                for expression in expressions:
+                    if expression.worksheet == worksheet:
+                        expressionList.append(expression.expression)
+
             last_submission_id = last_submission.id if last_submission else 0
             status_colors = {
                 "complete": "success",
@@ -117,9 +149,10 @@ def get_context_data(self, **kwargs):
             worksheet.status_color = status_colors[last_submission_status]
             worksheet.button_text = button_texts[last_submission_status]
             worksheet.link_url = link_urls[last_submission_status]
-            
-            
+
+        context['expressions'] = expressionList
         context['worksheets'] = worksheets
+
         return context
 
 
diff --git a/ComSemApp/teacher/views.py b/ComSemApp/teacher/views.py
index 33fd91fb..5614d4a9 100644
--- a/ComSemApp/teacher/views.py
+++ b/ComSemApp/teacher/views.py
@@ -23,6 +23,7 @@
 
 import json, math, datetime, os, csv
 from ComSemApp.models import *
+from django.template.defaulttags import register
 
 
 class TeacherViewMixin(RoleViewMixin):
@@ -76,7 +77,53 @@ def get_context_data(self, **kwargs):
 class CourseDetailView(TeacherCourseViewMixin, DetailView):
     context_object_name = 'course'
     template_name = "ComSemApp/teacher/course.html"
+    
+    @register.filter('get_item')
+    def get_item(dictionary, key):
+        return dictionary.get(key)
 
+    def get_context_data(self, **kwargs):
+        data = super().get_context_data(**kwargs)
+
+        worksheets = Worksheet.objects.filter(course=self.course)
+        worksheetsdict = {}
+        ungradedcountdict = {}
+        attemptsdict = {}
+        for student in self.course.students.all(): 
+            worksheetcount = 0
+            ungradedcount = 0
+            attemptcount = 0
+            submissions = StudentSubmission.objects.filter(student=student)
+            for submission in submissions :
+                if submission.worksheet.course == self.course:
+                    if submission.status == 'ungraded':
+                        ungradedcount = ungradedcount + 1
+
+            for worksheet in worksheets:
+                if worksheet.last_submission(student):
+                    attemptcount = attemptcount + worksheet.last_submission(student).get_number()
+                worksheetcount = worksheetcount + 1
+
+            worksheetsdict[student.user.username] = worksheetcount
+            ungradedcountdict[student.user.username] = ungradedcount
+            attemptsdict[student.user.username] = attemptcount
+
+        submissions = StudentSubmission.objects.filter(worksheet__course=self.course)
+        ungraded = submissions.filter(status="ungraded").count()
+        complete = submissions.filter(status="complete").count()
+        incomplete = submissions.filter(status="incomplete").count()
+        submissions = StudentSubmission.objects.all()
+
+
+        data['classungraded'] = ungraded
+        data['classincomplete'] = incomplete
+        data['classcomplete'] = complete
+        data['ungradedSubmissions'] = len(self.course.worksheets.all())
+        data['worksheets'] = worksheetsdict
+        data['ungraded'] = ungradedcountdict
+        data['attempts'] = attemptsdict
+
+        return data
     def get_object(self):
         return self.course
 
diff --git a/ComSemApp/templates/ComSemApp/admin/student_list.html b/ComSemApp/templates/ComSemApp/admin/student_list.html
index 961f718d..a4884efb 100644
--- a/ComSemApp/templates/ComSemApp/admin/student_list.html
+++ b/ComSemApp/templates/ComSemApp/admin/student_list.html
@@ -8,13 +8,41 @@
 			<div class="col-md-6">
 				<h4 class="m-t-0 header-title"><b>All Students</b></h4>
 			</div>
-
+			
 			<div class="col-md-6">
 				<a class="btn btn-sm btn-outline-info pull-right" href="{% url 'administrator:create_student' %}">
 					<i class="m-t-0 header-title">Create Student
 					</i>
 				</a>
 			</div>
+
+			<form method="post" enctype="multipart/form-data">{% csrf_token %}
+				<label class="btn btn-sm btn-outline-info pull-left" >
+					<input type="file" name="file" accept=".csv"/>
+				</label>
+				<br>
+				<button class="btn btn-sm btn-outline-info pull-left" type="save">Upload</button>
+			</form>
+		</div>
+		<br>
+		<div>
+			<p>Uploader only allows CSV Files.
+			</p>
+			<p>
+				Please order students in the following way: firstname, lastname, email, username. 
+				Below is an example of how the first line would look, a comma indicates a new column. Names must contain letters only. 
+			</p>
+			<p>
+				John,Doe,johndoe@gmail.com,johnsusername
+			</p>
+		</div>
+
+		<div>
+		{% if messages %}
+				{% for message in messages %}
+				<pre style="color: #98a6ad">{{ message }}</pre>
+				{% endfor %}
+		{% endif %}
 		</div>
 		<br>
 		<div class="row">
diff --git a/ComSemApp/templates/ComSemApp/base.html b/ComSemApp/templates/ComSemApp/base.html
index e4e9ddb8..50e00914 100644
--- a/ComSemApp/templates/ComSemApp/base.html
+++ b/ComSemApp/templates/ComSemApp/base.html
@@ -34,6 +34,7 @@
 		<!-- pager plugin -->
 		<link rel="stylesheet" href="{% static 'ComSemApp/tablesorter/addons/pager/jquery.tablesorter.pager.css' %}" >
 		<script src="{% static "ComSemApp/tablesorter/addons/pager/jquery.tablesorter.pager.js" %}"></script>
+		<script type="text/javascript" src="{% static 'ComSemApp/DKNotus-Tour-master/dknotus-tour.js' %}"></script>
 
 
 		<script src="{% static "ComSemApp/Minton/js/modernizr.min.js" %}"></script>
diff --git a/ComSemApp/templates/ComSemApp/course_table.html b/ComSemApp/templates/ComSemApp/course_table.html
index 219e3a46..9fb87900 100644
--- a/ComSemApp/templates/ComSemApp/course_table.html
+++ b/ComSemApp/templates/ComSemApp/course_table.html
@@ -6,6 +6,9 @@ <h4 class="m-t-0 header-title">
 			<b>My Courses</b>
 		</h4>
 	</div>
+	<div class="col-6">
+		<button onclick="help()" type="save" class="btn btn-sm btn-outline-info float-right">Help</button>
+	</div>
 </div>
 
 <div class="row mt-2">
@@ -35,10 +38,9 @@ <h4 class="m-t-0 header-title">
 					<td>{{ course.session.start_date.year }}</td>
 					<td>{{ course.course_type.name }}</td>
 					<td>{{ course.section }}</td>
-
 					{% if teacher_view %}
 					<td>
-						<a href="{% url 'teacher:course' course.id %}" class="btn btn-sm btn-outline-primary">Course Page</a>
+						<a id="coursePageButton_Teacher" href="{% url 'teacher:course' course.id %}" class="btn btn-sm btn-outline-primary">Course Page</a>
 						<button type='button' class='btn btn-sm btn-outline-primary show-students'>Students</button>
 					</td>
 					{% else %}
@@ -46,7 +48,7 @@ <h4 class="m-t-0 header-title">
 						{{ course.teachers.all|join:", " }}
 					</td>
 					<td>
-						<a href="{% url 'student:course' course.id %}" class="btn btn-sm btn-outline-primary">Course Page</button>
+						<a id="coursePageButton_Student" href="{% url 'student:course' course.id %}" class="btn btn-sm btn-outline-primary">Course Page</button>
 					</td>
 					{% endif %}
 				</tr>
@@ -60,4 +62,22 @@ <h4 class="m-t-0 header-title">
 	{% else %}
 		<p>No available courses.</p>
 	{% endif %}
+
+
+	<script>
+	function help() {
+		Tour.run([
+			{
+				element: $('#coursePageButton_Student'),
+				content: 'Click HERE to go to your class.'
+			},
+			{
+				element: $('#coursePageButton_Teacher'),
+				content: 'Select the course you want to add a worksheet to.'
+			},
+			]);
+		}
+	</script>
+
+
 </div>
diff --git a/ComSemApp/templates/ComSemApp/messages.html b/ComSemApp/templates/ComSemApp/messages.html
index a6c53c3f..8e672764 100644
--- a/ComSemApp/templates/ComSemApp/messages.html
+++ b/ComSemApp/templates/ComSemApp/messages.html
@@ -19,7 +19,6 @@
 var cs_ajax_error = function(jqXHR, textStatus, errorThrown){
 	cs_notification('error', errorThrown)
 }
-
 function cs_notification(tag, message){
 	$.Notification.notify(tag, 'right bottom', message)
 }
@@ -28,4 +27,4 @@
 
 <!-- Notification js -->
 <script src="{% static "ComSemApp/Minton-plugins/notifyjs/dist/notify.min.js" %}"></script>
-<script src="{% static "ComSemApp/Minton-plugins/notifications/notify-metro.js" %}"></script>
+<script src="{% static "ComSemApp/Minton-plugins/notifications/notify-metro.js" %}"></script>
\ No newline at end of file
diff --git a/ComSemApp/templates/ComSemApp/student/attempt_form.html b/ComSemApp/templates/ComSemApp/student/attempt_form.html
index ad2365d3..76384704 100644
--- a/ComSemApp/templates/ComSemApp/student/attempt_form.html
+++ b/ComSemApp/templates/ComSemApp/student/attempt_form.html
@@ -1,8 +1,8 @@
 {% load static %}
 
 <!-- recordmp3 needed by ComSemRecording -->
-<script src="{% static "ComSemApp/js/opus-recorder/dist/recorder.min.js" %}"></script>
-<script src="{% static "ComSemApp/js/ComSemRecording-opus.js" %}?{% now "U" %}"></script>
+<script src="{% static 'ComSemApp/js/opus-recorder/dist/recorder.min.js' %}"></script>
+<script src="{% static 'ComSemApp/js/ComSemRecording-opus.js' %}?{% now 'U' %}"></script>
 
 <input hidden type="text" id="create_or_update_url">
 
@@ -11,6 +11,7 @@
 <div class="row">
     <div class="col-12">
         <label>Original Expression:</label>
+        <button onclick="helpAttemptForm()" type="save" class="btn btn-sm btn-outline-info float-right">Help</button>
         <p id="ExprToEdit">{{ expression.expression }}</p>
     </div>
 </div>
@@ -69,6 +70,11 @@
     </div>
 </div>
 
+<div class="row" id="SpeechTranscription" name="SpeechTranscription">
+    <button id="transcribeTest" style="margin:10px; margin-right:20px">Transcribe Test</button>
+    <div id="transcribeTestResult" name="transcribeTestResult" ><p></p></div>
+</div>
+<br>
 
 <!-- AUDIO RECORDING -->
 <div class="row" id="display_reformulation_audioRow" style="{% if not worksheet.display_reformulation_audio %}display: none{% endif %}">
@@ -95,6 +101,61 @@
 
 
 <script>
+
+    // source: https://tutorialzine.com/2017/08/converting-from-speech-to-text-with-javascript
+    var SpeechRecognition;
+    var recognition;
+    var noteContent = '';
+    var speechSupport = false;
+    try {
+        SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+        recognition = new SpeechRecognition();
+
+        speechSupport = true;
+    }
+    catch(e) {
+        console.error(e);
+        $("#SpeechTranscription").hide();
+        alert("No browser support for audio transcription. Please sign in with Google Chrome to use this feature.");
+    }
+
+    recognition.continuous = true;
+    recognition.onresult = function(event) {
+        var current = event.resultIndex;
+        var transcript = event.results[current][0].transcript;
+        var mobileRepeatBug = (current == 1 && transcript == event.results[0][0].transcript);
+        if(!mobileRepeatBug) {
+            noteContent += transcript;
+            if (noteContent === '') {
+                $('#transcribeTestResult').html("<p>Please try again.</p>");
+            }
+            else {
+                $('#CorrectedExpr').val(noteContent);
+                $('#transcribeTestResult').html("");
+                noteContent = '';
+            }
+        }
+    }
+
+    var recording = false;
+
+    $("#transcribeTest").click(function(e) {
+        if (speechSupport === true) {
+            if (recording === false) {
+                $(this).css('color', 'red');
+                recording = true;
+                recognition.start();
+            }
+            else {
+                recording = false;
+                recognition.stop();
+                $(this).css('color', 'black');
+            }
+        }
+    });
+
+    // end voice recognition
+
 $("#saveAttempt").click(function(e){
     e.preventDefault()
 
@@ -135,3 +196,26 @@
     audioReformulationBlob = null; // clears reformulation
 });
 </script>
+
+<script>
+function helpAttemptForm() {
+	Tour.run([
+	    {
+			element: $('#teacherReformulationAudio'),
+			content: 'Click HERE to listen to your teacher\'s correction.'
+		},
+		{
+			element: $('#CorrectedExpr'),
+			content: 'Write the correct version here.'
+		},
+		{
+			element: $('#display_reformulation_audioRow'),
+			content: 'Click the RED button to record your correct version.'
+		},
+		{
+			element: $('#saveAttempt'),
+			content: 'When you are finished, click HERE to save this correction and SEND it to your teacher.'
+		},
+		]);
+}
+</script>
\ No newline at end of file
diff --git a/ComSemApp/templates/ComSemApp/student/course.html b/ComSemApp/templates/ComSemApp/student/course.html
index 53263a47..21045feb 100644
--- a/ComSemApp/templates/ComSemApp/student/course.html
+++ b/ComSemApp/templates/ComSemApp/student/course.html
@@ -3,6 +3,94 @@
 {% block content %}
 
 <div class="row">
+	<div class="col-md-12 col-lg-12">
+		<div class="row">
+
+			<div class="col-md-12 col-lg-4">
+				<div class = "portlet">
+					<!--first -->
+					<h4 style="padding-top:20px; padding-left:20px;" class="header-title">Stats</h4>
+					<div class="row" >
+						<div class="col" style = "padding-bottom: 20px;">
+							<div class="row" style = "margin-top: 10px; padding-bottom: 20px;">
+								<div class ="col">
+									<div class = "row">
+										<h1 style = "margin-right: auto; margin-left: auto;">{{ expressionCount }}</h1>
+									</div>
+									<div class = "row">
+										<p style = "margin-right: auto; margin-left: auto;">Expressions Completed</p>
+									</div>
+								</div>
+							</div>
+							<div class="row"  style = "padding-bottom: 20px;">
+								<div class ="col">
+									<div class = "row">
+										<h1 style = "margin-right: auto; margin-left: auto;">{{ complete }}</h1>
+									</div>
+									<div class = "row">
+										<p style = "margin-right: auto; margin-left: auto;">Worksheets Completed</p>
+									</div>
+								</div>
+							</div>
+						</div>
+						<div class="col">
+							<div class="row" style = "margin-top: 10px; padding-bottom: 20px;">
+								<div class ="col">
+									<div class = "row">
+										<h1 style = "margin-right: auto; margin-left: auto;">{{ incomplete }}</h1>
+									</div>
+									<div class = "row">
+										<p style = "margin-right: auto; margin-left: auto;">Worksheets Incomplete</p>
+									</div>
+								</div>
+							</div>
+							<div class="row" >
+								<div class ="col">
+									<div class = "row">
+										<h1 style = "margin-right: auto; margin-left: auto;">{{ ungraded }} </h1>
+									</div>
+									<div class = "row">
+										<p style = "margin-right: auto; margin-left: auto;">Worksheets to Grade</p>
+									</div>										
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			
+			<div class="col-md-12 col-lg-4">
+					<div class ="portlet">
+						<h4 style="padding-top:20px; padding-left:20px;" class="header-title">Worksheet Status</h4>
+						<!--second -->
+						<div class="column" id="chart_div"></div>
+					</div>
+			</div>
+			
+			<div class="col-md-12 col-lg-4">
+					<div class ="portlet">
+						<div class="card-box">
+						<h4 class="header-title">Assigned Expressions</h4>
+						<!--third -->
+						<div style="height:300px;overflow:auto;">
+						<table class ="table">
+							<thead>
+
+							</thead>
+							<tbody>
+								{% for expression in expressions %}
+								<tr style = "background-color:lightblue">  
+									<td> {{ expression }}</td>
+								</tr>
+								{% endfor %}
+							</tbody>
+						</table>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
 
 	<div class="col-md-12 col-xl-3">
 		{% include 'ComSemApp/course_details.html' %}
@@ -48,11 +136,51 @@ <h4 class="header-title m-t-0 m-b-20">Worksheets</h4>
 				</tbody>
 				{% include 'ComSemApp/tablesorter_footer.html'%}
 			</table>
-			{% else %} <!-- message displays if no worksheets are available-->
+			{% else %}
 				<p>No worksheets available</p>
 			{% endif %}
 		</div>
 	</div>
 </div>
 
+
+<div> 
+		<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
+		<script type="text/javascript">
+	
+		  google.charts.load('current', {'packages':['corechart']});
+	
+		  // Set a callback to run when the Google Visualization API is loaded.
+		  google.charts.setOnLoadCallback(drawChart);
+	
+		  // Callback that creates and populates a data table,
+		  // instantiates the pie chart, passes in the data and
+		  // draws it.
+		  function drawChart() {
+	
+			// Create the data table.
+			var data = new google.visualization.DataTable();
+
+			var data = google.visualization.arrayToDataTable([
+			  ['Source', 'Clicks'],
+			  ['Completed', {{ complete }}],
+			  ['Incomplete', {{ incomplete }}],
+			  ['Ungraded', {{ ungraded }}]
+			]);
+	
+	
+			// Set chart options
+			var options = {'height':300};
+	
+			// Instantiate and draw our chart, passing in some options.
+			var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
+			chart.draw(data, options);
+	
+	
+			google.charts.load('current', {packages: ['corechart', 'line']});
+			google.charts.setOnLoadCallback(drawBackgroundColor);
+		  }
+		  </script>
+	</div>
+
 {% endblock %}
diff --git a/ComSemApp/templates/ComSemApp/student/create_submission.html b/ComSemApp/templates/ComSemApp/student/create_submission.html
index 2c9412ac..8b874abe 100644
--- a/ComSemApp/templates/ComSemApp/student/create_submission.html
+++ b/ComSemApp/templates/ComSemApp/student/create_submission.html
@@ -13,10 +13,10 @@ <h4 class="page-title">
                     Create Submission
                 </small>
             </h4>
-
+            <button onclick="helpSubmitButton()" type="save" class="btn btn-sm btn-outline-info float-right">Help</button>
             <form id="pageForm" method="POST">
                 {% csrf_token %}
-                <button class="btn btn-success float-right" type="submit">Submit</button>
+                <button id="submitButton" class="btn btn-success float-right" type="submit">Submit</button>
             </form>
             <div class="clearfix"></div>
         </div>
@@ -94,7 +94,6 @@ <h4 class="pull-right">
 
 
 
-
 <style>
 .expressionNumberCol{
     width: 25px;
@@ -120,5 +119,15 @@ <h4 class="pull-right">
 }
 </style>
 
+<script>
+function helpSubmitButton(){
+    Tour.run([
+        {
+            element: $('#submitButton'),
+            content: 'When you have made ALL your corrections, click HERE.'
+        },
+        ]);
+}
+</script>
 
 {% endblock %}
diff --git a/ComSemApp/templates/ComSemApp/student/expression_list.html b/ComSemApp/templates/ComSemApp/student/expression_list.html
index d4e7fec7..000d58d9 100644
--- a/ComSemApp/templates/ComSemApp/student/expression_list.html
+++ b/ComSemApp/templates/ComSemApp/student/expression_list.html
@@ -53,7 +53,8 @@
             audioReformulationBlob = null; // clears reformulation
         });
     })
-</script>
+    </script>
+
 {% else %}
     <h5 class='text center'>This worksheet has no expressions.</h5>
-{% endif %}
+{% endif %}
\ No newline at end of file
diff --git a/ComSemApp/templates/ComSemApp/teacher/course.html b/ComSemApp/templates/ComSemApp/teacher/course.html
index e1da0650..3f5e2b9b 100644
--- a/ComSemApp/templates/ComSemApp/teacher/course.html
+++ b/ComSemApp/templates/ComSemApp/teacher/course.html
@@ -5,6 +5,7 @@
 	<!-- Page-Title -->
 	<div class="row">
 		<div class="col-sm-12">
+			<button onclick="helpNewWorksheet()" type="save" class="btn btn-sm btn-outline-info float-right">Help</button>
 			<div class="page-title-box">
 				<h4 class="page-title">Course Information</h4>
 				<div class="clearfix"></div>
@@ -16,7 +17,23 @@ <h4 class="page-title">Course Information</h4>
 
 		<!-- course info -->
 		<div class="col-lg-5 col-md-5 col-sm-4">
-			{% include 'ComSemApp/course_details.html' %}
+			<div>
+				{% include 'ComSemApp/course_details.html' %}
+			</div>
+
+			<div class = "portlet">
+				<div class="portlet-heading portlet-default">
+
+						<h4 class="portlet-title m-t-0 header-title"><b>Submission Status</b></h4>
+				
+						<div class="portlet-widgets">
+	
+							<a data-toggle="collapse" data-parent="#accordion1" href="#coursePieChart"><i class="ion-minus-round"></i></a>
+						</div>
+						<div class="clearfix"></div>
+					</div>
+				<div class="column2" id="chart_div"></div>
+			</div>
 			<a type="button" class="btn btn-primary btn-lg btn-block" href="{% url 'teacher:download_course_csv' course_id=course.id %}">
 				Download All Sentences
 			</a>
@@ -41,13 +58,60 @@ <h4 class="portlet-title m-t-0 header-title"><b>Students</b></h4>
 				<div id="courseStudentsPortlet" class="panel-collapse collapse show">
 					<div class="portlet-body">
 						<table course_id="{{ course.id }}" class="courseStudentsTable table table-hover">
-							{% include 'ComSemApp/teacher/course_students.html' %}
+							{% include 'ComSemApp/teacher/course_students_detail.html' %}
 						</table>
 					</div>
 				</div>
 			</div>
 		</div>
+	</div>
+	<div class = "row">
+		<div class="col-lg-5 col-md-5 col-sm-4">
+			<div class = "portlet">
+				<div class="column2" id="chart_div"></div>
+			</div>
+		</div>
+	</div>
 
+	<div> 
+			<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
+			<script type="text/javascript">
+		
+			  google.charts.load('current', {'packages':['corechart']});
+		
+			  // Set a callback to run when the Google Visualization API is loaded.
+			  google.charts.setOnLoadCallback(drawChart);
+		
+			  // Callback that creates and populates a data table,
+			  // instantiates the pie chart, passes in the data and
+			  // draws it.
+			  function drawChart() {
+		
+				// Create the data table.
+				var data = new google.visualization.DataTable();
+				var incomplete = {{ classincomplete }};
+				var completed = {{ classcomplete }};
+				var ungraded = {{ classungraded }};
+				var data = google.visualization.arrayToDataTable([
+				  ['Source', 'Clicks'],
+				  ['Completed', completed],
+				  ['Incomplete', incomplete],
+				  ['Ungraded', ungraded]
+				]);
+		
+		
+				// Set chart options
+				var options = {'height':300};
+		
+				// Instantiate and draw our chart, passing in some options.
+				var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
+				chart.draw(data, options);
+		
+		
+				google.charts.load('current', {packages: ['corechart', 'line']});
+				google.charts.setOnLoadCallback(drawBackgroundColor);
+			  }
+			  </script>
 	</div>
 
 	<!-- worksheets -->
@@ -63,7 +127,7 @@ <h4 class="portlet-title m-t-0 header-title"><b>Students</b></h4>
 						<h4 class="m-t-0 header-title"><b>Worksheets</b></h4>
 					</div>
 					<div class="col-6">
-						<a href="{% url 'teacher:worksheet_create' course_id=course.id %}" class="btn btn-sm btn-outline-info float-right"><b>Create Worksheet</b><!--vhl create worksheet button--></a> 
+						<a  id= "worksheet_create" href="{% url 'teacher:worksheet_create' course_id=course.id %}" class="btn btn-sm btn-outline-info float-right"><b>Create Worksheet</b></a> 
 					</div>
 
 				</div>
@@ -148,4 +212,16 @@ <h4 class="m-t-0 header-title"><b>Worksheets</b></h4>
 
 	</script>
 
+
+<script>
+function helpNewWorksheet() {
+	Tour.run([
+		{
+			element: $('#worksheet_create'),
+			content: 'Click HERE to add a new worksheet.'
+		},
+		]);
+}
+</script>
+
 {% endblock %}
diff --git a/ComSemApp/templates/ComSemApp/teacher/course_students.html b/ComSemApp/templates/ComSemApp/teacher/course_students.html
index fb91437d..78be64c9 100644
--- a/ComSemApp/templates/ComSemApp/teacher/course_students.html
+++ b/ComSemApp/templates/ComSemApp/teacher/course_students.html
@@ -1,3 +1,4 @@
+
 {% if course.students.all %}
 <thead>
 	<tr>
diff --git a/ComSemApp/templates/ComSemApp/teacher/course_students_detail.html b/ComSemApp/templates/ComSemApp/teacher/course_students_detail.html
new file mode 100644
index 00000000..12d1fb8f
--- /dev/null
+++ b/ComSemApp/templates/ComSemApp/teacher/course_students_detail.html
@@ -0,0 +1,32 @@
+{% load static %}
+{% if course.students.all %}
+<thead>
+	<tr>
+		<th>Name</th>
+		<th>Worksheets Assigned</th>
+		<th>Ungraded Submissions</th>
+		<th>Number of Attempts</th>
+
+	</tr>
+</thead>
+
+<tbody>
+	{% for student in course.students.all %}
+	<tr>
+		<td>{{student}}</td>
+		<td> 			<!-- using username to get the calculated count for submissions for that student in this class section -->
+			{{ worksheets|get_item:student.user.username }}</td>
+		<td>
+			<!-- using username to get the calculated count for submissions for that student in this class section -->
+			{{ ungraded|get_item:student.user.username }}
+		</td>
+		<td>
+			{{ attempts|get_item:student.user.username }}
+		</td>
+		<td><a href="mailto:{{student.user.email}}">Email</a></td>
+	</tr>
+	{% endfor %}
+</tbody>
+{% else %}
+	<h4>No Enrolled Students</h4>
+{% endif %}
\ No newline at end of file
diff --git a/ComSemApp/templates/ComSemApp/teacher/edit_worksheet.html b/ComSemApp/templates/ComSemApp/teacher/edit_worksheet.html
index 21df3f12..1d7cb6da 100644
--- a/ComSemApp/templates/ComSemApp/teacher/edit_worksheet.html
+++ b/ComSemApp/templates/ComSemApp/teacher/edit_worksheet.html
@@ -4,8 +4,11 @@
 
 {% block content %}
 
+<button onclick="helpCreateWorksheet()" type="save" class="btn btn-sm btn-outline-info float-right">Help</button>
+
 <!-- page head -->
 <form method="POST" id="editWorksheetForm">
+
 	{% csrf_token %}
 
 	<!-- Page-Title -->
@@ -32,8 +35,8 @@ <h4 class="page-title">
 		<div class="col-12">
 
 			<div class="card-box">
-				<h4 class="m-t-0 header-title"><b>Worksheet Info</b></h4>
 
+				<h4 class="m-t-0 header-title"><b>Worksheet Info</b></h4>
 				<div class="row">
 
 					<div class="col-12 col-md-6">
@@ -44,7 +47,7 @@ <h4 class="m-t-0 header-title"><b>Worksheet Info</b></h4>
 
 					</div>
 
-					<div class="col-12 col-md-6">
+					<div id="allWorksheetFeatures" class="col-12 col-md-6">
 
 						<label for="display_original">My Students Will See</label>
 
@@ -73,7 +76,6 @@ <h4 class="m-t-0 header-title"><b>Worksheet Info</b></h4>
 						</div>
 
 						<div class="checkbox checkbox-primary">
-
 							<div class="radio radio-primary form-check-inline">
 								<input type="radio" value="true" name="display_all_expressions" {% if worksheet.display_all_expressions %}checked='checked'{% endif %} id="allExpressionsYes">
 								<label for="allExpressionsYes"> All Expressions </label>
@@ -81,9 +83,8 @@ <h4 class="m-t-0 header-title"><b>Worksheet Info</b></h4>
 
 							<div class="radio radio-primary form-check-inline">
 								<input type="radio" value="false" name="display_all_expressions" {% if not worksheet.display_all_expressions %}checked='checked'{% endif %} id="allExpressionsNo">
-								<label for="allExpressionsNo"> Expressions Assigned to Them and All Do Expressions</label>
+								<label for="allExpressionsNotopic"> Expressions Assigned to Them and All Do Expressions</label>
 							</div>
-
 						</div>
 
 						<script>
@@ -157,4 +158,28 @@ <h4 class="m-t-0 header-title"><b>Expression Editor</b></h4>
 
 <script src="{% static 'ComSemApp/js/edit_worksheet.js' %}" v="3"></script>
 
+<script>
+function helpCreateWorksheet() {
+	Tour.run([
+		{
+			element: $('#topic'),
+			content: 'Enter a worksheet topic.'
+		},
+		{
+			element: $('#allWorksheetFeatures'),
+			content: 'Choose the features you want to provide for this worksheet.'
+		},
+		{
+			element: $('#newExpressionButton'),
+			content: 'Click HERE to add an Expression (sentence) to the worksheet.'
+		},
+		{
+
+			element: $('#SaveWorksheet'),
+			content: 'When you are finished entering Expressions, be sure to SAVE the worksheet.'
+		},
+		]);
+}
+</script>
+
 {% endblock %}
diff --git a/ComSemApp/templates/ComSemApp/teacher/expression_form.html b/ComSemApp/templates/ComSemApp/teacher/expression_form.html
index 65f5ef3a..97fb52e0 100644
--- a/ComSemApp/templates/ComSemApp/teacher/expression_form.html
+++ b/ComSemApp/templates/ComSemApp/teacher/expression_form.html
@@ -1,11 +1,12 @@
 {% load static %}
 
 <!-- recordmp3 needed by ComSemRecording -->
-<script src="{% static "ComSemApp/js/opus-recorder/dist/recorder.min.js" %}"></script>
-<script src="{% static "ComSemApp/js/ComSemRecording-opus.js" %}?{% now "U" %}"></script>
+<script src="{% static 'ComSemApp/js/opus-recorder/dist/recorder.min.js' %}"></script>
+<script src="{% static 'ComSemApp/js/ComSemRecording-opus.js' %}?{% now 'U' %}"></script>
+
 
-<div class="control-group controls" id="ExpressionEditor" style="display: none">
 
+<div class="control-group controls" id="ExpressionEditor" style="display: none">
     <input hidden type="text" id="create_or_update_url">
 
     <div class="form-group row">
@@ -28,6 +29,7 @@ <h4 class="text-muted m-b-10 font-14">
                 <label for="all_do">
                     All Do
                 </label>
+                <button onclick="helpEditExpression()" type="save" class="btn btn-sm btn-outline-info float-right">Help</button>
             </div>
         </div>
         {% else %}
@@ -87,7 +89,13 @@ <h4 class="text-muted m-b-10 font-14">
             </div>
         </div>
     </div>
-    
+
+    <div class="row" id="SpeechTranscription" name="SpeechTranscription">
+        <button id="transcribeTest" style="margin:10px; margin-right:20px">Transcribe Test</button>
+        <div id="transcribeTestResult" name="transcribeTestResult" ><p></p></div>
+    </div>
+    <br>
+
     <div class="row" id="display_reformulation_audioRow">
         {% include 'ComSemApp/audio_recording.html' %}
     </div>
@@ -117,6 +125,18 @@ <h4 class="text-muted m-b-10 font-14">
 </div>
 
 <script>
+// source: https://tutorialzine.com/2017/08/converting-from-speech-to-text-with-javascript
+var SpeechRecognition;
+var recognition;
+var noteContent = '';
+var speechSupport = false;
+try {
+    SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+    recognition = new SpeechRecognition();
+    speechSupport = true;
+} catch(e) {
+    console.log(e)
+}
 
 function hide_select_student(){ // hides student selection
     var x = document.getElementById("select_student");
@@ -135,43 +155,122 @@ <h4 class="text-muted m-b-10 font-14">
         alert("Please enter an expression")
         return;
     }
-
-    // because of audio, we must send a formdata object
-    var worksheetFormData = new FormData();
-    student_id = $("#studentID").val()
-    if (student_id != "0"){
-        worksheetFormData.append( 'student', student_id );
+    catch(e) {
+        console.error(e);
+        $("#SpeechTranscription").hide();
+        alert("No browser support for audio transcription. Please sign in with Google Chrome to use this feature.");
     }
-    worksheetFormData.append('expression', $("#expression").val() );
-    worksheetFormData.append('all_do', $("#all_do").prop("checked") );
-    worksheetFormData.append('context_vocabulary', $("#contextVocabulary").val() );
-    worksheetFormData.append('reformulation_text', $("#reformulation").val() );
-    worksheetFormData.append('pronunciation', $("#pronunciation").val() );
-
-    var reformulation_audio = $("#recordingslist #audioElement").length > 0 ? true : false
-    if (reformulation_audio){
-        worksheetFormData.append('audio', audioReformulationBlob)
-    } else {
-        worksheetFormData.append('delete_audio', true)
+    recognition.continuous = true;
+    recognition.onresult = function(event) {
+        var current = event.resultIndex;
+        var transcript = event.results[current][0].transcript;
+        var mobileRepeatBug = (current == 1 && transcript == event.results[0][0].transcript);
+        if(!mobileRepeatBug) {
+            noteContent += transcript;
+            if (noteContent === '') {
+                $('#transcribeTestResult').html("<p>Please try again.</p>");
+            }
+            else {
+                $('#reformulation').val(noteContent);
+                $('#transcribeTestResult').html("");
+                noteContent = '';
+            }
+        }
     }
+    var recording = false;
+    $("#transcribeTest").click(function(e) {
+        if (speechSupport === true) {
+            if (recording === false) {
+                $(this).css('color', 'red');
+                recording = true;
+                recognition.start();
+            }
+            else {
+                recording = false;
+                recognition.stop();
+                $(this).css('color', 'black');
+            }
+        }
+    });
+    // end voice recognition
+    $("#saveExpression").click(function(e){
+        e.preventDefault()
+        if( $("#expression").val().trim() == "" ){
+            // must have a valid expression
+            alert("Please enter an expression")
+            return;
+        }
+        // because of audio, we must send a formdata object
+        var worksheetFormData = new FormData();
+        student_id = $("#studentID").val()
+        if (student_id != "0"){
+            worksheetFormData.append( 'student', student_id );
+        }
+        worksheetFormData.append('expression', $("#expression").val() );
+        worksheetFormData.append('all_do', $("#all_do").prop("checked") );
+        worksheetFormData.append('context_vocabulary', $("#contextVocabulary").val() );
+        worksheetFormData.append('reformulation_text', $("#reformulation").val() );
+        worksheetFormData.append('pronunciation', $("#pronunciation").val() );
+        var reformulation_audio = $("#recordingslist #audioElement").length > 0 ? true : false
+        if (reformulation_audio){
+            worksheetFormData.append('audio', audioReformulationBlob)
+        } else {
+            worksheetFormData.append('delete_audio', true)
+        }
+        inspectFormData(worksheetFormData)
+        $.ajax({
+            type: "POST",
+            url: $("#create_or_update_url").val(),
+            data: worksheetFormData,
+            processData: false,
+            contentType: false,
+            success: function(response){
+                cs_notification('success', "Expression Saved")
+                // update expressions table
+                drawExpressionsTable();
+            },
+            error: function(jqXHR, textStatus, errorThrown){
+                cs_ajax_error(jqXHR, textStatus, errorThrown)
+            },
+        });
+        // clear editor
+        $("#ExpressionEditor").slideUp();
+    });
+</script>
 
-    inspectFormData(worksheetFormData)
-
-    $.ajax({
-        type: "POST",
-        url: $("#create_or_update_url").val(),
-        data: worksheetFormData,
-        processData: false,
-        contentType: false,
-        success: function(response){
-            cs_notification('success', "Expression Saved")
-            // update expressions table
-            drawExpressionsTable();
+<script>
+function helpEditExpression(){
+    Tour.run([
+        {
+            element: $('#studentID'),
+            content: 'Choose a student to assign this sentence to or choose Anonymous if you don\'t want to assign names.'
         },
-        error: function(jqXHR, textStatus, errorThrown){
-            cs_ajax_error(jqXHR, textStatus, errorThrown)
+        {
+            element: $('#expression'),
+            content: 'Enter the Expression (what the student said) Here'
         },
-    });
+        {
+            element: $('#contextVocabulary'),
+            content: 'Enter Context\/Vocab Here'
+        },
+        {
+            element: $('#pronunciation'),
+            content: 'Enter Pronunciation Here'
+        },
+        {
+            element: $('#reformulation'),
+            content: 'Enter Reformulation Here'
+        },
+		{
+            element: $('#display_reformulation_audioRow'),
+            content: 'Click the RED button to record your reformulation. Click the GREEN button to stop recording.'
+        },
+        {
+            element: $('#saveExpression'),
+            content: 'Be sure to click here to SAVE your worksheet item.'
+        },
+	]);
+}
 
     // clear editor
     $("#ExpressionEditor").slideUp();
diff --git a/ComSemApp/templates/ComSemApp/teacher/expressions.html b/ComSemApp/templates/ComSemApp/teacher/expressions.html
index e1395306..1f94f12c 100644
--- a/ComSemApp/templates/ComSemApp/teacher/expressions.html
+++ b/ComSemApp/templates/ComSemApp/teacher/expressions.html
@@ -11,7 +11,9 @@
         </tr>
     </thead>
     <tbody name='expressionTable'>
+        <button onclick="helpManageExpression()" type="save" class="btn btn-sm btn-outline-info float-right">Help</button>
         {% for expression in expressions %}
+
         <tr expressionID='{{ expression.id }}'>
             <td>{{ forloop.counter }}</td>
             <td>
@@ -30,9 +32,10 @@
                 {{ expression.expression }}
             </td>
             <td>
-                <button class='btn btn-sm btn-outline-primary editExpression' url="{% url 'teacher:expression_update' course_id=course.id worksheet_id=worksheet.id expression_id=expression.id %}">
+                <button id="editExpressionButton" class='btn btn-sm btn-outline-primary editExpression' url="{% url 'teacher:expression_update' course_id=course.id worksheet_id=worksheet.id expression_id=expression.id %}">
                     <i class='fa fa-pencil-square-o'></i>
                 </button>
+                <button id="deleteExpressionButton" class='btn btn-sm btn-outline-danger deleteExpression' url="{% url 'teacher:expression_delete' course_id=course.id worksheet_id=worksheet.id expression_id=expression.id %}">
                 
                 {% if not worksheet.released %}
                 <button class='btn btn-sm btn-outline-danger deleteExpression' url="{% url 'teacher:expression_delete' course_id=course.id worksheet_id=worksheet.id expression_id=expression.id %}">
@@ -72,3 +75,18 @@
 {% else %}
 <p>No expressions have been created for this worksheet.</p>
 {% endif %}
+
+<script>
+function helpManageExpression() {
+	Tour.run([
+		{
+			element: $('#editExpressionButton'),
+			content: 'You can EDIT this item by clicking here.'
+		},
+		{
+			element: $('#deleteExpressionButton'),
+			content: 'You can DELETE this item by clicking here.'
+		},
+		]);
+}
+</script>
\ No newline at end of file
diff --git a/ComSemApp/templates/ComSemApp/teacher/worksheet_list.html b/ComSemApp/templates/ComSemApp/teacher/worksheet_list.html
index 2d8cc812..d9badf6c 100644
--- a/ComSemApp/templates/ComSemApp/teacher/worksheet_list.html
+++ b/ComSemApp/templates/ComSemApp/teacher/worksheet_list.html
@@ -45,4 +45,4 @@
 </table>
 {% else %}
     <p>No worksheets have been created yet. <a href="{% url 'teacher:worksheet_create' course_id=course.id %}">Click here</a> to create one.</p>
-{% endif %}
+{% endif %}
\ No newline at end of file
diff --git a/ComSemApp/templates/registration/login.html b/ComSemApp/templates/registration/login.html
index d7c17bd3..c4c9d4cf 100644
--- a/ComSemApp/templates/registration/login.html
+++ b/ComSemApp/templates/registration/login.html
@@ -60,14 +60,16 @@
 					<a href="{% url 'password_reset' %}" class="text-muted"><i class="fa fa-lock m-r-5"></i> Forgot your password?
 					</a>
 				</div>
-				<div class="col-sm-4 text-right">
-					<button class="btn btn-primary btn-custom w-md waves-effect waves-light" type="submit">Log In
+				<div id = "test" class="col-sm-4 text-right">
+					<button  class="btn btn-primary btn-custom w-md waves-effect waves-light" type="submit">Log In
 					</button>
 				</div>
 			</div>
 
 
 
+
+
 			<!-- <div class="col-sm-5 text-right">
 				<a href="pages-register.html" class="text-muted">Create an account</a>
 			</div> -->
diff --git a/CommunicationSeminar-7d71fc1430af.json b/CommunicationSeminar-7d71fc1430af.json
new file mode 100644
index 00000000..92aa5f78
--- /dev/null
+++ b/CommunicationSeminar-7d71fc1430af.json
@@ -0,0 +1,12 @@
+{
+  "type": "service_account",
+  "project_id": "communicationsem-1551739563072",
+  "private_key_id": "7d71fc1430afbbc39e7c036244c1030b6d67442c",
+  "private_key": "-----BEGIN PRIVATE KEY-----\nMIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQDY7VjU3PReWgam\nJPvYcotxezUpw3ot1wSDNCzYb/jpI6U8COeicsBMxd3Tw4xtNwSIqRFTJjR5VQBV\nmk1UaKQcDFFicBZgNq4GMGSxpy62dxpsRP8jaclGd5Vw5LicA2duvslYMML41nfx\nL9i10z62lzOrY4/QjMDdV+5FCq1ijYZWwx4UzVPEQRugBZ/XarxCQnn6+IC9TyCT\nnLCQ/WJ+r9jUDYX4XeAegWs0cp9IqN9bTFwWGkRpKAHxuKJKjNjvuPwKfYKe4g2k\ntHN2xP0p2o5vSpE08QxCY83XO3kZBgTLBAPXdC3D1O62m1Ex8XLGB3QmL0+dl/CT\n+F44tL5vAgMBAAECggEAHm8uR1m4mdmHlUfFuFhZt/zROKAe7s975+x/XjOszbNy\nkI8EmzCo9McjQtKXS7tW/NVmLi7uAxfUiYNcgLstoGxvU/WQg28oezXO6sh0hU+w\neqreINnL+KxOYHMLyNexa0LZJ3EFPw7X776xaNElEKOmBtBbx6aiaGuDF6yn0Wuc\n4OFPlBFWFQyW3nwyQ2VxlAOhExa9D5qszahzhRfsZQIh78JnStrEXct1GdAzIgl8\n+0UVI98VgZ1Y/jXQsC9qjpSZjFvbxmDSitdKEfzu519UciW5wTUvzcrV2KDX4hP9\nry91NHr+EnLK9pbUsDem5KO5bHWsAB4EMOoBFaPGAQKBgQDvQtWUkAG9QnW7Mr0+\nNj76U5jpuYMyvKaRfenYlM6B/5Lsjmj6aWfKRUTy0aSUUjKYlfWsZmQGkyRYbWct\n//NYqE6wsTi3neVYB+PWp7cckMvAShGvlhtoHiQ3TZcDMN2fg+9lHQopjGxF3Ljb\nPmYCw81i7PnsYCZyi94OvhqQbQKBgQDoGoMOROsVJCuQhuLwyX6gQh5I8OgVsjAV\nYuqk0uF4ozzNx03HLhZUbBl+edJvIepspv0iXqqL7FtsKjd/tOq5Wwokasnph+ma\nQyYn1fygoGITvzjY0JvZhAbDSSjAqln/nus3kK6yd/qM+GyKi0G8b9CxJOPtUyQo\nFapwwEIYywKBgDo57JpL9XBmlRoqfe1+7BKld4ghsnENggfUOa2QgTUXylyxR5Dx\nR+Xst5vUMxY5bsC9dd0vydXjxyuR7FNAf6sqwoOzjVb6IQ8sVGEvzZsxDbTNEcLG\naAMNmsiupDqNkNG6HO9hgtCbsNnLnl0UsWSo2/ngK+4/c/vaV/8Eeph9AoGBAJIC\n+6ciW/D0zCMjd+iaGXqfnYWtZ5MegXkyvQHrV8QYjMu3MYq3x3xcdL1HzcXzxBGO\nC3hvrUJQ8kJdXISOP4tTZlH6jALJaX+N9pbg2wgBXTGm/hAHS8POdqKrh2OMxwkz\n5C0Ua5ICQDAmp8GQUU5F2TdXSbumrfw5hPthNzN5AoGAYFby81jrjNmL1+2qFzch\nAOstKnE8Tfsf70EX6mpITqd+AVe4lCIzPnWsRlY/xSO5mFBcGqfpZlKqyIzj49kK\nkdTVKAR7xFesKT7Xgv8KYAYSbZXLBp/z8FUwCvrxXfcLd321LIf0tSkoySrcw3BG\nwWweesIuRbUDKXlv/hZzpaA=\n-----END PRIVATE KEY-----\n",
+  "client_email": "starting-account-9jnnspij26oc@communicationsem-1551739563072.iam.gserviceaccount.com",
+  "client_id": "109876849879407886090",
+  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
+  "token_uri": "https://oauth2.googleapis.com/token",
+  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
+  "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/starting-account-9jnnspij26oc%40communicationsem-1551739563072.iam.gserviceaccount.com"
+}
diff --git a/GoogleSpeech_Start.sh b/GoogleSpeech_Start.sh
new file mode 100755
index 00000000..fd6bc353
--- /dev/null
+++ b/GoogleSpeech_Start.sh
@@ -0,0 +1 @@
+export GOOGLE_APPLICATION_CREDENTIALS="CommunicationSeminar-7d71fc1430af.json" 
diff --git a/googletest.py b/googletest.py
new file mode 100644
index 00000000..e3526346
--- /dev/null
+++ b/googletest.py
@@ -0,0 +1,33 @@
+import io
+import os
+
+# Imports the Google Cloud client library
+from google.cloud import speech
+from google.cloud.speech import enums
+from google.cloud.speech import types
+
+# Instantiates a client
+client = speech.SpeechClient()
+
+# The name of the audio file to transcribe
+file_name = "efs/reformulations/41c87965-0174-4231-8253-db494f9a8a61.ogg"
+
+# Loads the audio into memory
+with io.open(file_name, 'rb') as audio_file:
+    content = audio_file.read()
+
+audio = types.RecognitionAudio(content=content)
+
+# for i in range(8000, 48001, 2000):
+for i in [8000, 12000, 16000, 24000, 48000]:
+    print(i)
+    config = types.RecognitionConfig(
+        encoding=enums.RecognitionConfig.AudioEncoding.OGG_OPUS,
+        sample_rate_hertz=i,
+        language_code='en-US')
+
+    # Detects speech in the audio file
+    response = client.recognize(config, audio)
+    print("Recognizing")
+    for result in response.results:
+        print('Transcript: {}'.format(result.alternatives[0].transcript))
diff --git a/static/ComSemApp/DKNotus-Tour-master/DKNotusTour.png b/static/ComSemApp/DKNotus-Tour-master/DKNotusTour.png
new file mode 100644
index 00000000..126344fe
Binary files /dev/null and b/static/ComSemApp/DKNotus-Tour-master/DKNotusTour.png differ
diff --git a/static/ComSemApp/DKNotus-Tour-master/LICENSE b/static/ComSemApp/DKNotus-Tour-master/LICENSE
new file mode 100644
index 00000000..5b132a5e
--- /dev/null
+++ b/static/ComSemApp/DKNotus-Tour-master/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 DK Notus IT Team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/static/ComSemApp/DKNotus-Tour-master/README.md b/static/ComSemApp/DKNotus-Tour-master/README.md
new file mode 100644
index 00000000..630e86e7
--- /dev/null
+++ b/static/ComSemApp/DKNotus-Tour-master/README.md
@@ -0,0 +1,235 @@
+# DK Notus Tour
+
+#### This compact solution for guided tours has 27 languages support. It requires only two very common dependencies: **jQuery** and **Bootstrap**. Also has useful features like auto scroll and "spotlight". We hope you enjoy it.
+
+![DK Notus Tour](DKNotusTour.png)
+
+We tried to keep all data regarding usage as short as possible.
+## 1. Features
+
+Features that we considerble important:
+
+ - **small requirements** - only jQuery and Bootstrap;
+ - **simple usage** - one function for common usage - yes, it's that simple;
+ - **events** - for advanced programmers usage;
+ - **scroll** - and some more useful features;
+ - **multi elements selection** - you can point more then one element for one tour step;
+ - **translations** - 27 languages support.
+
+## 2. Simple use case
+
+Lets start with two step tour for elements below:
+
+First of all we need to include two common libraries jQuery and Bootstrap. You ca use some CDN for that.
+
+    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
+    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
+
+Then it's time tour library `dknotus-tour.js` or `dknotus-tour.min.js`.
+
+    <script src="dknotus-tour.js"></script>
+
+Finally we can define our own tour and run it with Tour.run(). Yes, it's that simple.
+
+```javascript
+  $(function(){
+    $('#simpleBtn').click(function(){
+      Tour.run([
+        {
+          element: $('#btn1'),
+          content: 'first btn'
+        },
+        {
+          element: $('#btn2'),
+          content: 'and the second one<br>description might be <strong>HTML</strong>'
+        },
+      ]);
+    });
+  });
+```
+
+## 3. Different tour positions
+```javascript
+  $(function(){
+    $('#positionsBtn').click(function(){
+      Tour.run([
+        {
+          element: $('#posBtn'),
+          content: 'by default tour is on the right'
+        },
+        {
+          element: $('#posBtn'),
+          content: 'but it can be on top',
+          position: 'top'
+        },
+        {
+          element: $('#posBtn'),
+          content: 'bottom',
+          position: 'bottom'
+        },
+        {
+          element: $('#posBtn'),
+          content: 'and finally on the left',
+          position: 'left'
+        }
+      ]);
+    });
+  });
+```
+
+## 4. Global and local parameters
+
+Tour may be run with two parameters: tour description (mandatory) and global options (optional) Tour.run(tourDescription, options). If for some tour hint some parameter is not set, then if it's possible it's taken from options.
+
+Possible parameters for hints descriptions and for global options:
+
+Parameter |	Default value | Description
+--------- | ------------- | -----------
+element | *none* | jQuery element (might be more then one), if it's not set then hint is skipped.
+content | *empty string* | It's for contents of particular hints.
+close | true | Defines if close button should be shown.
+language | en | Defines interface language. Available languages:
+|| en | English (default)
+|| pl | Polish
+|| be | Belarusian
+|| ca | Catalan
+|| cs | Czech
+|| da | Danish
+|| de | German
+|| el | Greek
+|| es | Spanish
+|| et | Estonian
+|| fi | Finnish
+|| fr | French
+|| hu | Hungarian
+|| it | Italian
+|| lt | Lithuanian
+|| lv | Latvian
+|| mk | Macedonian
+|| nl | Dutch
+|| no | Norwegian
+|| pt | Portuguese
+|| ru | Russian
+|| sk | Slovak
+|| sl | Slovenian
+|| sq | Albanian
+|| sv | Swedish
+|| tr | Turkish
+|| uk | Ukrainian
+padding | 5 | Extra space around tour exposed elements. (Has only sense when spotlight option is true).
+position | right | Determines where hint should be shown relatively to element it describes.
+||| Possible values: right, left, top and bottom.
+scroll | true | If true then scrolls window so selected element and hint would be as close as possible to the view center.
+spotlight | true | If true then covers everything except selected element and hint with shadow.
+forceCorrectionLeft | 0 | Useful if for some reason left offset needs to be modified.
+forceCorrectionTop | 0 | Useful if for some reason top offset needs to be modified.
+forceCorrectionWidth | 0 | Useful if for some reason width needs to be modified.
+forceCorrectionHeight | 0 | Useful if for some reason height needs to be modified.
+
+All above options can be used for both: single hint description and for global options. With global options previous example can be written like:
+
+```javascript
+  $(function(){
+    $('#positionsShorterBtn').click(function(){
+      var globalOptions = {
+        element: $('#posBtn')
+      };
+
+      var tourDescription = [
+        {
+          content: 'by default tour is on the right'
+        },
+        {
+          content: 'but it can be on top',
+          position: 'top'
+        },
+        {
+          content: 'bottom',
+          position: 'bottom'
+        },
+        {
+          content: 'and finally on the left',
+          position: 'left'
+        }
+      ];
+
+      Tour.run(tourDescription, globalOptions);
+    });
+  });
+```
+
+## 5. Events example
+
+There are four events that can be used by developers:
+
+ - **onstart()** - Triggered when new tour starts ( `Tour.run()` );
+ - **onfinish()** - Triggered when Finish button is clicked;
+ - **onclose()** - Triggered when Close button is pressed ( `Tour.close()` );
+ - **onstep( currentStep )** - Triggered on every step shown ( `Tour.next()` or `Tour.prev()` );
+ - **onresize()** - By default this one is set.
+
+```javascript
+  $(function(){
+    $('#eventsBtn').click(function(){
+      Tour.onstart = function(){
+        console.log('We started!');
+      };
+
+      Tour.onfinish = function(){
+        console.log('The End');
+      };
+
+      Tour.onclose = function(){
+        console.log('Tour interupted');
+      };
+
+      Tour.onstep = function(currentStep){
+        console.log('"That\'s one small step for a man ..."');
+        console.log(currentStep);
+      };
+
+      Tour.run([
+        {
+          element: $('#eventBtn1').add('#eventBtn3'),
+          content: 'You prefer photos?',
+          position: 'top'
+        },
+        {
+          element: $('#eventBtn3').add('#eventBtn4'),
+          content: 'or videos?',
+          onstep: function(currentStep) {
+            console.log('Events defined in step, overwrites global definition');
+          }
+        }
+      ]);
+    });
+  });
+```
+
+## 6. Tour interface
+
+#### Methods
+
+Method | Description
+------ | -----------
+**Tour.run( tourDescription, globlOptions )** | Function for running Tour.
+**Tour.next()** | Goes to next tour step.
+**Tour.prev()** | Goes to previous tour step.
+**Tour.close()** | Interrupts tour and closes it.
+**Tour.current()** | Returns current step description.
+
+#### Events
+
+By default all except `onresize` are set to null.
+
+Event | Description
+----- | -----------
+**Tour.onstart()** | Triggered when new tour starts ( Tour.run() ).
+**Tour.onfinish()** | Triggered when Finish button is clicked.
+**Tour.onclose()** | Triggered when Close button is pressed ( Tour.close() ).
+**Tour.onstep( currentEvent )** | Triggered on every step shown ( Tour.next() or Tour.prev() ).
+**Tour.onresize()** | By default this one is set.
+
+## 7. Contact
+
+Jan Doleczek <jan@doleczek.pl>
diff --git a/static/ComSemApp/DKNotus-Tour-master/dknotus-tour.js b/static/ComSemApp/DKNotus-Tour-master/dknotus-tour.js
new file mode 100644
index 00000000..d1d25fd5
--- /dev/null
+++ b/static/ComSemApp/DKNotus-Tour-master/dknotus-tour.js
@@ -0,0 +1,391 @@
+/*!
+ * DK Notus Tour JavaScript Library v1.2
+ * https://github.com/DKNotusIT/DKNotus-Tour/
+ *
+ * Copyright DK Notus and other contributors
+ * Released under the MIT license
+ * https://github.com/DKNotusIT/DKNotus-Tour/blob/master/LICENSE
+ *
+ * Date: 2018-03-17
+ */
+
+var Tour = (function() {
+  var t = [],
+      o, cur
+      T = {
+        step: {
+          pl: "krok",
+          en: "step",
+          be: "крок",
+          ca: "pas",
+          cs: "krok",
+          da: "trin",
+          de: "Schritt",
+          el: "βήμα",
+          es: "paso",
+          et: "samm",
+          fi: "vaihe",
+          fr: "étape",
+          hu: "lépés",
+          it: "passo",
+          lt: "žingsnis",
+          lv: "solis",
+          mk: "чекор",
+          nl: "stap",
+          no: "trinn",
+          pt: "passo",
+          ru: "шаг",
+          sk: "krok",
+          sl: "korak",
+          sq: "hapi",
+          sv: "steg",
+          tr: "adım",
+          uk: "крок"
+        },
+        Next: {
+          pl: "Następny",
+          en: "Next",
+          be: "Далей",
+          ca: "Següent",
+          cs: "Další",
+          da: "Næste",
+          de: "Weiter",
+          el: "Την επόμενη",
+          es: "Siguiente",
+          et: "Järgmine",
+          fi: "Seuraava",
+          fr: "Prochaine",
+          hu: "Következő",
+          it: "Accanto",
+          lt: "Kitas",
+          lv: "Nākamā",
+          mk: "Следна",
+          nl: "Volgende",
+          no: "Neste",
+          pt: "Próximo",
+          ru: "Далее",
+          sk: "Ďalej",
+          sl: "Naprej",
+          sq: "Tjetër",
+          sv: "Nästa",
+          tr: "Gelecek",
+          uk: "Далі"
+        },
+        Previous: {
+          pl: "Poprzedni",
+          en: "Previous",
+          be: "Папярэдні",
+          ca: "Anteriors",
+          cs: "Předchozí",
+          da: "Tidligere",
+          de: "Vorherige",
+          el: "Προηγούμενο",
+          es: "Anterior",
+          et: "Eelmine",
+          fi: "Edellinen",
+          fr: "Précédente",
+          hu: "Előző",
+          it: "Precedente",
+          lt: "Ankstesnis",
+          lv: "Iepriekšējā",
+          mk: "Претходна",
+          nl: "Vorige",
+          no: "Tidligere",
+          pt: "Anterior",
+          ru: "Предыдущий",
+          sk: "Predchádzajúce",
+          sl: "Prejšnji",
+          sq: "E mëparshme",
+          sv: "Föregående",
+          tr: "Önceki",
+          uk: "Попередній"
+        },
+        Finish: {
+          pl: "Zakończ",
+          en: "Finish",
+          be: "Аздабленне",
+          ca: "Acabat",
+          cs: "Dokončit",
+          da: "Finish",
+          de: "Finish",
+          el: "Τελειώνει",
+          es: "Acabado",
+          et: "Lõpeta",
+          fi: "Loppuun",
+          fr: "Finition",
+          hu: "Befejezés",
+          it: "Finitura",
+          lt: "Apdaila",
+          lv: "Apdare",
+          mk: "Заврши",
+          nl: "Afwerking",
+          no: "Ferdig",
+          pt: "Acabamento",
+          ru: "Отделка",
+          sk: "Povrch",
+          sl: "Zaključek",
+          sq: "Finish",
+          sv: "Avsluta",
+          tr: "Bitir",
+          uk: "Оздоблення"
+        }
+      };
+
+  function _t(s) {
+    return T[s][t[cur].language] || T[s]['en'];
+  }
+
+  function step(n) {
+    cur = n;
+    $('.tourStep, .tourBg').remove();
+
+    if (!t[n]) {
+      return;
+    }
+
+    $('body').append([
+      '<div class="tourStep popover" step="' + n + '">',
+        '<div class="arrow"></div>',
+        '<div class="panel-default">',
+          !t[n].close ? '' : '<button class="tourClose close pull-right">&times;&nbsp;</button>',
+          '<div class="panel-body">',
+            t[n].content,
+          '</div>',
+          '<div class="panel-footer">',
+            '<div class="pull-right">',
+              '<div class="tourPrev btn btn-default btn-sm">' + _t('Previous') + '</div> ',
+              '<div class="tourNext btn btn-primary btn-sm">' + _t('Next') + '</div>',
+            '</div>',
+            '<h6>' + _t('step') + ' ' + (n + 1) + ' / ' + t.length + '</h6>',
+          '</div>',
+        '</div>',
+      '</div>'
+    ].join(''));
+
+    var el = $('.tourStep')
+          .addClass(t[n].position)
+          .css({
+            minWidth: 250
+          }),
+        x = 0,
+        y = 0;
+
+    if (t[n].element && !!t[n].element.length) {
+      var x1 = 1e6,
+          y1 = 1e6,
+          x2 = 0,
+          y2 = 0;
+
+      t[n].element.each(function(k, v) {
+        var ofs = $(v).offset();
+        x1 = Math.min(x1, ofs.left + t[n].forceCorrectionLeft);
+        y1 = Math.min(y1, ofs.top + t[n].forceCorrectionTop);
+
+        x2 = Math.max(x2, ofs.left + t[n].forceCorrectionLeft + t[n].forceCorrectionWidth
+          + parseInt($(v).css('border-left-width'))
+          + parseInt($(v).css('padding-left'))
+          + $(v).width()
+          + parseInt($(v).css('padding-right'))
+          + parseInt($(v).css('border-right-width'))
+        );
+
+        y2 = Math.max(y2, ofs.top + t[n].forceCorrectionTop + t[n].forceCorrectionHeight
+          + parseInt($(v).css('border-top-width'))
+          + parseInt($(v).css('padding-top'))
+          + $(v).height()
+          + parseInt($(v).css('padding-bottom'))
+          + parseInt($(v).css('border-bottom-width'))
+        );
+      });
+
+      switch (t[n].position) {
+        case 'top':
+          y = y1 - el.height();
+          x = ((x1 + x2) >> 1) - (el.width() >> 1);
+          break;
+
+        case 'right':
+          y = ((y1 + y2) >> 1) - (el.height()>> 1);
+          x = x2;
+          break;
+
+        case 'left':
+          y = ((y1 + y2) >> 1) - (el.height()>> 1);
+          x = x1 - el.width();
+          break;
+
+        case 'bottom':
+          y = y2;
+          x = ((x1 + x2) >> 1) - (el.width() >> 1);
+          break;
+      };
+    };
+
+    el
+      .css({
+        position: 'absolute',
+        left: x,
+        top: y
+      })
+      .show();
+
+    if (t[n].spotlight) {
+      var p = t[n].padding;
+      $('body').append(Array(5).join('<div class="tourBg"></div>'));
+
+      var pos = [
+        {
+          bottom: 'auto',
+          height: y1 - p
+        },
+        {
+          top: y2 + p,
+          height: $(document).height() - y2 - p
+        },
+        {
+          right: 'auto',
+          bottom: 'auto',
+          top: y1 - p,
+          width: x1 - p,
+          height: 2 * p + y2 - y1
+        },
+        {
+          left: x2 + p,
+          bottom: 'auto',
+          top: y1 - p,
+          height: 2 * p + y2 - y1
+        }
+      ];
+
+      $('.tourBg')
+        .css({
+          position: 'absolute',
+          zIndex: 1000,
+          top: 0,
+          bottom: 0,
+          right: 0,
+          left: 0,
+          background: '#000',
+          opacity: 0.3
+        }).each(function(k, v){
+          $(v).css(pos[k]);
+        });
+    }
+
+    if (!!t[n].scroll) {
+      var my = ((Math.min(y, y1) + Math.max(y + el.height(), y2)) >> 1) - ($(window).height() >> 1),
+          mx = ((Math.min(x, x1) + Math.max(x + el.width(),  x2)) >> 1) - ($(window).width()  >> 1);
+
+      $('html, body').animate({
+        scrollTop:  Math.max(0, Math.min(y, y1, my)),
+        scrollLeft: Math.max(0, Math.min(x, x1, mx))
+      });
+    }
+
+    if (!n) {
+      $('.tourPrev').remove();
+    }
+
+    if (n > t.length - 2) {
+      $('.tourNext').text(_t('Finish'));
+    }
+
+    $('.tourStep')
+      .on('click', '.tourNext:not([disabled])', Tour.next)
+      .on('click', '.tourPrev:not([disabled])', Tour.prev)
+      .on('click', '.tourClose:not([disabled])', Tour.close);
+
+    (t[n].onstep || Tour.onstep || function(){})(t[n]);
+  }
+
+  $(window).on('resize', function() {
+    if (!!Tour.onresize) {
+      Tour.onresize();
+    }
+  });
+
+  return {
+    run: function(tour, options) {
+      try {
+        t = [];
+        cur = 0;
+
+        o = {
+          close: true,
+          content: '',
+          language: 'en',
+          padding: 5,
+          position: 'right',
+          scroll: true,
+          spotlight: true,
+          forceCorrectionLeft: 0,
+          forceCorrectionTop: 0,
+          forceCorrectionWidth: 0,
+          forceCorrectionHeight: 0,
+          onstep: null,
+        };
+
+        for (var k in options) {
+          o[k] = options[k];
+        }
+
+        $(tour).each(function(k, v) {
+          for (var kk in o) {
+            v[kk] = v[kk] || o[kk];
+          };
+
+          if (v.element && !!v.element.length) {
+            t.push(v);
+          }
+        });
+
+        step(cur);
+
+        if (!!Tour.onstart) {
+          Tour.onstart();
+        }
+      } catch(e) {}
+    },
+
+    next: function() {
+      step(cur + 1);
+
+      if (cur == t.length) {
+        if (!!Tour.onfinish) {
+          Tour.onfinish();
+        }
+      }
+    },
+
+    prev: function(){
+      step(cur - 1);
+    },
+
+    current: function(){
+      return cur;
+    },
+
+    close: function(){
+      step(-1);
+
+      if (!!Tour.onclose) {
+        Tour.onclose();
+      }
+    },
+
+    onstart: null,
+    onfinish: null,
+    onclose: null,
+    onstep: null,
+
+    onresize: function() {
+      var n = cur - 1;
+      step(-1);
+      cur = n;
+
+      setTimeout(function() {
+        Tour.next();
+      }, 20);
+    }
+  };
+})();
diff --git a/static/ComSemApp/DKNotus-Tour-master/dknotus-tour.min.js b/static/ComSemApp/DKNotus-Tour-master/dknotus-tour.min.js
new file mode 100644
index 00000000..38939c05
--- /dev/null
+++ b/static/ComSemApp/DKNotus-Tour-master/dknotus-tour.min.js
@@ -0,0 +1,12 @@
+/*!
+ * DK Notus Tour JavaScript Library v1.2
+ * https://github.com/DKNotusIT/DKNotus-Tour/
+ *
+ * Copyright DK Notus and other contributors
+ * Released under the MIT license
+ * https://github.com/DKNotusIT/DKNotus-Tour/blob/master/LICENSE
+ *
+ * Date: 2018-03-17
+ */
+
+ var Tour=function(){function _t(s){return T[s][t[cur].language]||T[s].en}function step(n){if(cur=n,$(".tourStep, .tourBg").remove(),t[n]){$("body").append(['<div class="tourStep popover" step="'+n+'">','<div class="arrow"></div>','<div class="panel-default">',t[n].close?'<button class="tourClose close pull-right">&times;&nbsp;</button>':"",'<div class="panel-body">',t[n].content,"</div>",'<div class="panel-footer">','<div class="pull-right">','<div class="tourPrev btn btn-default btn-sm">'+_t("Previous")+"</div> ",'<div class="tourNext btn btn-primary btn-sm">'+_t("Next")+"</div>","</div>","<h6>"+_t("step")+" "+(n+1)+" / "+t.length+"</h6>","</div>","</div>","</div>"].join(""));var el=$(".tourStep").addClass(t[n].position).css({minWidth:250}),x=0,y=0;if(t[n].element&&t[n].element.length){var x1=1e6,y1=1e6,x2=0,y2=0;switch(t[n].element.each(function(k,v){var ofs=$(v).offset();x1=Math.min(x1,ofs.left+t[n].forceCorrectionLeft),y1=Math.min(y1,ofs.top+t[n].forceCorrectionTop),x2=Math.max(x2,ofs.left+t[n].forceCorrectionLeft+t[n].forceCorrectionWidth+parseInt($(v).css("border-left-width"))+parseInt($(v).css("padding-left"))+$(v).width()+parseInt($(v).css("padding-right"))+parseInt($(v).css("border-right-width"))),y2=Math.max(y2,ofs.top+t[n].forceCorrectionTop+t[n].forceCorrectionHeight+parseInt($(v).css("border-top-width"))+parseInt($(v).css("padding-top"))+$(v).height()+parseInt($(v).css("padding-bottom"))+parseInt($(v).css("border-bottom-width")))}),t[n].position){case"top":y=y1-el.height(),x=(x1+x2>>1)-(el.width()>>1);break;case"right":y=(y1+y2>>1)-(el.height()>>1),x=x2;break;case"left":y=(y1+y2>>1)-(el.height()>>1),x=x1-el.width();break;case"bottom":y=y2,x=(x1+x2>>1)-(el.width()>>1)}}if(el.css({position:"absolute",left:x,top:y}).show(),t[n].spotlight){var p=t[n].padding;$("body").append(Array(5).join('<div class="tourBg"></div>'));var pos=[{bottom:"auto",height:y1-p},{top:y2+p,height:$(document).height()-y2-p},{right:"auto",bottom:"auto",top:y1-p,width:x1-p,height:2*p+y2-y1},{left:x2+p,bottom:"auto",top:y1-p,height:2*p+y2-y1}];$(".tourBg").css({position:"absolute",zIndex:1e3,top:0,bottom:0,right:0,left:0,background:"#000",opacity:.3}).each(function(k,v){$(v).css(pos[k])})}if(t[n].scroll){var my=(Math.min(y,y1)+Math.max(y+el.height(),y2)>>1)-($(window).height()>>1),mx=(Math.min(x,x1)+Math.max(x+el.width(),x2)>>1)-($(window).width()>>1);$("html, body").animate({scrollTop:Math.max(0,Math.min(y,y1,my)),scrollLeft:Math.max(0,Math.min(x,x1,mx))})}n||$(".tourPrev").remove(),n>t.length-2&&$(".tourNext").text(_t("Finish")),$(".tourStep").on("click",".tourNext:not([disabled])",Tour.next).on("click",".tourPrev:not([disabled])",Tour.prev).on("click",".tourClose:not([disabled])",Tour.close),(t[n].onstep||Tour.onstep||function(){})(t[n])}}var o,cur,t=[];return T={step:{pl:"krok",en:"step",be:"крок",ca:"pas",cs:"krok",da:"trin",de:"Schritt",el:"βήμα",es:"paso",et:"samm",fi:"vaihe",fr:"étape",hu:"lépés",it:"passo",lt:"žingsnis",lv:"solis",mk:"чекор",nl:"stap",no:"trinn",pt:"passo",ru:"шаг",sk:"krok",sl:"korak",sq:"hapi",sv:"steg",tr:"adım",uk:"крок"},Next:{pl:"Następny",en:"Next",be:"Далей",ca:"Següent",cs:"Další",da:"Næste",de:"Weiter",el:"Την επόμενη",es:"Siguiente",et:"Järgmine",fi:"Seuraava",fr:"Prochaine",hu:"Következő",it:"Accanto",lt:"Kitas",lv:"Nākamā",mk:"Следна",nl:"Volgende",no:"Neste",pt:"Próximo",ru:"Далее",sk:"Ďalej",sl:"Naprej",sq:"Tjetër",sv:"Nästa",tr:"Gelecek",uk:"Далі"},Previous:{pl:"Poprzedni",en:"Previous",be:"Папярэдні",ca:"Anteriors",cs:"Předchozí",da:"Tidligere",de:"Vorherige",el:"Προηγούμενο",es:"Anterior",et:"Eelmine",fi:"Edellinen",fr:"Précédente",hu:"Előző",it:"Precedente",lt:"Ankstesnis",lv:"Iepriekšējā",mk:"Претходна",nl:"Vorige",no:"Tidligere",pt:"Anterior",ru:"Предыдущий",sk:"Predchádzajúce",sl:"Prejšnji",sq:"E mëparshme",sv:"Föregående",tr:"Önceki",uk:"Попередній"},Finish:{pl:"Zakończ",en:"Finish",be:"Аздабленне",ca:"Acabat",cs:"Dokončit",da:"Finish",de:"Finish",el:"Τελειώνει",es:"Acabado",et:"Lõpeta",fi:"Loppuun",fr:"Finition",hu:"Befejezés",it:"Finitura",lt:"Apdaila",lv:"Apdare",mk:"Заврши",nl:"Afwerking",no:"Ferdig",pt:"Acabamento",ru:"Отделка",sk:"Povrch",sl:"Zaključek",sq:"Finish",sv:"Avsluta",tr:"Bitir",uk:"Оздоблення"}},$(window).on("resize",function(){Tour.onresize&&Tour.onresize()}),{run:function(tour,options){try{t=[],cur=0,o={close:!0,content:"",language:"en",padding:5,position:"right",scroll:!0,spotlight:!0,forceCorrectionLeft:0,forceCorrectionTop:0,forceCorrectionWidth:0,forceCorrectionHeight:0,onstep:null};for(var k in options)o[k]=options[k];$(tour).each(function(k,v){for(var kk in o)v[kk]=v[kk]||o[kk];v.element&&v.element.length&&t.push(v)}),step(cur),Tour.onstart&&Tour.onstart()}catch(e){}},next:function(){step(cur+1),cur==t.length&&Tour.onfinish&&Tour.onfinish()},prev:function(){step(cur-1)},current:function(){return cur},close:function(){step(-1),Tour.onclose&&Tour.onclose()},onstart:null,onfinish:null,onclose:null,onstep:null,onresize:function(){var n=cur-1;step(-1),cur=n,setTimeout(function(){Tour.next()},20)}}}();
\ No newline at end of file
diff --git a/static/ComSemApp/DKNotus-Tour-master/examples.html b/static/ComSemApp/DKNotus-Tour-master/examples.html
new file mode 100644
index 00000000..52867654
--- /dev/null
+++ b/static/ComSemApp/DKNotus-Tour-master/examples.html
@@ -0,0 +1,768 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>DK Notus Tour - Examples</title>
+  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
+  <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
+  <script src="dknotus-tour.js"></script>
+  <script type="text/javascript">
+    $(function(){
+      $('#languagesCount').html($('#languagesList dd').length);
+    });
+  </script>
+</head>
+<body>
+    <div id="start" class="container">
+      <div class="panel btn-group pull-right">
+        <a href="http://www.dknotus.pl/" target="dkn" class="btn btn-default">DK Notus</a>
+        <a href="https://github.com/DKNotusIT" target="gh" class="btn btn-default">@ GitHub</a>
+      </div>
+
+      <div class="page-header">
+        <h1>DK Notus Tour <small>Examples</small></h1>
+      </div>
+
+      <div class="row">
+        <div class="col-xs-9" style="height: 1200px">
+          <p class="lead">
+            This compact solution for guided tours has
+            <strong>27 languages support</strong>.
+            It  requires only two very common dependencies:
+            <strong>jQuery</strong> and <strong>Bootstrap</strong>.
+            Also has useful features like <strong>auto scroll</strong>
+            and <strong>"spotlight"</strong>.
+            We hope you enjoy it.
+          </p>
+
+          <div>
+            <img src="DKNotusTour.png" alt="DK Notus Tour">
+          </div>
+
+          <p>
+            We tried to keep all data regarding usage as short as possible.
+          </p>
+
+          <h2 id="features">1. Features</h2>
+
+          <p>
+            Features that we considerble important:
+          </p>
+
+          <dl class="dl-horizontal">
+            <dt>small requirements</dt>
+            <dd>only <strong>jQuery</strong> and <strong>Bootstrap</strong>;</dd>
+
+            <dt>simple usage</dt>
+            <dd>one function for common usage - yes, it's that simple;</dd>
+
+            <dt>events</dt>
+            <dd>for advanced programmers usage;</dd>
+
+            <dt>scroll</dt>
+            <dd>and some more useful features;</dd>
+
+            <dt>multi elem. selection</dt>
+            <dd>you can point more then one element for one tour step;</dd>
+
+            <dt>translations</dt>
+            <dd><span id="languagesCount"></span> languages support.</dd>
+          </dl>
+
+          <h2 id="simple">2. Simple use case</h2>
+
+          <p>Lets start with two step tour for elements below:</p>
+
+          <div class="row navbar">
+            <div class="col-md-2">
+              <button id="btn1" class="btn btn-lg btn-primary">#btn1</button>
+            </div>
+            <div class="col-md-2">
+              <button id="btn2" class="btn btn-lg btn-success">#btn2</button>
+            </div>
+          </div>
+
+          <div class="navbar">
+            <button id="simpleBtn" class="btn btn-default">
+              <span class="glyphicon glyphicon-gift"></span>
+              Simple tour: click to run the example.
+            </button>
+          </div>
+
+          <p>
+            First of all we need to include two common libraries
+            <strong>jQuery</strong> and <strong>Bootstrap</strong>.
+            You ca use some CDN for that.
+          </p>
+
+          <div class="highlight">
+            <pre>  &lt;link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
+  &lt;script src="http://code.jquery.com/jquery-1.10.2.min.js"&gt;&lt;/script&gt;</pre>
+          </div>
+
+          <p>
+            Then it's time tour library <code>dknotus-tour.js</code>
+            or <code>dknotus-tour.min.js</code>.
+          </p>
+
+          <div class="highlight">
+            <pre>  &lt;script src="dknotus-tour.js"&gt;&lt;/script&gt;</pre>
+          </div>
+
+          <p>
+            Finally we can define our own tour and run it with
+            <code>Tour.run()</code>. Yes, it's that simple.
+          </p>
+
+          <script>
+            $(function(){
+              $('#simpleBtn').click(function(){
+                Tour.run([
+                  {
+                    element: $('#btn1'),
+                    content: 'first btn'
+                  },
+                  {
+                    element: $('#btn2'),
+                    content: 'and the second one<br>description might be <strong>HTML</strong>'
+                  },
+                ]);
+              });
+            });
+          </script>
+
+          <div class="highlight">
+            <pre>
+  $(function(){
+    $('#simpleBtn').click(function(){
+      Tour.run([
+        {
+          element: $('#btn1'),
+          content: 'first btn'
+        },
+        {
+          element: $('#btn2'),
+          content: 'and the second one&lt;br&gt;description might be &lt;strong&gt;HTML&lt;/strong&gt;'
+        },
+      ]);
+    });
+  });
+            </pre>
+          </div>
+
+          <h2 id="positions">3. Different tour positions</h2>
+
+          <div class="row navbar text-center">
+            <h2>
+              <div id="posBtn" class="label label-primary">Jump around</div>
+            </h2>
+          </div>
+
+          <div class="navbar">
+            <button id="positionsBtn" class="btn btn-default">
+              <span class="glyphicon glyphicon-gift"></span>
+              Different positions: click to run the example.
+            </button>
+          </div>
+
+          <script>
+            $(function(){
+              $('#positionsBtn').click(function(){
+                Tour.run([
+                  {
+                    element: $('#posBtn'),
+                    content: 'by default tour is on the right'
+                  },
+                  {
+                    element: $('#posBtn'),
+                    content: 'but it can be on top',
+                    position: 'top'
+                  },
+                  {
+                    element: $('#posBtn'),
+                    content: 'bottom',
+                    position: 'bottom'
+                  },
+                  {
+                    element: $('#posBtn'),
+                    content: 'and finally on the left',
+                    position: 'left'
+                  }
+                ]);
+              });
+            });
+          </script>
+
+          <div class="highlight">
+            <pre>
+  $(function(){
+    $('#positionsBtn').click(function(){
+      Tour.run([
+        {
+          element: $('#posBtn'),
+          content: 'by default tour is on the right'
+        },
+        {
+          element: $('#posBtn'),
+          content: 'but it can be on top',
+          position: 'top'
+        },
+        {
+          element: $('#posBtn'),
+          content: 'bottom',
+          position: 'bottom'
+        },
+        {
+          element: $('#posBtn'),
+          content: 'and finally on the left',
+          position: 'left'
+        }
+      ]);
+    });
+  });</pre>
+          </div>
+
+          <h2 id="parameters">4. Global and local parameters</h2>
+
+          <p>
+            Tour may be run with two parameters: tour description (mandatory)
+            and global options (optional) <code>Tour.run(tourDescription,
+            options)</code>. If for some tour hint some parameter is not set,
+            then if it's possible it's taken from options.
+          </p>
+
+          <h4>
+            Possible parameters for hints descriptions and for global options
+          </h4>
+
+          <table class="table table-striped">
+            <thead>
+              <tr>
+                <th>Parameter</th>
+                <th>Default&nbsp;value</th>
+                <th>Description</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>element</td>
+                <td><em>none</em></td>
+                <td>
+                  jQuery element (might be more then one),
+                  if it's not set then hint is skipped.
+                </td>
+              </tr>
+              <tr>
+                <td>content</td>
+                <td><em>empty string</em></td>
+                <td>It's for contents of particular hints.</td>
+              </tr>
+              <tr>
+                <td>close</td>
+                <td>true</td>
+                <td>Defines if close button should be shown.</td>
+              </tr>
+              <tr>
+                <td>language</td>
+                <td>en</td>
+                <td>
+                  Defines interface language. Available languages:
+                  <dl id="languagesList" class="dl-horizontal">
+                    <dt>en</dt>
+                    <dd>English (default)</dd>
+
+                    <dt>pl</dt>
+                    <dd>Polish</dd>
+
+                    <dt>be</dt>
+                    <dd>Belarusian</dd>
+
+                    <dt>ca</dt>
+                    <dd>Catalan</dd>
+
+                    <dt>cs</dt>
+                    <dd>Czech</dd>
+
+                    <dt>da</dt>
+                    <dd>Danish</dd>
+
+                    <dt>de</dt>
+                    <dd>German</dd>
+
+                    <dt>el</dt>
+                    <dd>Greek</dd>
+
+                    <dt>es</dt>
+                    <dd>Spanish</dd>
+
+                    <dt>et</dt>
+                    <dd>Estonian</dd>
+
+                    <dt>fi</dt>
+                    <dd>Finnish</dd>
+
+                    <dt>fr</dt>
+                    <dd>French</dd>
+
+                    <dt>hu</dt>
+                    <dd>Hungarian</dd>
+
+                    <dt>it</dt>
+                    <dd>Italian</dd>
+
+                    <dt>lt</dt>
+                    <dd>Lithuanian</dd>
+
+                    <dt>lv</dt>
+                    <dd>Latvian</dd>
+
+                    <dt>mk</dt>
+                    <dd>Macedonian</dd>
+
+                    <dt>nl</dt>
+                    <dd>Dutch</dd>
+
+                    <dt>no</dt>
+                    <dd>Norwegian</dd>
+
+                    <dt>pt</dt>
+                    <dd>Portuguese</dd>
+
+                    <dt>ru</dt>
+                    <dd>Russian</dd>
+
+                    <dt>sk</dt>
+                    <dd>Slovak</dd>
+
+                    <dt>sl</dt>
+                    <dd>Slovenian</dd>
+
+                    <dt>sq</dt>
+                    <dd>Albanian</dd>
+
+                    <dt>sv</dt>
+                    <dd>Swedish</dd>
+
+                    <dt>tr</dt>
+                    <dd>Turkish</dd>
+
+                    <dt>uk</dt>
+                    <dd>Ukrainian</dd>
+                  </dl>
+                </td>
+              </tr>
+              <tr>
+                <td>padding</td>
+                <td>5</td>
+                <td>
+                  Extra space around tour exposed elements.
+                  (Has only sense when spotlight option is true).
+                </td>
+              </tr>
+              <tr>
+                <td>position</td>
+                <td>right</td>
+                <td>
+                  Determines where hint should be shown relativly to element
+                  it describes.<br>
+                  Possible values: right, left, top and bottom.
+                </td>
+              </tr>
+              <tr>
+                <td>scroll</td>
+                <td>true</td>
+                <td>
+                  If true then scrolls window so selected element
+                  and hint would be as close as possible to the view center.
+                </td>
+              </tr>
+              <tr>
+                <td>spotlight</td>
+                <td>true</td>
+                <td>
+                  If true then covers everything except selected element
+                  and hint with shadow.
+                </td>
+              </tr>
+              <tr>
+                <td>forceCorrectionLeft</td>
+                <td>0</td>
+                <td>
+                  Useful if for some reason left offset needs to be modified.
+                </td>
+              </tr>
+              <tr>
+                <td>forceCorrectionTop</td>
+                <td>0</td>
+                <td>
+                  Useful if for some reason top offset needs to be modified.
+                </td>
+              </tr>
+              <tr>
+                <td>forceCorrectionWidth</td>
+                <td>0</td>
+                <td>
+                  Useful if for some reason width needs to be modified.
+                </td>
+              </tr>
+              <tr>
+                <td>forceCorrectionHeight</td>
+                <td>0</td>
+                <td>
+                  Useful if for some reason height needs to be modified.
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <p>
+            All above options can be used for both: single hint description
+            and for global options. With global options previous example
+            can be writen like:
+          </p>
+
+          <div class="highlight">
+            <pre>
+  $(function(){
+    $('#positionsShorterBtn').click(function(){
+      var globalOptions = {
+        element: $('#posBtn')
+      };
+
+      var tourDescription = [
+        {
+          content: 'by default tour is on the right'
+        },
+        {
+          content: 'but it can be on top',
+          position: 'top'
+        },
+        {
+          content: 'bottom',
+          position: 'bottom'
+        },
+        {
+          content: 'and finally on the left',
+          position: 'left'
+        }
+      ];
+
+      Tour.run(tourDescription, globalOptions);
+    });
+  });</pre>
+          </div>
+
+          <script type="text/javascript">
+            $(function(){
+              $('#positionsShorterBtn').click(function(){
+                var globalOptions = {
+                  element: $('#posBtn')
+                };
+
+                var tourDescription = [
+                  {
+                    content: 'by default tour is on the right'
+                  },
+                  {
+                    content: 'but it can be on top',
+                    position: 'top'
+                  },
+                  {
+                    content: 'bottom',
+                    position: 'bottom'
+                  },
+                  {
+                    content: 'and finally on the left',
+                    position: 'left'
+                  }
+                ];
+
+                Tour.run(tourDescription, globalOptions);
+              });
+            });
+          </script>
+
+          <div class="navbar">
+            <button id="positionsShorterBtn" class="btn btn-default">
+              <span class="glyphicon glyphicon-gift"></span>
+              Different positions but shorter: click to run the example.
+            </button>
+          </div>
+
+          <h2 id="events">5. Events example</h2>
+
+          <p>
+            There are four events that can be used by developers:
+          </p>
+
+          <dl class="dl-horizontal">
+            <dt>onstart()</dt>
+            <dd>Triggered when new tour starts ( <code>Tour.run()</code> ).</dd>
+
+            <dt>onfinish()</dt>
+            <dd>Triggered when Finish button is clicked.</dd>
+
+            <dt>onclose()</dt>
+            <dd>
+              Triggered when Close button is pressed
+              ( <code>Tour.close()</code> ).
+            </dd>
+
+            <dt>onstep( currentStep )</dt>
+            <dd>
+              Triggered on every step shown
+              ( <code>Tour.next()</code> or <code>Tour.prev()</code> ).
+            </dd>
+
+            <dt>onresize</dt>
+            <dd>By default this one is set.</dd>
+          </dl>
+
+          <div class="container">
+            <div class="row">
+              <div class="col-xs-6">
+                <button class="btn btn-lg btn-success pull-right" id="eventBtn1">
+                  <span class="glyphicon glyphicon-camera"></span>
+                </button>
+              </div>
+              <div class="col-xs-6">
+                <button class="btn btn-lg btn-success" id="eventBtn2">
+                  <span class="glyphicon glyphicon-plus-sign"></span>
+                </button>
+              </div>
+            </div>
+          </div>
+          <div class="container media">
+            <div class="row">
+              <div class="col-xs-6">
+                <button class="btn btn-lg btn-success pull-right" id="eventBtn3">
+                  <span class="glyphicon glyphicon-picture"></span>
+                </button>
+              </div>
+              <div class="col-xs-6">
+                <button class="btn btn-lg btn-success" id="eventBtn4">
+                  <span class="glyphicon glyphicon-facetime-video"></span>
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <script type="text/javascript">
+            $(function(){
+              $('#eventsBtn').click(function(){
+                Tour.onstart = function(){
+                  console.log('We started!');
+                };
+
+                Tour.onfinish = function(){
+                  console.log('The End');
+                };
+
+                Tour.onclose = function(){
+                  console.log('Tour interupted');
+                };
+
+                Tour.onstep = function(currentStep){
+                  console.log('"That\'s one small step for a man ..."');
+                  console.log(currentStep);
+                };
+
+                Tour.run([
+                  {
+                    element: $('#eventBtn1').add('#eventBtn3'),
+                    content: 'You prefer photos?',
+                    position: 'top'
+                  },
+                  {
+                    element: $('#eventBtn3').add('#eventBtn4'),
+                    content: 'or videos?',
+                    onstep: function(currentStep) {
+                      console.log('Events defined in step, overwrites global definition');
+                    }
+                  }
+                ]);
+              });
+            });
+          </script>
+
+          <div class="navbar">
+            <button id="eventsBtn" class="btn btn-default">
+              <span class="glyphicon glyphicon-gift"></span>
+              Events example: click to run the example.
+            </button>
+          </div>
+
+          <div class="highlight">
+            <pre>
+  $(function(){
+    $('#eventsBtn').click(function(){
+      Tour.onstart = function(){
+        console.log('We started!');
+      };
+
+      Tour.onfinish = function(){
+        console.log('The End');
+      };
+
+      Tour.onclose = function(){
+        console.log('Tour interupted');
+      };
+
+      Tour.onstep = function(currentStep){
+        console.log('"That\'s one small step for a man ..."');
+        console.log(currentStep);
+      };
+
+      Tour.run([
+        {
+          element: $('#eventBtn1').add('#eventBtn3'),
+          content: 'You prefer photos?',
+          position: 'top'
+        },
+        {
+          element: $('#eventBtn3').add('#eventBtn4'),
+          content: 'or videos?',
+          onstep: function(currentStep) {
+            console.log('Events defined in step, overwrites global definition');
+          }
+        }
+      ]);
+    });
+  });</pre>
+          </div>
+
+          <h2 id="interface">6. Tour interface</h2>
+
+          <h3>Methods</h3>
+
+          <table>
+            <thead>
+              <tr>
+                <th>Method</th>
+                <th>Description</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>Tour.run( tourDescription, globlOptions )</td>
+                <td>Function for running Tour;</td>
+              </tr>
+              <tr>
+                <td>Tour.next()</td>
+                <td>Goes to next tour step;</td>
+              </tr>
+              <tr>
+                <td>Tour.prev()</td>
+                <td>Goes to previous tour step;</td>
+              </tr>
+              <tr>
+                <td>Tour.close()</td>
+                <td>Interrupts tour and closes it;</td>
+              </tr>
+              <tr>
+                <td>Tour.current()</td>
+                <td>Returns current step description.</td>
+              </tr>
+            </tbody>
+          </table>
+
+          <h3>Events</h3>
+
+          <p>
+            By default all except onresize are set to null.
+          </p>
+
+          <table>
+            <thead>
+              <tr>
+                <th>Event</th>
+                <th>Description</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>Tour.onstart()</td>
+                <td>
+                  Triggered when new tour starts ( <code>Tour.run()</code> );
+                </td>
+              </tr>
+              <tr>
+                <td>Tour.onfinish()</td>
+                <td>Triggered when Finish button is clicked;</td>
+              </tr>
+              <tr>
+                <td>Tour.onclose()</td>
+                <td>
+                  Triggered when Close button is pressed
+                  ( <code>Tour.close()</code> );
+                </td>
+              </tr>
+              <tr>
+                <td>Tour.onstep( currentStep )</td>
+                <td>
+                  Triggered on every step shown
+                  ( <code>Tour.next()</code> or <code>Tour.prev()</code> );
+                </td>
+              </tr>
+              <tr>
+                <td>Tour.onresize()</td>
+                <td>By default this one is set.</td>
+              </tr>
+            </tbody>
+          </table>
+
+          <h2 id="contact">7. Contact</h2>
+
+          <a href="mailto:jan@doleczek.pl?subject=DKNotusTour feedback" "email me">Jan Doleczek</a>
+
+          <hr/>
+          <small class="pull-right">
+            No animals were harmed during development.
+          </small>
+
+          <small>
+            DK Notus 2016
+          </small>
+
+        </div>
+
+        <div class="col-xs-3">
+          <div class="list-group" style="position: fixed">
+            <a href="#start" class="list-group-item active">
+              <strong>0. Start</strong>
+            </a>
+
+            <a href="#features" class="list-group-item">
+              1. Features
+            </a>
+
+            <a href="#simple" class="list-group-item">
+              2. Simple use case
+            </a>
+
+            <a href="#positions" class="list-group-item">
+              3. Different tour positions
+            </a>
+
+            <a href="#parameters" class="list-group-item">
+              4. Global and local parameters
+            </a>
+
+            <a href="#events" class="list-group-item">
+              5. Events example
+            </a>
+
+            <a href="#interface" class="list-group-item">
+              6. Tour interface
+            </a>
+
+            <a href="#contact" class="list-group-item">
+              7. Contact
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+</body>
+</html>