add placeholders
BIN
assets/audio/D.ogg
Normal file
BIN
assets/audio/E.ogg
Normal file
BIN
assets/audio/F.ogg
Normal file
BIN
assets/audio/G.ogg
Normal file
BIN
assets/audio/H.ogg
Normal file
BIN
assets/audio/I.ogg
Normal file
BIN
assets/audio/J.ogg
Normal file
BIN
assets/audio/K.ogg
Normal file
BIN
assets/audio/L.ogg
Normal file
BIN
assets/audio/M.ogg
Normal file
BIN
assets/audio/N.ogg
Normal file
BIN
assets/audio/O.ogg
Normal file
BIN
assets/audio/P.ogg
Normal file
BIN
assets/audio/Q.ogg
Normal file
BIN
assets/audio/R.ogg
Normal file
BIN
assets/audio/S.ogg
Normal file
BIN
assets/audio/T.ogg
Normal file
BIN
assets/audio/U.ogg
Normal file
BIN
assets/audio/V.ogg
Normal file
BIN
assets/audio/W.ogg
Normal file
BIN
assets/audio/X.ogg
Normal file
BIN
assets/audio/Y.ogg
Normal file
BIN
assets/audio/Z.ogg
Normal file
11
assets/audio/audiogen.py
Normal file
@ -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
|
||||||
|
Before Width: | Height: | Size: 120 B After Width: | Height: | Size: 260 B |
|
Before Width: | Height: | Size: 121 B After Width: | Height: | Size: 277 B |
|
Before Width: | Height: | Size: 120 B After Width: | Height: | Size: 277 B |
BIN
assets/images/D.png
Normal file
|
After Width: | Height: | Size: 277 B |
BIN
assets/images/E.png
Normal file
|
After Width: | Height: | Size: 277 B |
BIN
assets/images/F.png
Normal file
|
After Width: | Height: | Size: 277 B |
BIN
assets/images/G.png
Normal file
|
After Width: | Height: | Size: 277 B |
BIN
assets/images/H.png
Normal file
|
After Width: | Height: | Size: 277 B |
BIN
assets/images/I.png
Normal file
|
After Width: | Height: | Size: 277 B |
BIN
assets/images/J.png
Normal file
|
After Width: | Height: | Size: 277 B |
BIN
assets/images/K.png
Normal file
|
After Width: | Height: | Size: 277 B |
BIN
assets/images/L.png
Normal file
|
After Width: | Height: | Size: 277 B |
BIN
assets/images/M.png
Normal file
|
After Width: | Height: | Size: 277 B |
BIN
assets/images/N.png
Normal file
|
After Width: | Height: | Size: 277 B |
BIN
assets/images/O.png
Normal file
|
After Width: | Height: | Size: 277 B |
BIN
assets/images/P.png
Normal file
|
After Width: | Height: | Size: 277 B |
BIN
assets/images/Q.png
Normal file
|
After Width: | Height: | Size: 277 B |
BIN
assets/images/R.png
Normal file
|
After Width: | Height: | Size: 277 B |
BIN
assets/images/S.png
Normal file
|
After Width: | Height: | Size: 277 B |
BIN
assets/images/T.png
Normal file
|
After Width: | Height: | Size: 277 B |
BIN
assets/images/U.png
Normal file
|
After Width: | Height: | Size: 277 B |
BIN
assets/images/V.png
Normal file
|
After Width: | Height: | Size: 277 B |
BIN
assets/images/W.png
Normal file
|
After Width: | Height: | Size: 277 B |
BIN
assets/images/X.png
Normal file
|
After Width: | Height: | Size: 277 B |
BIN
assets/images/Y.png
Normal file
|
After Width: | Height: | Size: 277 B |
BIN
assets/images/Z.png
Normal file
|
After Width: | Height: | Size: 277 B |
17
assets/images/imagegen.py
Normal file
@ -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
|
||||||
BIN
assets/play.png
|
Before Width: | Height: | Size: 300 B |
30
index.css
@ -1,15 +1,3 @@
|
|||||||
#imageholder{
|
|
||||||
position: absolute;
|
|
||||||
left: 0%;
|
|
||||||
top:0%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#letterholder{
|
|
||||||
position: absolute;
|
|
||||||
right: 0%;
|
|
||||||
top: 0%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#activeholder{
|
#activeholder{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -61,6 +49,22 @@ th, td {
|
|||||||
padding: 16px;
|
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 > *{
|
.itemstor > *{
|
||||||
margin: 16px;
|
margin: 16px;
|
||||||
}
|
}
|
||||||
29
index.html
@ -6,9 +6,13 @@
|
|||||||
<script src="index.js"></script>
|
<script src="index.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="imageholder" class="itemstor">
|
<div id="imagecontainer" class="itemcont">
|
||||||
|
<div id="imageholder" class="itemstor">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="letterholder" class="itemstor">
|
<div id="lettercontainer" class="itemcont">
|
||||||
|
<div id="letterholder" class="itemstor">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="activeholder">
|
<div id="activeholder">
|
||||||
<div id="activepart">
|
<div id="activepart">
|
||||||
@ -29,18 +33,9 @@
|
|||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<div id="imagesky">
|
||||||
<div id="audiopart" class="place">
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<div id="imageplace" ondrop="drop(event)" ondragover="allowDrop(event)" class="place">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td>
|
<td>
|
||||||
<div id="imagestatus" class="status">
|
<div id="imagestatus" class="status">
|
||||||
|
|
||||||
@ -48,11 +43,9 @@
|
|||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<div id="lettersky">
|
||||||
<div id="letterplace" ondrop="drop(event)" ondragover="allowDrop(event)" class="place">
|
|
||||||
|
</div>
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td>
|
<td>
|
||||||
<div id="letterstatus" class="status">
|
<div id="letterstatus" class="status">
|
||||||
|
|
||||||
|
|||||||
78
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 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(){
|
function cleanup(){
|
||||||
var htmls = [];
|
var htmls = [];
|
||||||
@ -17,14 +29,13 @@ function cleanup(){
|
|||||||
$(this).remove();
|
$(this).remove();
|
||||||
});
|
});
|
||||||
for (var x = 0 ; x < returntos.length; x++) {
|
for (var x = 0 ; x < returntos.length; x++) {
|
||||||
$('[returntarget="' + returntos[x] + '"]').html(htmls[x]);
|
//$('[returntarget="' + returntos[x] + '"]').html(htmls[x]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function checkAnswers() {
|
function checkAnswers() {
|
||||||
let good = "background-image: url(\"assets/good.png\");";
|
let good = "background-image: url(\"assets/good.png\");";
|
||||||
let fail = "background-image: url(\"assets/fail.png\");";
|
let fail = "background-image: url(\"assets/fail.png\");";
|
||||||
let audiosrc = $('#audioholderak').attr("datacode");
|
|
||||||
let lettersrc = $('#letterplace').attr("datacode");
|
let lettersrc = $('#letterplace').attr("datacode");
|
||||||
let imagesrc = $('#imageplace').attr("datacode");
|
let imagesrc = $('#imageplace').attr("datacode");
|
||||||
if (audiosrc == lettersrc) {
|
if (audiosrc == lettersrc) {
|
||||||
@ -72,46 +83,49 @@ function getRandomElement(array){
|
|||||||
return array[getRandomInt(0, array.length)];
|
return array[getRandomInt(0, array.length)];
|
||||||
}
|
}
|
||||||
|
|
||||||
// imageholder.append();
|
function randomize(inarray){
|
||||||
// letterholder.append
|
var tmp = [];
|
||||||
|
const randomly = () => Math.random() - 0.5;
|
||||||
|
|
||||||
function columnize(arrayin, columns){
|
const traitInfo = Array(inarray.length).fill({}); // for the snippet.
|
||||||
var tmp2 = "<table><tbody>";
|
const hahainarray = [].concat(inarray).sort(randomly);
|
||||||
for (var i = 0; i < arrayin.length; i += columns) {
|
|
||||||
var tmp = "<tr>";
|
traitInfo.forEach((t, i) => {
|
||||||
for (var x = i; x < i + columns; x++) {
|
tmp.push(hahainarray[i]);
|
||||||
if (x > arrayin.length - 1){
|
});
|
||||||
break;
|
return tmp;
|
||||||
}
|
|
||||||
tmp += "<td>" + arrayin[x] + "</td>";
|
|
||||||
}
|
|
||||||
tmp += "</tr>";
|
|
||||||
tmp2 += tmp;
|
|
||||||
}
|
|
||||||
tmp2 += "</tbody></table>";
|
|
||||||
return tmp2;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function showImages() {
|
function showImages() {
|
||||||
var images = [];
|
var images = [];
|
||||||
var letters = [];
|
var letters = [];
|
||||||
|
|
||||||
let imageholder = $("#imageholder");
|
let imageholder = $("#imageholder");
|
||||||
let letterholder = $("#letterholder");
|
let letterholder = $("#letterholder");
|
||||||
|
|
||||||
for (let i = 0 ; i < data_tabl.length; i++) {
|
for (let i = 0 ; i < data_tabl.length; i++) {
|
||||||
let imagepath = prefix + "images/" + data_tabl[i] + ".png";
|
let imagepath = prefix + "images/" + data_tabl[i] + ".png";
|
||||||
let letterpath = prefix + "letters/" + 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;
|
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;
|
ranid += 1;
|
||||||
}
|
}
|
||||||
|
randomize(images).forEach(function (value, index, array){
|
||||||
|
imageholder.append(value);
|
||||||
|
});
|
||||||
|
|
||||||
imageholder.append(columnize(images, numcolumns));
|
randomize(letters).forEach(function (value, index, array){
|
||||||
letterholder.append(columnize(letters, numcolumns));
|
letterholder.append(value);
|
||||||
|
});
|
||||||
|
|
||||||
|
$(".imageholderak").each(function(){
|
||||||
|
$(this).on("click", function (e){
|
||||||
|
let datacode = $(this).attr("datacode");
|
||||||
|
document.getElementById("audplay"+ datacode).play();
|
||||||
|
|
||||||
|
})
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function generatePair(){
|
function generatePair(){
|
||||||
@ -149,6 +163,8 @@ function drag(ev) {
|
|||||||
ev.dataTransfer.setData("text", ev.target.outerHTML);
|
ev.dataTransfer.setData("text", ev.target.outerHTML);
|
||||||
ev.dataTransfer.setData("returnto", ev.target.getAttribute("returnto"));
|
ev.dataTransfer.setData("returnto", ev.target.getAttribute("returnto"));
|
||||||
ev.dataTransfer.setData("datacode", ev.target.getAttribute("datacode"));
|
ev.dataTransfer.setData("datacode", ev.target.getAttribute("datacode"));
|
||||||
|
let datacode = $(ev.target).attr("datacode");
|
||||||
|
document.getElementById("audplay"+ datacode).play();
|
||||||
}
|
}
|
||||||
|
|
||||||
function drop(ev) {
|
function drop(ev) {
|
||||||
@ -164,16 +180,16 @@ function drop(ev) {
|
|||||||
else{
|
else{
|
||||||
let htmldata = ev.dataTransfer.getData("text");
|
let htmldata = ev.dataTransfer.getData("text");
|
||||||
let returnto = ev.dataTransfer.getData("returnto");
|
let returnto = ev.dataTransfer.getData("returnto");
|
||||||
$('[returntarget="' + returnto + '"]').html(htmldata);
|
//$('[returntarget="' + returnto + '"]').html(htmldata);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function droptrash(ev) {
|
function droptrash(ev) {
|
||||||
ev.preventDefault();
|
ev.preventDefault();
|
||||||
let cntdragx = ev.dataTransfer.getData("cntdrag");
|
let cntdragx = ev.dataTransfer.getData("cntdrag");
|
||||||
$('[cntdrag="' + cntdragx + '"]').remove();
|
//$('[cntdrag="' + cntdragx + '"]').remove();
|
||||||
let htmldata = ev.dataTransfer.getData("text");
|
let htmldata = ev.dataTransfer.getData("text");
|
||||||
let returnto = ev.dataTransfer.getData("returnto");
|
let returnto = ev.dataTransfer.getData("returnto");
|
||||||
$('[returntarget="' + returnto + '"]').html(htmldata);
|
//$('[returntarget="' + returnto + '"]').html(htmldata);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||