<html>
<head>
<title>Card Sequence - RJM Programming - March, 2023 ... thanks to Dr Crypton's Mind Benders Introduction by Isaac Asimov</title>
<meta charset="UTF-8"/>
<meta id='myviewport' name='viewport' content='width=device-width, initial-scale=1, minimum-scale=0.1, maximum-scale=8, user-scalable=yes' >

<style>
li { border-bottom: 1px dotted rgba(255,0,0,0.1); }

details summary {
cursor: pointer;
}

details summary > * {
display: inline;
}

/* Thanks to https://stackoverflow.com/questions/2011142/how-to-change-the-style-of-the-title-attribute-inside-an-anchor-tag */

[data-title]:hover:after {
opacity: 1;
transition: all 0.1s ease 0.5s;
visibility: visible;
}

[data-title]:after {
content: attr(data-title);
background-color: #00FF00;
color: red;
font-size: 100%;
position: absolute;
padding: 1px 5px 2px 5px;
bottom: -1.6em;
left: 100%;
white-space: nowrap;
box-shadow: 1px 1px 3px #222222;
opacity: 0;
border: 1px solid #111111;
z-index: 99999;
visibility: hidden;
}

[data-title] {
position: relative;
}

.red2 {
/*This causes the wrapping element to be the same size as what it contains.*/
display: inline-block;
}

.red3 {
/*This causes the wrapping element to be the same size as what it contains.*/
display: inline-block;
}

option.red3 {
margin-top: -16px;
}
</style>
<script type=text/javascript>
var sharing=location.search.split('sharing=')[1] ? decodeURIComponent(location.search.split('sharing=')[1].split('&')[0]) : "";
var pluss='';
var istart=false, fca=false;
var score=0, goes=0, tsecs=0;
var odateone=null, odatetwo=null;
var suffixes=['Ace:01','Two:02','Three:03','Four:04','Five:05','Six:06','Seven:07','Eight:08','Nine:09','Ten:10','Jack:11','Queen:12','King:13'];
var denominations=['Ace','Two','Three','Four','Five','Six','Seven','Eight','Nine','Ten','Jack','Queen','King'];
var suits=['Clubs','Spades','Diamonds','Hearts'];
var suittwos=[];
var gd='';
var first=true;
var lastliocardid='', lastliosuitid='';

function checkit() {
var suffix='', ssout='', csssuffix='';
score--;
goes++;
if (document.getElementById('ssuit').value == 'h' || document.getElementById('ssuit').value == 'd') {
csssuffix='color:red;';
}
if (gd == (document.getElementById('scard').value + document.getElementById('ssuit').value)) {
if (document.body.innerHTML.indexOf(' id="sspan"') != -1) {
ssout='<span style=background-color:rgb(240,240,240);' + csssuffix + '>' + document.body.innerHTML.split(' id="sspan"')[1].split('>')[1].split('</span')[0] + '</span>';
} else if (document.body.innerHTML.indexOf(' id=sspan') != -1) {
ssout='<span style=background-color:rgb(240,240,240);' + csssuffix + '>' + document.body.innerHTML.split(' id=sspan')[1].split('>')[1].split('</span')[0] + '</span>';
}
//alert(ssout);
score+=3;
fca=true;
suffix=' ... Well done with your correct ' + ('' + ssout).replace(' id=', ' data-id=') + '!';
document.getElementById('score').innerHTML='Score: ' + score + '/' + goes + suffix + '';
if (1 == 1) {
document.getElementById('mysumm').innerHTML='Well done with your correct ' + ('' + ssout).replace(' id=', ' data-id=') + '! But just in case it was a fluke ...';
} else {
alert('Well done with your correct ' + document.getElementById('sspan').innerHTML + '! But just in case it was a fluke ...');
}
//score=0;
//goes=0;
tsecs=0;
fca=false;
document.getElementById('score').innerHTML='Score: ' + score + '/' + goes + suffix + '';
populate();
} else {
if (document.body.innerHTML.indexOf(' id="sspan"') != -1) {
ssout='<span style=background-color:rgb(240,240,240);' + csssuffix + '>' + document.body.innerHTML.split(' id="sspan"')[1].split('>')[1].split('</span')[0] + '</span>';
} else if (document.body.innerHTML.indexOf(' id=sspan') != -1) {
ssout='<span style=background-color:rgb(240,240,240);' + csssuffix + '>' + document.body.innerHTML.split(' id=sspan')[1].split('>')[1].split('</span')[0] + '</span>';
}
//alert(ssout);
suffix=' ... No, it is not that ' + ('' + ssout).replace(' id=', ' data-id=') + ' card.';
document.getElementById('score').innerHTML='Score: ' + score + '/' + goes + suffix + '';
}
document.getElementById('scard').value='';
document.getElementById('ssuit').value='';
if (lastliocardid != '') { document.getElementById(lastliocardid).style.fontStyle='normal'; lastliocardid=''; }
if (lastliosuitid != '') { document.getElementById(lastliosuitid).style.fontStyle='normal'; lastliosuitid=''; }
location.href='#myh1';
}

