<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>
<style>
th.source {
border: 1px solid transparent;
}
</style>
<script type=text/javascript>
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 sdone=false;
var sourceid='sou' + 'rce';
var shuffle=('' + location.hash + ' ' + location.search + ' ').split('shuffle=')[1] ? true : false;
var yourblurb=location.search.split('yourblurb=')[1] ? decodeURIComponent('' + location.hash + ' ' + location.search.split('yourblurb=')[1].split('&')[0]).replace(/\+/g,' ').replace(/\ \ \ /g,' + ') : '';
var sourcenum=location.search.split('sourcenum=')[1] ? Math.floor(eval(('' + location.search.split('sourcenum=')[1].split('&')[0]) + '.0')) : 1;
if ((document.URL.split('#')[0] + '&').indexOf('sourcenum=&') != -1 && sourcenum == 1) { sourcenum=0; }
var originalsn=sourcenum;
var originalsh=shuffle;
var origsnc='';
var bdone=false;
var lastbco=null;

function askmore() {
var yb=prompt('Optionally enter your own new sentence to set for the user to unscramble.', '');
if (yb != null) {
if (yb.trim() != '') {
location.href=(document.URL.replace(('#' + location.hash).replace('##','#').replace(/^\#$/g,''),'') + ('#' + location.hash).replace('##','#').replace(/^\#$/g,'')).replace('sourcenum=', 'sourceXnum=').replace('yourblurb=', 'yourXblurb=').replace('?', '?yourblurb=' + encodeURIComponent(yb) + '&sourcenum=&').replace('#','&');
}
}
}

function cloneize() {
var irws=1;
var firsttogo='td33', ifirst=9;
if (tdcheck) {
tdcheck=false;

if (shuffle) {
document.getElementById('spmore').innerHTML='<a title="Set your own sentence for the user to unscramble." style=text-decoration:none;cursor:pointer; onclick=askmore();>+</a>';
}

if (yourblurb != '') {
document.getElementById('source').innerHTML=yourblurb;
yourblurb='';
}

if (sourcenum <= 0 && !sdone) {
var sncx=document.getElementById('source').innerText;
var swordsx=sncx.split(' ');
if (tdnum == 9 && document.URL.indexOf('tdnum=') == -1) {
tdnum=eval('' + swordsx.length);
}
} else if (sourcenum != 1 && !sdone && tdnum == 9) {
tdnum=eval('' + sourcenum);
}

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(sourceid).setAttribute('contenteditable',false);
document.getElementById('strongs').innerHTML='';
}
if (clonedata != document.getElementById(sourceid).innerHTML) {
clonedata=document.getElementById(sourceid).outerHTML.replace(' id=', ' data-id=');
if (!document.getElementById('callback')) { document.getElementById('clone').style.display='inline-block'; }
}
if (sourcenum != 1 && !sdone) {
sdone=true;
var snc=document.getElementById('source').innerText;
origsnc=snc;
var swords=snc.split(' ');
var ourone=1, onepos=0;
var sarr=[], sarrsofar=',';
var ccbit=' cellpadding=0 cellspacing=0 ', onerand='';
var spanstuff='', kspan=0;
if (eval('' + sourcenum) == eval('' + swords.length) || eval('' + sourcenum) <= 0 || shuffle) {
if (eval('' + sourcenum) <= 0) { sourcenum=eval('' + swords.length); }
for (var inb=0; inb<sourcenum; inb++) {

if (!shuffle) {
sarr.push(inb);
} else {
if (sarrsofar == ',') {
onerand='' + Math.floor(Math.random() * sourcenum);
sarrsofar+='' + onerand + ',';
sarr.push(eval(onerand));
} else {
while (sarrsofar.indexOf(',' + onerand + ',') != -1) {
onerand='' + Math.floor(Math.random() * sourcenum);
}
sarrsofar+='' + onerand + ',';
sarr.push(eval(onerand));
}
}

}
ourone=-1;
ccbit=' cellpadding=2 cellspacing=0 ';
setInterval(shufflegamecheck, 3000);
} else if (eval('' + snc.length) > eval('' + sourcenum)) {
ourone=Math.floor(eval(eval('' + snc.length) / eval('' + sourcenum)));
}
for (kspan=0; kspan<eval('' + sourcenum); kspan++) {
if (ourone < 0) {
spanstuff+='<span class=source draggable="true" id=span' + kspan + '>' + ('' + swords[sarr[kspan]]).replace(/undefined$/g, '') + '</span>';
} else if (eval(eval('' + onepos) + eval('' + ourone)) < eval('' + snc.length) && eval(1 + kspan) != eval('' + sourcenum)) {
spanstuff+='<span class=source draggable="true" id=span' + kspan + '>' + snc.substring(onepos).substring(0,ourone) + '</span>';
} else if (eval('' + onepos) < eval('' + snc.length)) {
//alert(snc.substring(onepos));
spanstuff+='<span class=source draggable="true" id=span' + kspan + '>' + snc.substring(onepos) + '</span>';
} else {
spanstuff+='<span class=source draggable="true" id=span' + kspan + '> </span>';
}
onepos+=ourone;
}
document.getElementById('dsource').innerHTML='<ta' + 'ble' + ccbit + ' id=source style="background-color:#f0f0f0;"><t' + 'r>' + spanstuff.replace(/span/g, 'th') + '</t' + 'r></ta' + 'ble><br>';
//document.getElementById('dsource').style.textAlign='left';
if (document.getElementById('mybut') && originalsn <= 0 && originalsh) {
document.getElementById('mybut').innerHTML='Piece Sentence Back Together Again Game';
document.getElementById('dsource').style.width='100%';
document.getElementById('dsource').style.display='inline-block';
document.getElementById('source').align='left';
} //else {
//alert(originalsn);
//alert(originalsh);
//}
setTimeout(aathen, 50);
setTimeout(cloneize, 100);
}

function workalert(insg) {
var outsg=insg;
for (var ii=sourcenum; ii>=1; ii--) {
outsg=outsg.replace('' + ii, '');
}
insg=outsg;
outsg='';
for (var iii=0; iii<insg.length; iii++) {
if (insg.charAt(iii) <= 32) {
outsg+=' ';
} else {
outsg+=insg.substring(iii).substring(0,1);
}
}
while (outsg.indexOf(' ') != -1) {
outsg=outsg.replace(' ', ' ');
}
return outsg;
}

function shufflegamecheck() {
if (document.getElementById('source').innerText.trim() == '' && !bdone) {
if (workalert(document.getElementsByTagName('tab' + 'le')[1].innerText).trim() == origsnc.trim()) {
bdone=true;
alert('Congratulations on piecing back together ... ' + String.fromCharCode(10) + String.fromCharCode(10) + origsnc);
} else {
bdone=true;
alert('Bad luck not piecing back together ... ' + String.fromCharCode(10) + String.fromCharCode(10) + origsnc + String.fromCharCode(10) + String.fromCharCode(10) + " ... when you got ... " + String.fromCharCode(10) + String.fromCharCode(10) + workalert(document.getElementsByTagName('tab' + 'le')[1].innerText).trim());
}
location.href=document.URL;
}
}

function aathen() {
for (var kspan=0; kspan<eval('' + sourcenum); kspan++) {
document.getElementById('th' + kspan).addEventListener("dragstart", (ev) => {
console.log("dragStart");
sourceid='' + ev.target.id;
// 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);
});
document.getElementById('th' + kspan).addEventListener("dragend", (ev) =>
ev.target.classList.remove("dragging")
);
}
//alert(spanstuff);
}
}

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);

</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;
}

</style>
</head>
<body onload="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" onclick="scoreingame();">Game</button></h1>
<h3>RJM Programming <span id=spmore>-</span> July, 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></h4>
<div id=dsource>
<p id="source" class="source" draggable="true" contenteditable="true" style="background-color:#f0f0f0;">
Select this <strong id=strongs>editable</strong> element, drag it to the drop zone and then release the selection
to move the element.
</p>
</div>
<div id="target">Drop Zone
<table style="width:90%;height:30%;" id="mytable">
<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">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");
sourceid='' + ev.target.id;
// 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.style.cursor='progress';
ev.target.classList.remove("dragging")
);

