<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>
<meta charset="UTF-8"/>
<script type=text/javascript>
var mapurl="<iframe onload=hashit(this); onmouseover='woit(this.src,this);' style='width=100%;height:520px;' src='//www.rjmprogramming.com.au/PHP/GeoChart/geo_chart.php?title=GB;Country%20Map&aregexographicals=y&aregeographicals=&width=834&height=520&country=Places&popularity=&data=%20[-89.0000|-88.0000|~From~,2]'></iframe>";
var wmapurl='<iframe src="//www.rjmprogramming.com.au/PHP/GeoChart/geo_chart.php?title=World%20Map&width=834&height=520&country=Country&popularity=Popularity&data=%20[~IT~,2]"></iframe>';
var subfrom='~IT~';
var subto='~IT~';
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='40%' 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 wo=null, lastwosrc='';
var hastoinvolve=' src=';
var thewidth=834;
var theheight=520;
var optfinds=' ', ccodes=[];
var cnames=[], ccapitals=[];
var eightthousand=8000;
var amcorrect=false;
var answer=Math.min(9, eval(Math.floor(Math.random() * 9) + 1));
var nextanswer=0;
var sofara='', sowoa=' ';
var parts=[], tdsos=[];
var ananswer=-1;
var gthisih='', gthiso=null;
var lastgthisih=' ', lastgthiso=null;
function hashit(iois) {
if (iois != null) {
var aconto = (iois.contentWindow || iois.contentDocument);
if (aconto != null) {
if (aconto.document) { aconto = aconto.document; }
if (aconto.body != null) {
aconto.getElementById('myh').style.display='none'; // aconto.getElementById('chart_div').scrollIntoView();
// Thanks to https://stackoverflow.com/questions/6088409/svg-drop-shadow-using-css3
setTimeout(function(){ aconto.getElementById('chart_div').innerHTML=aconto.getElementById('chart_div').innerHTML.replace('</svg>', '</svg><style> .shadow { -webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7)); filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7)); } </style>').replace(/\#f5f5f5\;\"/g,'#c5f5f5;" class="shadow"').replace(/\#f5f5f5\"/g,'#c5f5f5" class="shadow"'); }, 4000);
}
}
}
}
function tryprewoit() {
if (gthisih != '' && gthiso != null) {
prewoit(gthisih, gthiso);
gthisih='';
gthiso=null;
lastgthisih=' ';
}
}
function xprewoit() {
gthisih='';
gthiso=null;
lastgthisih=' ';
}
function yprewoit(thisih,thiso) {
if (lastgthisih != thisih) {
lastgthisih=thisih;
gthisih=thisih;
gthiso=thiso;
setTimeout(tryprewoit, 5000);
}
}
function prewoit(thisih,thiso) {
var thissrc=thiso.innerHTML.split(' src="')[1].split('"')[0].replace(/\&\;/g,'&');
if (thissrc.indexOf(hastoinvolve) != -1 && thissrc.replace('http:','').replace('https:','') != lastwosrc.replace('http:','').replace('https:','') && sowoa.replace(/http\:/g,'').replace(/https\:/g,'').indexOf(' ' + thissrc.replace('http:','').replace('https:','') + ' ') == -1) {
lastwosrc=thissrc;
var therect=thiso.getBoundingClientRect();
if (wo) {
if (!wo.closed) {
wo.close();
}
wo=null;
sowoa+=thissrc + ' ';
subto='~' + thissrc.split('?title=')[1].split(';')[0] + '~';
wo=window.open(thissrc,'_blank','top=' + eval(20 + eval('' + therect.top)) + ',left=' + therect.left + ',width=' + eval(2 * thewidth) + ',height=' + eval(2 * theheight));
//wo.focus();
wo.onload = function() {
setTimeout(function(){ wo.document.getElementById('chart_div').innerHTML=wo.document.getElementById('chart_div').innerHTML.replace('</svg>', '</svg><style> .shadow { -webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7)); filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7)); } </style>').replace(/\#f5f5f5\;\"/g,'#c5f5f5;" class="shadow"').replace(/\#f5f5f5\"/g,'#c5f5f5" class="shadow"'); wo.document.getElementById('chart_div').innerHTML+=wmapurl.replace(subfrom,subto); }, 4000);
};
} else {
sowoa+=thissrc + ' ';
subto='~' + thissrc.split('?title=')[1].split(';')[0] + '~';
wo=window.open(thissrc,'_blank','top=' + eval(20 + eval('' + therect.top)) + ',left=' + therect.left + ',width=' + eval(2 * thewidth) + ',height=' + eval(2 * theheight));
//wo.focus();
wo.onload = function() {
setTimeout(function(){ wo.document.getElementById('chart_div').innerHTML=wo.document.getElementById('chart_div').innerHTML.replace('</svg>', '</svg><style> .shadow { -webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7)); filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7)); } </style>').replace(/\#f5f5f5\;\"/g,'#c5f5f5;" class="shadow"').replace(/\#f5f5f5\"/g,'#c5f5f5" class="shadow"'); wo.document.getElementById('chart_div').innerHTML+=wmapurl.replace(subfrom,subto); }, 4000);
};
}
}
gthisih='';
gthiso=null;
lastgthisih=' ';
}
function andthen() {
setTimeout(function(){ wo.document.getElementById('chart_div').innerHTML=wo.document.getElementById('chart_div').innerHTML.replace('</svg>', '</svg><style> .shadow { -webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7)); filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7)); } </style>').replace(/\#f5f5f5\;\"/g,'#c5f5f5;" class="shadow"').replace(/\#f5f5f5\"/g,'#c5f5f5" class="shadow"'); wo.document.getElementById('chart_div').innerHTML+=wmapurl.replace(subfrom,subto); }, 4000);
}
function woit(thissrc,thiso) {
if (thissrc.indexOf(hastoinvolve.replace(' src=','//')) != -1 && thissrc.replace('http:','').replace('https:','') != lastwosrc.replace('http:','').replace('https:','') && sowoa.replace(/http\:/g,'').replace(/https\:/g,'').indexOf(' ' + thissrc.replace('http:','').replace('https:','') + ' ') == -1) {
lastwosrc=thissrc;
var therect=thiso.getBoundingClientRect();
if (wo) {
if (!wo.closed) {
wo.close();
}
wo=null;
sowoa+=thissrc + ' ';
subto='~' + thissrc.split('?title=')[1].split(';')[0] + '~';
wo=window.open(thissrc,'_blank','top=' + therect.top + ',left=' + therect.left + ',width=' + eval(2 * thewidth) + ',height=' + eval(2 * theheight));
//wo.focus();
wo.onload = function() {
setTimeout(function(){ wo.document.getElementById('chart_div').innerHTML=wo.document.getElementById('chart_div').innerHTML.replace('</svg>', '</svg><style> .shadow { -webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7)); filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7)); } </style>').replace(/\#f5f5f5\;\"/g,'#c5f5f5;" class="shadow"').replace(/\#f5f5f5\"/g,'#c5f5f5" class="shadow"'); wo.document.getElementById('chart_div').innerHTML+=wmapurl.replace(subfrom,subto); }, 4000);
};
} else {
sowoa+=thissrc + ' ';
subto='~' + thissrc.split('?title=')[1].split(';')[0] + '~';
wo=window.open(thissrc,'_blank','top=' + therect.top + ',left=' + therect.left + ',width=' + eval(2 * thewidth) + ',height=' + eval(2 * theheight));
//wo.focus();
wo.onload = function() {
setTimeout(function(){ wo.document.getElementById('chart_div').innerHTML=wo.document.getElementById('chart_div').innerHTML.replace('</svg>', '</svg><style> .shadow { -webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7)); filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7)); } </style>').replace(/\#f5f5f5\;\"/g,'#c5f5f5;" class="shadow"').replace(/\#f5f5f5\"/g,'#c5f5f5" class="shadow"'); wo.document.getElementById('chart_div').innerHTML+=wmapurl.replace(subfrom,subto); }, 4000);
};
}
}
}
function getallcountrycode() {
while (eval('' + ccodes.length) < 9) {
getnextcountrycode();
}
}
function getnextcountrycode() {
if (eval('' + ccodes.length) < 9) {
var mycc=document.getElementById('myctable').innerHTML;
var opts=document.getElementsByTagName('option');
var ths=document.getElementsByTagName('th');
var atry=Math.floor(Math.random() * eval('' + opts.length));
while (optfinds.indexOf(' ' + opts[eval('' + atry)].value + ' ') != -1 || opts[eval('' + atry)].value == 'MK') {
atry=Math.floor(Math.random() * eval('' + opts.length));
}
while (mycc.indexOf('>' + opts[eval('' + atry)].innerText + '<') == -1 || opts[eval('' + atry)].value == 'MK') {
atry=Math.floor(Math.random() * eval('' + opts.length));
if (mycc.indexOf('>' + opts[eval('' + atry)].innerText + '<') != -1) {
while (optfinds.indexOf(' ' + opts[eval('' + atry)].value + ' ') != -1 || opts[eval('' + atry)].value == 'MK') {
atry=Math.floor(Math.random() * eval('' + opts.length));
}
}
}
optfinds+=opts[eval('' + atry)].value + ' ';
ccodes.push(opts[eval('' + atry)].value);
cnames.push(opts[eval('' + atry)].innerText);
ccapitals.push(mycc.split("<th>" + opts[eval('' + atry)].innerText + "</th><th>")[1].split("<")[0]);
}
}
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);
if (('' + nextanswer) == ('' + ananswer)) {
setTimeout(() => { if (tdsos[eval(-1 + nextanswer)].innerHTML.indexOf('<') == -1) { tdsos[eval(-1 + nextanswer)].innerHTML+='<br><details data-answer=' + nextanswer + ' id=det' + nextanswer + ' open onclick=xprewoit(this.innerHTML,this); onmouseover=yprewoit(this.innerHTML,this);><summary data-answer=' + nextanswer + ' id=goodsum></summary>' + mapurl.replace('=GB;', '=' + ccodes[eval(-1 + nextanswer)] + ';').replace('<iframe ','<iframe data-answer=' + nextanswer + ' ') + '</details>'; } }, 200);
} else if (('' + nextanswer) == ('' + answer) && answer < 0) {
setTimeout(() => { if (tdsos[eval(-1 + nextanswer)].innerHTML.indexOf('<') == -1) { tdsos[eval(-1 + nextanswer)].innerHTML+='<br><details data-answer=' + nextanswer + ' id=det' + nextanswer + ' open onclick=xprewoit(this.innerHTML,this); onmouseover=yprewoit(this.innerHTML,this);><summary data-answer=' + nextanswer + ' id=goodsum></summary>' + mapurl.replace('=GB;', '=' + ccodes[eval(-1 + nextanswer)] + ';').replace('<iframe ','<iframe data-answer=' + nextanswer + ' ') + '</details>'; } }, 200);
} else {
setTimeout(() => { if (tdsos[eval(-1 + nextanswer)].innerHTML.indexOf('<') == -1) { tdsos[eval(-1 + nextanswer)].innerHTML+='<br><details id=det' + nextanswer + ' open onclick=xprewoit(this.innerHTML,this); onmouseover=yprewoit(this.innerHTML,this);><summary name=sum' + nextanswer + '></summary>' + mapurl.replace('=GB;', '=' + ccodes[eval(-1 + nextanswer)] + ';') + '</details>'; } }, 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()) + '")';
if (tdsos[eval(-1 + eval('' + sofars[ii]))].innerHTML.indexOf('<') == -1) {
if (('' + sofars[ii]) == ('' + ananswer)) {
tdsos[eval(-1 + eval('' + sofars[ii]))].innerHTML+='<br><details data-answer=' + ananswer + ' id=det' + sofars[ii] + ' open onclick=xprewoit(this.innerHTML,this); onmouseover=yprewoit(this.innerHTML,this);><summary data-answer=' + ananswer + ' id=goodsum></summary>' + mapurl.replace('=GB;', '=' + ccodes[eval(-1 + eval('' + sofars[ii]))] + ';').replace('<iframe ','<iframe data-answer=' + ananswer + ' ') + '</details>';
} else if (('' + sofars[ii]) == ('' + answer) && ananswer < 0) {
tdsos[eval(-1 + eval('' + sofars[ii]))].innerHTML+='<br><details data-answer=' + answer + ' id=det' + sofars[ii] + ' open onclick=xprewoit(this.innerHTML,this); onmouseover=yprewoit(this.innerHTML,this);><summary data-answer=' + answer + ' id=goodsum></summary>' + mapurl.replace('=GB;', '=' + ccodes[eval(-1 + eval('' + sofars[ii]))] + ';').replace('<iframe ','<iframe data-answer=' + answer + ' ') + '</details>';
} else {
tdsos[eval(-1 + eval('' + sofars[ii]))].innerHTML+='<br><details id=det' + sofars[ii] + ' open onclick=xprewoit(this.innerHTML,this); onmouseover=yprewoit(this.innerHTML,this);><summary name=sum' + sofars[ii] + '></summary>' + mapurl.replace('=GB;', '=' + ccodes[eval(-1 + eval('' + sofars[ii]))] + ';') + '</details>';
}
}
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');
theheight=Math.floor(eval(1 * eval('' + tdsos[0].getBoundingClientRect().height)));
if (1 == 1) {
thewidth=Math.floor(eval(834 * eval(eval('' + theheight)) / 520));
//alert('' + thewidth + ' x ' + theheight);
} else {
thewidth=eval('' + tdsos[0].getBoundingClientRect().width);
}
mapurl=mapurl.replace('width=834', 'width=' + thewidth).replace('width=834', 'width=' + thewidth).replace('width:834', 'width:' + thewidth);
mapurl=mapurl.replace('height=520', 'height=' + theheight).replace('height=520', 'height=' + theheight).replace('height:520', 'height:' + theheight);
wmapurl=wmapurl.replace('width=834', 'width=' + thewidth).replace('width=834', 'width=' + thewidth).replace('width:834', 'width:' + thewidth);
wmapurl=wmapurl.replace('height=520', 'height=' + theheight).replace('height=520', 'height=' + theheight).replace('height:520', 'height:' + theheight);
//alert(mapurl);
ccodes=[];
cnames=[];
getallcountrycode();
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;
}
}
ananswer=proposedanswer;
//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) {
if (1 == 1) {
if (eval(1 + itdsos) == proposedanswer) {
tdsos[itdsos].innerHTML+='<br><details data-answer=' + eval(1 + itdsos) + ' id=det' + eval(1 + itdsos) + ' open onclick=xprewoit(this.innerHTML,this); onmouseover=yprewoit(this.innerHTML,this);><summary data-answer=' + eval(1 + itdsos) + ' id=goodsum></summary>' + mapurl.replace('=GB;', '=' + ccodes[itdsos] + ';').replace('<iframe ','<iframe data-answer=' + eval(1 + itdsos) + ' ') + '</details>';
} else {
tdsos[itdsos].innerHTML+='<br><details id=det' + eval(1 + itdsos) + ' open onclick=xprewoit(this.innerHTML,this); onmouseover=yprewoit(this.innerHTML,this);><summary name=sum' + eval(1 + itdsos) + '></summary>' + mapurl.replace('=GB;', '=' + ccodes[itdsos] + ';') + '</details>';
}
} else {
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 {
if (1 == 1) {
if (1 == 2) {
tdsos[itdsos].style.backgroundImage='URL("' + svgtemp.replace('>1 +', '>?').replace('blue', 'red') + '")';
}
} 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;
setTimeout(() => { document.getElementById('sdz').style.display='none'; document.getElementById('myh3').style.display='none'; document.getElementById('myh4').style.display='none'; document.getElementById('source').title=document.getElementById('source').innerHTML; document.getElementById('source').innerHTML=ccapitals[eval(-1 + answer)]; document.getElementById('source').style.fontSize='30px'; document.getElementById('source').style.textShadow='-2px 2px 2px #ff2d95'; document.getElementById('source').scrollIntoView(); }, 8000);
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.4rem; /* 0.5rem */
}
#target {
margin-top: -50px;
}
.dragging {
background-color: pink;
}
summary {
text-shadow:-2px 2px 2px #ff2d95;
font-size: 24px;
}
td {
border: 1px dotted green;
vertical-align: top;
background-color: #f0f0f0;
text-shadow:-2px 2px 2px #ff2d95;
font-size: 24px;
}
</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." data-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='); }">Country Capital Game</button></h1>
<h3 id=myh3>RJM Programming - October, 2023</h3>
<h3 id="score"></h3>
<h4 id=myh4>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", & drag its Capital City name (coming soon) to appropriate numbered "drop zone" Country Map cell number as quick as you can & then release selection
to move the element.
</p>
</div>
<div id="target"><span id=sdz>Drop Zone</span>
<table style="width:90%;height:65%;" 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')) {
var sums=document.getElementsByTagName('summary');
if (!document.getElementById('goodsum')) {
for (var isums=0; isums<sums.length; isums++) {
if (('' + sums[isums].name) == ('sum' + answer)) {
sums[isums].id='goodsum';
}
}
}
if (!document.getElementById('goodsum')) {
var ourtds=document.getElementsByTagName('td');
for (var itdsums=0; itdsums<ourtds.length; itdsums++) {
if (('' + ourtds[itdsums].innerHTML + ' ').substring(0,1) == ('' + answer)) {
sums[itdsums].id='goodsum';
}
}
}
secs++;
var nowdo=false;
if (('' + ev.target.getAttribute('data-answer')) == ('' + document.getElementById('source').getAttribute('data-answer'))) {
score+=scoreworth;
nowdo=true;
document.getElementById('score').innerHTML='Score: ' + score + '/' + secs + '';
hastoinvolve='goodsum';
lastwosrc='';
sowoa=' ';
eightthousand=500;
amcorrect=true;
document.getElementById('goodsum').innerHTML=document.getElementById('source').innerHTML + ' is capital city of ' + cnames[eval(-1 + answer)];
document.getElementById('source').style.border='1px solid transparent';
document.getElementById('source').innerHTML='';
ev.target.style.border='1px solid lightgreen';
nowdo=false;
location.href=document.getElementById('callback').value + '?score=' + score + '&secs=' + simplify(secs);
} else {
document.getElementById('score').innerHTML='Score: ' + score + '/' + secs + '';
hastoinvolve='goodsum';
lastwosrc='';
sowoa=' ';
if (!amcorrect) {
document.getElementById('det' + answer).style.border='1px solid lightgreen';
ev.target.style.border='5px dotted pink';
setTimeout(function() { alert('Correct answer was ' + ('' + document.getElementById('source').getAttribute('data-answer')) + ' ... leaving your score at ' + score + '/' + secs); setTimeout(() => { location.href=document.getElementById('callback').value + '?score=' + score + '&secs=' + simplify(secs); }, 18000); }, 2000); // + ' = ' + document.getElementById('mytable').getAttribute('data-question') + ' = ' + document.getElementById('source').getAttribute('data-answer'));
}
document.getElementById('goodsum').innerHTML=document.getElementById('source').innerHTML + ' is capital city of ' + cnames[eval(-1 + answer)];
document.getElementById('source').innerHTML='';
}
document.body.style.cursor='progress';
if (nowdo) {
setTimeout(() => { location.href=document.getElementById('callback').value + '?score=' + score + '&secs=' + simplify(secs); }, eightthousand);
}
}
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>
<table id=myctable style=display:none;>
<tbody>
<tr class='grey'><th>Afghanistan</th><th>Kabul</th></tr>
<tr><th>Albania</th><th>Tirana</th></tr>
<tr class='grey'><th>Algeria</th><th>Algiers</th></tr>
<tr><th>Andorra</th><th>Andorra la Vella</th></tr>
<tr class='grey'><th>Angola</th><th>Luanda</th></tr>
<tr><th>Antigua and Barbuda</th><th>Saint John's</th></tr>
<tr class='grey'><th>Argentina</th><th>Buenos Aires</th></tr>
<tr><th>Armenia</th><th>Yerevan</th></tr>
<tr class='grey'><th>Australia</th><th>Canberra</th></tr>
<tr><th>Austria</th><th>Vienna</th></tr>
<tr class='grey'><th>Azerbaijan</th><th>Baku</th></tr>
<tr class='grey'><th>Bahamas</th><th>Nassau</th></tr>
<tr><th>Bahrain</th><th>Manama</th></tr>
<tr class='grey'><th>Bangladesh</th><th>Dhaka</th></tr>
<tr><th>Barbados</th><th>Bridgetown</th></tr>
<tr class='grey'><th>Belarus</th><th>Minsk</th></tr>
<tr><th>Belgium</th><th>Brussels</th></tr>
<tr class='grey'><th>Belize</th><th>Belmopan</th></tr>
<tr><th>Benin</th><th>Porto-Novo</th></tr>
<tr class='grey'><th>Bhutan</th><th>Thimphu</th></tr>
<tr><th>Bolivia</th><th>La Paz (administrative), Sucre (judicial)</th></tr>
<tr class='grey'><th>Bosnia and Herzegovina</th><th>Sarajevo</th></tr>
<tr><th>Botswana</th><th>Gaborone</th></tr>
<tr class='grey'><th>Brazil</th><th>Brasilia</th></tr>
<tr><th>Brunei</th><th>Bandar Seri Begawan</th></tr>
<tr class='grey'><th>Bulgaria</th><th>Sofia</th></tr>
<tr><th>Burkina Faso</th><th>Ouagadougou</th></tr>
<tr class='grey'><th>Burundi</th><th>Bujumbura</th></tr>
<tr class='grey'><th>Cabo Verde</th><th>Praia</th></tr>
<tr><th>Cambodia</th><th>Phnom Penh</th></tr>
<tr class='grey'><th>Cameroon</th><th>Yaounde</th></tr>
<tr><th>Canada</th><th>Ottawa</th></tr>
<tr class='grey'><th>Central African Republic</th><th>Bangui</th></tr>
<tr><th>Chad</th><th>N'Djamena</th></tr>
<tr class='grey'><th>Chile</th><th>Santiago</th></tr>
<tr><th>China</th><th>Beijing</th></tr>
<tr class='grey'><th>Colombia</th><th>Bogotá</th></tr>
<tr><th>Comoros</th><th>Moroni</th></tr>
<tr class='grey'><th><span>Democratic Republic of the</span> Congo</th><th>Kinshasa</th></tr>
<tr><th><span>Republic of the</span> Congo</th><th>Brazzaville</tr>
<tr class='grey'><th>Costa Rica</th><th>San Jose</th></tr>
<tr><th>Cote d'Ivoire</th><th>Yamoussoukro</th></tr>
<tr class='grey'><th>Croatia</th><th>Zagreb</th></tr>
<tr><th>Cuba</th><th>Havana</th></tr>
<tr class='grey'><th>Cyprus</th><th>Nicosia</th></tr>
<tr><th>Czech Republic</th><th>Prague</th></tr>
<tr class='grey'><th>Denmark</th><th>Copenhagen</th></tr>
<tr><th>Djibouti</th><th>Djibouti (city)</th></tr>
<tr class='grey'><th>Dominica</th><th>Roseau</th></tr>
<tr><th>Dominican Republic</th><th>Santo Domingo</th></tr>
<tr class='grey'><th>Ecuador</th><th>Quito</th></tr>
<tr><th>Egypt</th><th>Cairo</th></tr>
<tr class='grey'><th>El Salvador</th><th>San Salvador</th></tr>
<tr><th>Equatorial Guinea</th><th>Malabo</th></tr>
<tr class='grey'><th>Eritrea</th><th>Asmara</th></tr>
<tr><th>Estonia</th><th>Tallinn</th></tr>
<tr class='grey'><th>Ethiopia</th><th>Addis Ababa</th></tr>
<tr class='grey'><th>Fiji</th><th>Suva</th></tr>
<tr><th>Finland</th><th>Helsinki</th></tr>
<tr class='grey'><th>France</th><th>Paris</th></tr>
<tr><th colspan='2' class='letter'>G</th></tr>
<tr class='grey'><th>Gabon</th><th>Libreville</th></tr>
<tr><th>Gambia</th><th>Banjul</th></tr>
<tr class='grey'><th>Georgia</th><th>Tbilisi</th></tr>
<tr><th>Germany</th><th>Berlin</th></tr>
<tr class='grey'><th>Ghana</th><th>Accra</th></tr>
<tr><th>Greece</th><th>Athens</th></tr>
<tr class='grey'><th>Grenada</th><th>Saint George's</th></tr>
<tr><th>Guatemala</th><th>Guatemala City</th></tr>
<tr class='grey'><th>Guinea</th><th>Conakry</th></tr>
<tr><th>Guinea-Bissau</th><th>Bissau</th></tr>
<tr class='grey'><th>Guyana</th><th>Georgetown</th></tr>
<tr class='grey'><th>Haiti</th><th>Port-au-Prince</th></tr>
<tr><th>Honduras</th><th>Tegucigalpa</th></tr>
<tr class='grey'><th>Hungary</th><th>Budapest</th></tr>
<tr class='grey'><th>Iceland</th><th>Reykjavik</th></tr>
<tr><th>India</th><th>New Delhi</th></tr>
<tr class='grey'><th>Indonesia</th><th>Jakarta</th></tr>
<tr><th>Iran</th><th>Tehran</th></tr>
<tr class='grey'><th>Iraq</th><th>Baghdad</th></tr>
<tr><th>Ireland</th><th>Dublin</th></tr>
<tr class='grey'><th>Israel</th><th>Jerusalem</th></tr>
<tr><th>Italy</th><th>Rome</th></tr>
<tr class='grey'><th>Jamaica</th><th>Kingston</th></tr>
<tr><th>Japan</th><th>Tokyo</th></tr>
<tr class='grey'><th>Jordan</th><th>Amman</th></tr>
<tr class='grey'><th>Kazakhstan</th><th>Astana</th></tr>
<tr><th>Kenya</th><th>Nairobi</th></tr>
<tr class='grey'><th>Kiribati</th><th>South Tarawa</th></tr>
<tr><th>Kosovo</th><th>Pristina</th></tr>
<tr class='grey'><th>Kuwait</th><th>Kuwait City</th></tr>
<tr><th>Kyrgyzstan</th><th>Bishkek</th></tr>
<tr class='grey'><th>Laos</th><th>Vientiane</th></tr>
<tr><th>Latvia</th><th>Riga</th></tr>
<tr class='grey'><th>Lebanon</th><th>Beirut</th></tr>
<tr><th>Lesotho</th><th>Maseru</th></tr>
<tr class='grey'><th>Liberia</th><th>Monrovia</th></tr>
<tr><th>Libya</th><th>Tripoli</th></tr>
<tr class='grey'><th>Liechtenstein</th><th>Vaduz</th></tr>
<tr><th>Lithuania</th><th>Vilnius</th></tr>
<tr class='grey'><th>Luxembourg</th><th>Luxembourg</th></tr>
<tr class='grey'><th>Macedonia</th><th>Skopje</th></tr>
<tr><th>Madagascar</th><th>Antananarivo</th></tr>
<tr class='grey'><th>Malawi</th><th>Lilongwe</th></tr>
<tr><th>Malaysia</th><th>Kuala Lumpur</th></tr>
<tr class='grey'><th>Maldives</th><th>Male</th></tr>
<tr><th>Mali</th><th>Bamako</th></tr>
<tr class='grey'><th>Malta</th><th>Valletta</th></tr>
<tr><th>Marshall Islands</th><th>Majuro</th></tr>
<tr class='grey'><th>Mauritania</th><th>Nouakchott</th></tr>
<tr><th>Mauritius</th><th>Port Louis</th></tr>
<tr class='grey'><th>Mexico</th><th>Mexico City</th></tr>
<tr><th>Micronesia</th><th>Palikir</th></tr>
<tr class='grey'><th>Moldova</th><th>Chisinau</th></tr>
<tr><th>Monaco</th><th>Monaco</th></tr>
<tr class='grey'><th>Mongolia</th><th>Ulaanbaatar</th></tr>
<tr><th>Montenegro</th><th>Podgorica</th></tr>
<tr class='grey'><th>Morocco</th><th>Rabat</th></tr>
<tr><th>Mozambique</th><th>Maputo</th></tr>
<tr class='grey'><th>Myanmar (Burma)</th><th>Naypyidaw</th></tr>
<tr class='grey'><th>Namibia</th><th>Windhoek</th></tr>
<tr><th>Nauru</th><th>Yaren District</th></tr>
<tr class='grey'><th>Nepal</th><th>Kathmandu</th></tr>
<tr><th>Netherlands</th><th>Amsterdam</th></tr>
<tr class='grey'><th>New Zealand</th><th>Wellington</th></tr>
<tr><th>Nicaragua</th><th>Managua</th></tr>
<tr class='grey'><th>Niger</th><th>Niamey</th></tr>
<tr><th>Nigeria</th><th>Abuja</th></tr>
<tr class='grey'><th>North Korea</th><th>Pyongyang</th></tr>
<tr><th>Norway</th><th>Oslo</th></tr>
<tr class='grey'><th>Oman</th><th>Muscat</th></tr>
<tr class='grey'><th>Pakistan</th><th>Islamabad</th></tr>
<tr><th>Palau</th><th>Ngerulmud</th></tr>
<tr class='grey'><th>Palestine</th><th>Ramallah</th></tr>
<tr><th>Panama</th><th>Panama City</th></tr>
<tr class='grey'><th>Papua New Guinea</th><th>Port Moresby</th></tr>
<tr><th>Paraguay</th><th>Asunción</th></tr>
<tr class='grey'><th>Peru</th><th>Lima</th></tr>
<tr><th>Philippines</th><th>Manila</th></tr>
<tr class='grey'><th>Poland</th><th>Warsaw</th></tr>
<tr><th>Portugal</th><th>Lisbon</th></tr>
<tr class='grey'><th>Qatar</th><th>Doha</th></tr>
<tr class='grey'><th>Romania</th><th>Bucharest</th></tr>
<tr><th>Russia</th><th>Moscow</th></tr>
<tr class='grey'><th>Rwanda</th><th>Kigali</th></tr>
<tr class='grey'><th>Saint Kitts and Nevis</th><th>Basseterre</th></tr>
<tr><th>Saint Lucia</th><th>Castries</th></tr>
<tr class='grey'><th>Saint Vincent and the Grenadines</th><th>Kingstown</th></tr>
<tr><th>Samoa</th><th>Apia</th></tr>
<tr class='grey'><th>San Marino</th><th>San Marino</th></tr>
<tr><th>Sao Tome and Principe</th><th>São Tomé</th></tr>
<tr class='grey'><th>Saudi Arabia</th><th>Riyadh</th></tr>
<tr><th>Senegal</th><th>Dakar</th></tr>
<tr class='grey'><th>Serbia</th><th>Belgrade</th></tr>
<tr><th>Seychelles</th><th>Victoria</th></tr>
<tr class='grey'><th>Sierra Leone</th><th>Freetown</th></tr>
<tr><th>Singapore</th><th>Singapore</th></tr>
<tr class='grey'><th>Slovakia</th><th>Bratislava</th></tr>
<tr><th>Slovenia</th><th>Ljubljana</th></tr>
<tr class='grey'><th>Solomon Islands</th><th>Honiara</th></tr>
<tr><th>Somalia</th><th>Mogadishu</th></tr>
<tr class='grey'><th>South Africa</th><th>Pretoria (administrative), Cape Town (legislative), Bloemfontein (judicial)</th></tr>
<tr><th>South Korea</th><th>Seoul</th></tr>
<tr><th>South Ossetia</th><th>Tskhinvali</th></tr>
<tr><th>South Sudan</th><th>Juba</th></tr>
<tr class='grey'><th>Spain</th><th>Madrid</th></tr>
<tr><th>Sri Lanka</th><th>Sri Jayawardenepura Kotte</th></tr>
<tr class='grey'><th>Sudan</th><th>Khartoum</th></tr>
<tr><th>Suriname</th><th>Paramaribo</th></tr>
<tr class='grey'><th>Swaziland</th><th>Mbabane</th></tr>
<tr><th>Sweden</th><th>Stockholm</th></tr>
<tr class='grey'><th>Switzerland</th><th>Bern</th></tr>
<tr><th>Syria</th><th>Damascus</th></tr>
<tr><th>Taiwan</th><th>Taipei</th></tr>
<tr class='grey'><th>Tajikistan</th><th>Dushanbe</th></tr>
<tr><th>Tanzania</th><th>Dodoma</th></tr>
<tr class='grey'><th>Thailand</th><th>Bangkok</th></tr>
<tr><th>Timor-Leste</th><th>Dili</th></tr>
<tr class='grey'><th>Togo</th><th>Lomé</th></tr>
<tr><th>Tonga</th><th>Nukuʻalofa</th></tr>
<tr class='grey'><th>Trinidad and Tobago</th><th>Port of Spain</th></tr>
<tr><th>Tunisia</th><th>Tunis</th></tr>
<tr class='grey'><th>Turkey</th><th>Ankara</th></tr>
<tr><th>Turkmenistan</th><th>Ashgabat</th></tr>
<tr class='grey'><th>Tuvalu</th><th>Funafuti</th></tr>
<tr class='grey'><th>Uganda</th><th>Kampala</th></tr>
<tr><th>Ukraine</th><th>Kyiv</th></tr>
<tr class='grey'><th>United Arab Emirates</th><th>Abu Dhabi</th></tr>
<tr><th>United Kingdom</th><th>London</th></tr>
<tr class='grey'><th>United States of America</th><th>Washington, D.C.</th></tr>
<tr><th>Uruguay</th><th>Montevideo</th></tr>
<tr class='grey'><th>Uzbekistan</th><th>Tashkent</th></tr>
<tr class='grey'><th>Vanuatu</th><th>Port Vila</th></tr>
<tr><th>Vatican City (Holy See)</th><th>Vatican City</th></tr>
<tr class='grey'><th>Venezuela</th><th>Caracas</th></tr>
<tr><th>Vietnam</th><th>Hanoi</th></tr>
<tr class='grey'><th>Yemen</th><th>Sana'a</th></tr>
<tr class='grey'><th>Zambia</th><th>Lusaka</th></tr>
<tr><th>Zimbabwe</th><th>Harare</th></tr>
</table>
<select id='selceq' style='display:none;'>
<option value="AF">Afghanistan</option>
<option value="AX">Aland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua and Barbuda</option>
<option value="AR">Argentina</option>
<option value="AM">Armenia</option>
<option value="AW">Aruba</option>
<option value="AU">Australia</option>
<option value="AT">Austria</option>
<option value="AZ">Azerbaijan</option>
<option value="BS">Bahamas the</option>
<option value="BH">Bahrain</option>
<option value="BD">Bangladesh</option>
<option value="BB">Barbados</option>
<option value="BY">Belarus</option>
<option value="BE">Belgium</option>
<option value="BZ">Belize</option>
<option value="BJ">Benin</option>
<option value="BM">Bermuda</option>
<option value="BT">Bhutan</option>
<option value="BO">Bolivia</option>
<option value="BA">Bosnia and Herzegovina</option>
<option value="BW">Botswana</option>
<option value="BV">Bouvet Island (Bouvetoya)</option>
<option value="BR">Brazil</option>
<option value="IO">British Indian Ocean Territory (Chagos Archipelago)</option>
<option value="VG">British Virgin Islands</option>
<option value="BN">Brunei Darussalam</option>
<option value="BG">Bulgaria</option>
<option value="BF">Burkina Faso</option>
<option value="BI">Burundi</option>
<option value="KH">Cambodia</option>
<option value="CM">Cameroon</option>
<option value="CA">Canada</option>
<option value="CV">Cape Verde</option>
<option value="KY">Cayman Islands</option>
<option value="CF">Central African Republic</option>
<option value="TD">Chad</option>
<option value="CL">Chile</option>
<option value="CN">China</option>
<option value="CX">Christmas Island</option>
<option value="CC">Cocos (Keeling) Islands</option>
<option value="CO">Colombia</option>
<option value="KM">Comoros the</option>
<option value="CD">Democratic Republic of the Congo</option>
<option value="CG">Congo (the)</option>
<option value="CK">Cook Islands</option>
<option value="CR">Costa Rica</option>
<option value="CI">Cote d'Ivoire</option>
<option value="HR">Croatia</option>
<option value="CU">Cuba</option>
<option value="CY">Cyprus</option>
<option value="CZ">Czech Republic</option>
<option value="DK">Denmark</option>
<option value="DJ">Djibouti</option>
<option value="DM">Dominica</option>
<option value="DO">Dominican Republic</option>
<option value="EC">Ecuador</option>
<option value="EG">Egypt</option>
<option value="SV">El Salvador</option>
<option value="GQ">Equatorial Guinea</option>
<option value="ER">Eritrea</option>
<option value="EE">Estonia</option>
<option value="ET">Ethiopia</option>
<option value="FO">Faroe Islands</option>
<option value="FK">Falkland Islands (Malvinas)</option>
<option value="FJ">Fiji the Fiji Islands</option>
<option value="FI">Finland</option>
<option value="FR">France, French Republic</option>
<option value="GF">French Guiana</option>
<option value="PF">French Polynesia</option>
<option value="TF">French Southern Territories</option>
<option value="GA">Gabon</option>
<option value="GM">Gambia the</option>
<option value="GE">Georgia</option>
<option value="DE">Germany</option>
<option value="GH">Ghana</option>
<option value="GI">Gibraltar</option>
<option value="GR">Greece</option>
<option value="GL">Greenland</option>
<option value="GD">Grenada</option>
<option value="GP">Guadeloupe</option>
<option value="GU">Guam</option>
<option value="GT">Guatemala</option>
<option value="GG">Guernsey</option>
<option value="GN">Guinea</option>
<option value="GW">Guinea-Bissau</option>
<option value="GY">Guyana</option>
<option value="HT">Haiti</option>
<option value="HM">Heard Island and McDonald Islands</option>
<option value="VA">Vatican City (Holy See)</option>
<option value="HN">Honduras</option>
<option value="HK">Hong Kong</option>
<option value="HU">Hungary</option>
<option value="IS">Iceland</option>
<option value="IN">India</option>
<option value="ID">Indonesia</option>
<option value="IR">Iran</option>
<option value="IQ">Iraq</option>
<option value="IE">Ireland</option>
<option value="IM">Isle of Man</option>
<option value="IL">Israel</option>
<option value="IT">Italy</option>
<option value="JM">Jamaica</option>
<option value="JP">Japan</option>
<option value="JE">Jersey</option>
<option value="JO">Jordan</option>
<option value="KZ">Kazakhstan</option>
<option value="KE">Kenya</option>
<option value="KI">Kiribati</option>
<option value="XK">Kosovo</option>
<option value="KP">North Korea</option>
<option value="KR">South Korea</option>
<option value="KW">Kuwait</option>
<option value="KG">Kyrgyzstan</option>
<option value="LA">Laos</option>
<option value="LV">Latvia</option>
<option value="LB">Lebanon</option>
<option value="LS">Lesotho</option>
<option value="LR">Liberia</option>
<option value="LY">Libyan Arab Jamahiriya</option>
<option value="LI">Liechtenstein</option>
<option value="LT">Lithuania</option>
<option value="LU">Luxembourg</option>
<option value="MO">Macao</option>
<option value="MK">Macedonia</option>
<option value="MG">Madagascar</option>
<option value="MW">Malawi</option>
<option value="MY">Malaysia</option>
<option value="MV">Maldives</option>
<option value="ML">Mali</option>
<option value="MT">Malta</option>
<option value="MH">Marshall Islands</option>
<option value="MQ">Martinique</option>
<option value="MR">Mauritania</option>
<option value="MU">Mauritius</option>
<option value="YT">Mayotte</option>
<option value="MX">Mexico</option>
<option value="FM">Micronesia</option>
<option value="MD">Moldova</option>
<option value="MC">Monaco</option>
<option value="MN">Mongolia</option>
<option value="ME">Montenegro</option>
<option value="MS">Montserrat</option>
<option value="MA">Morocco</option>
<option value="MZ">Mozambique</option>
<option value="MM">Myanmar (Burma)</option>
<option value="NA">Namibia</option>
<option value="NR">Nauru</option>
<option value="NP">Nepal</option>
<option value="AN">Netherlands Antilles</option>
<option value="NL">Netherlands the</option>
<option value="NC">New Caledonia</option>
<option value="NZ">New Zealand</option>
<option value="NI">Nicaragua</option>
<option value="NE">Niger</option>
<option value="NG">Nigeria</option>
<option value="NU">Niue</option>
<option value="NF">Norfolk Island</option>
<option value="MP">Northern Mariana Islands</option>
<option value="NO">Norway</option>
<option value="OM">Oman</option>
<option value="PK">Pakistan</option>
<option value="PW">Palau</option>
<option value="PS">Palestine</option>
<option value="PA">Panama</option>
<option value="PG">Papua New Guinea</option>
<option value="PY">Paraguay</option>
<option value="PE">Peru</option>
<option value="PH">Philippines</option>
<option value="PN">Pitcairn Islands</option>
<option value="PL">Poland</option>
<option value="PT">Portugal, Portuguese Republic</option>
<option value="PR">Puerto Rico</option>
<option value="QA">Qatar</option>
<option value="RE">Reunion</option>
<option value="RO">Romania</option>
<option value="RU">Russian Federation</option>
<option value="RW">Rwanda</option>
<option value="BL">Saint Barthelemy</option>
<option value="SH">Saint Helena</option>
<option value="KN">Saint Kitts and Nevis</option>
<option value="LC">Saint Lucia</option>
<option value="MF">Saint Martin</option>
<option value="PM">Saint Pierre and Miquelon</option>
<option value="VC">Saint Vincent and the Grenadines</option>
<option value="WS">Samoa</option>
<option value="SM">San Marino</option>
<option value="ST">Sao Tome and Principe</option>
<option value="SA">Saudi Arabia</option>
<option value="SN">Senegal</option>
<option value="RS">Serbia</option>
<option value="SC">Seychelles</option>
<option value="SL">Sierra Leone</option>
<option value="SG">Singapore</option>
<option value="SK">Slovakia (Slovak Republic)</option>
<option value="SI">Slovenia</option>
<option value="SB">Solomon Islands</option>
<option value="SO">Somalia, Somali Republic</option>
<option value="ZA">South Africa</option>
<option value="GS">South Georgia and the South Sandwich Islands</option>
<option value="SS">South Sudan</option>
<option value="ES">Spain</option>
<option value="LK">Sri Lanka</option>
<option value="SD">Sudan</option>
<option value="SR">Suriname</option>
<option value="SJ">Svalbard & Jan Mayen Islands</option>
<option value="SZ">Swaziland</option>
<option value="SE">Sweden</option>
<option value="CH">Switzerland, Swiss Confederation</option>
<option value="SY">Syrian Arab Republic</option>
<option value="TW">Taiwan</option>
<option value="TJ">Tajikistan</option>
<option value="TZ">Tanzania</option>
<option value="TH">Thailand</option>
<option value="TL">Timor-Leste</option>
<option value="TG">Togo</option>
<option value="TK">Tokelau</option>
<option value="TO">Tonga</option>
<option value="TT">Trinidad and Tobago</option>
<option value="TN">Tunisia</option>
<option value="TR">Turkey</option>
<option value="TM">Turkmenistan</option>
<option value="TC">Turks and Caicos Islands</option>
<option value="TV">Tuvalu</option>
<option value="UG">Uganda</option>
<option value="UA">Ukraine</option>
<option value="AE">United Arab Emirates</option>
<option value="GB">United Kingdom</option>
<option value="US">United States of America</option>
<option value="UM">United States Minor Outlying Islands</option>
<option value="VI">United States Virgin Islands</option>
<option value="UY">Uruguay, Eastern Republic of</option>
<option value="UZ">Uzbekistan</option>
<option value="VU">Vanuatu</option>
<option value="VE">Venezuela</option>
<option value="VN">Vietnam</option>
<option value="WF">Wallis and Futuna</option>
<option value="EH">Western Sahara</option>
<option value="YE">Yemen</option>
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option>
</select>
<input type='hidden' id='callback' value='./gradual_reveal_country_game.html'></input>
</body>
</html>