function tadd() {
if (!fca) { tsecs++; document.getElementById('isecs').innerHTML='' + tsecs; }
}

function setup() {
var ij=0;
if (!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
document.getElementById('scard').size=document.getElementById('scard').getAttribute('data-size');
document.getElementById('ssuit').size=document.getElementById('ssuit').getAttribute('data-size');
document.getElementById('scard').style.overflow='hidden';
document.getElementById('ssuit').style.overflow='hidden';
} else {
document.getElementById('brs').innerHTML='';
}
document.getElementById('bchk').style.border='1px solid black';
document.getElementById('bred').style.border='1px dashed black';
for (ij=0; ij<denominations.length; ij++) {
document.getElementById('scard').innerHTML+='<option title=' + denominations[ij].replace('Ace','A').replace('Two','2').replace('Three','3').replace('Four','4').replace('Five','5').replace('Six','6').replace('Seven','7').replace('Eight','8').replace('Nine','9').replace('Ten','10').replace('Jack','J').replace('Queen','Q').replace('King','K') + ' value=' + suffixes[ij].split(':')[1] + ' style=color:black;>' + denominations[ij] + '</option>';
}
denominations=denominations.sort();
//document.getElementById('ssuit').innerHTML+='<optgroup label="Type" class="type_slct">';
for (ij=0; ij<suits.length; ij++) {
if (suits[ij].toLowerCase().substring(0,1) == 'h' || suits[ij].toLowerCase().substring(0,1) == 'd') {
document.getElementById('ssuit').innerHTML+='<option onmouseover=omo(this); class=red' + ij + ' data-title="" id=o' + suits[ij].toLowerCase() + ' value=' + suits[ij].toLowerCase().substring(0,1) + ('>' + suits[ij]).replace('>Hearts',' style=color:red;>Hearts').replace('>Diamonds',' style=color:red;>Diamonds').replace('>Spades',' style=color:black;>Spades').replace('>Clubs',' style=color:black;>Clubs') + ' ' + suits[ij].replace('Spades','♠').replace('Clubs','♣').replace('Diamonds','♦').replace('Hearts','♥') + '</option><option style=visibility=hidden; value=" "></option>';
document.getElementById('o' + suits[ij].toLowerCase()).setAttribute('data-title',document.getElementById('o' + suits[ij].toLowerCase()).innerText.split(' ')[1]);
document.getElementById('o' + suits[ij].toLowerCase()).title=document.getElementById('o' + suits[ij].toLowerCase()).innerText.split(' ')[1];
} else {
document.getElementById('ssuit').innerHTML+='<option onmouseover=omo(this); title="" id=o' + suits[ij].toLowerCase() + ' value=' + suits[ij].toLowerCase().substring(0,1) + ('>' + suits[ij]).replace('>Hearts',' style=color:red;>Hearts').replace('>Diamonds',' style=color:red;>Diamonds').replace('>Spades',' style=color:black;>Spades').replace('>Clubs',' style=color:black;>Clubs') + ' ' + suits[ij].replace('Spades','♠').replace('Clubs','♣').replace('Diamonds','♦').replace('Hearts','♥') + '</option>';
document.getElementById('o' + suits[ij].toLowerCase()).title=document.getElementById('o' + suits[ij].toLowerCase()).innerText.split(' ')[1];
}
}
//document.getElementById('ssuit').innerHTML+='</optgroup>';
//document.getElementById('scard').disabled=false;
//document.getElementById('ssuit').disabled=false;
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
if (1 == 1) {
document.getElementById('scard').style.visibility='hidden';
document.getElementById('ssuit').style.visibility='hidden';
setTimeout(andthen, 5000);
} else {
select_to_ul('ssuit');
select_to_ul('scard');
populate();
}
} else {
populate();
}
}

function andthen() {
select_to_ul('ssuit');
select_to_ul('scard');
populate();
}