const target = document.querySelector("#target");
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile/i) && ('' + source.outerHTML).indexOf('<p') == 0 && ('' + target.outerHTML).indexOf('<span') == -1 && ('' + target.outerHTML).indexOf('>Drop Zone') != -1 && document.body.innerHTML.indexOf('Numbe' + 'rs Guessi' + 'ng Ga' + 'me') != -1) {
target.innerHTML='<span id=sdropz>Drop Zone</span>' + target.outerHTML.split('>Drop Zone')[1].split('</div>')[0];
}
target.addEventListener("dragover", (ev) => {
if (lastbco) { lastbco.style.backgroundColor='white'; lastbco=null; }
//console.log("dragOver " + ev.target.id + ' ' + ('' + ev.target.style.backgroundColor).replace('white','') + ' ' + document.body.innerHTML.indexOf('tab' + 'lece' + 'llb' + 'c'));
ev.preventDefault();
if (('' + ev.target.id).indexOf('td') == 0 && ('' + ev.target.style.backgroundColor).trim().replace('white','') == '' && document.body.innerHTML.indexOf('Numbe' + 'rs Guessi' + 'ng Ga' + 'me') != -1) {
//document.getElementById(sourceid).style.opacity='0.6';
lastbco=ev.target;
ev.target.style.backgroundColor='pink';
if (document.getElementById('mybut')) {
if (document.getElementById('mybut').innerHTML.indexOf(' .. ') == -1) {
document.getElementById('mybut').innerHTML=document.getElementById('mybut').innerHTML.replace(' Game Game', ' Game');
document.getElementById('mybut').innerHTML+=' .. current guess is ' + ev.target.innerHTML;
} else {
document.getElementById('mybut').innerHTML=document.getElementById('mybut').innerHTML.split(' .. ')[0] + ' .. current guess is ' + ev.target.innerHTML;
}
}
if (document.getElementById('sdropz')) {
if (document.getElementById('sdropz').innerHTML.indexOf(' .. ') == -1) {
document.getElementById('sdropz').innerHTML+=' .. current guess is ' + ev.target.innerHTML;
} else {
document.getElementById('sdropz').innerHTML=document.getElementById('sdropz').innerHTML.split(' .. ')[0] + ' .. current guess is ' + ev.target.innerHTML;
}
}
}
//document.getElementById(sourceid).style.cursor='progress';
//ev.target.style.cursor='progress';
//ev.target.dataTransfer.dropEffect = 'progress';
});
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 && document.URL.indexOf('/planet_') == -1) {
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')) || ('' + ev.target.getAttribute('data-answer')) == ('' + document.getElementById(sourceid).getAttribute('data-answer'))) {
score++;
document.getElementById('score').innerHTML='Score: ' + score + '/' + secs + '';
} else {
document.getElementById('score').innerHTML='Score: ' + score + '/' + secs + '';
if (document.getElementById('source').outerHTML.indexOf('<ta' + 'ble') == 0) {
alert(('Correct answer was ' + document.getElementById(sourceid).getAttribute('data-answer')).replace('null',''));
} else {
alert(('Correct answer was ' + document.getElementById('source').getAttribute('data-answer')).replace('null',''));
}
}
location.href=document.getElementById('callback').value + '?score=' + score + '&secs=' + secs;
}
if (1 == 2) {
clonedatatwo=document.getElementById(sourceid).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')) {
source.style.cursor='progress';
clonedatatwo=document.getElementById(sourceid).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 {
source.style.cursor='progress';
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>
<style>
@media only screen and (min-device-width: 320px) and (max-device-width: 765px) and (orientation: portrait) {
#target { text-shadow:-1px 1px 1px #ff2d95; }
td[data-answer*="THE "] {
font-size: 10px;
}
}

@media only screen and (min-device-width: 320px) and (max-device-width: 765px) and (orientation: landscape) {
#target { text-shadow:-1px 1px 1px #ff2d95; }
td[data-answer*="THE "] {
font-size: 10px;
}
}
}
</style>
</body>
</html>