{"id":58715,"date":"2023-03-24T03:01:33","date_gmt":"2023-03-23T17:01:33","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=58715"},"modified":"2023-03-24T13:16:46","modified_gmt":"2023-03-24T03:16:46","slug":"number-sequence-game-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/number-sequence-game-primer-tutorial\/","title":{"rendered":"Number Sequence Game Primer Tutorial"},"content":{"rendered":"<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 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","protected":false},"excerpt":{"rendered":"<p>During the day before yesterday&#8217;s Card Sequence Game Multicoloured Dropdown and Mobile Tutorial 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 &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/number-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":[174,3095,187,2503,1604,4284,354,380,385,476,576,590,652,1807,739,2394,1895,1133,1137,1159,3630],"class_list":["post-58715","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-games","category-tutorials","tag-button","tag-card","tag-cards","tag-clone","tag-collaboration","tag-denomination","tag-dom","tag-email","tag-emoji","tag-game","tag-html","tag-image","tag-javascript","tag-link","tag-mailto","tag-number","tag-sequence","tag-share","tag-sharing","tag-sms","tag-suit"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/58715"}],"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=58715"}],"version-history":[{"count":3,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/58715\/revisions"}],"predecessor-version":[{"id":58724,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/58715\/revisions\/58724"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=58715"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=58715"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=58715"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}