Add advanced mode
This commit is contained in:
parent
0546ebd09c
commit
3db8f07621
63
index.css
63
index.css
@ -127,3 +127,66 @@ td {
|
|||||||
width: unset;
|
width: unset;
|
||||||
height: 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%;
|
||||||
|
}
|
@ -70,6 +70,12 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
|
<td>
|
||||||
|
<label class="switch" id="switchcontaineraudio">
|
||||||
|
<input type="checkbox" id="audiocheckbox" checked>
|
||||||
|
<span class="slider round" id="visualcheckbox"></span>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
9
index.js
9
index.js
@ -294,7 +294,9 @@ function showImages(word) {
|
|||||||
$(".imageholderak, .letterholderak").each(function(){
|
$(".imageholderak, .letterholderak").each(function(){
|
||||||
$(this).on("click", function (e){
|
$(this).on("click", function (e){
|
||||||
let datacode = $(this).attr("datacode");
|
let datacode = $(this).attr("datacode");
|
||||||
|
if ($("#audiocheckbox").prop('checked')){
|
||||||
document.getElementById("audplay"+ datacode).play();
|
document.getElementById("audplay"+ datacode).play();
|
||||||
|
}
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -340,6 +342,7 @@ function generateItem(word){
|
|||||||
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() {
|
$(function() {
|
||||||
generatePair();
|
generatePair();
|
||||||
|
|
||||||
$("#audiopart").on("click", function (){
|
|
||||||
document.getElementById("audplay").play();
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#verify").on("click", checkAnswers);
|
$("#verify").on("click", checkAnswers);
|
||||||
|
|
||||||
$("#trashcan").on("click", cleanup);
|
$("#trashcan").on("click", cleanup);
|
||||||
@ -385,7 +384,9 @@ function drag(ev) {
|
|||||||
ev.dataTransfer.setData("datacode", ev.target.getAttribute("datacode"));
|
ev.dataTransfer.setData("datacode", ev.target.getAttribute("datacode"));
|
||||||
ev.dataTransfer.setData("classy", ev.target.classList);
|
ev.dataTransfer.setData("classy", ev.target.classList);
|
||||||
let datacode = $(ev.target).attr("datacode");
|
let datacode = $(ev.target).attr("datacode");
|
||||||
|
if ($("#audiocheckbox").prop('checked')){
|
||||||
document.getElementById("audplay"+ datacode).play();
|
document.getElementById("audplay"+ datacode).play();
|
||||||
|
}
|
||||||
if (ev.target.parentElement.classList.contains("originalplace")){
|
if (ev.target.parentElement.classList.contains("originalplace")){
|
||||||
ev.dataTransfer.setData("dragfromoriginal", "YES");
|
ev.dataTransfer.setData("dragfromoriginal", "YES");
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user