old

2023-03-26 11:45:32 +02:00 · 2023-03-26 11:45:32 +02:00 · 4d47b88b4c
commit 4d47b88b4c
18 changed files with 285 additions and 0 deletions
--- a/assets/audio/A.ogg
+++ b/assets/audio/A.ogg
--- a/assets/audio/B.ogg
+++ b/assets/audio/B.ogg
--- a/assets/audio/C.ogg
+++ b/assets/audio/C.ogg
--- a/assets/fail.png
+++ b/assets/fail.png
--- a/assets/good.png
+++ b/assets/good.png
--- a/assets/images/A.png
+++ b/assets/images/A.png
--- a/assets/images/B.png
+++ b/assets/images/B.png
--- a/assets/images/C.png
+++ b/assets/images/C.png
--- a/assets/letters/A.png
+++ b/assets/letters/A.png
--- a/assets/letters/B.png
+++ b/assets/letters/B.png
--- a/assets/letters/C.png
+++ b/assets/letters/C.png
--- a/assets/play.png
+++ b/assets/play.png
--- a/assets/trashcan.png
+++ b/assets/trashcan.png
--- a/assets/verify.png
+++ b/assets/verify.png
--- a/index.css
+++ b/index.css
@ -0,0 +1,66 @@
+#imageholder{
+    position: absolute;
+    left: 0%;
+    top:0%;
+}
+
+#letterholder{
+    position: absolute;
+    right: 0%;
+    top: 0%;
+}
+
+#activeholder{
+    position: absolute;
+    width: 100%;
+    left: 0%;
+    bottom: 0%;
+}
+
+#activepart{
+    width: fit-content;
+    margin: auto;
+    padding: auto;
+    position: relative;
+}
+
+.place {
+    width: 32px;
+    height: 32px;
+    background-color: lightgray;
+}
+
+#audiopart{
+    background-color: transparent;
+    background-image: url("assets/play.png");
+}
+
+#trashcan{
+    width: 32px;
+    height: 32px;
+    background-color:darksalmon;
+    background-image: url("assets/trashcan.png");
+}
+
+#verify{
+    width: 32px;
+    height: 32px;
+    background-image: url("assets/verify.png");
+    background-color: darksalmon;
+}
+
+.status{
+    width: 64px;
+    height: 64px;
+    opacity: 0;
+    right: -30%;
+    background-image: url("assets/fail.png");
+}
+
+th, td {
+    padding: 16px;
+}
+
+.itemstor > *{
+    margin: 16px;
+}
--- a/index.html
+++ b/index.html
@ -0,0 +1,67 @@
+<html>
+    <head>
+        <title>WAAAAAA</title>
+        <link rel="stylesheet" href="index.css" type="text/css"/>
+        <script src="jquery.min.js"></script>
+        <script src="index.js"></script>
+    </head>
+    <body>
+        <div id="imageholder" class="itemstor">
+        </div>
+        <div id="letterholder" class="itemstor">
+        </div>
+        <div id="activeholder">
+            <div id="activepart">
+                <table>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <div id="verify">
+
+                                </div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <div id="trashcan" ondrop="droptrash(event)" ondragover="allowDrop(event)">
+                                    
+                                </div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <div id="audiopart" class="place">
+
+                                </div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <div id="imageplace" ondrop="drop(event)" ondragover="allowDrop(event)" class="place">
+
+                                </div>
+                            </td>
+                            <td>
+                                <div id="imagestatus" class="status">
+
+                                </div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <div id="letterplace" ondrop="drop(event)" ondragover="allowDrop(event)" class="place">
+
+                                </div>
+                            </td>
+                            <td>
+                                <div id="letterstatus" class="status">
+
+                                </div>
+                            </td>
+                        </tr>   
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </body>
+</html>
--- a/index.js
+++ b/index.js
@ -0,0 +1,150 @@
+var ranid = 1;
+
+var cntdrag = 1;
+
+let data_tabl = ["A", "B", "C"];
+
+let prefix = "assets/";
+
+function cleanup(){
+    var htmls = [];
+    var returntos = [];
+    $("[returnto]").each(function (index){
+        htmls.push($(this).prop("outerHTML"));
+        returntos.push($(this).attr("returnto"));
+        $(this).remove();
+    });
+    for (var x = 0 ; x < returntos.length; x++) {
+        $('[returntarget="' + returntos[x] + '"]').html(htmls[x]);
+    }
+}
+
+function checkAnswers() {
+    let good = "background-image: url(\"assets/good.png\");";
+    let fail = "background-image: url(\"assets/fail.png\");";
+    let audiosrc = $('#audioholderak').attr("datacode");
+    let lettersrc = $('#letterplace').attr("datacode");
+    let imagesrc = $('#imageplace').attr("datacode");
+    if (audiosrc == lettersrc) {
+        $('#letterstatus').attr('style', good);
+        $('#letterstatus').animate({opacity:1}, "slow");
+        setTimeout(function (){
+            $('#letterstatus').animate({opacity:0}, "slow");        
+        });
+    }
+    else {
+        $('#letterstatus').attr('style', fail);
+        $('#letterstatus').animate({opacity:1}, "slow");
+        setTimeout(function (){
+            $('#letterstatus').animate({opacity:0}, "slow");        
+        });
+    }
+
+    if (audiosrc == imagesrc) {
+        $('#imagestatus').attr('style', good);
+        $('#imagestatus').animate({opacity:1}, "slow");
+        setTimeout(function (){
+            $('#imagestatus').animate({opacity:0}, "slow");        
+        });
+    }
+    else {
+        $('#imagestatus').attr('style', fail);
+        $('#imagestatus').animate({opacity:1}, "slow");
+        setTimeout(function (){
+            $('#imagestatus').animate({opacity:0}, "slow");        
+        });
+    }
+    if (audiosrc == imagesrc && audiosrc == lettersrc){
+        cleanup();
+        generatePair();
+    }
+}
+
+function getRandomInt(min, max) {
+    min = Math.ceil(min);
+    max = Math.floor(max);
+    return Math.floor(Math.random() * (max - min) + min); // The maximum is exclusive and the minimum is inclusive
+}
+
+function getRandomElement(array){
+    return array[getRandomInt(0, array.length)];
+}
+  
+function showImages() {
+    for (let i = 0 ; i < data_tabl.length; i++) {
+        let imagepath = prefix + "images/" + data_tabl[i] + ".png";
+        let letterpath = prefix + "letters/" + data_tabl[i] + ".png";
+        
+        let imageholder = $("#imageholder");
+        let letterholder = $("#letterholder");
+
+        imageholder.append("<div returntarget=\"" + ranid + "\" ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\" id=\"imageholderak\" class=\"place holderak\"><img returnto=\"" + ranid + "\" datacode=\"" + data_tabl[i] + "\" draggable=\"true\" ondragstart=\"drag(event)\" src=\"" + imagepath + "\" /></div>");
+        ranid += 1;
+        letterholder.append("<div returntarget=\"" + ranid + "\" ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\" id=\"letterholderak\" class=\"place holderak\"><img returnto=\"" + ranid + "\" datacode=\"" + data_tabl[i] + "\" draggable=\"true\" ondragstart=\"drag(event)\" src=\"" + letterpath + "\" /></div>");
+        ranid += 1;
+    }
+}
+
+function generatePair(){
+    let randomData = getRandomElement(data_tabl);
+
+    let audioplace = $("#audiopart");
+
+    let audiopath = prefix + "audio/" + randomData + ".ogg";
+
+    audioplace.html("<audio id=\"audplay\"><source id=\"audioholderak\" class=\"holderak\" datacode=\"" + randomData + "\" src=\"" + audiopath + "\" type=\"audio/ogg\"/></audio>");
+}
+
+$(function() {
+    generatePair();
+    showImages();
+
+    $("#audiopart").on("click", function (){
+        document.getElementById("audplay").play();
+    });
+
+    $("#verify").on("click", checkAnswers);
+
+    $("#trashcan").on("click", cleanup);
+    
+});
+
+function allowDrop(ev) {
+    ev.preventDefault();
+}
+
+function drag(ev) {
+    ev.dataTransfer.setData("cntdrag", cntdrag);
+    ev.target.setAttribute("cntdrag", cntdrag);
+    cntdrag += 1;
+    ev.dataTransfer.setData("text", ev.target.outerHTML);
+    ev.dataTransfer.setData("returnto", ev.target.getAttribute("returnto"));
+    ev.dataTransfer.setData("datacode", ev.target.getAttribute("datacode"));
+}
+
+function drop(ev) {
+    ev.preventDefault();
+    let data = ev.dataTransfer.getData("text");
+    let cntdrag = ev.dataTransfer.getData("cntdrag");
+    let datacode = ev.dataTransfer.getData("datacode");
+    if (!ev.target.outerHTML.includes("img")){
+        $('[cntdrag="' + cntdrag + '"]').remove();
+        ev.target.setAttribute("datacode", datacode);
+        ev.target.innerHTML = data;
+    }
+    else{
+        let htmldata = ev.dataTransfer.getData("text");
+        let returnto = ev.dataTransfer.getData("returnto");
+        $('[returntarget="' + returnto + '"]').html(htmldata);
+    }
+}
+
+function droptrash(ev) {
+    ev.preventDefault();
+    let cntdragx = ev.dataTransfer.getData("cntdrag");
+    $('[cntdrag="' + cntdragx + '"]').remove();
+    let htmldata = ev.dataTransfer.getData("text");
+    let returnto = ev.dataTransfer.getData("returnto");
+    $('[returntarget="' + returnto + '"]').html(htmldata);
+    
+}
--- a/jquery.min.js
+++ b/jquery.min.js