update tracking

index.css

@@ -126,4 +126,43 @@ td {
 #currentvzor{
     width: unset;
     height: unset;
-}
+}
+
+ /* The switch - the box around the slider */
+ .switch {
+    position: relative;
+    display: inline-block;
+    width: 128px;
+    height: 128px;
+  }
+  
+  /* Hide default HTML checkbox */
+  .switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+  
+  /* The slider */
+  .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 128px;
+    height: 128px;
+    background-color: red;
+    background-image: url("assets/speaker.png");
+    -webkit-transition: .4s;
+    transition: .4s;
+  }
+  
+  input:checked + .slider {
+    background-color: #00FF00 !important;
+  }
+  
+  input:focus + .slider {
+    box-shadow: 0 0 1px #00FF00 !important;
+  }

index.html

@@ -4,7 +4,7 @@
         <meta charset="UTF-8" />
         <title>Sluchová hra</title>
         <link rel="stylesheet" href="index.css" type="text/css"/>
-        <script data-website-id="11366cfe-e3d4-4b98-a19f-7ed471a37f71" src="https://umami.brn.systems/umami.js"></script>
+        <script data-website-id="11366cfe-e3d4-4b98-a19f-7ed471a37f71" src="https://umami.brn.systems/script.js"></script>
         <script src="jquery.min.js"></script>
         <script src="index.js"></script>
     </head>
@@ -70,6 +70,12 @@
                             
                         </div>
                     </td>
+                    <td>
+                        <label class="switch" id="switchcontaineraudio">
+                            <input type="checkbox" id="audiocheckbox" checked>
+                            <span class="slider fixbgimage" id="visualcheckbox"></span>
+                        </label>
+                    </td>
                 </tr>
             </tbody>
         </table>

index.js

@@ -294,7 +294,9 @@ function showImages(word) {
     $(".imageholderak, .letterholderak").each(function(){
        $(this).on("click", function (e){
             let datacode = $(this).attr("datacode");
-            document.getElementById("audplay"+ datacode).play();
+            if ($("#audiocheckbox").prop('checked')){
+                document.getElementById("audplay"+ datacode).play();
+            }
        }) 
     });
 }
@@ -336,11 +338,12 @@ function generateItem(word){
 
     $(".itemholderak").each(function(){
         $(this).on("click", function (e){
-             let datacode = $(this).attr("datacode");
+            let datacode = $(this).attr("datacode");
-             try{
+            try{
-                 umami.trackEvent('Listened to image', { type: 'listenimage', datacode: $(this).attr("datacode") });
+                umami.trackEvent('Listened to image', { type: 'listenimage', datacode: $(this).attr("datacode") });
-                } catch(e) {} 
+            } catch(e) {} 
-             document.getElementById("audplayitem"+ datacode).play();
+            
+            document.getElementById("audplayitem"+ datacode).play();
         }) 
      });
     
@@ -360,10 +363,6 @@ function generatePair(){
 $(function() {
     generatePair();
 
-    $("#audiopart").on("click", function (){
-        document.getElementById("audplay").play();
-    });
-
     $("#verify").on("click", checkAnswers);
 
     $("#trashcan").on("click", cleanup);
@@ -385,7 +384,9 @@ function drag(ev) {
     ev.dataTransfer.setData("datacode", ev.target.getAttribute("datacode"));
     ev.dataTransfer.setData("classy", ev.target.classList);
     let datacode = $(ev.target).attr("datacode");
-    document.getElementById("audplay"+ datacode).play();
+    if ($("#audiocheckbox").prop('checked')){
+        document.getElementById("audplay"+ datacode).play();
+    }
     if (ev.target.parentElement.classList.contains("originalplace")){
         ev.dataTransfer.setData("dragfromoriginal", "YES");
     }