{"id":58719,"date":"2023-03-25T03:01:39","date_gmt":"2023-03-24T17:01:39","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=58719"},"modified":"2023-03-24T18:43:47","modified_gmt":"2023-03-24T08:43:47","slug":"emoji-sequence-game-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-sequence-game-primer-tutorial\/","title":{"rendered":"Emoji Sequence Game Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_sequence.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Sequence Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_sequence.jpg\" title=\"Emoji Sequence Game Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Emoji Sequence Game Primer Tutorial<\/p><\/div>\n<p>It&#8217;s another layer of cloning happening today with our new &#8220;Emoji Sequence Game&#8221; on top of the cloning with yesterday&#8217;s <a title='Number Sequence Game Primer Tutorial' href='#nsgpt'>Number Sequence Game Primer Tutorial<\/a>, but there was a minor improvement to the &#8220;middleperson&#8221; clone before &#8220;<a target=_blank title='?' href='https:\/\/www.google.com\/search?q=dolly+the+sheep&#038;rlz=1C5CHFA_enAU973AU973&#038;oq=dolly+the+sheep&#038;aqs=chrome..69i57j0i512l2j46i512j0i512l6.3658j0j4&#038;sourceid=chrome&#038;ie=UTF-8'><font size=1>Hello<\/font> Dolly<\/a>&#8221; appeared!<\/p>\n<p>We normally involve &#8230;<\/p>\n<p><code><br \/>\n<a target=_blank title='Javascript encodeURIComponent() method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_encodeuricomponent.asp'>encodeURIComponent()<\/a> ... to encode data on the way out of the originator web application ... before that data reaches the ...<br \/>\n<a target=_blank title='Javascript decodeURIComponent() method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_decodeuricomponent.asp'>decodeURIComponent()<\/a> ... to decode at the destination web application<br \/>\n<\/code><\/p>\n<p> &#8230; in both the clientside wooooorrrrllllddd of Javascript and lots of the time in the serverside wooooorrrrllllddd of a language such as PHP, though our plan to improve, below, takes ideas from PHP <a target=_blank title='PHP base64_encode information' href='http:\/\/php.net\/manual\/en\/function.base64-encode.php'>base64_encode<\/a> and <a target=_blank title='PHP base64_decode information' href='http:\/\/php.net\/manual\/en\/function.base64-decode.php'>base64_decode<\/a> (though &#8220;atob&#8221; is not as good as base64-decode) alternative ideas.<\/p>\n<p>We don&#8217;t use them much but &#8230;<\/p>\n<p><code><br \/>\n<a target=_blank title='Javascript btoa() method information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/met_win_btoa.asp'>btoa<\/a> ... to encode data (in a base 64 way) on the way out of the originator web application ... before that data reaches the ...<br \/>\n<a target=_blank title='Javascript atob() method information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/met_win_atob.asp'>atob<\/a> ... to decode (in a base 64 way) at the destination web application<br \/>\n<\/code><\/p>\n<p> &#8230; has a twofold improvement, to our mind, with that <i>minor improvement to the &#8220;middleperson&#8221; clone<\/i> work &#8230;<\/p>\n<ul>\n<li>we make the game less obvious to decouple for the recipient of an email or SMS sharing (GET web browser address bar URL) call (starting to encode these means by which to too obviously solve the game&#8217;s sequence &#8230; doh!) &#8230;<\/li>\n<li>very simple output data (like ours, for this lot of web applications) of &#8220;atob&#8221; already suits &#8220;decodeURIComponent&#8221;, as does &#8220;btoa&#8221; already suits &#8220;encodeURIComponent&#8221; &#8230;<br \/>\n<code><br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\n \/\/ At sender webpage ...<br \/>\n var argstring='<span id=line1><\/span>';<br \/>\n var atobarg=btoa(argstring); \/\/ '<span id=line2><\/span>';<br \/>\n var encatobarg=encodeURIComponent(btoa(argstring)); \/\/'<span id=line3><\/span>';<br \/>\n \/\/ ... now imagine above passed to <i>receiver.html<\/i>?sendthis=<span id=line4><\/span><br \/>\n \/\/ ------------------------------------------------------------------<br \/>\n \/\/ At receiver webpage <i>receiver.html<\/i> ...<br \/>\n var inarg=location.search.split('sendthis=')[1] ? (location.search.split('sendthis=')[1].split('&')[0]) : \"<span id=line5><\/span>\"; \/\/<span id=line6><\/span><br \/>\n var atobarg=window.atob(inarg); \/\/'<span id=line7><\/span>';<br \/>\n var deatobarg=decodeURIComponent(window.atob(inarg)); \/\/'<span id=line8><\/span>';<br \/>\n&lt;\/script&gt;<br \/>\n<\/code><br \/>\n<font size=1> &#8230;<br \/>\n &#8230; but we have to warn with more complex data you need all 4 working together ( <i>btoa -&gt; encodeURIComponent | decodeURIComponent -&gt; atob<\/i> ) as per &#8230;<br \/>\n<code style='font-size:8px;'><br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\n \/\/ At sender webpage ...<br \/>\n var argstring='<span id=xline1><\/span>';<br \/>\n var btoaarg=btoa(argstring); \/\/ '<span id=xline2><\/span>';<br \/>\n var encbtoaarg=encodeURIComponent(btoa(argstring)); \/\/'<span id=xline3><\/span>';<br \/>\n \/\/ ... now imagine above passed to <i>receiver.html<\/i>?sendthis=<span id=xline4><\/span><br \/>\n \/\/ ------------------------------------------------------------------<br \/>\n \/\/ At receiver webpage <i>receiver.html<\/i> ...<br \/>\n var inarg=location.search.split('sendthis=')[1] ? decodeURIComponent(location.search.split('sendthis=')[1].split('&')[0]) : \"<span id=xline5><\/span>\"; \/\/<span id=xline6><\/span><br \/>\n var deatobarg=window.atob(inarg); \/\/'<span id=xline7><\/span>';<br \/>\n&lt;\/script&gt;<br \/>\n<\/code><br \/>\n<\/font><br \/>\n<iframe style=display:none src=\/\/www.rjmprogramming.com.au\/About_Us.html onload=\"var argstring=('' + new Date()).replace(\/\\:\/g,' ').split('+')[0].replace(\/\\ \/g,'.'); argstring='1.2.3.456';   document.getElementById('line1').innerHTML=argstring; var btoaarg=window.btoa(argstring); document.getElementById('line2').innerHTML=btoaarg; var encbtoaarg=encodeURIComponent(window.btoa(argstring));  document.getElementById('line3').innerHTML=encbtoaarg;  document.getElementById('line4').innerHTML=encbtoaarg;  var inarg=location.search.split('sendthis=')[1] ? (location.search.split('sendthis=')[1].split('&#038;')[0]) : ''; if (inarg == '') { inarg=encbtoaarg;  }  document.getElementById('line5').innerHTML=inarg;  document.getElementById('line6').innerHTML=inarg; var atobarg=window.atob(inarg); document.getElementById('line7').innerHTML=atobarg;  var deatobarg=decodeURIComponent(window.atob(inarg)); document.getElementById('line8').innerHTML=deatobarg;  var xargstring=('' + new Date());  document.getElementById('xline1').innerHTML=xargstring; var xbtoaarg=window.btoa(xargstring); document.getElementById('xline2').innerHTML=xbtoaarg; var xencbtoaarg=encodeURIComponent(window.btoa(xargstring));  document.getElementById('xline3').innerHTML=xencbtoaarg;  document.getElementById('xline4').innerHTML=xencbtoaarg;  var xinarg=location.search.split('sendthis=')[1] ? decodeURIComponent(location.search.split('sendthis=')[1].split('&#038;')[0]) : ''; if (xinarg == '') { xinarg=decodeURIComponent(xencbtoaarg);  }  document.getElementById('xline5').innerHTML=xinarg;  document.getElementById('xline6').innerHTML=xinarg; var xatobarg=window.atob(xinarg); document.getElementById('xline7').innerHTML=xatobarg;   \"><\/iframe><br \/>\n &#8230; and so can be a simple one for one replacement of it, in arrangements &#8230; and believe it or not, we have never used it in that way before, to our living memory <font size=1>(but am not vouching for any dead memories here!)<\/font><\/li>\n<\/ul>\n<p> &#8230; ideas affecting all of (these web applications inspired by <i>Dr Crypton&#8217;s Mind Benders, Introduction by Isaac Asimov<\/i> (ISBN 0207146144) &#8230; thanks) &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/number_sequence.html--GETME\">our cloned<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/number_sequence.html--GETME\">&#8220;proof of concept&#8221;<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/number_sequence.html\">Number Sequence Game<\/a> you can also <a href='#myifnum'>try below<\/a> &#8230;<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/card_sequence.html---GETME\">the changed<\/a> (non-mobile &#8220;onmouseover&#8221; event sensitive) <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/card_sequence.html---GETME\">card_sequence.html<\/a> Card Sequence Game <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/card_sequence.html\">web application<\/a> better suited to sharing and collaboration and which you can also <a href='#ifgametwo'>try below<\/a> &#8230;<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_sequence.html-GETME\">our cloned<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_sequence.html-GETME\">&#8220;proof of concept&#8221;<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_sequence.html\">Emoji Sequence Game<\/a> you can also try below  &#8230;<\/li>\n<\/ul>\n<p><iframe id=myifemoji src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_sequence.html\" style=\"width:100%;height:400px;\"><\/iframe><\/p>\n<p><b><i>Did you know?<\/i><\/b><\/p>\n<p>With all this encoding going on, what is left to ease the burden for the programmer testing the logic, so that they have not &#8220;painted themselves into a corner&#8221;, so to speak?  Well, there is your modern web browser&#8217;s (perhaps Develop menu residing) Web Inspector functionality.   Of course, to advertise this in your game, is not the best, as it might remove the challenge for the game player, but you, as the coder, will know enough about the game&#8217;s innards to be able to &#8220;watch&#8221; a global variable, and then know how to answer for the scenarios you need to know web application behaviour for, at the very least &#8230;<\/p>\n<ul>\n<li>wrong answer<\/li>\n<li>correct answer<\/li>\n<\/ul>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-sequence-game-primer-tutorial\/'>Emoji Sequence Game Primer Tutorial<\/a>.<\/p-->\n<hr>\n<p id='nsgpt'>Previous relevant <a target=_blank title='Number Sequence Game Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/number-sequence-game-primer-tutorial\/'>Number Sequence Game Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/number_sequence.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Number Sequence Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/number_sequence.jpg\" title=\"Number Sequence Game Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Number Sequence Game Primer Tutorial<\/p><\/div>\n<p>During <a title='Card Sequence Game Sharing Tutorial' href='#csgst'>the day before<\/a> yesterday&#8217;s <a title='Card Sequence Game Multicoloured Dropdown and Mobile Tutorial' href='#csgmdmt'>Card Sequence Game Multicoloured Dropdown and Mobile Tutorial<\/a> we kept a snapshot of the code aside.  Why?  Well, it suited as the clone to work with, in order to develop today&#8217;s new Number Sequence game  we were inspired by <i>Dr Crypton&#8217;s Mind Benders, Introduction by Isaac Asimov<\/i> (ISBN 0207146144) to write.<\/p>\n<p>Web application games, even this simple, are a challenge regarding &#8230;<\/p>\n<ul>\n<li>the idea for a game<\/li>\n<li>the design of the game<\/li>\n<li>developing media for the game (which we often simplify to the bone)<\/li>\n<\/ul>\n<p>Again, we&#8217;d be giving the game away to say much more about it, though the webpage layout up the top will look familiar to readers following these <i>Dr Crypton&#8217;s Mind Benders, Introduction by Isaac Asimov<\/i> (ISBN 0207146144) inspired games of recent times.<\/p>\n<p>So, feel free to try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/number_sequence.html-GETME\">our cloned<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/number_sequence.html-GETME\">&#8220;proof of concept&#8221;<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/number_sequence.html\">Number Sequence Game<\/a> you can also try below &#8230;<\/p>\n<p><iframe id=myifnum style=\"width:100%;height:800px;\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/number_sequence.html\"><\/iframe><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/new-card-sequence-game-multicoloured-dropdown-and-mobile-tutorial\/'>New Card Sequence Game Multicoloured Dropdown and Mobile Tutorial<\/a>.<\/p-->\n<hr>\n<p id='csgmdmt'>Previous relevant <a target=_blank title='Card Sequence Game Multicoloured Dropdown and Mobile Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/card-sequence-game-multicoloured-dropdown-and-mobile-tutorial\/'>Card Sequence Game Multicoloured Dropdown and Mobile Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/card_sequence.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Card Sequence Game Multicoloured Dropdown and Mobile Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/card_sequence_ulli.jpg\" title=\"Card Sequence Game Multicoloured Dropdown and Mobile Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Card Sequence Game Multicoloured Dropdown and Mobile Tutorial<\/p><\/div>\n<p>We&#8217;ve spent a day, onto the progress to yesterday&#8217;s <a title='Card Sequence Game Sharing Tutorial' href='#csgst'>Card Sequence Game Sharing Tutorial<\/a>, with our Card Sequence game web application, improving on the card suit hearts and diamonds suit emojis, fundamentally black, but CSS achievable as red (as we are mostly familiar) &#8230;<\/p>\n<ul>\n<li>for non-mobile we could get a better &#8220;red hearts and diamonds card suit emoji&#8221; result with the dropdown by starting to use the &#8220;size&#8221; attribute &#8230; which unfortunately is a <i>&#8220;tutti-frutti dropdown effect&#8221;<\/i> which does not work for mobile &#8230; so &#8230;<\/li>\n<li>for mobile we overlayed (an unordered list) &#8220;ul -&gt; li&#8221; nested arrangement to replace the dropdown &#8230;<br \/>\n<code><br \/>\n  function select_to_ul(sid) {<br \/>\n    var thisv='';<br \/>\n    var sois=document.getElementById(sid);<br \/>\n    var srect=sois.getBoundingClientRect();<br \/>\n    var bdbit='';<br \/>\n    var ninety=90;<br \/>\n    if (eval('' + screen.width) &lt;= 750) {  ninety=120; }<br \/>\n    if (sid == 'scard') { bdbit='background-color:rgba(255,0,0,0.1);'; } else {  bdbit='border:1px solid rgba(255,0,0,0.1);';  }<br \/>\n   \/\/ var div_uls='&lt;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;\"&gt;&lt;\/ul&gt;';<br \/>\n    var div_uls='&lt;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;\"&gt;&lt;\/ul&gt;';<br \/>\n    var sih=sois.innerHTML;<br \/>\n    var sihopts=sih.split('&lt;\/option&gt;');<br \/>\n    for (var iho=0; iho&lt;sihopts.length; iho++) {<br \/>\n      if (sihopts[iho].trim() != '') {<br \/>\n        thisv=sihopts[iho].split(' value=\"')[1].split('\"')[0];<br \/>\n        if (sid == 'scard') {<br \/>\n        div_uls=div_uls.replace('&lt;\/ul&gt;', '&lt;li' + ' id=u' + sid + iho + ' onclick=\"document.getElementById(oc(' + \"'\" + sid + \"'\" + ',this)).value=' + \"'\" + thisv + \"'\" + '; preemojiit(document.getElementById(' + \"'\" + sid + \"'\" + '));\" ' + sihopts[iho].split('&lt;option')[1].replace(' style=\"', ' style=\"z-index:987;').replace(' value=\"', ' data-value=\"').replace(' select ',' pick ') + '&lt;\/li&gt;&lt;\/ul&gt;');<br \/>\n        } else if (thisv != ' ') {<br \/>\n        div_uls=div_uls.replace('&lt;\/ul&gt;', '&lt;li' + ' id=u' + sid + iho + ' onclick=\"document.getElementById(oc(' + \"'\" + sid + \"'\" + ',this)).value=' + \"'\" + thisv + \"'\" + '; emojiit(document.getElementById(' + \"'\" + sid + \"'\" + '));\" ' + sihopts[iho].split('&lt;option')[1].replace(' style=\"', ' style=\"z-index:987;').replace(' value=\"', ' data-value=\"').replace(' select ',' pick ') + '&lt;\/li&gt;&lt;\/ul&gt;');<br \/>\n        }<br \/>\n        }<br \/>\n    }<br \/>\n    \/\/alert(div_uls);<br \/>\n    document.getElementById('uls').innerHTML+=div_uls;<br \/>\n    document.getElementById('uls').style.height='' + eval(16 * 14) + 'px';<br \/>\n    document.getElementById(sid).style.visibility='hidden';<br \/>\n    document.getElementById('myhr').style.visibility='hidden';<br \/>\n    document.getElementById('mysummary').innerHTML+='&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;';<br \/>\n    document.getElementById('spacer').innerHTML+='';<br \/>\n    document.getElementById('sspan').style.textAlign='top';<br \/>\n    document.getElementById('sspan').style.marginTop='-55px';<br \/>\n    \/\/document.getElementById('hint').style.marginTop='-15px';<br \/>\n    document.getElementById('sspan').style.position='absolute';<br \/>\n    document.getElementById('dbut').style.position='absolute';<br \/>\n    \/\/document.getElementById('bchk').style.position='absolute';<br \/>\n    \/\/document.getElementById('bred').style.position='absolute';<br \/>\n    srect=document.getElementById('u' + sid).getBoundingClientRect();<br \/>\n    var srectsspan=document.getElementById('sspan').getBoundingClientRect();<br \/>\n    var srectdbut=document.getElementById('dbut').getBoundingClientRect();<br \/>\n    \/\/var srectbred=document.getElementById('bred').getBoundingClientRect();<br \/>\n    \/\/var srectbchk=document.getElementById('bchk').getBoundingClientRect();<br \/>\n    document.getElementById('sspan').style.top='' + srect.bottom + 'px';<br \/>\n    document.getElementById('dbut').style.top='' + srect.bottom + 'px';<br \/>\n    \/\/document.getElementById('bchk').style.top='' + srect.bottom + 'px';<br \/>\n    \/\/document.getElementById('bred').style.top='' + srect.bottom + 'px';<br \/>\n    document.getElementById('dbut').style.left='' + srectdbut.left + 'px';<br \/>\n    document.getElementById('sspan').style.left='' + srectsspan.left + 'px';<br \/>\n    \/\/document.getElementById('bchk').style.left='' + srectbchk.left + 'px';<br \/>\n    \/\/document.getElementById('bred').style.left='' + srectbred.left + 'px';<br \/>\n  }<br \/>\n<\/code><br \/>\n &#8230; at least in a display sense, though event logic maps back to the dropdown event logics of yesterday<\/li>\n<\/ul>\n<p> &#8230; as a way forward with improvement on this project.<\/p>\n<p>We also had a look, in the same sense, at changing the alert popup for a successful mapping to an &#8220;h4&#8221; element content (capable of the red hearts and diamonds card suit emojis), and some new &#8220;tooltip&#8221; type CSS &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\n\/* Thanks to <a target=_blank title='https:\/\/stackoverflow.com\/questions\/2011142\/how-to-change-the-style-of-the-title-attribute-inside-an-anchor-tag' href='https:\/\/stackoverflow.com\/questions\/2011142\/how-to-change-the-style-of-the-title-attribute-inside-an-anchor-tag'>https:\/\/stackoverflow.com\/questions\/2011142\/how-to-change-the-style-of-the-title-attribute-inside-an-anchor-tag<\/a> *\/<br \/>\n<br \/>\n[data-title]:hover:after {<br \/>\n    opacity: 1;<br \/>\n    transition: all 0.1s ease 0.5s;<br \/>\n    visibility: visible;<br \/>\n}<br \/>\n<br \/>\n[data-title]:after {<br \/>\n    content: attr(data-title);<br \/>\n    background-color: #00FF00;<br \/>\n    color: red;<br \/>\n    font-size: 100%;<br \/>\n    position: absolute;<br \/>\n    padding: 1px 5px 2px 5px;<br \/>\n    bottom: -1.6em;<br \/>\n    left: 100%;<br \/>\n    white-space: nowrap;<br \/>\n    box-shadow: 1px 1px 3px #222222;<br \/>\n    opacity: 0;<br \/>\n    border: 1px solid #111111;<br \/>\n    z-index: 99999;<br \/>\n    visibility: hidden;<br \/>\n}<br \/>\n<br \/>\n[data-title] {<br \/>\n    position: relative;<br \/>\n}<br \/>\n<br \/>\n.red2 {<br \/>\n    \/*This causes the wrapping element to be the same size as what it contains.*\/<br \/>\n    display: inline-block;<br \/>\n}<br \/>\n<br \/>\n.red3 {<br \/>\n    \/*This causes the wrapping element to be the same size as what it contains.*\/<br \/>\n    display: inline-block;<br \/>\n}<br \/>\n<br \/>\noption.red3 {<br \/>\n    margin-top: -16px;<br \/>\n}<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; to supplement the non-mobile hover &#8220;title&#8221; attribute &#8220;black renditions of the hearts and diamonds card suit emojis&#8221; and (document.body onload event logic) Javascript, <font color=blue>as below<\/font> linking up to that arrangement preparing the dropdown (ie. HTML select) element option subelement creating code (which flows through to the overlayed ul -&gt; li mobile arrangement code above) &#8230;<\/p>\n<p><code><br \/>\n  function setup() {<br \/>\n    var ij=0;<br \/>\n    if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n     document.getElementById('scard').size=document.getElementById('scard').getAttribute('data-size');<br \/>\n     document.getElementById('ssuit').size=document.getElementById('ssuit').getAttribute('data-size');<br \/>\n     document.getElementById('scard').style.overflow='hidden';<br \/>\n     document.getElementById('ssuit').style.overflow='hidden';<br \/>\n    } else {<br \/>\n     document.getElementById('brs').innerHTML='';<br \/>\n    }<br \/>\n    document.getElementById('bchk').style.border='1px solid black';<br \/>\n    document.getElementById('bred').style.border='1px dashed black';<br \/>\n    for (ij=0; ij&lt;denominations.length; ij++) {<br \/>\n      document.getElementById('scard').innerHTML+='&lt;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;&gt;' + denominations[ij] + '&lt;\/option&gt;';<br \/>\n    }<br \/>\n    denominations=denominations.sort();<br \/>\n    \/\/document.getElementById('ssuit').innerHTML+='&lt;optgroup label=\"Type\" class=\"type_slct\"&gt;';<br \/>\n    for (ij=0; ij&lt;suits.length; ij++) {<br \/>\n      <font color=blue>if (suits[ij].toLowerCase().substring(0,1) == 'h' || suits[ij].toLowerCase().substring(0,1) == 'd') {<br \/>\n      document.getElementById('ssuit').innerHTML+='&lt;option onmouseover=omo(this); class=red' + ij + ' data-title=\"\" id=o' + suits[ij].toLowerCase() + ' value=' + suits[ij].toLowerCase().substring(0,1) + ('&gt;' + suits[ij]).replace('&gt;Hearts',' style=color:red;&gt;Hearts').replace('&gt;Diamonds',' style=color:red;&gt;Diamonds').replace('&gt;Spades',' style=color:black;&gt;Spades').replace('&gt;Clubs',' style=color:black;&gt;Clubs') + ' ' + suits[ij].replace('Spades','&amp;#9824;').replace('Clubs','&amp;#9827;').replace('Diamonds','&amp;#9830;').replace('Hearts','&amp;#9829;') + '&lt;\/option&gt;&lt;option style=visibility=hidden; value=\" \"&gt;&lt;\/option&gt;';<br \/>\n      document.getElementById('o' + suits[ij].toLowerCase()).setAttribute('data-title',document.getElementById('o' + suits[ij].toLowerCase()).innerText.split(' ')[1]);<br \/>\n      document.getElementById('o' + suits[ij].toLowerCase()).title=document.getElementById('o' + suits[ij].toLowerCase()).innerText.split(' ')[1];<br \/>\n      } else {<\/font><br \/>\n      document.getElementById('ssuit').innerHTML+='&lt;option onmouseover=omo(this); title=\"\" id=o' + suits[ij].toLowerCase() + ' value=' + suits[ij].toLowerCase().substring(0,1) + ('&gt;' + suits[ij]).replace('&gt;Hearts',' style=color:red;&gt;Hearts').replace('&gt;Diamonds',' style=color:red;&gt;Diamonds').replace('&gt;Spades',' style=color:black;&gt;Spades').replace('&gt;Clubs',' style=color:black;&gt;Clubs') + ' ' + suits[ij].replace('Spades','&amp;#9824;').replace('Clubs','&amp;#9827;').replace('Diamonds','&amp;#9830;').replace('Hearts','&amp;#9829;') + '&lt;\/option&gt;';<br \/>\n      <font color=blue>document.getElementById('o' + suits[ij].toLowerCase()).title=document.getElementById('o' + suits[ij].toLowerCase()).innerText.split(' ')[1];<br \/>\n      }<\/font><br \/>\n    }<br \/>\n    \/\/document.getElementById('ssuit').innerHTML+='&lt;\/optgroup&gt;';<br \/>\n    \/\/document.getElementById('scard').disabled=false;<br \/>\n    \/\/document.getElementById('ssuit').disabled=false;<br \/>\n    if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n      if (1 == 1) {<br \/>\n      document.getElementById('scard').style.visibility='hidden';<br \/>\n      document.getElementById('ssuit').style.visibility='hidden';<br \/>\n      setTimeout(andthen, 5000);<br \/>\n      } else {<br \/>\n      select_to_ul('ssuit');<br \/>\n      select_to_ul('scard');<br \/>\n      populate();<br \/>\n      }<br \/>\n    } else {<br \/>\n      populate();<br \/>\n    }<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/card_sequence.html--GETME\">the changed<\/a> (non-mobile &#8220;onmouseover&#8221; event sensitive) <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/card_sequence.html--GETME\">card_sequence.html<\/a> Card Sequence Game <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/card_sequence.html\">web application<\/a> better suited to sharing and collaboration and which you can also <a href='#ifgametwo'>try below<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/card-sequence-game-multicoloured-dropdown-and-mobile-tutorial\/'>Card Sequence Game Multicoloured Dropdown and Mobile Tutorial<\/a>.<\/p-->\n<hr>\n<p id='csgst'>Previous relevant <a target=_blank title='Card Sequence Game Sharing Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/card-sequence-game-sharing-tutorial\/'>Card Sequence Game Sharing Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/card_sequence.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Card Sequence Game Sharing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/card_sequence_sharing.jpg\" title=\"Card Sequence Game Sharing Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Card Sequence Game Sharing Tutorial<\/p><\/div>\n<p>The web application of yesterday&#8217;s <a title='Card Sequence Game Tutorial' href='#csgt'>Card Sequence Game Tutorial<\/a> had a definite feel as if it could represent &#8230;<\/p>\n<ul>\n<li>a challenge amongst friends &#8230; and as such &#8230;<\/li>\n<li>we need to setup a &#8220;level playing field&#8221; means by which &#8230;<\/li>\n<li>we can share via email (&#8220;mailto:&#8221; link) or SMS (&#8220;sms:&#8221; link) clickable link URLs<\/li>\n<\/ul>\n<p> &#8230; as a &#8220;sharing&#8221; (or for your less competitive friends, &#8220;collaborative&#8221;) approach to playing our Card Sequence Game.<\/p>\n<p>We also start to use emojis both as &#8230;<\/p>\n<ul>\n<li>buttons for this sharing functionality (for email &#128231; and SMS &#128223;) &#8230; and &#8230;<\/li>\n<li>on the card Suit dropdown element content being more Internationally more self-explanatory, the frustration, on some platforms, with a dropdown element <select data-onchange=\"emojiit(this);\" title=\"Suit\" id=\"ssuit\" size=5><option value=\"\">Please select Suit<\/option><option value=\"s\">Spades \u2660<\/option><option value=\"c\">Clubs \u2663<\/option><option value=\"d\" style=\"color:red;\">Diamonds \u2666<\/option><option value=\"h\" style=\"color:red;\">Hearts \u2665<\/option><\/select> being that heart and diamond emojis appear black, and so we added in an HTML span element allowing for these emojis to appear in a more apt red colour, as exemplified by <span data-alt=\"\u2666\" title=\"7\" id=\"sspan\" style=\"background-color: rgb(240, 240, 240); color: red;\">7\u2666<\/span><\/li>\n<\/ul>\n<p>You can retry <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/card_sequence.html-GETME\">a changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/card_sequence.html-GETME\">card_sequence.html<\/a> Card Sequence Game <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/card_sequence.html\">web application<\/a> better suited to sharing and collaboration and which you can also <a href='#ifgametwo'>try below<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/card-sequence-game-sharing-tutorial\/'>Card Sequence Game Sharing Tutorial<\/a>.<\/p-->\n<hr>\n<p id='csgt'>Previous relevant <a target=_blank title='Card Sequence Game Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/card-sequence-game-tutorial\/'>Card Sequence Game Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/card_sequence.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Card Sequence Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/card_sequence.jpg\" title=\"Card Sequence Game Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Card Sequence Game Tutorial<\/p><\/div>\n<p>We follow up yesterday&#8217;s <a title='Date Day of the Week Game Primer Tutorial' href='#ddwgpt'>Date Day of the Week Game Primer Tutorial<\/a> <i>Dr Crypton&#8217;s Mind Benders, Introduction by Isaac Asimov<\/i> (ISBN 0207146144) lead with a card sequence game we think might be a challenge for you.<\/p>\n<p>Again, we&#8217;ve got hints, but you lose score as you consult them.  Again we have &#8230;<\/p>\n<ul>\n<li>time (seconds)<\/li>\n<li>score (two plus for correct and one minus for incorrect)<\/li>\n<li>goes<\/li>\n<\/ul>\n<p> &#8230; as &#8220;bragging rights&#8221; data if you are comparing to friends?!<\/p>\n<p>So try the new <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/card_sequence.html_GETME\">&#8220;proof of concept&#8221;<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/card_sequence.html\">web application<\/a> you can also try below &#8230;<\/p>\n<p><iframe id=ifgametwo src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/card_sequence.html\" style=\"width:100%;height:750px;\"><\/iframe><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/card-sequence-game-tutorial\/'>Card Sequence Game Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ddwgpt'>Previous relevant <a target=_blank title='Date Day of the Week Game Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/date-day-of-the-week-game-primer-tutorial\/'>Date Day of the Week Game Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/consecutive_friday_13ths_per_month_through_history.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Date Day of the Week Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/consecutive_friday_13ths_per_month_through_history.jpg\" title=\"Date Day of the Week Game Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Date Day of the Week Game Primer Tutorial<\/p><\/div>\n<p>In the category of &#8220;Mind Bender&#8221;, today, we took inspiration from <i>Dr Crypton&#8217;s Mind Benders, Introduction by Isaac Asimov<\/i> (ISBN 0207146144), thanks, in creating a Date and Day of the Week web application based on &#8230;<\/p>\n<ul>\n<li>Friday the 13th &#8230; specifically &#8230;<\/li>\n<li>Which years have 2 consecutive Friday the 13ths occurring in subsequent months?<\/li>\n<\/ul>\n<p>To say much more would be giving the game away in our new <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/consecutive_friday_13ths_per_month_through_history.html_GETME\">&#8220;proof of concept&#8221;<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/consecutive_friday_13ths_per_month_through_history.html\">web application<\/a> you can also try below &#8230;<\/p>\n<p><iframe id=ifgameone src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/consecutive_friday_13ths_per_month_through_history.html\" style=\"width:100%;height:600px;\"><\/iframe><\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d58677' onclick='var dv=document.getElementById(\"d58677\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/game\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d58677' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d58683' onclick='var dv=document.getElementById(\"d58683\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/sequence\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d58683' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d58687' onclick='var dv=document.getElementById(\"d58687\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/sharing\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d58687' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d58701' onclick='var dv=document.getElementById(\"d58701\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/dropdown\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d58701' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d58715' onclick='var dv=document.getElementById(\"d58715\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/number\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d58715' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d58719' onclick='var dv=document.getElementById(\"d58719\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/clone\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d58719' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>It&#8217;s another layer of cloning happening today with our new &#8220;Emoji Sequence Game&#8221; on top of the cloning with yesterday&#8217;s Number Sequence Game Primer Tutorial, but there was a minor improvement to the &#8220;middleperson&#8221; clone before &#8220;Hello Dolly&#8221; appeared! We &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-sequence-game-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,15,37],"tags":[2914,1669,1885,1835,2830,1653,2829,174,3095,187,4286,2503,1604,305,1606,4284,327,354,380,385,1605,476,3081,576,590,652,1807,739,2394,1895,1133,1137,1159,1345,1721,1719,1404,2099],"class_list":["post-58719","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-games","category-tutorials","tag-_get","tag-address-bar","tag-argument","tag-arguments","tag-atob","tag-base64","tag-btoa","tag-button","tag-card","tag-cards","tag-clientside","tag-clone","tag-collaboration","tag-debug","tag-decodeuricomponent","tag-denomination","tag-did-you-know","tag-dom","tag-email","tag-emoji","tag-encodeuricomponent","tag-game","tag-global-variable","tag-html","tag-image","tag-javascript","tag-link","tag-mailto","tag-number","tag-sequence","tag-share","tag-sharing","tag-sms","tag-url","tag-variable","tag-watch","tag-web-browser","tag-web-inspector"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/58719"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=58719"}],"version-history":[{"count":50,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/58719\/revisions"}],"predecessor-version":[{"id":58770,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/58719\/revisions\/58770"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=58719"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=58719"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=58719"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}