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