diff --git a/index.css b/index.css index 5e48c76..663ecb9 100644 --- a/index.css +++ b/index.css @@ -126,4 +126,67 @@ td { #currentvzor{ width: unset; height: unset; -} \ No newline at end of file +} + + /* 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%; + } \ No newline at end of file diff --git a/index.html b/index.html index 7d41bdf..ccd5461 100644 --- a/index.html +++ b/index.html @@ -70,6 +70,12 @@ + + + diff --git a/index.js b/index.js index 6fc9757..1e6d195 100644 --- a/index.js +++ b/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"); }