function oc(inid, lio) {
if (inid.indexOf('card') != -1) {
if (lastliocardid != '') { document.getElementById(lastliocardid).style.fontStyle='normal'; lastliocardid=''; }
lastliocardid='' + lio.id;
lio.style.fontStyle='italic';
} else {
if (lastliosuitid != '') { document.getElementById(lastliosuitid).style.fontStyle='normal'; lastliosuitid=''; }
lastliosuitid='' + lio.id;
lio.style.fontStyle='italic';
}
return inid;
}

function select_to_ul(sid) {
var thisv='';
var sois=document.getElementById(sid);
var srect=sois.getBoundingClientRect();
var bdbit='';
var ninety=90;
if (eval('' + screen.width) <= 750) { ninety=120; }
if (sid == 'scard') { bdbit='background-color:rgba(255,0,0,0.1);'; } else { bdbit='border:1px solid rgba(255,0,0,0.1);'; }
// var div_uls='<ul id=u' + sid + ' style="' + bdbit + 'list-style-type:none;cursor:pointer;z-index:987;position:absolute;top:' + srect.top + 'px;left:' + srect.left + 'px;width:' + srect.width + 'px;height:' + srect.height + 'px;"></ul>';
var div_uls='<ul id=u' + sid + ' style="' + bdbit + 'list-style-type:none;cursor:pointer;z-index:987;position:absolute;top:' + eval(ninety + eval('' + srect.top)) + 'px;left:' + srect.left + 'px;width:' + srect.width + 'px;"></ul>';
var sih=sois.innerHTML;
var sihopts=sih.split('</option>');
for (var iho=0; iho<sihopts.length; iho++) {
if (sihopts[iho].trim() != '') {
thisv=sihopts[iho].split(' value="')[1].split('"')[0];
if (sid == 'scard') {
div_uls=div_uls.replace('</ul>', '<li' + ' id=u' + sid + iho + ' onclick="document.getElementById(oc(' + "'" + sid + "'" + ',this)).value=' + "'" + thisv + "'" + '; preemojiit(document.getElementById(' + "'" + sid + "'" + '));" ' + sihopts[iho].split('<option')[1].replace(' style="', ' style="z-index:987;').replace(' value="', ' data-value="').replace(' select ',' pick ') + '</li></ul>');
} else if (thisv != ' ') {
div_uls=div_uls.replace('</ul>', '<li' + ' id=u' + sid + iho + ' onclick="document.getElementById(oc(' + "'" + sid + "'" + ',this)).value=' + "'" + thisv + "'" + '; emojiit(document.getElementById(' + "'" + sid + "'" + '));" ' + sihopts[iho].split('<option')[1].replace(' style="', ' style="z-index:987;').replace(' value="', ' data-value="').replace(' select ',' pick ') + '</li></ul>');
}
}
}
//alert(div_uls);
document.getElementById('uls').innerHTML+=div_uls;
document.getElementById('uls').style.height='' + eval(16 * 14) + 'px';
document.getElementById(sid).style.visibility='hidden';
document.getElementById('myhr').style.visibility='hidden';
document.getElementById('mysummary').innerHTML+='<br><br><br><br>';
document.getElementById('spacer').innerHTML+='';
document.getElementById('sspan').style.textAlign='top';
document.getElementById('sspan').style.marginTop='-55px';
//document.getElementById('hint').style.marginTop='-15px';
document.getElementById('sspan').style.position='absolute';
document.getElementById('dbut').style.position='absolute';
//document.getElementById('bchk').style.position='absolute';
//document.getElementById('bred').style.position='absolute';
srect=document.getElementById('u' + sid).getBoundingClientRect();
var srectsspan=document.getElementById('sspan').getBoundingClientRect();
var srectdbut=document.getElementById('dbut').getBoundingClientRect();
//var srectbred=document.getElementById('bred').getBoundingClientRect();
//var srectbchk=document.getElementById('bchk').getBoundingClientRect();
document.getElementById('sspan').style.top='' + srect.bottom + 'px';
document.getElementById('dbut').style.top='' + srect.bottom + 'px';
//document.getElementById('bchk').style.top='' + srect.bottom + 'px';
//document.getElementById('bred').style.top='' + srect.bottom + 'px';
document.getElementById('dbut').style.left='' + srectdbut.left + 'px';
document.getElementById('sspan').style.left='' + srectsspan.left + 'px';
//document.getElementById('bchk').style.left='' + srectbchk.left + 'px';
//document.getElementById('bred').style.left='' + srectbred.left + 'px';
}

function cardih(inih, inlet) {
var mm='';
for (var iss=0; iss<suffixes.length; iss++) {
if (suffixes[iss].indexOf(denominations[inih] + ':') == 0) {
mm=suffixes[iss].split(denominations[inih] + ':')[1];
}
}
return '//www.rjmprogramming.com.au/images/' + mm + inlet + '.gif';
}

