CoderDojoPotsdam · joshhazelhurst123 · Aug 6, 2017 · Feb 21, 2019 · Feb 21, 2019 · Feb 21, 2019
diff --git a/_layouts/tutorial.html b/_layouts/tutorial.html
@@ -7,15 +7,31 @@
     <script type="text/javascript" async="" src="../js/cookies.js"></script>
     <script type="text/javascript" async="" src="../js/requirements.js"></script>
     <script type="text/javascript" async="" src="../js/compatibility.js"></script>
+    <script type="text/javascript" async="" src="../js/languages.js"></script>
+    <script type="text/javascript" async="" src="../js/switch-language.js"></script>
     <link type="text/css" rel="stylesheet" href="../css/tutorial.css" media="screen"/>
     <link type="text/css" rel="stylesheet" href="../css/playfield.css" media="screen"/>
     <link type="text/css" rel="stylesheet" href="../css/quiz.css" media="screen"/>
     <link type="text/css" rel="stylesheet" href="../css/hint.css" media="screen"/>
     <link type="text/css" rel="stylesheet" href="../css/progress.css" media="screen"/>
     <link type="text/css" rel="stylesheet" href="../css/requirements.css" media="screen"/>
+    <link type="text/css" rel="stylesheet" href="../css/languages.css" media="screen"/>
     <link type="text/css" rel="stylesheet" href="../css/Ubuntu.css" media="screen"/>
     <link rel="shortcut icon" href="../favicon.ico?v=2" type="image/x-icon">
     <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
+
+    <script>
+$(document).ready(function(){
+  $('[data-toggle="tooltip"]').tooltip({title: "Hooray", placement: "bottom"});
+});
+</script>
+
+
+
     <title>{{ page.title | escape }} - {{ site.data.localization.title[page.lang] }}</title>
     <script type="text/javascript">
       var current_page_id = "page-" + {{ page.path | jsonify }};
@@ -24,39 +40,30 @@
     .clicked .toggle-hint:before {
       content: "{{ site.data.localization.hint.shown[page.lang] }}";
     }
-
     .secret .toggle-hint:before {
       content: "{{ site.data.localization.hint.hidden[page.lang] }}";
     }
-
     .playfield.verbose .match.ok:after {
       content: "{{ site.data.localization.match.matched[page.lang] }}";
     }
-
     .playfield.verbose .match.fail:after {
       content: "{{ site.data.localization.match.shouldNotMatch[page.lang] }}";
     }
-
     .playfield.verbose .nomatch.ok:after {
       content: "{{ site.data.localization.match.shouldMatch[page.lang] }}";
     }
-
     .playfield.verbose .nomatch.fail:after {
       content: "{{ site.data.localization.match.noMatch[page.lang] }}";
     }
-
     .quiz .expression:before {
       content: "{{ site.data.localization.quiz.before[page.lang] }}";
     }
-
     .quiz .expression:after {
       content: "{{ site.data.localization.quiz.after[page.lang] }}";
     }
-
     .quiz .button-ok:before {
       content: "{{ site.data.localization.quiz.yes[page.lang] }}";
     }
-
     .quiz .button-fail:before {
       content: "{{ site.data.localization.quiz.no[page.lang] }}";
     }
@@ -65,50 +72,71 @@
   <body>
     <header>
       <div class="progress">
-        {% assign same_topic_started = false %}
-        {% assign should_assign_next = false %}
-        {% assign has_next_page = false %}
-        {% assign next_page = nil %}
-        {% for p in site.pages %}
-          {% assign p_language = p.path | split: "/" | first %}
-          {% assign file_name = p.path | split: "/" %}
-          {% assign file_name = file_name[1] %}
-          {% assign topic = page.path | split: "-" | first %}
-          {% assign p_topic = p.path | split: "-" | first %}
+        {%- assign same_topic_started = false %}
+        {%- assign should_assign_next = false %}
+        {%- assign has_next_page = false %}
+        {%- assign step_index = 0 %}
+        {%- assign next_page = nil %}
+        {%- for p in site.pages %}
+          {%- assign file_name = page.path | split: "/" %}
+          {%- assign file_name = file_name[1] %}
 
-          {% if p_language == page.lang %}
-            {% if p_topic == topic and same_topic_started == false %}
+          {%- assign p_file_name = p.path | split: "/" %}
+          {%- assign p_file_name = p_file_name[1] %}
+
+          {%- assign topic = file_name | split: "-" | first %}
+          {%- assign p_topic = p_file_name | split: "-" | first %}
+
+          {%- if p.lang == page.lang %}
+            {%- assign step_index = step_index | plus: 1 %}
+            {%- if p_topic == topic and same_topic_started == false %}
               <div class="same-topic">
-              {% assign same_topic_started = true %}
-            {% endif %}
-            {% if p_topic != topic and same_topic_started == true %}
+              {%- assign same_topic_started = true %}
+            {%- endif %}
+            {%- if p_topic != topic and same_topic_started == true %}
               </div>
