<html>
<head>
<title>Experimental Drag and Drop - RJM Programming - July, 2023 ... thanks to https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setData</title>
<script type=text/javascript>
var svgtemp="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='48' width='126' viewport='0 0 100 100'><text x='20%' y='30%' stroke='blue'>1 +</text></svg>";
var clonedata='', clonedatatwo='', pos3=0, pos4=0, secs=0, score=0, tdid='', tdcheck=true;
var tdnum=location.search.split('tdnum=')[1] ? eval(location.search.split('tdnum=')[1].split('&')[0]) : 9;
var across=location.search.split('across=')[1] ? eval(location.search.split('across=')[1].split('&')[0]) : 3;
var simple=location.search.split('simple=')[1] ? true : false;
var operators=['+','-','/','*','%'];
var scoreworth=1;
var answer=Math.min(9, eval(Math.floor(Math.random() * 9) + 1));
var nextanswer=0;
var sofara='';
var parts=[], tdsos=[];
function simplify(infg) {
if (!simple) {
return '' + infg;
}
return '' + infg + '&simple=y';
}
function resolveAfter20Seconds() {
consolelog("starting slow promise");
return new Promise((resolve) => {
setTimeout(() => {
resolve("slow");
consolelog("slow promise is done");
aminterested='';
}, 20000);
});
}
function resolveAfter10Second() {
consolelog("starting fast promise");
return new Promise((resolve) => {
setTimeout(() => {
resolve("fast");
consolelog("fast promise is done");
aminterested='';
}, 10000);
});
}
async function sequentialStart() {
consolelog("== sequentialStart starts ==");
//setTimeout(() => { document.getElementById('twoslowonefast').style.opacity='1.0'; }, 1000);
// 1. Start a timer, log after it's done
const slow = resolveAfter20Seconds();
consolelog(await slow);
// 2. Start the next timer after waiting for the previous one
const fast = resolveAfter10Second();
consolelog(await fast);
consolelog("== sequentialStart done ==");
//document.getElementById('twoslowonefast').style.opacity='0.3';
if (eval('' + sofara.trim().split(' ').length) < 9) {
sequentialStart(); // after 2 seconds, logs "slow", then after 1 more second, "fast"
}
}
async function sequentialWait() {
consolelog("== sequentialWait starts ==");
//document.getElementById('twologslowthenfast').style.opacity='1.0';
// 1. Start two timers without waiting for each other
const slow = resolveAfter20Seconds();
const fast = resolveAfter10Second();
// 2. Wait for the slow timer to complete, and then log the result
consolelog(await slow);
// 3. Wait for the fast timer to complete, and then log the result
consolelog(await fast);
consolelog("== sequentialWait done ==");
//document.getElementById('twologslowthenfast').style.opacity='0.3';
}
async function concurrent1() {
consolelog("== concurrent1 starts ==");
//document.getElementById('threelatertwologslowthenfast').style.opacity='1.0';
// 1. Start two timers concurrently and wait for both to complete
const results = await Promise.all([
resolveAfter20Seconds(),
resolveAfter10Second(),
]);
// 2. Log the results together
consolelog(results[0]);
consolelog(results[1]);
consolelog("== concurrent1 done ==");
//document.getElementById('threelatertwologslowthenfast').style.opacity='0.3';
}
async function concurrent2() {
consolelog("== concurrent2 starts ==");
//document.getElementById('onelogfastoneslow').style.opacity='1.0';
// 1. Start two timers concurrently, log immediately after each one is done
await Promise.all([
(async () => consolelog(await resolveAfter20Seconds()))(),
(async () => consolelog(await resolveAfter10Second()))(),
]);
consolelog("== concurrent2 done ==");
//document.getElementById('onelogfastoneslow').style.opacity='0.3';
}
function preconsolelog() {
consolelog('');
}
function consolelog(blb) {
if ((blb.indexOf(' done') != -1 || 1 == 1) && eval(-1 + nextanswer) < eval(0 + tdsos.length) && eval(0 + tdsos.length) >= 9) {
if (sofara.indexOf(' ' + nextanswer + ' ') != -1) { getnextanswer(); }
//document.title=sofara + ': ' + nextanswer + '.' + tdsos.length + ' ';
//var tdsoss=document.getElementsByTagName('td');
//tdsoss[eval(-1 + nextanswer)].style.backgroundImage='URL("' + svgtemp.replace('>1 +', '>' + parts[eval(-1 + nextanswer)].trim()) + '")';
document.title+='.';
//if (blb == '') {
setTimeout(() => { tdsos[eval(-1 + nextanswer)].style.backgroundImage='URL("' + svgtemp.replace('>1 +', '>' + parts[eval(-1 + nextanswer)].trim()) + '")'; getnextanswer(); }, 200);
//} else {
//setTimeout(() => { tdsos[eval(-1 + nextanswer)].style.backgroundImage='URL("' + svgtemp.replace('>1 +', '>' + parts[eval(-1 + nextanswer)].trim()) + '")'; getnextanswer(); setTimeout(preconsolelog, 100); }, 200);
//}
document.title+='.';
//setTimeout(() => { getnextanswer(); }, 300);
document.title+='.';
//} else {
// document.title+='.';
}
console.log(blb);
}
function sofaraze() {
var sofars=sofara.trim().split(' ');
tdsos=document.getElementsByTagName('td');
var ourscorewith=10;
for (var ii=0; ii<sofars.length; ii++) {
try {
tdsos[eval(-1 + eval('' + sofars[ii]))].style.backgroundImage='URL("' + svgtemp.replace('>1 +', '>' + parts[eval(-1 + eval('' + sofars[ii]))].trim()) + '")';
ourscorewith--;
} catch(hgrjhg) {
console.log('huh=' + eval(-1 + sofars[ii]) + ' via ' + sofara);
}
}
scorewith=ourscorewith;
}
function getnextanswer() {
var sofars=sofara.trim().split(' ');
if (eval('' + sofars.length) < 9) {
nextanswer=eval(0 + eval(sofara.trim().split(' ')[0]));
while (sofara.indexOf(' ' + eval(0 + nextanswer) + ' ') != -1) {
nextanswer=Math.min(9, eval(Math.floor(Math.random() * 9) + 1));
}
sofara+='' + eval(0 + nextanswer) + ' ';
//document.title=sofara + ': ' + nextanswer + '.' + tdsos.length + ' ';
//setTimeout(() => { tdsos[eval(-1 + nextanswer)].style.backgroundImage='URL("' + svgtemp.replace('>1 +', '>' + parts[eval(-1 + nextanswer)].trim()) + '")'; getnextanswer(); }, 1200);
}
}
function makequestion() {
var ii=1;
var proposedanswer=0, solved=false;
tdsos=document.getElementsByTagName('td');
while (!solved) {
parts=[];
for (ii=1; ii<=8; ii++) {
if (simple && (ii % 2) == 1) {
parts.push('' + Math.min(9, eval(Math.floor(Math.random() * 9) + 1)) + ' ');
} else if (simple && (ii % 2) == 0) {
parts.push('' + operators[Math.floor(Math.random() * operators.length)] + ' ');
} else {
parts.push('' + Math.min(9, eval(Math.floor(Math.random() * 9) + 1)) + ' ' + operators[Math.floor(Math.random() * operators.length)] + ' ');
}
}
parts.push('' + Math.min(9, eval(Math.floor(Math.random() * 9) + 1)));
proposedanswer=eval(parts[0] + parts[1] + parts[2] + parts[3] + parts[4] + parts[5] + parts[6] + parts[7] + parts[8]);
if (proposedanswer == 1 || proposedanswer == 2 || proposedanswer == 3 || proposedanswer == 4 || proposedanswer == 5 || proposedanswer == 6 || proposedanswer == 7 || proposedanswer == 8 || proposedanswer == 9) {
solved=true;
}
}
//document.title='' + proposedanswer;
document.getElementById('mytable').setAttribute('data-question', '' + parts[0] + parts[1] + parts[2] + parts[3] + parts[4] + parts[5] + parts[6] + parts[7] + parts[8]);
document.getElementById('source').setAttribute('data-answer', '' + proposedanswer);
for (var itdsos=0; itdsos<tdsos.length; itdsos++) {
tdsos[itdsos].setAttribute('data-answer', '' + eval(1 + itdsos));
if (eval(-1 + answer) == itdsos) {
tdsos[itdsos].style.backgroundImage='URL("' + svgtemp.replace('>1 +', '>' + parts[itdsos].trim()) + '")';
tdsos[itdsos].style.backgroundSize='cover';
tdsos[itdsos].style.backgroundRepeat='no-repeat';
sofara=' ' + eval(0 + answer) + ' ';
} else {
tdsos[itdsos].style.backgroundImage='URL("' + svgtemp.replace('>1 +', '>?').replace('blue', 'red') + '")';
tdsos[itdsos].style.backgroundSize='cover';
tdsos[itdsos].style.backgroundRepeat='no-repeat';
}
}
scorewith=9;
answer=proposedanswer;
getnextanswer();
}
function cloneize() {
var irws=1;
var firsttogo='td33', ifirst=9;
if (tdcheck) {
tdcheck=false;
makequestion();
if (tdnum == 3) {
if (document.getElementById('tr3')) {
document.getElementById('tr3').style.display='none';
document.getElementById('tr2').style.display='none';
}
document.getElementById('td11').rowspan='3';
document.getElementById('td12').rowspan='3';
document.getElementById('td13').rowspan='3';
} else if (tdnum == 6) {
if (document.getElementById('tr3')) {
document.getElementById('tr3').style.display='none';
}
document.getElementById('td21').rowspan='2';
document.getElementById('td22').rowspan='2';
document.getElementById('td23').rowspan='2';
} else if (tdnum < 9) {
if (document.getElementById('td33')) {
for (ifirst=9; ifirst>tdnum; ifirst--) {
document.getElementById(firsttogo).style.display='none';
firsttogo=firsttogo.replace('td12','tdx11').replace('td21','tdx12').replace('td21','tdx13').replace('td22','tdx21').replace('td23','tdx22').replace('td31','tdx23').replace('td32','tdx31').replace('td33','tdx32').replace('tdx','td');
}
}
} else if (tdnum > 9) {
var arow='', rownum=4;
for (var ijk=10; ijk<=tdnum; ijk++) {
if (eval(ijk % 3) == 1) {
rownum=eval(1 + eval(eval(-1 + ijk) / 3));
arow='<t' + 'r id=tr' + rownum + '><t' + 'd id=td' + rownum + '1>' + ijk + '</t' + 'd></t' + 'r>';
//alert('1:' + ijk + ' ' + arow);
} else if (eval(ijk % 3) == 0) {
arow=arow.replace('</t' + 'r>', '<t' + 'd id=td' + rownum + '3>' + ijk + '</t' + 'd></t' + 'r>');
//alert('2:' + ijk + ' ' + arow);
document.getElementById('mytable').innerHTML+=arow;
arow='';
} else {
arow=arow.replace('</t' + 'r>', '<t' + 'd id=td' + rownum + '2>' + ijk + '</t' + 'd></t' + 'r>');
//alert('3:' + ijk + ' ' + arow);
}
}
document.getElementById('mytable').innerHTML+=arow;
}
}
if (across != 3) {
var sofartd='', two=2;
var wasih=document.getElementById('mytable').innerHTML;
var rowas=wasih.split('</' + 'tr>');
for (irws=1; irws<rowas.length; irws++) {
if (rowas[irws].length > 3 && rowas[irws].replace(String.fromCharCode(10),'').indexOf('</') != 0) {
wasih=wasih.replace(rowas[eval(-1 + irws)] + '</' + 'tr>', rowas[eval(-1 + irws)] + '<!-' + '-/' + 'tr>');
}
}
rowas=wasih.split('<t' + 'r');
for (irws=2; irws<rowas.length; irws++) {
if (rowas[irws].length > 3) {
wasih=wasih.replace('<t' + 'r' + rowas[irws], '<t' + 'r' + rowas[irws].replace(rowas[irws].split('>')[0] + '>', '-' + '->'));
}
}
rowas=wasih.split('</t' + 'd>');
for (irws=0; irws<rowas.length; irws++) {
if (eval(eval(1 + irws) % across) == 0) {
sofartd+=rowas[irws] + '</t' + 'd>';
wasih=wasih.replace(sofartd, sofartd + '</t' + 'r><t' + 'r id=tr' + two + '>');
sofartd='';
two++;
} else {
sofartd+=rowas[irws] + '</t' + 'd>';
}
}
document.getElementById('mytable').innerHTML=wasih;
}
if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1){
document.getElementById('source').setAttribute('contenteditable',false);
document.getElementById('strongs').innerHTML='';
}
if (clonedata != document.getElementById('source').innerHTML) {
clonedata=document.getElementById('source').outerHTML.replace(' id=', ' data-id=');
if (!document.getElementById('callback')) { document.getElementById('clone').style.display='inline-block'; }
}
setTimeout(cloneize, 100);
}
function bodyev() {
if (document.getElementById('clone').innerHTML.indexOf(' ...') == -1) {
document.getElementById('clone').innerHTML+=' ... Double click (or right click) where you want clone to be';
}
document.body.ondblclick=function(e) {
e = e || window.event;
e.preventDefault();
if (e.touches) {
if (e.touches[0].pageX) {
pos3 = e.touches[0].pageX;
pos4 = e.touches[0].pageY;
} else {
pos3 = e.touches[0].clientX;
pos4 = e.touches[0].clientY;
}
console.log('pos3=' + pos3 + ',pos4=' + pos4);
} else if (e.clientX || e.clientY) {
pos3 = e.clientX;
pos4 = e.clientY;
} else {
pos3 = e.pageX;
pos4 = e.pageY;
}
if (clonedata.indexOf(' style="') != -1) {
document.getElementById('scratchpad').innerHTML+=clonedata.replace(' style="', ' style="position:absolute;left:' + pos3 + 'px;top:' + pos4 + 'px;');
} else if (clonedata.indexOf(" style='") != -1) {
document.getElementById('scratchpad').innerHTML+=clonedata.replace(" style='", " style='position:absolute;left:" + pos3 + "px;top:" + pos4 + "px;");
} else {
document.getElementById('scratchpad').innerHTML+=clonedata.replace(' ', ' style="position:absolute;left:' + pos3 + 'px;top:' + pos4 + 'px;" ');
}
};
document.body.oncontextmenu=function(e) {
e = e || window.event;
e.preventDefault();
if (e.touches) {
if (e.touches[0].pageX) {
pos3 = e.touches[0].pageX;
pos4 = e.touches[0].pageY;
} else {
pos3 = e.touches[0].clientX;
pos4 = e.touches[0].clientY;
}
console.log('pos3=' + pos3 + ',pos4=' + pos4);
} else if (e.clientX || e.clientY) {
pos3 = e.clientX;
pos4 = e.clientY;
} else {
pos3 = e.pageX;
pos4 = e.pageY;
}
if (clonedata.indexOf(' style="') != -1) {
document.getElementById('scratchpad').innerHTML+=clonedata.replace(' style="', ' style="position:absolute;left:' + pos3 + 'px;top:' + pos4 + 'px;');
} else if (clonedata.indexOf(" style='") != -1) {
document.getElementById('scratchpad').innerHTML+=clonedata.replace(" style='", " style='position:absolute;left:" + pos3 + "px;top:" + pos4 + "px;");
} else {
document.getElementById('scratchpad').innerHTML+=clonedata.replace(' ', ' style="position:absolute;left:' + pos3 + 'px;top:' + pos4 + 'px;" ');
}
};
}
function andlaterstill() {
if (tdid != '') {
document.getElementById(tdid).innerHTML=document.getElementById(tdid).innerHTML.substring(0,1);
} else if (document.getElementById('mytable').innerHTML.indexOf(clonedatatwo) != '') {
document.getElementById('target').innerHTML=document.getElementById('target').innerHTML.split('</ta' + 'ble>')[0] + '</ta' + 'ble>';
}
if (document.getElementsByTagName('div')[0].innerHTML.indexOf(clonedatatwo) != -1) {
document.getElementsByTagName('div')[0].innerHTML=document.getElementsByTagName('div')[0].innerHTML.replace(clonedatatwo,'');
} else if (document.getElementsByTagName('div')[0].innerHTML.indexOf(clonedatatwo.replace('dragging','')) != -1) {
document.getElementsByTagName('div')[0].innerHTML=document.getElementsByTagName('div')[0].innerHTML.replace(clonedatatwo.replace('dragging',''),'');
} else if (document.body.innerHTML.split('<ta' + 'ble')[0].indexOf(clonedatatwo.replace('dragging','')) != -1) {
document.body.innerHTML=document.body.innerHTML.replace(document.body.innerHTML.split('<ta' + 'ble')[0], document.body.innerHTML.split('<ta' + 'ble')[0].replace(clonedatatwo.replace('dragging',''),''));
} else if (document.body.innerHTML.split('<ta' + 'ble')[0].indexOf(clonedatatwo) != -1) {
document.body.innerHTML=document.body.innerHTML.replace(document.body.innerHTML.split('<ta' + 'ble')[0], document.body.innerHTML.split('<ta' + 'ble')[0].replace(clonedatatwo,''));
}
tdid='';
}
function andlater() {
var squares=document.getElementsByTagName('td');
for (var ii=1; ii<=tdnum; ii++) {
if (squares[eval(-1 + ii)].innerHTML.indexOf('<') != -1) {
tdid='' + squares[eval(-1 + ii)].id;
}
}
console.log('tdid=' + tdid);
setTimeout(andlaterstill, 100);
}
function scramble() {
if (!document.getElementById('callback')) {
var iso=0, sofar=',';
var squares=document.getElementsByTagName('td');
secs++;
document.getElementById('score').innerHTML='Score: ' + score + '/' + secs + ' seconds';
for (var ii=1; ii<=tdnum; ii++) {
iso=eval(1 + Math.min(eval(-1 + tdnum),Math.floor(Math.random() * tdnum)));
while (sofar.indexOf(',' + iso + ',') != -1) {
iso=eval(1 + Math.min(eval(-1 + tdnum),Math.floor(Math.random() * tdnum)));
}
squares[eval(-1 + ii)].innerHTML='' + iso + squares[eval(-1 + ii)].innerHTML.substring(1);
sofar+='' + iso + ',';
}
}
}
function scoreingame() {
if (!document.getElementById('callback')) { setInterval(scramble, 1000); }
}
//setTimeout(cloneize, 2000);
sequentialStart(); // after 2 seconds, logs "slow", then after 1 more second, "fast"
// wait above to finish
setTimeout(sequentialWait, 4000); // after 2 seconds, logs "slow" and then "fast"
// wait again
setTimeout(concurrent1, 7000); // same as sequentialWait
// wait again
setTimeout(concurrent2, 10000); // after 1 second, logs "fast", then after 1 more second, "slow"
setInterval(sofaraze, 2000);
</script>
<style>
div {
margin: 0.5em 0;
padding: 2em;
}
#target,
#source {
border: 1px solid black;
padding: 0.5rem;
}
.dragging {
background-color: pink;
}
td {
border: 1px dotted green;
background-color: #f0f0f0;
}
* {
cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='48' width='126' viewport='0 0 100 100'><polyline points='40,2 20,15 80,10 60,20 126,30 86,48' style='fill:none;stroke:black;stroke-width:3' /><text y='90%'>\002753</text><ellipse cx='24' cy='20' rx='22' ry='13' style='fill:purple' /><ellipse cx='22' cy='17' rx='19' ry='12' style='fill:lime' /><ellipse cx='21' cy='14' rx='16' ry='12' style='fill:yellow' /><rect x='40' y='20' width='80' height='25' style='fill:blue'><animate attributeType='CSS' attributeName='opacity' from='1' to='0' dur='5s' repeatCount='indefinite' /></rect>Sorry, your browser does not support inline SVG.</svg>") 16 16, crosshair;
}
</style>
</head>
<body onload="if (simple) { document.getElementById('mybut').innerHTML='Small Integer Simple Game'; } if (1 == 1) { cloneize(); } score=(location.search.split('score=')[1] ? eval('' + decodeURIComponent(location.search.split('score=')[1].split('&')[0])) : 0); secs=(location.search.split('secs=')[1] ? eval('' + decodeURIComponent(location.search.split('secs=')[1].split('&')[0])) : 0); if (eval(score + secs) != 0) { document.getElementById('score').innerHTML='Score ' + score + '/' + secs; } ">
<h1>Experimental Drag and Drop <button id="mybut" title="Click to toggle between hard and simple modes." onclick="simple=!simple; if (simple) { this.innerHTML='Small Integer Simple Game'; location.href=(document.URL.replace('simple=', 'simpXle=') + '&simple=y').replace('.html&','.html?').replace('.htm&','.htm?'); } else { this.innerHTML='Small Integer Hard Game'; location.href=document.URL.replace('simple=', 'simpXle='); }">Small Integer Hard Game</button></h1>
<h3>RJM Programming - October, 2023</h3>
<h3 id="score"></h3>
<h4>Thanks to <a target=_blank title='https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setData' href='//developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setData'>https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setData</a> and <a target=_blank title='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function' href='//developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function'>https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function</a></h4>
<div>
<p id="source" draggable="true" style="background-color:#f0f0f0;">
Select this "answer token", and drag it to the appropriate numbered "drop zone" cell as quick as you can and then release the selection
to move the element.
</p>
</div>
<div id="target">Drop Zone
<table style="width:90%;height:30%;" id="mytable" data-answer="0">
<tr id=tr1><td id="td11">1</td><td id="td12">2</td><td id="td13">3</td></tr>
<tr id=tr2><td id="td21">4</td><td id="td22">5</td><td id="td23">6</td></tr>
<tr id=tr3><td id="td31">7</td><td id="td32">8</td><td id="td33">9</td></tr>
</table>
</div>
<button id="reset" style="display:none;">Reset example</button> <button id="clone" style="display:none;" onclick="bodyev();">Clone content</button>
<div id=scratchpad></div>
<script type=text/javascript>
const source = document.querySelector("#source");
source.addEventListener("dragstart", (ev) => {
console.log("dragStart");
// Change the source element's background color
// to show that drag has started
ev.currentTarget.classList.add("dragging");
// Clear the drag data cache (for all formats/types)
ev.dataTransfer.clearData();
// Set the drag's format and data.
// Use the event target's id for the data
ev.dataTransfer.setData("text/plain", ev.target.id);
});
source.addEventListener("dragend", (ev) =>
ev.target.classList.remove("dragging")
);
const target = document.querySelector("#target");
target.addEventListener("dragover", (ev) => {
console.log("dragOver");
ev.preventDefault();
});
target.addEventListener("drop", (ev) => {
console.log("Drop");
ev.preventDefault();
// Get the data, which is the id of the source element
const data = ev.dataTransfer.getData("text");
const source = document.getElementById(data);
console.log('' + ev.target.id);
if (!document.getElementById('callback')) {
if (('' + ev.target.id).substring(0,2) == 'td' && secs > 0) {
score+=eval(ev.target.innerHTML.substring(0,1));
}
} else if (document.getElementById('callback')) {
secs++;
if (('' + ev.target.getAttribute('data-answer')) == ('' + document.getElementById('source').getAttribute('data-answer'))) {
score+=scoreworth;
document.getElementById('score').innerHTML='Score: ' + score + '/' + secs + '';
} else {
document.getElementById('score').innerHTML='Score: ' + score + '/' + secs + '';
alert('Correct answer was ' + document.getElementById('source').getAttribute('data-answer') + ' = ' + document.getElementById('mytable').getAttribute('data-question') + ' = ' + document.getElementById('source').getAttribute('data-answer'));
}
location.href=document.getElementById('callback').value + '?score=' + score + '&secs=' + simplify(secs);
}
if (1 == 2) {
clonedatatwo=document.getElementById('source').outerHTML;
document.getElementById('mytable').innerHTML=document.getElementById('mytable').innerHTML.replace(clonedatatwo, '');
ev.target.innerHTML=ev.target.innerHTML.substring(0,1) + clonedatatwo;
} else if (secs > 0 && (9 == 9 || ('' + ev.target.id).substring(0,2) == 'td')) {
clonedatatwo=document.getElementById('source').outerHTML;
andlater();
//document.getElementById('mytable').innerHTML=document.getElementById('mytable').innerHTML.replace(clonedatatwo, '');
//ev.target.innerHTML=ev.target.innerHTML.substring(0,1) + clonedatatwo;
//document.getElementById('target').appendChild(source);
if (('' + ev.target.id).substring(0,2) != 'td') {
document.getElementById('target').insertAdjacentHTML('beforeend', clonedatatwo);
} else {
ev.target.insertAdjacentHTML('beforeend', clonedatatwo);
}
} else {
ev.target.appendChild(source);
}
if (ev.touches) {
if (ev.touches[0].pageX) {
pos3 = ev.touches[0].pageX;
pos4 = ev.touches[0].pageY;
} else {
pos3 = ev.touches[0].clientX;
pos4 = ev.touches[0].clientY;
}
console.log('pos3 = ' + pos3 + ',pos4 = ' + pos4);
} else if (ev.clientX || ev.clientY) {
pos3 = ev.clientX;
pos4 = ev.clientY;
console.log('pos3 = ' + pos3 + ' ,pos4 = ' + pos4);
} else {
pos3 = ev.pageX;
pos4 = ev.pageY;
console.log('pos3 = ' + pos3 + ', pos4 = ' + pos4);
}
});
const reset = document.querySelector("#reset");
reset.addEventListener("click", () => document.location.reload());
</script>
<input type='hidden' id='callback' value='./gradual_reveal_game.html'></input>
</body>
</html>