function populate() {
var one=-1;
document.getElementById('sspan').title='';
document.getElementById('sspan').innerHTML='';
document.getElementById('sspan').setAttribute('data-alt','');
suittwos=[];
if (sharing.indexOf('.') != -1) {
suittwos.push(eval(sharing.split('.')[0]));
} else {
suittwos.push(Math.floor(Math.random() * suits.length));
}
var ih=suittwos[0];
while (ih == suittwos[0]) {
if (sharing.indexOf('.') != -1) {
ih=eval(sharing.split('.')[1]);
} else {
ih=Math.floor(Math.random() * suits.length);
}
}
suittwos.push(ih);
if (sharing.indexOf('.') != -1) {
one=eval(sharing.split('.')[2]);
} else {
if (eval(Math.floor(Math.random() * 198767543) % 2) == 1) { one=1; }
}
if (sharing.indexOf('.') != -1) {
ih=eval(sharing.split('.')[3]);
} else if (one == 1) {
ih=Math.floor(Math.random() * eval(-5 + denominations.length));
} else {
ih=eval(5 + Math.floor(Math.random() * eval(-6 + denominations.length)));
}
if (sharing == '' || pluss == '') {
pluss='' + suittwos[0] + '.' + suittwos[1] + '.' + one + '.' + ih;
}
sharing='';
document.getElementById('thefour').innerHTML='';
document.getElementById('thefour').innerHTML+='<img src=' + cardih(ih, suits[suittwos[0]].substring(0,1).toLowerCase()) + '></img>';
ih+=one;
document.getElementById('thefour').innerHTML+='<img src=' + cardih(ih, suits[suittwos[1]].substring(0,1).toLowerCase()) + '></img>';
ih+=one;
document.getElementById('thefour').innerHTML+='<img src=' + cardih(ih, suits[suittwos[0]].substring(0,1).toLowerCase()) + '></img>';
ih+=one;
document.getElementById('thefour').innerHTML+='<img src=' + cardih(ih, suits[suittwos[1]].substring(0,1).toLowerCase()) + '></img>';
ih+=one;
gd=denominations[ih].replace('Ace','01').replace('Two','02').replace('Three','03').replace('Four','04').replace('Five','05').replace('Six','06').replace('Seven','07').replace('Eight','08').replace('Nine','09').replace('Ten','10').replace('Jack','11').replace('Queen','12').replace('King','13') + suits[suittwos[0]].substring(0,1).toLowerCase();
document.getElementById('score').innerHTML='Score: ' + score + '/' + goes + '';
if (!first) { location.href='#myh1'; }
first=false;
}

function smsit() {
var smsn=prompt('Please enter SMS number to send to', '');
if (smsn == null) { smsn=''; }
if (smsn.trim() != '' && pluss != '') {
document.getElementById('aemail').href='sms:' + smsn + '&' + document.getElementById('aemail').href.split(':')[1].split('&')[1].split('%3D')[0] + '%3D' + pluss;
document.getElementById('aemail').click();
}
}

function emailit() {
var emailn=prompt('Please enter email address to send to', '');
if (emailn == null) { emailn=''; }
if (emailn.indexOf('@') != -1 && pluss != '') {
document.getElementById('aemail').href='mailto:' + emailn + '?subject=Card%20Sequence%20Game&' + document.getElementById('aemail').href.split(':')[1].split('&')[1].split('%3D')[0] + '%3D' + pluss;
document.getElementById('aemail').click();
}
}

