old
This commit is contained in:
commit
4d47b88b4c
BIN
assets/audio/A.ogg
Normal file
BIN
assets/audio/A.ogg
Normal file
Binary file not shown.
BIN
assets/audio/B.ogg
Normal file
BIN
assets/audio/B.ogg
Normal file
Binary file not shown.
BIN
assets/audio/C.ogg
Normal file
BIN
assets/audio/C.ogg
Normal file
Binary file not shown.
BIN
assets/fail.png
Normal file
BIN
assets/fail.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 695 B |
BIN
assets/good.png
Normal file
BIN
assets/good.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 580 B |
BIN
assets/images/A.png
Normal file
BIN
assets/images/A.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 120 B |
BIN
assets/images/B.png
Normal file
BIN
assets/images/B.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 121 B |
BIN
assets/images/C.png
Normal file
BIN
assets/images/C.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 120 B |
BIN
assets/letters/A.png
Normal file
BIN
assets/letters/A.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 255 B |
BIN
assets/letters/B.png
Normal file
BIN
assets/letters/B.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 246 B |
BIN
assets/letters/C.png
Normal file
BIN
assets/letters/C.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 272 B |
BIN
assets/play.png
Normal file
BIN
assets/play.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 300 B |
BIN
assets/trashcan.png
Normal file
BIN
assets/trashcan.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 267 B |
BIN
assets/verify.png
Normal file
BIN
assets/verify.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 290 B |
66
index.css
Normal file
66
index.css
Normal file
@ -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;
|
||||
}
|
||||
67
index.html
Normal file
67
index.html
Normal file
@ -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>
|
||||
150
index.js
Normal file
150
index.js
Normal file
@ -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);
|
||||
|
||||
}
|
||||
2
jquery.min.js
vendored
Normal file
2
jquery.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user