diff --git a/assets/audio/A.ogg b/assets/audio/A.ogg index f8d97c5..074d979 100644 Binary files a/assets/audio/A.ogg and b/assets/audio/A.ogg differ diff --git a/assets/audio/B.ogg b/assets/audio/B.ogg index c618e5a..a7374a5 100644 Binary files a/assets/audio/B.ogg and b/assets/audio/B.ogg differ diff --git a/assets/audio/C.ogg b/assets/audio/C.ogg index 2a64aa4..8d3b0fe 100644 Binary files a/assets/audio/C.ogg and b/assets/audio/C.ogg differ diff --git a/assets/audio/D.ogg b/assets/audio/D.ogg new file mode 100644 index 0000000..2645343 Binary files /dev/null and b/assets/audio/D.ogg differ diff --git a/assets/audio/E.ogg b/assets/audio/E.ogg new file mode 100644 index 0000000..2b68810 Binary files /dev/null and b/assets/audio/E.ogg differ diff --git a/assets/audio/F.ogg b/assets/audio/F.ogg new file mode 100644 index 0000000..2d7f5a9 Binary files /dev/null and b/assets/audio/F.ogg differ diff --git a/assets/audio/G.ogg b/assets/audio/G.ogg new file mode 100644 index 0000000..47b8caa Binary files /dev/null and b/assets/audio/G.ogg differ diff --git a/assets/audio/H.ogg b/assets/audio/H.ogg new file mode 100644 index 0000000..0513562 Binary files /dev/null and b/assets/audio/H.ogg differ diff --git a/assets/audio/I.ogg b/assets/audio/I.ogg new file mode 100644 index 0000000..d93e41f Binary files /dev/null and b/assets/audio/I.ogg differ diff --git a/assets/audio/J.ogg b/assets/audio/J.ogg new file mode 100644 index 0000000..6b5ef86 Binary files /dev/null and b/assets/audio/J.ogg differ diff --git a/assets/audio/K.ogg b/assets/audio/K.ogg new file mode 100644 index 0000000..139bf2c Binary files /dev/null and b/assets/audio/K.ogg differ diff --git a/assets/audio/L.ogg b/assets/audio/L.ogg new file mode 100644 index 0000000..a3397f6 Binary files /dev/null and b/assets/audio/L.ogg differ diff --git a/assets/audio/M.ogg b/assets/audio/M.ogg new file mode 100644 index 0000000..5ec8532 Binary files /dev/null and b/assets/audio/M.ogg differ diff --git a/assets/audio/N.ogg b/assets/audio/N.ogg new file mode 100644 index 0000000..0c0d2d4 Binary files /dev/null and b/assets/audio/N.ogg differ diff --git a/assets/audio/O.ogg b/assets/audio/O.ogg new file mode 100644 index 0000000..4610b0a Binary files /dev/null and b/assets/audio/O.ogg differ diff --git a/assets/audio/P.ogg b/assets/audio/P.ogg new file mode 100644 index 0000000..2d12e1b Binary files /dev/null and b/assets/audio/P.ogg differ diff --git a/assets/audio/Q.ogg b/assets/audio/Q.ogg new file mode 100644 index 0000000..f25b503 Binary files /dev/null and b/assets/audio/Q.ogg differ diff --git a/assets/audio/R.ogg b/assets/audio/R.ogg new file mode 100644 index 0000000..c5be29b Binary files /dev/null and b/assets/audio/R.ogg differ diff --git a/assets/audio/S.ogg b/assets/audio/S.ogg new file mode 100644 index 0000000..6195412 Binary files /dev/null and b/assets/audio/S.ogg differ diff --git a/assets/audio/T.ogg b/assets/audio/T.ogg new file mode 100644 index 0000000..4e37de7 Binary files /dev/null and b/assets/audio/T.ogg differ diff --git a/assets/audio/U.ogg b/assets/audio/U.ogg new file mode 100644 index 0000000..4d79abe Binary files /dev/null and b/assets/audio/U.ogg differ diff --git a/assets/audio/V.ogg b/assets/audio/V.ogg new file mode 100644 index 0000000..bd7e36c Binary files /dev/null and b/assets/audio/V.ogg differ diff --git a/assets/audio/W.ogg b/assets/audio/W.ogg new file mode 100644 index 0000000..b4179ca Binary files /dev/null and b/assets/audio/W.ogg differ diff --git a/assets/audio/X.ogg b/assets/audio/X.ogg new file mode 100644 index 0000000..591457c Binary files /dev/null and b/assets/audio/X.ogg differ diff --git a/assets/audio/Y.ogg b/assets/audio/Y.ogg new file mode 100644 index 0000000..231f7b0 Binary files /dev/null and b/assets/audio/Y.ogg differ diff --git a/assets/audio/Z.ogg b/assets/audio/Z.ogg new file mode 100644 index 0000000..8c4aa33 Binary files /dev/null and b/assets/audio/Z.ogg differ diff --git a/assets/audio/audiogen.py b/assets/audio/audiogen.py new file mode 100644 index 0000000..07ef3f0 --- /dev/null +++ b/assets/audio/audiogen.py @@ -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 diff --git a/assets/images/A.png b/assets/images/A.png index 14bb205..b6499c9 100644 Binary files a/assets/images/A.png and b/assets/images/A.png differ diff --git a/assets/images/B.png b/assets/images/B.png index 5bf7bda..0bb94a0 100644 Binary files a/assets/images/B.png and b/assets/images/B.png differ diff --git a/assets/images/C.png b/assets/images/C.png index 0ff0925..f2b50e4 100644 Binary files a/assets/images/C.png and b/assets/images/C.png differ diff --git a/assets/images/D.png b/assets/images/D.png new file mode 100644 index 0000000..ae84faa Binary files /dev/null and b/assets/images/D.png differ diff --git a/assets/images/E.png b/assets/images/E.png new file mode 100644 index 0000000..2bf2df7 Binary files /dev/null and b/assets/images/E.png differ diff --git a/assets/images/F.png b/assets/images/F.png new file mode 100644 index 0000000..263c96e Binary files /dev/null and b/assets/images/F.png differ diff --git a/assets/images/G.png b/assets/images/G.png new file mode 100644 index 0000000..6320cc3 Binary files /dev/null and b/assets/images/G.png differ diff --git a/assets/images/H.png b/assets/images/H.png new file mode 100644 index 0000000..7fc809a Binary files /dev/null and b/assets/images/H.png differ diff --git a/assets/images/I.png b/assets/images/I.png new file mode 100644 index 0000000..7818169 Binary files /dev/null and b/assets/images/I.png differ diff --git a/assets/images/J.png b/assets/images/J.png new file mode 100644 index 0000000..17b1cf7 Binary files /dev/null and b/assets/images/J.png differ diff --git a/assets/images/K.png b/assets/images/K.png new file mode 100644 index 0000000..fd3c2b3 Binary files /dev/null and b/assets/images/K.png differ diff --git a/assets/images/L.png b/assets/images/L.png new file mode 100644 index 0000000..981c7fa Binary files /dev/null and b/assets/images/L.png differ diff --git a/assets/images/M.png b/assets/images/M.png new file mode 100644 index 0000000..fdc11be Binary files /dev/null and b/assets/images/M.png differ diff --git a/assets/images/N.png b/assets/images/N.png new file mode 100644 index 0000000..8cc9586 Binary files /dev/null and b/assets/images/N.png differ diff --git a/assets/images/O.png b/assets/images/O.png new file mode 100644 index 0000000..846a83a Binary files /dev/null and b/assets/images/O.png differ diff --git a/assets/images/P.png b/assets/images/P.png new file mode 100644 index 0000000..cf9570b Binary files /dev/null and b/assets/images/P.png differ diff --git a/assets/images/Q.png b/assets/images/Q.png new file mode 100644 index 0000000..c80438a Binary files /dev/null and b/assets/images/Q.png differ diff --git a/assets/images/R.png b/assets/images/R.png new file mode 100644 index 0000000..0f40cd4 Binary files /dev/null and b/assets/images/R.png differ diff --git a/assets/images/S.png b/assets/images/S.png new file mode 100644 index 0000000..39784dd Binary files /dev/null and b/assets/images/S.png differ diff --git a/assets/images/T.png b/assets/images/T.png new file mode 100644 index 0000000..782e58a Binary files /dev/null and b/assets/images/T.png differ diff --git a/assets/images/U.png b/assets/images/U.png new file mode 100644 index 0000000..46655f6 Binary files /dev/null and b/assets/images/U.png differ diff --git a/assets/images/V.png b/assets/images/V.png new file mode 100644 index 0000000..c721396 Binary files /dev/null and b/assets/images/V.png differ diff --git a/assets/images/W.png b/assets/images/W.png new file mode 100644 index 0000000..af67ebe Binary files /dev/null and b/assets/images/W.png differ diff --git a/assets/images/X.png b/assets/images/X.png new file mode 100644 index 0000000..1625092 Binary files /dev/null and b/assets/images/X.png differ diff --git a/assets/images/Y.png b/assets/images/Y.png new file mode 100644 index 0000000..95e3763 Binary files /dev/null and b/assets/images/Y.png differ diff --git a/assets/images/Z.png b/assets/images/Z.png new file mode 100644 index 0000000..fbcee17 Binary files /dev/null and b/assets/images/Z.png differ diff --git a/assets/images/imagegen.py b/assets/images/imagegen.py new file mode 100644 index 0000000..22fcbda --- /dev/null +++ b/assets/images/imagegen.py @@ -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 diff --git a/assets/play.png b/assets/play.png deleted file mode 100644 index 60ab0e3..0000000 Binary files a/assets/play.png and /dev/null differ diff --git a/index.css b/index.css index 60d49c1..80902ef 100644 --- a/index.css +++ b/index.css @@ -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; -} +} \ No newline at end of file diff --git a/index.html b/index.html index 0d53502..4a40d13 100644 --- a/index.html +++ b/index.html @@ -6,9 +6,13 @@ -
+
+
+
-
+
+
+
@@ -29,18 +33,9 @@ - -
+
-
- - - - -
- -
- +
@@ -48,11 +43,9 @@ - -
- -
- +
+ +
diff --git a/index.js b/index.js index 12ffd70..73fddf5 100644 --- a/index.js +++ b/index.js @@ -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('
'); + $("#imagesky").append('
'); + } +} + +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 = ""; - for (var i = 0; i < arrayin.length; i += columns) { - var tmp = ""; - for (var x = i; x < i + columns; x++) { - if (x > arrayin.length - 1){ - break; - } - tmp += ""; - } - tmp += ""; - tmp2 += tmp; - } - tmp2 += "
" + arrayin[x] + "
"; - 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("
"); + images.push("
"); ranid += 1; - letters.push("
"); + letters.push("
"); 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); }