function omo(oseloptionsi) {
var osel=document.getElementById('ssuit');
if (('' + osel.getAttribute('data-title')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { osel.setAttribute('data-title', ''); }
if (('' + oseloptionsi.getAttribute('data-title')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { osel.setAttribute('data-title', oseloptionsi.getAttribute('data-title')); }
}

function preemojiit(osel) {
//alert('here at preemoji');
var optoit='';
for (var i=0; i<osel.length; i++) {
if (osel.options[i].selected) { if (('' + osel.getAttribute('data-title')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { osel.setAttribute('data-title', ''); } if (('' + osel.options[i].getAttribute('data-title')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { osel.setAttribute('data-title', osel.options[i].getAttribute('data-title')); } optoit=osel.options[i].innerText; document.getElementById('sspan').title=optoit.replace('Ace','A').replace('Two','2').replace('Three','3').replace('Four','4').replace('Five','5').replace('Six','6').replace('Seven','7').replace('Eight','8').replace('Nine','9').replace('Ten','10').replace('Jack','J').replace('Queen','Q').replace('King','K'); if (document.getElementById('sspan').getAttribute('data-alt') != '') { document.getElementById('sspan').innerHTML=document.getElementById('sspan').title.replace('Please select Denomination','') + document.getElementById('sspan').getAttribute('data-alt'); if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { document.getElementById('bchk').scrollIntoView(); } } }
}
}

function emojiit(osel) {
var optoit='';
for (var i=0; i<osel.length; i++) { if (osel.options[i].selected) { optoit=osel.options[i].innerText; } }
if (osel.value == '' || optoit.indexOf(' ') == -1) {
document.getElementById('sspan').innerHTML='';
document.getElementById('sspan').setAttribute('data-alt','');
} else if (osel.value == 'h' || osel.value == 'd') {
document.getElementById('sspan').style.color='red';
document.getElementById('sspan').innerHTML=document.getElementById('sspan').title + optoit.split(' ')[1];
document.getElementById('sspan').setAttribute('data-alt',optoit.split(' ')[1]);
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { document.getElementById('scard').scrollIntoView(); }
} else {
document.getElementById('sspan').style.color='black';
document.getElementById('sspan').innerHTML=document.getElementById('sspan').title + optoit.split(' ')[1];
document.getElementById('sspan').setAttribute('data-alt',optoit.split(' ')[1]);
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { document.getElementById('scard').scrollIntoView(); }
}
if (!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
document.getElementById('ispan').style.display='inline-block';
document.getElementById('ispan').focus();
document.getElementById('ispan').style.display='none';
}
}

window.addEventListener('orientationchange', function(event) {
location.href=document.URL.split('#')[0].split('?')[0] + '?sharing=' + pluss;
});
</script>

</head>
<body onload="setup();" onclick="if (!istart) { istart=true; setInterval(tadd, 1000); }">
<h1 id=myh1>Card Sequence Game <a title='Email on these same cards' onclick="emailit();" style="text-decoration:none;cursor:pointer;">📧</a> <a title='SMS on these same cards' onclick="smsit();" style="text-decoration:none;cursor:pointer;">📟</a></h1>
<details open style=background-color:#f9f9f9;><summary><h4 id=mysumm>RJM Programming - March, 2023</h4></summary>
<h4>Thanks to Dr Crypton's Mind Benders ... Introduction by Isaac Asimov</h4>

<p>Score 2 for correct card. Lose a point for incorrect card. Try to be speedy.</p>
</details>
<p>Seconds Taken (to first correct answer): <span id=isecs>0</span> ... <span id=score>Score: 0/0 </span></p>

<div id=thefour></div><span id=brs><br></span>

<p id=pid style=line-height:85px;>Next Card in Sequence: <select onchange=preemojiit(this); title='Denomination' id=scard data-size=14 style=color:black;vertical-align:top;background-color:rgba(255,0,0,0.1);><option value='' style=color:black;>Please select Denomination</option></select> <select class=red data-title='' onchange="if (this.value == '') { this.value=''; } else { emojiit(this); }" title='Suit' id=ssuit data-size=7 style=color:black;vertical-align:top;><option value='' style=color:black;>Please select Suit</option></select> <span id=spacer></spacer><span data-alt='' title='' id=sspan style='background-color:#f0f0f0;'></span> <div id=dbut style=display:inline-block;><button id=bchk onclick="checkit(document.getElementById('icard'));" style=background-color:yellow;>Check</button> <button id=bred onclick="score--; goes++; populate();" style=background-color:yellow;>Redeal</button></div> <input id=ispan type=text value='' style=display:none;width:1px;></input></p>

<hr id=myhr></hr>
<details id=hint><summary id=mysummary>Hint(s) ...</summary>
Click the "Redeal" button a few times to note the pattern regarding the Card suits ... <button onclick="document.getElementById('hint2').style.display='block';">then</button> ...
<div id=hint2 style=display:none;> ... it is interesting to note that the order of card Denominations is programmed for English language usage ... <button onclick="document.getElementById('hint3').style.display='block';">and so</button> ...</div>
<div id=hint3 style=display:none;> ... the wording of the card Denominations (on that Denominations dropdown, that) is relevant.</div>
</details>
<a target=_blank href='mailto:?subject=Card%20Sequence%20Game&body=https%3A%2F%2Fwww.rjmprogramming.com.au%2FHTMLCSS%2Fcard_sequence.html%3Fsharing%3D' style=display:none; id=aemail>Email</a>
<div id=uls></div>
</body>
</html>