Add advanced mode

index.css

@@ -127,3 +127,66 @@ td {
     width: unset;
     height: unset;
 }
+
+ /* The switch - the box around the slider */
+ .switch {
+    position: relative;
+    display: inline-block;
+    width: 64px;
+    height: 38px;
+  }
+  
+  /* 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;
+    background-color: #ccc;
+    -webkit-transition: .4s;
+    transition: .4s;
+  }
+  
+  .slider:before {
+    position: absolute;
+    content: "";
+    height: 30px;
+    width: 30px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+  }
+  
+  input:checked + .slider {
+    background-color: #2196F3;
+  }
+  
+  input:focus + .slider {
+    box-shadow: 0 0 1px #2196F3;
+  }
+  
+  input:checked + .slider:before {
+    -webkit-transform: translateX(26px);
+    -ms-transform: translateX(26px);
+    transform: translateX(26px);
+  }
+  
+  /* Rounded sliders */
+  .slider.round {
+    border-radius: 38px;
+  }
+  
+  .slider.round:before {
+    border-radius: 50%;
+  } 

index.html

@@ -70,6 +70,12 @@
                             
                         </div>
                     </td>
+                    <td>
+                        <label class="switch" id="switchcontaineraudio">
+                            <input type="checkbox" id="audiocheckbox" checked>
+                            <span class="slider round" 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");
-             try{
-                 umami.trackEvent('Listened to image', { type: 'listenimage', datacode: $(this).attr("datacode") });
-                } catch(e) {} 
-             document.getElementById("audplayitem"+ datacode).play();
+            let datacode = $(this).attr("datacode");
+            try{
+                umami.trackEvent('Listened to image', { type: 'listenimage', datacode: $(this).attr("datacode") });
+            } catch(e) {} 
+            
+            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");
     }