{"id":48626,"date":"2020-04-18T03:01:36","date_gmt":"2020-04-17T17:01:36","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=48626"},"modified":"2020-04-16T13:09:29","modified_gmt":"2020-04-16T03:09:29","slug":"emoji-circuit-quiz-animated-emoji-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-circuit-quiz-animated-emoji-tutorial\/","title":{"rendered":"Emoji Circuit Quiz Animated Emoji Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flagquiz.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Circuit Animated Emoji Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flagquiz_animate_emoji.jpg\" title=\"Emoji Circuit Quiz Animated Emoji Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji Circuit Quiz Animated Emoji Tutorial<\/p><\/div>\n<p>Ever since we got some &#8220;animated emojis&#8221; working, when we presented <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/mind-map-and-flowchart-and-venn-diagram-tutorial\/' title='Mind Map and Flowchart and Venn Diagram Tutorial'>Mind Map and Flowchart and Venn Diagram Tutorial<\/a> we&#8217;ve been wondering where we could apply it in a less gimmicky way.   Half way to non-gimmicky, we figured, was in a game or quiz, and then we remembered the web application underlying the relatively recent <a title='Emoji Circuit Quiz Genericization Tutorial' href='#ecqgt'>Emoji Circuit Quiz Genericization Tutorial<\/a>, with its &#8230;<\/p>\n<ul>\n<li>Flag emoji<\/li>\n<li>Animal emoji<\/li>\n<li>Food emoji<\/li>\n<\/ul>\n<p> &#8230; categories, being the basis for the extension to functionality of &#8230;<\/p>\n<ul>\n<li>Flag Animal animated emoji<\/li>\n<li>Animal Food animated emoji<\/li>\n<li>Flag Food animated emoji <font size=1>&#8230; <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flagquiz_animate_emoji.jpg\" title=\"Tutorial picture\">&#8220;Antarctica shortcake, anyone?!  Perhaps a little Angola shaved ice on the side?&#8221;<\/a><\/font><\/li>\n<\/ul>\n<p> &#8230; doing a lot of doubling up of arrays and a randomization of the order of the <i>biggest<\/i> array, &#8220;<i>biggest<\/i>&#8221; to give the chance to all members to &#8220;make the grade&#8221; within the smallest array (of the two) involved being the &#8220;range of interest&#8221; to have no &#8220;index out of range&#8221; type errors with the Javascript code &#8230; <font color=blue>as per<\/font> (as distinct from the original <font color=purple>non-animated emoji<\/font>)  &#8230;<\/p>\n<p><code><br \/>\n    for (ii=0; ii&lt;20; ii++) {<br \/>\n        if (foodtocountry.length == 0) {<br \/>\n          <font color=purple>foodtocountry.push(Math.floor(Math.random() * Math.min(countrynames.length,contentbits.length)));<\/font><br \/>\n          astyle=astyle.replace(\"&lt;\/style&gt;\", \" .f\" + ii + \":before { content: '\" + contentbits[eval('' + foodtocountry[0])].replace('  ','\\\\'.substring(0,1)).replace(' ','\\\\'.substring(0,1)) + \"' } &lt;\/style&gt;\");<br \/>\n          countrytofood+='' + foodtocountry[0] + ',';<br \/>\n        } else {<br \/>\n          aguess='';<br \/>\n          while (countrytofood.indexOf(',' + aguess + ',') != -1 || aguess == '') {<br \/>\n            <font color=blue>aguess='' + Math.floor(Math.random() * Math.min(contentbitstwo.length,Math.min(countrynamestwo.length,Math.min(countrynames.length,contentbits.length))));<\/font><br \/>\n          }<br \/>\n          foodtocountry.push(eval(aguess));<br \/>\n          astyle=astyle.replace(\"&lt;\/style&gt;\", \" .f\" + ii + \":before { content: '\" + contentbits[eval(aguess)].replace('  ','\\\\'.substring(0,1)).replace(' ','\\\\'.substring(0,1)) + \"' } &lt;\/style&gt;\");<br \/>\n          <font color=red>if (flag.trim() == '') {<br \/>\n          astyle=astyle.replace(\"&lt;\/style&gt;\", \" .g\" + ii + \":before { content: '\" + contentbitstwo[eval(aguess)].replace('  ','\\\\'.substring(0,1)).replace(' ','\\\\'.substring(0,1)) + \"' } &lt;\/style&gt;\");<br \/>\n          }<\/font><br \/>\n          countrytofood+='' + aguess + ',';<br \/>\n        }<br \/>\n    }<br \/>\n<\/code><\/p>\n<p> &#8230; also of note in the Javascript code snippet above the <font color=red>extra dynamic CSS class definition Javascript code<\/font>.<\/p>\n<p>The table cell (td) element contents differ between <font color=purple>non-animated emoji (ie. original)<\/font> and <font color=blue>animated emoji (ie. extra functionality)<\/font> usage, as per &#8230;<\/p>\n<p><code><br \/>\n        var animated=location.search.split('animated=')[1] ? true : false;<br \/>\n        var leftopacity='0.6', rightopacity='0.4';<br \/>\n<br \/>\n        <font color=blue>if (!animated) {<\/font><br \/>\n         <font color=purple>tds[eval(huhx[jj])].className+=' ' + foods[huh[jj]];<\/font><br \/>\n        <font color=blue>} else {<br \/>\n         tds[eval(huhx[jj])].innerHTML='&lt;span style=\"opacity:' + leftopacity + ';\" class=' + foods[huh[jj]] + '&gt;&lt;\/span&gt;&lt;span style=\"opacity:' + rightopacity + ';margin-left:-40px;\" class=' + foods[huh[jj]].replace('f','g') + '&gt;&lt;\/span&gt;';<br \/>\n        }<\/font><br \/>\n<\/code><\/p>\n<p> &#8230; that &#8220;<font color=blue>animated emoji (ie. extra functionality)<\/font>&#8221; usage fitting in with the &#8230;<\/p>\n<p><code><br \/>\n&lt;body style='background-color: white;' onload=' if (animated) { document.getElementById(\"selan\").value=\"ae\"; document.getElementById(\"mysubject\").value=location.search.split(\"combo=\")[1] ? decodeURIComponent(location.search.split(\"combo=\")[1].split(\"&\")[0]) : \" \";  } thisplayer=Math.floor(Math.random() * 4); times[thisplayer]=six; setTimeout(timeit,1000);  placefood(); <font color=blue>throbbingspans();<\/font> '&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; very similar to <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/mind-map-and-flowchart-and-venn-diagram-tutorial\/' title='Mind Map and Flowchart and Venn Diagram Tutorial'>Mind Map and Flowchart and Venn Diagram Tutorial<\/a>&#8216;s Javascript code related to keeping the &#8220;animated&#8221; in &#8220;animated emoji&#8221; as per (the <a target=_blank title='HTML span information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_span.asp'>span<\/a> element pairs <a target=_blank title='Overlay postings' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay'>&#8220;overlay&#8221;<\/a> usual suspect <a target=_blank title='CSS opacity property information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/css3_pr_opacity.asp'>&#8220;opacity&#8221;<\/a> (and negative <a target=_blank title='CSS margin-left property information from w3schools' href='https:\/\/www.w3schools.com\/cssref\/pr_margin-left.asp'>&#8220;margin-left&#8221;<\/a>) methodology) &#8230;<\/p>\n<p><code><br \/>\n function throbbingspans() {<br \/>\n   var isps, jsps;<br \/>\n   if (tgsps.length == 0) {<br \/>\n     var sps=document.getElementsByTagName('span');<br \/>\n     for (isps=0; isps&lt;sps.length; isps++) {<br \/>\n        if (('' + sps[isps].style.opacity) != '') {<br \/>\n          if (eval('' + sps[isps].style.opacity) &lt; 1.0) {<br \/>\n            tgsps.push(sps[isps]);<br \/>\n            tgspsop.push(eval('' + sps[isps].style.opacity));<br \/>\n            tgspsopwhat.push(eval('0.10'));<br \/>\n          }<br \/>\n        }<br \/>\n     }<br \/>\n   }<br \/>\n   if (tgsps.length != 0) {<br \/>\n     for (jsps=0; jsps&lt;tgsps.length; jsps+=2) {<br \/>\n       if (tgspsop[jsps] &gt; 0.12 && tgspsop[jsps] &lt; 0.88 && tgspsop[1 + jsps] &gt; 0.12 && tgspsop[1 + jsps] &lt; 0.88) { \/\/ && tgspsop[jsps] &gt;= tgspsop[1 + jsps]) {<br \/>\n         tgspsop[jsps]+=tgspsopwhat[jsps];<br \/>\n         tgspsop[1 + jsps]-=tgspsopwhat[1 + jsps];<br \/>\n         tgsps[jsps].style.opacity='' + tgspsop[jsps];<br \/>\n         tgsps[1 + jsps].style.opacity='' + tgspsop[1 + jsps];<br \/>\n         leftopacity='' + tgspsop[jsps];<br \/>\n         rightopacity='' + tgspsop[1 + jsps];<br \/>\n       } else if (tgspsop[jsps] &gt; 0.12 && tgspsop[jsps] &lt; 0.88 && tgspsop[1 + jsps] &gt; 0.12 && tgspsop[1 + jsps] &lt; 0.88) { \/\/ && tgspsop[jsps] &lt;= tgspsop[1 + jsps]) {<br \/>\n         tgspsop[jsps]-=tgspsopwhat[jsps];<br \/>\n         tgspsop[1 + jsps]+=tgspsopwhat[1 + jsps];<br \/>\n         tgsps[jsps].style.opacity='' + tgspsop[jsps];<br \/>\n         tgsps[1 + jsps].style.opacity='' + tgspsop[1 + jsps];<br \/>\n         leftopacity='' + tgspsop[jsps];<br \/>\n         rightopacity='' + tgspsop[1 + jsps];<br \/>\n       } else if (tgspsop[jsps] &gt; 0.88) {<br \/>\n         tgspsop[jsps]-=0.1;<br \/>\n         tgspsop[1 + jsps]+=0.1;<br \/>\n         tgsps[jsps].style.opacity='' + tgspsop[jsps];<br \/>\n         tgsps[1 + jsps].style.opacity='' + tgspsop[1 + jsps];<br \/>\n         tgspsopwhat[jsps]=-tgspsopwhat[jsps];<br \/>\n         tgspsopwhat[1 + jsps]=-tgspsopwhat[1 + jsps];<br \/>\n         leftopacity='' + tgspsop[jsps];<br \/>\n         rightopacity='' + tgspsop[1 + jsps];<br \/>\n       } else if (tgspsop[1 + jsps] &gt; 0.88) {<br \/>\n         tgspsop[jsps]+=0.1;<br \/>\n         tgspsop[1 + jsps]-=0.1;<br \/>\n         tgsps[jsps].style.opacity='' + tgspsop[jsps];<br \/>\n         tgsps[1 + jsps].style.opacity='' + tgspsop[1 + jsps];<br \/>\n         tgspsopwhat[jsps]=-tgspsopwhat[jsps];<br \/>\n         tgspsopwhat[1 + jsps]=-tgspsopwhat[1 + jsps];<br \/>\n         leftopacity='' + tgspsop[jsps];<br \/>\n         rightopacity='' + tgspsop[1 + jsps];<br \/>\n       } else if (tgspsop[1 + jsps] &lt; 0.12) {<br \/>\n         tgspsop[jsps]-=0.1;<br \/>\n         tgspsop[1 + jsps]+=0.1;<br \/>\n         tgsps[jsps].style.opacity='' + tgspsop[jsps];<br \/>\n         tgsps[1 + jsps].style.opacity='' + tgspsop[1 + jsps];<br \/>\n         tgspsopwhat[jsps]=-tgspsopwhat[jsps];<br \/>\n         tgspsopwhat[1 + jsps]=-tgspsopwhat[1 + jsps];<br \/>\n         leftopacity='' + tgspsop[jsps];<br \/>\n         rightopacity='' + tgspsop[1 + jsps];<br \/>\n       } else if (tgspsop[jsps] &lt; 0.12) {<br \/>\n         tgspsop[jsps]+=0.1;<br \/>\n         tgspsop[1 + jsps]-=0.1;<br \/>\n         tgsps[jsps].style.opacity='' + tgspsop[jsps];<br \/>\n         tgsps[1 + jsps].style.opacity='' + tgspsop[1 + jsps];<br \/>\n         tgspsopwhat[jsps]=-tgspsopwhat[jsps];<br \/>\n         tgspsopwhat[1 + jsps]=-tgspsopwhat[1 + jsps];<br \/>\n         leftopacity='' + tgspsop[jsps];<br \/>\n         rightopacity='' + tgspsop[1 + jsps];<br \/>\n      }<br \/>\n     }<br \/>\n     setTimeout(throbbingspans, 200);<br \/>\n   }<br \/>\n }<br \/>\n<\/code><\/p>\n<p>We&#8217;ve also long been interested in HTML select (dropdown) element option (subelement) disabling and\/or hiding (statically or dynamically (as with today&#8217;s Javascript work)), and today, for the first time for us, we put this into action (and thank this <a target=_blank href='https:\/\/stackoverflow.com\/questions\/9234830\/how-to-hide-a-option-in-a-select-menu-with-css' title='Useful link, thanks'>useful link<\/a> for &#8220;heads up&#8221; advice here) in the way we &#8230;<\/p>\n<ol>\n<li>added a <font color=blue>new simple HTML select (dropdown) element<\/font> next to the <font color=purple>main HTML select (dropdown) element<\/font> &#8230;<br \/>\n<code><br \/>\n<font color=purple>&lt;select onchange=' if (this.value.trim().length == 0) {   animated=true;  } else { animated=false;  } resume();' id='mysubject'&gt;&lt;option value='flag'&gt;Flag&lt;\/option&gt;&lt;option value='food'&gt;Food&lt;\/option&gt;&lt;option value='animal'&gt;Animal&lt;\/option&gt;&lt;option value=' '&gt;Flag Food&lt;\/option&gt;&lt;option value='  '&gt;Flag Animal&lt;\/option&gt;&lt;option value='   '&gt;Animal Food&lt;\/option&gt;&lt;\/select&gt;<\/font> <font color=blue>&lt;select id=selan onchange=\"if (this.value.trim().length != 0) { animated=false;  } else { animated=true;  } limitopts(); \"&gt;&lt;option value=\"\"&gt;Emoji&lt;\/option&gt;&lt;option value=\"ae\"&gt;Animated Emoji&lt;\/option&gt;&lt;\/select&gt;<\/font><br \/>\n<\/code>\n<\/li>\n<li>some <font color=blue>new simple HTML select (dropdown) element<\/font> &#8220;onchange&#8221; event logic &#8230;<br \/>\n<code><br \/>\n function limitopts() {<br \/>\n    var optsare=document.getElementsByTagName('option');<br \/>\n    for (var ioptsare=0; ioptsare&lt;optsare.length; ioptsare++) {<br \/>\n      if (optsare[ioptsare].outerHTML.replace(' value=\"ae\"',' value=\"\"').indexOf(' value=\"\"') == -1) {<br \/>\n        if (animated) {<br \/>\n          if (optsare[ioptsare].outerHTML.replace(' value=\"ae\"',' value=\"\"').indexOf(' value=\" ') == -1) {<br \/>\n            if (optsare[ioptsare].outerHTML.indexOf(' disabled') != -1) { optsare[ioptsare].removeAttribute('disabled'); }<br \/>\n            if (optsare[ioptsare].outerHTML.indexOf(' hidden') != -1) { optsare[ioptsare].removeAttribute('hidden'); }<br \/>\n          } else {<br \/>\n            optsare[ioptsare].setAttribute('disabled', true);<br \/>\n            optsare[ioptsare].setAttribute('hidden', true);<br \/>\n          }<br \/>\n        } else {<br \/>\n          if (optsare[ioptsare].outerHTML.replace(' value=\"ae\"',' value=\"\"').indexOf(' value=\" ') != -1) {<br \/>\n            if (optsare[ioptsare].outerHTML.indexOf(' disabled') != -1) { optsare[ioptsare].removeAttribute('disabled'); }<br \/>\n            if (optsare[ioptsare].outerHTML.indexOf(' hidden') != -1) { optsare[ioptsare].removeAttribute('hidden'); }<br \/>\n          } else {<br \/>\n            optsare[ioptsare].setAttribute('disabled', true);<br \/>\n            optsare[ioptsare].setAttribute('hidden', true);<br \/>\n          }<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n }<br \/>\n<\/code>\n<\/li>\n<\/ol>\n<p>You can try this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flagquiz.htm\" title=\"Click picture\">live run<\/a> link and which has the underlying HTML and CSS and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flagquiz.html----GETME\">flagquiz.htm<\/a> source code changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flagquiz.html----GETME\">this way<\/a> for the purposes of adding new &#8220;animated emoji&#8221; dropdown option functionality<\/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\/emoji-circuit-quiz-animated-emoji-tutorial\/'>Emoji Circuit Quiz Animated Emoji Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ecqgt'>Previous relevant <a target=_blank title='Emoji Circuit Quiz Genericization Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-circuit-quiz-genericization-tutorial\/'>Emoji Circuit Quiz Genericization 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\/flagquiz.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Circuit Genericization Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flag_plus_quiz.jpg\" title=\"Emoji Circuit Quiz Genericization Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji Circuit Quiz Genericization Tutorial<\/p><\/div>\n<p>As we &#8220;flagged&#8221; (tee hee) there are rich possibilities genericizing &#8230;<\/p>\n<ul>\n<li>&#8220;circuit&#8221; web design basis &#8230; with &#8230;<\/li>\n<li>&#8220;quiz&#8221; games &#8230; and &#8230;<\/li>\n<li>&#8220;emoji&#8221; content<\/li>\n<\/ul>\n<p> &#8230; and in realizing this, we want to go over step by step a &#8220;content&#8221; approach to involving emojis in &#8220;sets of content&#8221; (such as &#8220;flags&#8221; and &#8220;food&#8221; and &#8220;animals&#8221;) that we have in today&#8217;s extended &#8220;Emoji Circuit Quiz&#8221; web application that you can try at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flagquiz.htm\" title=\"Click picture\">live run<\/a> link and which has the underlying HTML and CSS and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flagquiz.html--GETME\">flagquiz.htm<\/a> source code changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flagquiz.html--GETME\">this way<\/a> for the purposes of genericizing the previous <a title='Emoji Flags Circuit Quiz Primer Tutorial' href='#efcqpt'>Emoji Flags Circuit Quiz Primer Tutorial<\/a> &#8230;<\/p>\n<ul>\n<li>as a basis of content we highly recommend visiting <a target=_blank title='Full emoji list ... thanks' href='https:\/\/unicode.org\/emoji\/charts\/full-emoji-list.html'>full emoji list<\/a><\/li>\n<li>in web browser View -&gt; Page Source &#8230;<\/li>\n<li>okay, taking you to the other end of what we are trying to achieve is two arrays we&#8217;ll talk about soon and a CSS look like (for Andorra&#8217;s flag, for example) &#8230;<br \/>\n<code><br \/>\n.f1:before { content: '\\0<b>1F1E6<\/b>\\0<b>1F1E9<\/b>' }<br \/>\n<\/code><br \/>\n &#8230;<\/li>\n<li> search for &#8220;&gt;Andorra&lt;&#8221; and you will see around where it takes you &#8230;<br \/>\n<code><br \/>\n&lt;tr&gt;&lt;td class='rchars'&gt;2364&lt;\/td&gt;<br \/>\n&lt;td class='code'&gt;&lt;a href='#1f1e6_1f1e9' name='1f1e6_1f1e9'&gt;U+<b>1F1E6<\/b> U+<b>1F1E9<\/b>&lt;\/a&gt;&lt;\/td&gt;<br \/>\n...<br \/>\n...<br \/>\n&lt;td class='name'&gt;<i>Andorra<\/i>&lt;\/td&gt;<br \/>\n&lt;\/tr&gt;<br \/>\n<\/code>\n<\/li>\n<li>which you&#8217;ll notice <b>boldly<\/b> derives its form from the website&#8217;s table&#8217;s <b>Code<\/b> second column by you substituting &#8220;U+&#8221; for &#8220;\\0&#8221; and getting rid of all spaces to create CSS &#8220;content&#8221; emoji entities for either single or multiple mode emojis<\/li>\n<li>the two arrays we talk about link this &#8220;static&#8221; feeling CSS to a dynamic scenario by involving &#8230;\n<ol>\n<li>Javascript DOM additional CSS styling (initially appended) into the &#8220;body&#8221; element (at the &#8220;body&#8221; onload event) whereby the &#8220;className&#8221; property (and a few others) of elements is controlled by &#8230;<\/li>\n<li>contents of those two arrays we&#8217;ll talk more about below<\/li>\n<\/ol>\n<\/li>\n<li>how best to explain now in terms of &#8220;genericization&#8221; is that we haven&#8217;t told how <i>Andorra<\/i> fits into things &#8230; well <i>Andorra<\/i> to our web application &#8220;represents&#8221; (good generic word) the value of a &#8220;flag&#8221; concept (the others, so far, for us, today, being &#8220;food&#8221; and &#8220;animals&#8221;) &#8230; so we have in our web application 3 sets of those two array (subsets, if you like) &#8230; constructed, in the case of the &#8220;<i>Andorra<\/i>&#8221; flag &#8230;<\/li>\n<li>the two arrays look like &#8230;<br \/>\n<code><br \/>\nvar countrynames=['Andorra','United Arab Emirates','Afghanistan', ... ];<br \/>\nvar contentbits=['  01F1E6 01F1E9','  01F1E6 01F1EA','  01F1E6 01F1EB', ... ];<br \/>\n<\/code><br \/>\n &#8230; in the case of the &#8220;guinea pig&#8221; and &#8220;first cab off the rank&#8221; &#8220;flag&#8221; concept &#8230; which beggars the question why no &#8220;\\0&#8221; &#8230; well, you &#8220;C&#8221; programmers out there can probably hint at why &#8230; &#8220;\\0&#8221; can mean ascii 0 (null) which stuffs things up, and we&#8217;ll let our web application &#8220;time&#8221; its insertion of &#8220;\\0&#8221; via Javascript <i>replace<\/i> usage at the ideal timing &#8230;<\/li>\n<li>and so for other &#8220;concepts&#8221; you just gather similar data into (code like) &#8230;<br \/>\n<code><br \/>\n      var flag=location.search.split('subject=')[1] ? decodeURIComponent(location.search.split('subject=')[1].split('&')[0]) : 'flag';<br \/>\n      if (flag != \"flag\") {<br \/>\n        if (flag == \"food\") {<br \/>\n          countrynames=['shortcake','bento box','rice cracker', ...];<br \/>\n          contentbits=['  01F370','  01f371','  01f358', ...];<br \/>\n        } else if (flag == \"animal\") {<br \/>\n          contentbits=['  01F412','  01F98D','  01F415', ... ];<br \/>\n          countrynames=['monkey','gorilla','dog', ... ];<br \/>\n        }<br \/>\n      }<br \/>\n<\/code><br \/>\n &#8230; to make &#8220;food&#8221; and\/or &#8220;animals&#8221; HTML select element dropdown option choices &#8220;map&#8221; themselves into the initial &#8220;guinea pig&#8221; &#8220;first cab off the rank&#8221; &#8220;flag&#8221; concept logic from previous times &#8230; voila &#8230; genericization<\/li>\n<\/ul>\n<hr>\n<p id='efcqpt'>Previous relevant <a target=_blank title='Emoji Flags Circuit Quiz Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-flags-circuit-quiz-primer-tutorial\/'>Emoji Flags Circuit Quiz 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\/flagquiz.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Flags Circuit Quiz Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flagquiz.jpg\" title=\"Emoji Flags Circuit Quiz Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji Flags Circuit Quiz Primer Tutorial<\/p><\/div>\n<p>What have <i>sushi<\/i> and <i>flags<\/i> got in common?  It&#8217;s hard to say really, at least for us, but in terms of our &#8220;circuit&#8221; based work of recent times, there are big synergies between <i>sushi<\/i> and <i>flags<\/i>.<\/p>\n<p>Building on the previous <a title='Sushi Train Circuit Game Currency Tutorial' href='#stcgct'>Sushi Train Circuit Game Currency Tutorial<\/a>&#8216;s &#8230;<\/p>\n<ul>\n<li>use of emojis (though, then, they were not &#8220;multiple emojis&#8221; as are our <i>flag<\/i> emojis today)<\/li>\n<li>use of a &#8220;circuit&#8221; underlying HTML web elements design<\/li>\n<li>use of an anticlockwise rotation of the emojis via a HTML element <i>className<\/i> property adjustment<\/li>\n<\/ul>\n<p> &#8230; there&#8217;s more in common than not &#8230; a bit like every human on Earth when you think of it that way.  We prefer that &#8220;positive&#8221; collaborative approach to software quite often, in that we often base a new web application, by cloning an existing one as a first step, as you can see from the differences inherent in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flagquiz.html-GETME\" title=\"flagquiz.html\">these changes<\/a> that went towards creating our &#8220;first phase&#8221; &#8220;Emoji Flags Circuit Quiz&#8221; <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flagquiz.html-GETME\" title=\"flagquiz.html\">flagquiz.html<\/a> HTML and CSS and Javascript source code.<\/p>\n<p>So how are you at identifying flags back to what they represent?  Thanking <a target=_blank title='Emojis' href='https:\/\/unicode.org\/emoji\/charts\/full-emoji-list.html'>this great resource<\/a> for the means by which we construct &#8220;multiple flag emojis&#8221;, via CSS, such as Andorra&#8217;s (flag) &#8230;<\/p>\n<p><code><br \/>\n.f1:before { content: '\\01F1E6\\01F1E9' }<br \/>\n<\/code><\/p>\n<p>Try it yourself at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flagquiz.html\" title=\"Click picture\">live run<\/a> link.<\/p>\n<hr>\n<p id='stcgct'>Previous relevant <a target=_blank title='Sushi Train Circuit Game Currency Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/sushi-train-circuit-game-currency-tutorial\/'>Sushi Train Circuit Game Currency 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\/circuit.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Sushi Train Circuit Game Currency Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/localized_currency_circuit.jpg\" title=\"Sushi Train Circuit Game Currency Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Sushi Train Circuit Game Currency Tutorial<\/p><\/div>\n<p>We&#8217;re combining and integrating the blog postings from the last couple of days, today, they being &#8230;<\/p>\n<ul>\n<li><a title='Sushi Train Circuit Game Tutorial' href='#stcgt'>Sushi Train Circuit Game Tutorial<\/a> two days ago involved in its working sushi train food item prices, and so, &#8220;currency&#8221; &#8230; fitting hand in glove with yesterday&#8217;s &#8230;<\/li>\n<li><a title='Localized Currency Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/localized-currency-primer-tutorial\/'>Localized Currency Primer Tutorial<\/a><\/li>\n<\/ul>\n<p> &#8230; the latter&#8217;s web application of which is called in an HTML <a target=_blank title='HTML iframe element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_iframe.asp'>iframe<\/a> &#8220;child&#8221; window of the &#8220;parent&#8221; Sushi Train Game window.  In that way if possible, the &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/localized-currency-primer-tutorial\/'><p>\n<a target=_blank title='Language Culture Codes' href='https:\/\/msdn.microsoft.com\/en-us\/library\/ee825488(v=cs.20).aspx'>Language Culture Codes<\/a> (BCP 47 language tags (is <i>locales<\/i> above)) to determine an International Keyboard character set to use\n<\/p><\/blockquote>\n<p> &#8230; of the latter, correlating to which International Keyboard was defined for the setup of the web browser you are currently using, is accessed via (Javascript code like) &#8230;<\/p>\n<p><code><br \/>\nfunction getLang() { \/\/ thanks to <a target=_blank title='https:\/\/stackoverflow.com\/questions\/673905\/best-way-to-determine-users-locale-within-browser' href='https:\/\/stackoverflow.com\/questions\/673905\/best-way-to-determine-users-locale-within-browser'>https:\/\/stackoverflow.com\/questions\/673905\/best-way-to-determine-users-locale-within-browser<\/a><br \/>\n if (!navigator.language && navigator.browserLanguage) return navigator.browserLanguage;<br \/>\n return (navigator.languages && navigator.languages.length) ? navigator.languages[0] : navigator.language;<br \/>\n}<br \/>\n<\/code><\/p>\n<p>From this, sometimes, but not always, the Javascript code can tee this up with that latter&#8217;s &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/localized-currency-primer-tutorial\/'><p>\n<a target=_blank title='Currency Codes' href='http:\/\/www.nationsonline.org\/oneworld\/currencies.htm'>Currency Codes<\/a> (ISO 4217 currency codes (is part of <i>options<\/i> above))\n<\/p><\/blockquote>\n<p> &#8230; to derive a likely Currency Code (ISO 4217 currency code) that can &#8220;localize&#8221; the representation of the Sushi Train Itemised Food Prices (eg. <i>A$2.85<\/i> dango (for our default Australian Dollars, from the install of the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/localized_currency_circuit.jpg\" title=\"Tutorial picture\">Safari<\/a> web browser, set up for the <a target=_blank title='Information regarding en-AU keyboard' href='http:\/\/www.localeplanet.com\/java\/en-AU\/index.html'><i>en-AU<\/i><\/a> keyboard, used, today)) presented in the game.<\/p>\n<p>The other improvements concern the latter&#8217;s functionality &#8220;standing alone&#8221; including &#8230;<\/p>\n<ul>\n<li>now show a &#8220;localized&#8221; current date and time<\/li>\n<li>those default Currency Code functionality thoughts above will default in this mode of use also, as applicable<\/li>\n<li>setting changes more often automatically update the look of your currency numbering above, straight away<\/li>\n<\/ul>\n<p>What changed for all this saw new HTML and CSS and Javascript &#8220;Sushi Train Game&#8221; <i>parent<\/i> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circuit.html--GETME\" title=\"circuit.htm\">circuit.htm<\/a> (changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circuit.html--GETME\" title=\"circuit.htm\">this way<\/a>) and associated with this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circuit.htm\" title=\"Click picture\">live run<\/a> link today, supervising the HTML iframe <i>child<\/i> HTML and Javascript (<a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/localized_currency.html-GETME\" title=\"localized_currency.html\">changed this way<\/a>)  <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/localized_currency.html-GETME\" title=\"localized_currency.html\">localized_currency.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/localized_currency.html\" title=\"Click picture\">live run<\/a> link, that you can again try yourself.<\/p>\n<hr>\n<p id='stcgt'>Previous relevant <a target=_blank title='Sushi Train Circuit Game Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/sushi-train-circuit-game-tutorial\/'>Sushi Train Circuit 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\/circuit.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Sushi Train Circuit Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circuit.jpg\" title=\"Sushi Train Circuit Game Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Sushi Train Circuit Game Tutorial<\/p><\/div>\n<p>In today&#8217;s Sushi Train Circuit Game we use yesterday&#8217;s <a title='Circuit Webpage Primer Tutorial' href='#cwpt'>Circuit Webpage Primer Tutorial<\/a> as the underlying webpage design basis.<\/p>\n<p>Many things in life are based on circuits.  Think electronics, think racing, think cycling velodromes, think roller derby, think ice skating, think round trips, think lunch &#8230; think Sushi Train.<\/p>\n<p>Think Sushi Train &#8230; think (in particular) <a target=_blank title='Emojis food-asian plus plus' href='https:\/\/unicode.org\/emoji\/charts\/full-emoji-list.html#food-asian'>Asian food emojis<\/a>, we reckon.  Are you hungry yet?<\/p>\n<p>So what were the challenges making this game?<\/p>\n<ul>\n<li>marrying the order of <a target=_blank title='HTML td element information from wschools' href='http:\/\/www.w3schools.com\/tags\/tag_td.asp'>td<\/a> element cells with the different order of a Sushi Train &#8220;circuit&#8221; (which would be clockwise, or anticlockwise) &#8230; resulting in us using &#8220;array mapped indexing&#8221; (ie. array indexes which map to the &#8220;reorderings&#8221; required)<\/li>\n<li>making a game out of the Sushi Train scenario &#8230; so we have a &#8220;lame&#8221; 4 player game, where the player with the most expensive tastes wins<\/li>\n<li>using multiple <a target=_blank title='HTML and CSS class' href='https:\/\/www.w3schools.com\/tags\/att_class.asp'>class<\/a> techniques (CSS functionality involving <a target=_blank title='CSS :before selector information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/sel_before.asp'>:before<\/a> and <a target=_blank title='CSS :after selector information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/sel_after.asp'>:after<\/a> (selectors) and <a target=_blank title='CSS content: property information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_gen_content.asp'>content:<\/a> exemplified by &#8230;<br \/>\n<code><br \/>\n.f1:before { content: '\\01f371' }<br \/>\n<\/code><br \/>\n) to make the Sushi Train go around (ie. shuffle along to adjacent Sushi Train cells the styling of its predecessor, when the <a target=_blank title='Javascript setTimeout method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp'><i>setTimeout<\/i><\/a> Javascript (timer) function re-executes) &#8230; that is, unless in the meantime &#8230;<\/li>\n<li>the player, in focus (each is given 6 seconds &#8220;air time&#8221; (or until a click\/touch happens)), clicks\/touches (ie. selects) a &#8220;food&#8221; item, whose &#8220;price&#8221; value (hidden to the user, whereas its name is available &#8220;on hover&#8221;) contributes to that player&#8217;s score in the game<\/li>\n<\/ul>\n<p>Again, you can see the HTML and CSS (combination of head style definitions and inline CSS within the HTML) at <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circuit.html-GETME\" title=\"circuit.htm\">circuit.htm<\/a> (changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circuit.html-GETME\" title=\"circuit.htm\">this way<\/a>) and try it out for yourself at our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circuit.htm\" title=\"Click picture\">live run<\/a> link today.  We hope it gets you singing &#8230;<\/p>\n<blockquote><p>\n&#127926; If you knew sushi,<br \/>\nLike I know sushi,   &#127926;<br \/>\nOh, oh, &#127926; oh what a Californian r<span style='color:#777777; opacity:0.8; margin-left:-2px;text-decoration:line-through;'>n<\/span>oll\n<\/p><\/blockquote>\n<hr>\n<p id='cwpt'>Previous relevant <a target=_blank title='Circuit Webpage Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/circuit-webpage-primer-tutorial\/'>Circuit Webpage 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\/circuit.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Circuit Webpage Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circuit.jpeg\" title=\"Circuit Webpage Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Circuit Webpage Primer Tutorial<\/p><\/div>\n<p>We&#8217;re on our way to a more fully fleshed out web application that makes use of a &#8220;circuit&#8221;, but we want to approach this project in stages.<\/p>\n<p>Stage one is to create some initial HTML and CSS to show a circuit.  We construct it, debatably, via underpinnings that involve &#8230;<\/p>\n<ul>\n<li>HTML <a target=_blank title='HTML table element information from W3schools' href='http:\/\/www.w3schools.com\/tags\/tag_table.asp'>table<\/a> element<\/li>\n<li>Cells (<a target=_blank title='HTML td element information from wschools' href='http:\/\/www.w3schools.com\/tags\/tag_td.asp'>td<\/a> elements) involving <a target=_blank title='HTML table cell colspan information from w3schools' href='http:\/\/www.w3schools.com\/tags\/att_td_colspan.asp'>colspan<\/a> and <a target=_blank title='HTML table cell rowspan information from w3schools' href='http:\/\/www.w3schools.com\/tags\/att_td_rowspan.asp'>rowspan<\/a> attributes<\/li>\n<li><a target=_blank title='Background information at w3schools ... thanks' href='http:\/\/www.w3schools.com\/css\/css_background.asp'>Background<\/a> colours strategically defined<\/li>\n<li><a target=_blank href='https:\/\/www.w3schools.com\/cssref\/pr_border.asp' title='CSS border information from w3schools'>Border<\/a> characteristics such as &#8230;\n<ol>\n<li>CSS <a target=_blank title='CSS3 border-radius information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/css3_pr_border-radius.asp'>border-radius<\/a><\/li>\n<li>Some CSS border-top and border-bottom merged into background colour with an offset &#8230;<\/li>\n<li>HTML <a target=_blank title='HTML hr element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_hr.asp'>hr<\/a> elements replace some border-top and border-bottom &#8220;lines&#8221;<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p>You can see the HTML and CSS (combination of head style definitions and inline CSS within the HTML) at <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circuit.html_GETME\" title=\"circuit.html\">circuit.html<\/a> and try it out for yourself at our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circuit.html\" title=\"Click picture\">live run<\/a> link today.  We hope it gets you thinking.<\/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='#d34336' onclick='var dv=document.getElementById(\"d34336\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/css\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d34336' 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='#d34351' onclick='var dv=document.getElementById(\"d34351\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/emoji\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d34351' 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='#d34397' onclick='var dv=document.getElementById(\"d34397\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/iframe\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d34397' 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='#d34569' onclick='var dv=document.getElementById(\"d34569\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/flag\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d34569' 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='#d34581' onclick='var dv=document.getElementById(\"d34581\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/array\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d34581' 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='#d48626' onclick='var dv=document.getElementById(\"d48626\"); 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='d48626' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Ever since we got some &#8220;animated emojis&#8221; working, when we presented Mind Map and Flowchart and Venn Diagram Tutorial we&#8217;ve been wondering where we could apply it in a less gimmicky way. Half way to non-gimmicky, we figured, was in &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-circuit-quiz-animated-emoji-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":[3282,103,2390,210,257,281,2382,367,385,2242,476,477,1839,3283,576,652,1943,876,2273,894,997,1022,1866,2263,1238,1319],"class_list":["post-48626","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-games","category-tutorials","tag-animated-emoji","tag-array","tag-circuit","tag-class","tag-content","tag-css","tag-disabled","tag-dropdown","tag-emoji","tag-flag","tag-game","tag-games-2","tag-genericization","tag-hidden","tag-html","tag-javascript","tag-margin-left","tag-opacity","tag-option","tag-overlay","tag-programming","tag-quiz","tag-select","tag-span","tag-table","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/48626"}],"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=48626"}],"version-history":[{"count":9,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/48626\/revisions"}],"predecessor-version":[{"id":48635,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/48626\/revisions\/48635"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=48626"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=48626"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=48626"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}