add placeholders

2023-04-01 08:08:45 +02:00
parent ac045dba00
commit e78354b8c4
58 changed files with 103 additions and 62 deletions
@@ -0,0 +1,11 @@
+mx = 8000
+
+x = 0
+alphabet = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
+interval = int(mx/(len(alphabet)))
+with open("genudio.sh", "w") as f:
+    for i in range(0, len(alphabet)):
+        letter = alphabet[x]
+        freq = (i+1) * interval
+        f.write(f'ffmpeg -f lavfi -i "sine=frequency={freq}:duration=5" {letter}.ogg\n')
+        x = x + 1
@@ -0,0 +1,17 @@
+def getRGBfromI(RGBint):
+    blue =  RGBint & 255
+    green = (RGBint >> 8) & 255
+    red =   (RGBint >> 16) & 255
+    return red, green, blue
+
+mx = pow(2,24)-1 # i.e. 16777215
+
+x = 0
+alphabet = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
+interval = int(mx/(len(alphabet)))
+with open("gen.sh", "w") as f:
+    for i in range(0, len(alphabet)):
+        red, green, blue = getRGBfromI(i*interval)
+        letter = alphabet[x]
+        f.write("convert -size 32x32  xc:rgb\(" + str(red) + "," + str(green) + "," + str(blue) + "\) " + letter +".png\n")
+        x = x + 1
@@ -1,15 +1,3 @@
-#imageholder{
-    position: absolute;
-    left: 0%;
-    top:0%;
-}
-
-#letterholder{
-    position: absolute;
-    right: 0%;
-    top: 0%;
-}
-
 #activeholder{
    position: absolute;
    width: 100%;
@@ -61,6 +49,22 @@ th, td {
    padding: 16px;
 }

+.itemcont{
+    width: 100vw;
+}
+
+.itemstor {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin: 10px;
+    overflow-wrap: break-word;
+    width: fit-content;
+    margin: auto;
+    padding: auto;
+    position: relative;
+}
+
 .itemstor > *{
    margin: 16px;
-}
+}
@@ -6,9 +6,13 @@
        <script src="index.js"></script>
    </head>
    <body>
-        <div id="imageholder" class="itemstor">
+        <div id="imagecontainer" class="itemcont">
+            <div id="imageholder" class="itemstor">
+            </div>
        </div>
-        <div id="letterholder" class="itemstor">
+        <div id="lettercontainer" class="itemcont">
+            <div id="letterholder" class="itemstor">
+            </div>
        </div>
        <div id="activeholder">
            <div id="activepart">
@@ -29,18 +33,9 @@
                            </td>
                        </tr>
                        <tr>
-                            <td>
-                                <div id="audiopart" class="place">
+                            <div id="imagesky">

-                                </div>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <div id="imageplace" ondrop="drop(event)" ondragover="allowDrop(event)" class="place">
-
-                                </div>
-                            </td>
+                            </div>
                            <td>
                                <div id="imagestatus" class="status">

@@ -48,11 +43,9 @@
                            </td>
                        </tr>
                        <tr>
-                            <td>
-                                <div id="letterplace" ondrop="drop(event)" ondragover="allowDrop(event)" class="place">
-
-                                </div>
-                            </td>
+                            <div id="lettersky">
+                            
+                            </div>
                            <td>
                                <div id="letterstatus" class="status">

@@ -4,9 +4,21 @@ var cntdrag = 1;

 let data_tabl = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];

-let prefix = "assets/";
+let words = [
+    "AHOJ",
+    "CAU",
+    "TEST"
+];

