update tracking

index.css

@@ -51,17 +51,22 @@ body {
 .status {
     width: 128px;
     height: 128px;
-    opacity: 0;
+    display: none;
     background-image: url("assets/fail.png");
 }
 
 th,
 td {
-    padding: 16px;
+    padding: 8px;
     overflow: hidden;
     display: inline-block;
 }
 
+#actiontable{
+    margin-left: auto;
+    margin-right: auto;
+}
+
 .itemcont {
     width: 100vw;
 }
@@ -70,15 +75,15 @@ td {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    margin: 10px;
+    margin-left: auto;
+    margin-right: auto;
     width: fit-content;
-    margin: auto;
     padding: auto;
     position: relative;
 }
 
 .itemstor>div {
-    margin: 16px;
+    margin: 8px;
 }
 .itemstor>div>p {
     margin: 0px;
@@ -88,13 +93,14 @@ td {
     bottom: 4%;
     left: 4%;
     z-index: 10;
-    object-fit: contain;
 }
 
 #vzoritemtd{
-    width: 50%;
+    width: unset;
-    height: 50%;
+    height: unset;
     overflow: unset;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 .itemholderak{
@@ -118,7 +124,45 @@ td {
 }
 
 #currentvzor{
-    object-fit: contain;
+    width: unset;
-    width: 50%;
+    height: unset;
-    height: 50%;
+}
-}
+
+ /* 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>
@@ -15,53 +15,28 @@
         <audio id="failaudio">
             <source src="assets/fail.ogg" type="audio/ogg">
         </audio>
-        <div id="lettercontainer" class="itemcont">
-            <div id="letterholder" class="itemstor">
-            </div>
-        </div>
-        <div id="imagecontainer" class="itemcont">
-            <div id="imageholder" class="itemstor">
-            </div>
-        </div>
         <div id="activeholder">
             <div class="activepart">
                 <table class="activepart">
                     <tbody>
-                        <tr>
+                        <tr id="vzoritemtr" align="center">
                             <td id="vzoritemtd">
                                 <div id="vzoritem">
                                 
                                 </div>
                             </td>
                         </tr>   
-                        <tr>
+                        <tr align="center">
                             <td>
                                 <div id="lettersky" class="activepart">
                                     
                                 </div>
                             </td>
                         </tr>
-                        <tr>
+                        <tr align="center">
                             <td>
                                 <div id="imagesky" class="activepart">
                                     
-                                </div>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <div id="verify" class="activepart fixbgimage">
-        
-                                </div>
-                            </td>
-                            <td>
-                                <div id="trashcan" class="fixbgimage activepart" ondrop="droptrash(event)" ondragover="allowDrop(event)">
-                                    
-                                </div>
-                            </td>
-                            <td>
-                                <div id="refresh" class="fixbgimage activepart">
-                                    
                                 </div>
                             </td>
                         </tr>
@@ -69,5 +44,40 @@
                 </table>
             </div>
         </div>
+        <div id="lettercontainer" class="itemcont">
+            <div id="letterholder" class="itemstor">
+            </div>
+        </div>
+        <div id="imagecontainer" class="itemcont">
+            <div id="imageholder" class="itemstor">
+            </div>
+        </div>
+        <table id="actiontable">
+            <tbody>
+                <tr align="center">
+                    <td>
+                        <div id="verify" class="activepart fixbgimage">
+
+                        </div>
+                    </td>
+                    <td>
+                        <div id="trashcan" class="fixbgimage activepart" ondrop="droptrash(event)" ondragover="allowDrop(event)">
+                            
+                        </div>
+                    </td>
+                    <td>
+                        <div id="refresh" class="fixbgimage activepart">
+                            
+                        </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>
     </body>
 </html>

index.js

@@ -4,7 +4,7 @@ var cntdrag = 1;
 //missing Q, CH, DZ, DŽ, Ä, W, X
 let data_tabl = ["A", "Á", "B", "C", "Č", "D", "Ď", "E", "É", "F", "G", "H", "I", "Í", "J", "K", "L", "Ĺ", "Ľ", "M", "N", "Ň", "O", "Ó", "Ô", "P", "R", "Ŕ", "S", "Š", "T", "Ť", "U", "Ú", "V", "Y", "Ý", "Z", "Ž"];
 
-let tocount = 7;
+let tocount = 6;
 
 let words = [
     "DOM",
@@ -39,8 +39,8 @@ function makeSpaceWord(word){
         imagesky = imagesky + ('<td><div ondrop="drop(event)" id="letterko' + ranid +'" finalplaceindex="' + i +'" ondragover="allowDrop(event)" class="imageplace finalplace finalimageplace place"></td>');
         ranid++;
     }
-    lettersky = lettersky + ('<td><div id="letterstatus" class="status fixbgimage"></div></td>');
+    lettersky = lettersky + ('<td id="letterstatus" class="status fixbgimage"></td>');
-    imagesky = imagesky + ('<td><div id="imagestatus" class="status fixbgimage"></div></td>');
+    imagesky = imagesky + ('<td id="imagestatus" class="status fixbgimage"></td>');
     $("#lettersky").html(lettersky);
     $("#imagesky").html(imagesky);
 }
@@ -72,9 +72,9 @@ function checkAnswers() {
     let fail = "background-image: url(\"assets/fail.png\");";
 
     // $('#letterstatus').attr('style', good);
-    // $('#letterstatus').animate({opacity:1}, "slow");
+    // $('#letterstatus').fadeIn();
     // setTimeout(function (){
-    //     $('#letterstatus').animate({opacity:0}, "slow");        
+    //     $('#letterstatus').fadeOut();        
     // });
     var imagecodes = "";
     var lettercodes = "";
@@ -92,32 +92,32 @@ function checkAnswers() {
     if (vzorcodes == imagecodes)
     {
         $('#imagestatus').attr('style', good);
-        $('#imagestatus').animate({opacity:1}, "slow");
+        $('#imagestatus').fadeIn();
         setTimeout(function (){
-            $('#imagestatus').animate({opacity:0}, "slow");        
+            $('#imagestatus').fadeOut();        
         });
     }
     else{
         $('#imagestatus').attr('style', fail);
-        $('#imagestatus').animate({opacity:1}, "slow");
+        $('#imagestatus').fadeIn();
         setTimeout(function (){
-            $('#imagestatus').animate({opacity:0}, "slow");        
+            $('#imagestatus').fadeOut();        
         });
     }
 
     if (vzorcodes == lettercodes)
     {
         $('#letterstatus').attr('style', good);
-        $('#letterstatus').animate({opacity:1}, "slow");
+        $('#letterstatus').fadeIn();
         setTimeout(function (){
-            $('#letterstatus').animate({opacity:0}, "slow");        
+            $('#letterstatus').fadeOut();        
         });
     }
     else{
         $('#letterstatus').attr('style', fail);
-        $('#letterstatus').animate({opacity:1}, "slow");
+        $('#letterstatus').fadeIn();
         setTimeout(function (){
-            $('#letterstatus').animate({opacity:0}, "slow");        
+            $('#letterstatus').fadeOut();        
         });
     }
     
@@ -203,8 +203,24 @@ function showImages(word) {
 
     var now_count = tmp_tabl.length;
 
+    var tmp2_tabl = [];
+    tmp_tabl.forEach((element) => {
+        if (!tmp2_tabl.includes(element)) {
+            tmp2_tabl.push(element);
+        }
+    });
+    tmp_tabl = tmp2_tabl;
+
+
     while (now_count < tocount){
-        tmp_tabl.push(getRandomElement(data_tabl));
+        var hasORiginal = false;
+        while(!hasORiginal){
+            var newthing = getRandomElement(data_tabl); 
+            if (!tmp_tabl.includes(newthing)){
+                tmp_tabl.push(newthing);
+                hasORiginal = true;
+            }
+        }
         now_count++;
     }
 
@@ -278,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();
+            }
        }) 
     });
 }
@@ -320,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();
         }) 
      });
     
@@ -344,10 +363,6 @@ function generatePair(){
 $(function() {
     generatePair();
 
-    $("#audiopart").on("click", function (){
-        document.getElementById("audplay").play();
-    });
-
     $("#verify").on("click", checkAnswers);
 
     $("#trashcan").on("click", cleanup);
@@ -369,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");
     }