{"id":34581,"date":"2017-12-02T03:01:33","date_gmt":"2017-12-01T17:01:33","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=34581"},"modified":"2017-12-01T18:42:14","modified_gmt":"2017-12-01T08:42:14","slug":"emoji-circuit-quiz-genericization-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-circuit-quiz-genericization-tutorial\/","title":{"rendered":"Emoji Circuit Quiz Genericization 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 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","protected":false},"excerpt":{"rendered":"<p>As we &#8220;flagged&#8221; (tee hee) there are rich possibilities genericizing &#8230; &#8220;circuit&#8221; web design basis &#8230; with &#8230; &#8220;quiz&#8221; games &#8230; and &#8230; &#8220;emoji&#8221; content &#8230; and in realizing this, we want to go over step by step a &#8220;content&#8221; &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-circuit-quiz-genericization-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,37],"tags":[103,2390,210,257,281,367,385,2242,476,477,1839,576,652,997,1022,1866,1238,1319],"class_list":["post-34581","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-array","tag-circuit","tag-class","tag-content","tag-css","tag-dropdown","tag-emoji","tag-flag","tag-game","tag-games-2","tag-genericization","tag-html","tag-javascript","tag-programming","tag-quiz","tag-select","tag-table","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/34581"}],"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=34581"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/34581\/revisions"}],"predecessor-version":[{"id":34589,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/34581\/revisions\/34589"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=34581"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=34581"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=34581"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}