-let numcolumns = 2;
+function makeSpaceWord(word){
+    let length = word.length;
+    for (var i = 0; i < length; i++) {
+        $("#lettersky").append('<td><div id="letterplace" ondrop="drop(event)" ondragover="allowDrop(event)" class="place"></td>');
+        $("#imagesky").append('<td><div id="imageplace" ondrop="drop(event)" ondragover="allowDrop(event)" class="place"></td>');
+    }
+}
+
+let prefix = "assets/";

 function cleanup(){
    var htmls = [];
@@ -17,14 +29,13 @@ function cleanup(){
        $(this).remove();
    });
    for (var x = 0 ; x < returntos.length; x++) {
-        $('[returntarget="' + returntos[x] + '"]').html(htmls[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) {
@@ -72,46 +83,49 @@ function getRandomElement(array){
    return array[getRandomInt(0, array.length)];
 }
  
-// imageholder.append();
-//         letterholder.append
+function randomize(inarray){
+    var tmp = [];
+    const randomly = () => Math.random() - 0.5;

-function columnize(arrayin, columns){
-    var tmp2 = "<table><tbody>";
-    for (var i = 0; i < arrayin.length; i += columns) {
-        var tmp = "<tr>";
-        for (var x = i; x < i + columns; x++) {
-            if (x > arrayin.length - 1){
-                break;
-            }
-            tmp += "<td>" + arrayin[x] + "</td>";
-        }
-        tmp += "</tr>";
-        tmp2 += tmp;
-    }
-    tmp2 += "</tbody></table>";
-    return tmp2;
+    const traitInfo = Array(inarray.length).fill({}); // for the snippet.
+    const hahainarray = [].concat(inarray).sort(randomly);
+
+    traitInfo.forEach((t, i) => {
+    tmp.push(hahainarray[i]);
+    });
+    return tmp;
 }

 function showImages() {
    var images = [];
    var letters = [];
-
    let imageholder = $("#imageholder");
    let letterholder = $("#letterholder");
-
    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 audiopath = prefix + "audio/" + data_tabl[i] + ".ogg";
        
-        images.push("<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>");
+        images.push("<div returntarget=\"" + ranid + "\" ranid=\"" + ranid + "\" ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\" id=\"imageholderak" + ranid + "\" datacode=\"" + data_tabl[i] + "\" class=\"place grid-item holderak imageholderak\"><img returnto=\"" + ranid + "\" datacode=\"" + data_tabl[i] + "\" draggable=\"true\" ondragstart=\"drag(event)\" src=\"" + imagepath + "\"><audio datacode=\"" + data_tabl[i] + "\" id=\"audplay" + data_tabl[i] + "\"><source id=\"audioholderak" + ranid + "\" class=\"holderak\" datacode=\"" + data_tabl[i] + "\" src=\"" + audiopath + "\" type=\"audio/ogg\"/></audio></img></div>");
        ranid += 1;
-        letters.push("<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>");
+        letters.push("<div returntarget=\"" + ranid + "\" ranid=\"" + ranid + "\" ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\" id=\"letterholderak" + ranid + "\" datacode=\"" + data_tabl[i] + "\" class=\"place grid-item holderak letterholderak\"><img returnto=\"" + ranid + "\" datacode=\"" + data_tabl[i] + "\" draggable=\"true\" ondragstart=\"drag(event)\" src=\"" + letterpath + "\" /></div>");
        ranid += 1;
    }
+    randomize(images).forEach(function (value, index, array){
+        imageholder.append(value);
+    });

-    imageholder.append(columnize(images, numcolumns));
-    letterholder.append(columnize(letters, numcolumns));
-    
+    randomize(letters).forEach(function (value, index, array){
+        letterholder.append(value);
+    });
+
+    $(".imageholderak").each(function(){
+       $(this).on("click", function (e){
+            let datacode = $(this).attr("datacode");
+            document.getElementById("audplay"+ datacode).play();
+
+       }) 
+    });
 }

 function generatePair(){
@@ -149,6 +163,8 @@ function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.outerHTML);
    ev.dataTransfer.setData("returnto", ev.target.getAttribute("returnto"));
    ev.dataTransfer.setData("datacode", ev.target.getAttribute("datacode"));
+    let datacode = $(ev.target).attr("datacode");
+    document.getElementById("audplay"+ datacode).play();
 }

 function drop(ev) {
@@ -164,16 +180,16 @@ function drop(ev) {
    else{
        let htmldata = ev.dataTransfer.getData("text");
        let returnto = ev.dataTransfer.getData("returnto");
-        $('[returntarget="' + returnto + '"]').html(htmldata);
+        //$('[returntarget="' + returnto + '"]').html(htmldata);
    }
 }

 function droptrash(ev) {
    ev.preventDefault();
    let cntdragx = ev.dataTransfer.getData("cntdrag");
-    $('[cntdrag="' + cntdragx + '"]').remove();
+    //$('[cntdrag="' + cntdragx + '"]').remove();
    let htmldata = ev.dataTransfer.getData("text");
    let returnto = ev.dataTransfer.getData("returnto");
-    $('[returntarget="' + returnto + '"]').html(htmldata);
+    //$('[returntarget="' + returnto + '"]').html(htmldata);
    
 }