-              {% assign same_topic_started = false %}
-            {% endif %}
-            <a id="page-{{ p.path }}" class="step {% if page == p %}current{% endif %}" href="..{{ p.url }}"></a>
-            {% if should_assign_next %}
-              {% assign should_assign_next = false %}
-              {% assign has_next_page = true %}
-              {% assign next_page = p %}
-            {% endif %}
-            {% if page == p %}
-              {% assign should_assign_next = true %}
-            {% endif %}
-          {% endif %}
-        {% endfor %}
-        {% if same_topic_started %}
+              {%- assign same_topic_started = false %}
+            {%- endif %}
+            <a id="page-{{ p.path }}" data-toggle="tooltip" title="Hooray!" class="step {% if page == p %}current{% endif %}" href="..{{ p.url }}">{%- if page == p %}{{ step_index }}{% endif %}</a>
+            {%- if should_assign_next %}
+              {%- assign should_assign_next = false %}
+              {%- assign has_next_page = true %}
+              {%- assign next_page = p %}
+            {%- endif %}
+            {%- if page == p %}
+              {%- assign should_assign_next = true %}
+            {%- endif %}
+          {%- endif %}
+        {%- endfor %}
+        {%- if same_topic_started %}
           </div>
-        {% endif %}
+        {%- endif %}
       </div>
       <h2>{{ page.title | escape }}</h2>
     </header>
     <div class="main">
       {{ content }}
-      {% if has_next_page %}
+      {%- if has_next_page %}
         <a href="..{{ next_page.url }}" class="next-page">{{ site.data.localization.footer.nextStep[page.lang] }}</a>
-      {% endif %}
+      {%- endif %}
     </div>
     <footer>
+      <div class="languageFooterMenu" >
+        <select id="languageMenu" onchange="changeLanguage()">
+          {%- assign languagesArray = 'English,Deutsch,Svenska' | split: ',' %}
+          {%- for language in languagesArray %}
+          {%- assign lang = language | slice: 0, 2 | downcase %}
+          {%- if lang  == page.lang %}
+            <option id="{{lang}}" selected href="..{{page.url}}">{{language}}</option>
+          {%- endif %}
+          {%- if lang  != page.lang %}
+            <option id="{{lang}}" href="..{{page.url | replace: page.lang, lang}}">{{language}}</option>
+          {%- endif %}
+          {%- endfor %}
+        </select>
+        <script>
+        </script>
+      </div>
       <div class="links">
         <a href="{{ site.data.localization.github.edit }}/{{ page.path }}">{{ site.data.localization.footer.edit[page.lang] }}</a>
         <a href="{{ site.data.localization.github.newIssue }}">{{ site.data.localization.footer.newIssue[page.lang] }}</a>
@@ -120,10 +148,10 @@ <h2>{{ page.title | escape }}</h2>
           <img alt="Creative Commons Lizenzvertrag" style="border-width:0" src="../img/cc-by-sa.png" />
         </a>
         {{ site.data.localization.license[page.lang] }}
-        {% assign lowercase_content = content | downcase %}
-        {% if lowercase_content contains "<img" %}
+        {%- assign lowercase_content = content | downcase %}
+        {%- if lowercase_content contains "<img" %}
           {{ site.data.localization.licenseImage[page.lang] }}
-        {% endif %}
+        {%- endif %}
       </div>
     </footer>
   </body>

diff --git a/css/progress.css b/css/progress.css
@@ -4,40 +4,48 @@
 .progress {
   text-align: center;
   width: 100%;
-  padding: 5px;
+  padding: 30px;
   background-color: {{ site.data.colors.progress-color }};
   display: block;
 }
 
-.progress .step {
+.step {
   width: 10px;
-  height: 10px;
+  height: 60px;
   border: 3px solid {{ site.data.colors.step-color }};
-  border-radius: 10px;
+  border-radius: 5px;
   display: inline-block;
   vertical-align: middle;
 }
 
 .progress > .step {
-  margin-top: 5px;
-  margin-bottom: 5px;
+  margin-top: 10px;
+  margin-bottom: 10px;
   display: inline-block;
 }
 
-.progress .step.done {
+.step.done {
   background-color: {{ site.data.colors.step-done-color }};
   border-color: {{ site.data.colors.step-done-border-color }};
 }
 
-.progress .step.current {
+.step.current {
   background-color: {{ site.data.colors.step-color }};
+  color: white;
+  text-decoration: none;
+  font-size: 7px;
+  width: 20px;
+  height: 40px;
+  line-height: 40px;
+  border-radius: 10px;
+  border-width: 4px;
 }
 
-.progress .same-topic {
+.same-topic {
   background-color: {{ site.data.colors.header-color }};
   clear: none;
-  padding: 5px;
-  border-radius: 20px;
+  padding: 20px;
+  border-radius: 10px;
   display: inline-block;
-  line-height: 10px;
+  line-height: 40px;
 }
diff --git a/en/50-01.html → en/13-03.html b/en/50-01.html → en/13-03.html