{"id":48356,"date":"2020-03-24T03:01:16","date_gmt":"2020-03-23T17:01:16","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=48356"},"modified":"2020-03-25T12:27:59","modified_gmt":"2020-03-25T02:27:59","slug":"flowchart-and-venn-diagram-loose-text-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/flowchart-and-venn-diagram-loose-text-tutorial\/","title":{"rendered":"Flowchart and Venn Diagram Loose Text Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flowchart.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Flowchart and Venn Diagram Loose Text Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailed_flowchart_loosetext.jpg\" title=\"Flowchart and Venn Diagram Loose Text Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Flowchart and Venn Diagram Loose Text Tutorial<\/p><\/div>\n<p>In constructing yesterday&#8217;s <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/ajax-auto-completion-refinement-tutorial\/' title='Ajax Auto-completion Refinement Tutorial'>Ajax Auto-completion Refinement Tutorial<\/a>&#8216;s flowchart tutorial picture via <a title='Flowchart and Venn Diagram Glow Tutorial' href='#fvdgt'>Flowchart and Venn Diagram Glow Tutorial<\/a>&#8216;s Flowchart and Venn Diagram web application, we found it had shortfalls performing the &#8220;Yes&#8221; and &#8220;No&#8221; (what we call loose) text annotations that help so much to make sense of the inherent logic of the Flowchart.  This new &#8220;loose text&#8221; consists of &#8230;<\/p>\n<ul>\n<li>that same HTML div element type as for the rest of the work &#8230; but &#8230;<\/li>\n<li>drop the CSS styling (including &#8220;glow&#8221; styling) &#8230; and &#8230;<\/li>\n<li>drop any padding that affects element positioning<\/li>\n<\/ul>\n<p> &#8230; so as to allow the &#8220;loose text&#8221; be precisely (top left) positioned, as required.   And while we are talking about positioning, we found with Venn Diagram positioning it was better to consider the user&#8217;s click as defining the centre of their circle rather than top left position so that when a second circle is added the user can get close enough (but not within) another circle to achieve the intersections pretty important to many Venn Diagram usefulness scenarios (unless you are modelling &#8220;social distancing&#8221;, that is?!).<\/p>\n<p>In broad brush terms, to make &#8220;loose text&#8221; happen we &#8230;<\/p>\n<ul>\n<li>introduce new Javascript <font color=blue>global variables<\/font> and <font color=purple>new code<\/font> &#8230;<br \/>\n<code><br \/>\n<font color=blue>  var loosetext=false;<br \/>\n  var xoff=0, yoff=0;<br \/>\n  var prevxoff=0, prevyoff=0;<\/font><br \/>\n<br \/>\n function butlater() {<br \/>\n       bodyclick=true;<br \/>\n       <font color=purple>xoff=prevxoff;<br \/>\n       yoff=prevyoff;<\/font><br \/>\n}<br \/>\n<br \/> <br \/>\n<font color=purple> function butlaterstill() {<br \/>\n       loosetext=false;<br \/>\n }<\/font><br \/>\n<\/code>\n<\/li>\n<li>introduce a new HTML input element &#8220;Text&#8221; button as per the HTML (and inline Javascript) &#8230;<br \/>\n<code><br \/>\n&lt;input style=background-color:lightgreen; id=itext type=button onclick=\"bodyclick=false; event.stopPropagation(); loosetext=true; prevxoff=xoff; prevyoff=yoff; xoff=0; yoff=0; setTimeout(butlater, 1500); \" value=Text&gt;&lt;\/input&gt;<br \/>\n<\/code>\n<\/li>\n<li>and then later if the user has clicked this &#8220;Text&#8221; button and pressed in a position and entered their text into a Javascript prompt window (and into var<font size=1>iable<\/font> &#8220;wording&#8221; below) &#8230;<br \/>\n<code><br \/>\nif (loosetext) {<br \/>\n    shape=\"\";<br \/>\n    setTimeout(butlaterstill, 1500); \/\/loosetext=false;<br \/>\n}<br \/>\n<\/code><br \/>\n &#8230; happens ahead of Flowchart element Javascript creation &#8230;<br \/>\n<code><br \/>\nif (loosetext) {<br \/>\n    document.getElementById('dcontent').innerHTML+=\"&lt;div id=d\" + icnt + \" onclick='clickme(this);' style='\" + biis + \"line-height:20px;position:absolute;left:\" + x + \"px;top:\" + y + \"px;'&gt;\" + wording + \"&lt;\/div&gt;\";<br \/>\n}<br \/>\n<\/code><br \/>\n &#8230; or Venn Diagram element Javascript creation &#8230;<br \/>\n<code><br \/>\nif (loosetext) {<br \/>\n    document.getElementById('dcontent').innerHTML+=\"&lt;div id=d\" + icnt + \" onclick='recxy(event); clickme(this);' style='\" + biis + \"line-height:20px;position:absolute;left:\" + x + \"px;top:\" + y + \"px;width:\" + document.getElementById('idiam').style.width.replace('px','') + \"px;height:\" + document.getElementById('idiam').style.width.replace('px','') + \"px;'&gt;\" + wording + \"&lt;\/div&gt;\";<br \/>\n}<br \/>\n<\/code><br \/>\n &#8230; when the HTML div element innerHTML attribute starts to play its part\n<\/li>\n<\/ul>\n<p>Feel free to retry <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flowchart.html-----GETME\" title=\"flowchart.html\">the changed<\/a> HTML and CSS and Javascript <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flowchart.html-----GETME\" title=\"flowchart.html\">flowchart.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flowchart.html\" title=\"Click picture\">live run<\/a> link to try out the new &#8220;loose text&#8221; possibilities.<\/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\/flowchart-and-venn-diagram-loose-text-tutorial\/'>Flowchart and Venn Diagram Loose Text Tutorial<\/a>.<\/p-->\n<hr>\n<p id='fvdgt'>Previous relevant <a target=_blank title='Flowchart and Venn Diagram Glow Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/flowchart-and-venn-diagram-glow-tutorial\/'>Flowchart and Venn Diagram Glow 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\/flowchart.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Flowchart and Venn Diagram Glow Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/vd_fc_glow.jpg\" title=\"Flowchart and Venn Diagram Glow Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Flowchart and Venn Diagram Glow Tutorial<\/p><\/div>\n<p>Here at RJM Programming, we are coming to realize that (<a target=_blank title='W3schools glowing text information' href='https:\/\/www.w3schools.com\/howto\/tryit.asp?filename=tryhow_css_glowing_text'>W3School&#8217;s glowing text inspired<\/a>) &#8220;glow&#8221; ideas can be that &#8220;extra dimension&#8221; to styling thoughts for so many of our web application efforts.  Read more from yesterday&#8217;s <a title='Horizontal Rule and Div Glowing Lines and Vertices Tutorial' href='#hrdglvt'>Horizontal Rule and Div Glowing Lines and Vertices Tutorial<\/a> as the background to this, but today&#8217;s &#8220;glow&#8221; focus turns to &#8230;<\/p>\n<ul>\n<li>Flowcharts and Venn Diagrams &#8230; read background to this at <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/venn-diagrams-onclick-tutorial\/' title='Venn Diagrams Onclick Tutorial'>Venn Diagrams Onclick Tutorial<\/a> link &#8230; with their &#8230;<\/li>\n<li>div elements &#8230; nothing new here, but today, there are special cases we need to cater for, those being the case of &#8230;<\/li>\n<li>div style=&#8221;border-radius:50%;&#8221; &#8230; and reading the <a target=_blank title='Helpful link, thanks' href='https:\/\/stackoverflow.com\/questions\/2714765\/using-border-radius-and-box-shadow-together-css'>super helpful link<\/a>, thanks, we realized that <i>box-shadow<\/i> can (these days, for lots of platforms and browsers) simulate what <i>border<\/i> can do regarding &#8220;rounding its corners&#8221; (ie. the CSS <a target=_blank title='CSS3 border-radious information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/css3_pr_border-radius.asp'><i>border-radius<\/i><\/a> property), got us to &#8230;<br \/>\n<code><br \/>\n&lt;style&gt;<br \/>\n.cglow {<br \/>\n  box-shadow-bottom-right-radius: 50%; \/\/ thanks to https:\/\/stackoverflow.com\/questions\/2714765\/using-border-radius-and-box-shadow-together-css<br \/>\n  box-shadow-bottom-left-radius: 50%;<br \/>\n  box-shadow-top-right-radius: 50%;<br \/>\n  box-shadow-top-left-radius: 50%;<br \/>\n  -webkit-animation: cglow 1s ease-in-out infinite alternate;<br \/>\n  -moz-animation: cglow 1s ease-in-out infinite alternate;<br \/>\n  animation: cglow 1s ease-in-out infinite alternate;<br \/>\n  -webkit-border-radius: 50%;<br \/>\n  border-radius: 50%;<br \/>\n}<br \/>\n<br \/>\n@-webkit-keyframes cglow {<br \/>\n  from {<br \/>\n    box-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 37px #e60073, 0 0 9px #e60073, 0 0 11px #e60073, 0 0 13px #e60073, 0 0 15px #e60073;<br \/>\n  box-shadow-bottom-right-radius: 50%; \/\/ thanks to https:\/\/stackoverflow.com\/questions\/2714765\/using-border-radius-and-box-shadow-together-css<br \/>\n  box-shadow-bottom-left-radius: 50%;<br \/>\n  box-shadow-top-right-radius: 50%;<br \/>\n  box-shadow-top-left-radius: 50%;<br \/>\n  }<br \/>\n<br \/>\n  to {<br \/>\n    box-shadow: 0 0 24px #fff, 0 0 6px #ff4da6, 0 0 8px #ff4da6, 0 0 10px #ff4da6, 0 0 12px #ff4da6, 0 0 14px #ff4da6, 0 0 16px #ff4da6;<br \/>\n  box-shadow-bottom-right-radius: 50%; \/\/ thanks to https:\/\/stackoverflow.com\/questions\/2714765\/using-border-radius-and-box-shadow-together-css<br \/>\n  box-shadow-bottom-left-radius: 50%;<br \/>\n  box-shadow-top-right-radius: 50%;<br \/>\n  box-shadow-top-left-radius: 50%;<br \/>\n  }<br \/>\n}<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><br \/>\n &#8230; that combines with CSS &#8230;<br \/>\n<code><br \/>\n&lt;style&gt;<br \/>\n.circle {<br \/>\n  -webkit-box-sizing: content-box;<br \/>\n  -moz-box-sizing: content-box;<br \/>\n  box-sizing: content-box;<br \/>\n  text-align: center;<br \/>\n  width: 200px;<br \/>\n  height: 200px;<br \/>\n  border: none;<br \/>\n  -webkit-border-radius: 50%;<br \/>\n  border-radius: 50%;<br \/>\n  font: normal 100%\/normal Arial, Helvetica, sans-serif;<br \/>\n  color: rgba(0,0,0,1);<br \/>\n  -o-text-overflow: clip;<br \/>\n  text-overflow: clip;<br \/>\n  background: pink; \/\/#1abc9c;<br \/>\n  opacity:0.5;<br \/>\n}<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><br \/>\n &#8230; to help the Javascript be able to <b>dynamically<\/b> create &#8220;Glow Circles&#8221; for Venn Diagrams\n<\/li>\n<\/ul>\n<p><b>&#8220;Dynamically&#8221;<\/b>, in this case, is, for most intents and purposes, is like the user controllable mechanisms of yesterday&#8217;s <a title='Horizontal Rule and Div Glowing Lines and Vertices Tutorial' href='#hrdglvt'>Horizontal Rule and Div Glowing Lines and Vertices Tutorial<\/a> which we&#8217;ll leave you to read way below, and show you the new version of &#8220;function glowit()&#8221; just below, as per &#8230;<\/p>\n<p><code><br \/>\n  function glowit() {<br \/>\n    if (doglow) {<br \/>\n      ciss=' class=glow';<br \/>\n      xciss=' class=cglow';<br \/>\n      document.getElementById('dstyle').innerHTML='&lt;style&gt; .circle {  -webkit-animation: cglow 1s ease-in-out infinite alternate;  -moz-animation: cglow 1s ease-in-out infinite alternate; animation: cglow 1s ease-in-out infinite alternate;   } .oval, .rectangle, .glow { -webkit-animation: glow 1s ease-in-out infinite alternate;  -moz-animation: glow 1s ease-in-out infinite alternate; animation: glow 1s ease-in-out infinite alternate;  } &lt;\/style&gt;';<br \/>\n    } else {<br \/>\n      ciss='';<br \/>\n      xciss='';<br \/>\n      document.getElementById('dstyle').innerHTML='';<br \/>\n    }<br \/>\n  }<br \/>\n<\/code><\/p>\n<p>Feel free to try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flowchart.html----GETME\" title=\"flowchart.html\">the changed<\/a> HTML and CSS and Javascript <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flowchart.html----GETME\" title=\"flowchart.html\">flowchart.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flowchart.html\" title=\"Click picture\">live run<\/a> link to try out the new &#8220;glow&#8221; possibilities.  And just remember &#8230;<\/p>\n<div class=cglow style='padding-top: 40px;padding-bottom: 40px;'>\n<p class=tglow>Glow with <br \/>&nbsp;<br \/>&nbsp;<br \/>the flow!<\/p>\n<\/div>\n<p><\/p>\n<hr>\n<p id='hrdglvt'>Previous relevant <a target=_blank title='Horizontal Rule and Div Glowing Lines and Vertices Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/horizontal-rule-and-div-glowing-lines-and-vertices-tutorial\/'>Horizontal Rule and Div Glowing Lines and Vertices 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\/square_hr_tracing.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Horizontal Rule and Div Glowing Lines and Vertices Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing_glow.jpg\" title=\"Horizontal Rule and Div Glowing Lines and Vertices Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Horizontal Rule and Div Glowing Lines and Vertices Tutorial<\/p><\/div>\n<p>There is another graphical idea we&#8217;d like to add some (<a target=_blank title='W3schools glowing text information' href='https:\/\/www.w3schools.com\/howto\/tryit.asp?filename=tryhow_css_glowing_text'>W3School&#8217;s glowing text inspired<\/a>) &#8220;glow&#8221; to, like in the spirit of yesterday&#8217;s <a title='Image Map with Overlay SVG Glowing Polygon Tutorial' href='#imosvggpt'>Image Map with Overlay SVG Glowing Polygon Tutorial<\/a>, but this time, we want it as a user controllable quality, as we realize sometimes people don&#8217;t want &#8220;glow&#8221; in their faces <font size=1>(<a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=J1KSaLCeZ1A'>&#8230; but then there&#8217;s &#8230;<\/a>)<\/font><\/p>\n<p>That (user controllable CSS via Javascript DOM into HTML div) concept involves &#8230;<\/p>\n<ul>\n<li>hr (horizontal rule)<\/li>\n<li>div (that are CSS <a target=_blank title='CSS3 transform property information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/css3_pr_transform.asp'>transform<\/a>ed) &#8230; picking up where we left off with the web application sections of the <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-square-horizontal-rule-image-map-notice-board-tutorial\/' title='HTML Square Horizontal Rule Image Map Notice Board Tutorial'>HTML Square Horizontal Rule Image Map Notice Board Tutorial<\/a> web application &#8230; combined with &#8230;<\/li>\n<li>static CSS animation keyframe arrangements involving <a target=_blank title='CSS box-shadow property information from W3schools' href='https:\/\/www.w3schools.com\/cssref\/css3_pr_box-shadow.asp'>box-shadow<\/a>  &#8230;<br \/>\n<code><br \/>\n\/* Thanks to https:\/\/www.w3schools.com\/howto\/tryit.asp?filename=tryhow_css_glowing_text *\/<br \/>\n<br \/>\n@-webkit-keyframes glow {<br \/>\n  from {<br \/>\n    box-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 37px #e60073, 0 0 9px #e60073, 0 0 11px #e60073, 0 0 13px #e60073, 0 0 15px #e60073;<br \/>\n  }<br \/>\n<br \/>\n  to {<br \/>\n    box-shadow: 0 0 24px #fff, 0 0 6px #ff4da6, 0 0 8px #ff4da6, 0 0 10px #ff4da6, 0 0 12px #ff4da6, 0 0 14px #ff4da6, 0 0 16px #ff4da6;<br \/>\n  }<br \/>\n}<br \/>\n<\/code><br \/>\n &#8230; that with the &#8220;glow&#8221; work up to now has been combined with static CSS &#8220;call that keyframes animation&#8221; &#8230; but not today &#8230; where we add one more static HTML div at the end of the &lt;body&gt;&lt;\/body&gt; section of the webpage <b>as per<\/b> &#8230;<br \/>\n<code><br \/>\n<b>&lt;div id=dstyle&gt;&lt;\/div&gt;<\/b><br \/>\n&lt;\/body&gt;<br \/>\n<\/code><br \/>\n &#8230; with our HTML and Javascript means by which &#8220;glow control&#8221; goes back to the user (optionally) via &#8230;\n<\/li>\n<li>dynamic CSS (because CSS is incredibly useful as a dynamically added &#8220;tool&#8221; statically before document.body onload within the &lt;head&gt;&lt;\/head&gt; section or dynamically via Javascript DOM into the &lt;body&gt;&lt;\/body&gt; section of the webpage &#8230;\n<ol>\n<li>within &lt;head&gt;&lt;\/head&gt; webpage section we introduce a new global var<font size=1>iable<\/font> &#8230;<br \/>\n<code><br \/>\n var doglow=true; \/\/ default to \"glow mode is yes\" after 5 seconds showing non-glow mode implications<br \/>\n<\/code>\n<\/li>\n<li>added to static text &#8220;,&#8221; of an H3 header element to <b>change this way<\/b> in HTML &#8230;<br \/>\n<code><br \/>\n&lt;h3 id=myh3&gt;RJM Programming - December<b>&lt;a class=\"glow\" onclick=\"doglow=!doglow; if (!doglow) { this.className='xglow'; } else {  this.className='glow';   } glowit(); \" style=\"cursor:pointer;text-decoration:none;\" title=\"Click to toggle glow mode\"&gt;<\/b>,<b>&lt;\/a&gt;<\/b> 2018&lt;span id=debug&gt;&lt;\/span&gt;&lt;\/h3&gt;<br \/>\n<\/code>\n<\/li>\n<li> &#8230; which starts as &#8220;glowing&#8221; to attract the user&#8217;s attention to it, though the user has 5 seconds of time not to see this &#8220;glow&#8221; applied to the application the user is accessing via <b>document.body onload<\/b> HTML &#8230;<br \/>\n<code><br \/>\n&lt;body<b> onload=' draw_hrs(); '<\/b>&gt;<br \/>\n<\/code>\n<\/li>\n<li> &#8230; that Javascript function &#8220;draw_hrs()&#8221; <b>changing at its top<\/b> to add in that 5 second delay (after document.body onload) logic &#8230;<br \/>\n<code><br \/>\nfunction draw_hrs() {<br \/>\n  <b>setTimeout(glowit, 5000);<\/b><br \/>\n  \/\/ Rest of \"draw_hrs\" document.body onload logic follows ...<br \/>\n  \/\/ ...<br \/>\n  \/\/ End of rest of \"draw_hrs\" document.body onload logic<br \/>\n}<br \/>\n<\/code>\n<\/li>\n<li> &#8230; calling that Javascript function &#8220;glowit()&#8221; which has the dual purpose of being what&#8217;s called when the user takes control to click\/touch the &#8220;,&#8221; to toggle &#8220;glow mode&#8221; for the application section at hand &#8230;<br \/>\n<code><br \/>\n  function glowit() {<br \/>\n    if (doglow) {<br \/>\n      document.getElementById('dstyle').innerHTML='&lt;style&gt; hr, .glow, div.vertical { -webkit-animation: glow 1s ease-in-out infinite alternate;  -moz-animation: glow 1s ease-in-out infinite alternate; animation: glow 1s ease-in-out infinite alternate;  } &lt;\/style&gt;';<br \/>\n    } else {<br \/>\n      document.getElementById('dstyle').innerHTML='';<br \/>\n    }<br \/>\n  }<br \/>\n<\/code>\n<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html----------------------------GETME\">The changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html----------------------------GETME\">square_hr_tracing.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm\" title=\"Click picture\">can glow<\/a> for you too.<\/p>\n<hr>\n<p id='imosvggpt'>Previous relevant <a target=_blank title='Image Map with Overlay SVG Glowing Polygon Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/image-map-with-overlay-svg-glowing-polygon-tutorial\/'>Image Map with Overlay SVG Glowing Polygon 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\/ImageMap\/Languages\/aboriginal_language_regions.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Image Map with Overlay SVG Glowing Polygon Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/aboriginal_language_regions_drop_shadow.jpg\" title=\"Image Map with Overlay SVG Glowing Polygon Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Image Map with Overlay SVG Glowing Polygon Tutorial<\/p><\/div>\n<p>In the &#8220;glowing&#8221; CSS styling work we&#8217;ve been talking about recently, as with yesterday&#8217;s <a title='Multiple Choice Quiz with Glowing Box Tutorial' href='#mcqgbt'>Multiple Choice Quiz with Glowing Box Tutorial<\/a> &#8220;Glowing Box&#8221;, today we have for you &#8230;<\/p>\n<ul>\n<li>HTML image <a target=_blank title='HTML map element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_map.asp'>map<\/a> element &#8230; with &#8230;<\/li>\n<li><a target=_blank title='HTML area information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_area.asp'>area<\/a> shape=&#8221;poly&#8221; (polygon) elements (that represent approximate coverage for Australian Indigenous Language areas in Australia) &#8230; overlaid by &#8230;<\/li>\n<li><a target=_blank title='SVG information from w3schools' href='https:\/\/www.w3schools.com\/graphics\/svg_intro.asp'>SVG<\/a> <a target=_blank title='HTML svg polygon information from w3schools' href='http:\/\/www.w3schools.com\/svg\/svg_polygon.asp'>polygon<\/a> elements (that come into play when an area element is clicked\/touched &#8230; all old news you can read from <a target=_blank title='Australian Indigenous Language SVG Overlay Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/australian-indigenous-language-svg-overlay-tutorial\/'>Australian Indigenous Language SVG Overlay Tutorial<\/a> &#8230; but new today we add &#8230;<\/li>\n<li>&#8220;Glowing Polygon&#8221; animated <a target=_blank title='SVG drop shadow information from w3schools' href='https:\/\/www.w3schools.com\/graphics\/svg_feoffset.asp'>drop shadow<\/a> (and thanks to <a target=_blank title='Great link' href='https:\/\/stackoverflow.com\/questions\/52264094\/add-drop-shadow-to-svg-polygon'>this great link<\/a> for help here) for that SVG polygon as per the new CSS styling &#8230;<br \/>\n<code><br \/>\n&lt;style&gt;<br \/>\n<br \/>\n\/* Thanks to https:\/\/www.w3schools.com\/howto\/tryit.asp?filename=tryhow_css_glowing_text *\/<br \/>\n<br \/>\nsvg {<br \/>\n  font-size: 16px;<br \/>\n  color: #fff;<br \/>\n  text-align: center;<br \/>\n  -webkit-animation: glow 1s ease-in-out infinite alternate;<br \/>\n  -moz-animation: glow 1s ease-in-out infinite alternate;<br \/>\n  animation: glow 1s ease-in-out infinite alternate;<br \/>\n  color: black;<br \/>\n  <i>-webkit-filter: drop-shadow(0 0 5px red);<br \/>\n  filter: drop-shadow(0 0 5px red);<\/i><br \/>\n}<br \/>\n<br \/>\n@-webkit-keyframes glow {<br \/>\n    <i>0% { -webkit-filter: drop-shadow(0 0 5px red); filter: drop-shadow(0 0 5px red); }<br \/>\n    100% { -webkit-filter: drop-shadow(0 0 8px blue); filter: drop-shadow(0 0 8px blue); }<\/i><br \/>\n}<br \/>\n&lt;\/style&gt;<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p> &#8230; an effect quite eye-catching as you click\/touch in a language region to find out more.<\/p>\n<p>Perhaps you want to use this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/aboriginal_language_regions.html--------GETME\">changed HTML and Javascript and CSS<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/aboriginal_language_regions.html--------GETME\">aboriginal_language_regions.html<\/a> image map <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/\">live run<\/a> link to see how this plays out in actuality, or to explore a little into the oldest continuous culture on this planet?<\/p>\n<hr>\n<p id='mcqgbt'>Previous relevant <a target=_blank title='Multiple Choice Quiz with Glowing Box Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/multiple-choice-quiz-with-glowing-box-tutorial\/'>Multiple Choice Quiz with Glowing Box 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\/multiple_choice_quiz.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Multiple Choice Quiz with Glowing Box Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multiple_choice_quiz_gbox.jpg\" title=\"Multiple Choice Quiz with Glowing Box Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Multiple Choice Quiz with Glowing Box Tutorial<\/p><\/div>\n<p>We&#8217;re going from &#8220;Glowing Text&#8221; ideas below, with <a title='HTML5 Mark Tag with Glowing Text Tutorial' href='#html5mtgtt'>HTML5 Mark Tag with Glowing Text Tutorial<\/a>, to &#8220;Glowing Box&#8221; ideas, starting today, that we apply in the context of a Multiple Choice Quiz.<\/p>\n<p>As far as online quizzes go, don&#8217;t know if you agree, but we think our best chance to remember our learning is, particularly regarding incorrect (quiz) answers, to either &#8230;<\/p>\n<ul>\n<li>trap the user with a correct answer with a Javascript popup (eg. alert) window, awaiting the press of a button &#8230; and\/or &#8230;<\/li>\n<li>really &#8220;in your face&#8221; highlighting of the correct answer (particularly in the case of a multiple choice scenario) with attention grabbing (CSS) styling<\/li>\n<\/ul>\n<p> &#8230; and so, for the latter, we queue the new &#8220;Glowing Box&#8221; (CSS) styling, which (to us) is the same as the (brilliant CSS W3schools <a target=_blank title='W3schools glowing text information' href='https:\/\/www.w3schools.com\/howto\/tryit.asp?filename=tryhow_css_glowing_text'>glowing text idea<\/a>) &#8220;Glowing Text&#8221; styling except where you had &#8220;text-shadow&#8221; in the keyframes section (for &#8220;Glowing Text&#8221;) we use &#8220;box-shadow&#8221;  in that same keyframes section (for &#8220;Glowing Box&#8221;).  We add this onto our previous efforts with <a href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-multiple-choice-quiz-reveal-tutorial\/' title='HTML\/Javascript Multiple Choice Quiz Reveal Tutorial'>HTML\/Javascript Multiple Choice Quiz Reveal Tutorial<\/a>.<\/p>\n<p>With <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multiple_choice_quiz.html----GETME\" title=\"multiple_choice_quiz.html\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multiple_choice_quiz.html----GETME\" title=\"multiple_choice_quiz.html\">multiple_choice_quiz.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multiple_choice_quiz.html\" title=\"Click picture\">live run<\/a> link, you can try out the new CSS &#8220;Glowing Box&#8221;, <b>as per<\/b> &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\n<br \/>\n\/* Thanks to https:\/\/www.w3schools.com\/howto\/tryit.asp?filename=tryhow_css_glowing_text *\/<br \/>\n<br \/>\n.glow {<br \/>\n  font-size: 16px;<br \/>\n  color: #fff;<br \/>\n  text-align: center;<br \/>\n  -webkit-animation: glow 1s ease-in-out infinite alternate;<br \/>\n  -moz-animation: glow 1s ease-in-out infinite alternate;<br \/>\n  animation: glow 1s ease-in-out infinite alternate;<br \/>\n  color: black;<br \/>\n}<br \/>\n<br \/>\n@-webkit-keyframes glow {<br \/>\n  from {<br \/>\n    <b>box-shadow<\/b>: 0 0 3px #fff, 0 0 5px #fff, 0 0 37px #e60073, 0 0 9px #e60073, 0 0 11px #e60073, 0 0 13px #e60073, 0 0 15px #e60073;<br \/>\n  }<br \/>\n<br \/>\n  to {<br \/>\n    <b>box-shadow<\/b>: 0 0 24px #fff, 0 0 6px #ff4da6, 0 0 8px #ff4da6, 0 0 10px #ff4da6, 0 0 12px #ff4da6, 0 0 14px #ff4da6, 0 0 16px #ff4da6;<br \/>\n  }<br \/>\n}<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; overlaying correct Multiple Choice (set) answers with a very compelling (div &#8220;box&#8221; 3D looking) display.<\/p>\n<hr>\n<p id='html5mtgtt'>Previous relevant <a target=_blank title='HTML5 Mark Tag with Glowing Text Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html5-mark-tag-with-glowing-text-tutorial\/'>HTML5 Mark Tag with Glowing Text 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\/markit.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML5 Mark Tag with Glowing Text Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/markit_glow.jpg\" title=\"HTML5 Mark Tag with Glowing Text Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">HTML5 Mark Tag with Glowing Text Tutorial<\/p><\/div>\n<p>To get the background to our attention seeking &#8220;mark&#8221; tag &#8220;glowing text&#8221; application please read &#8230;<\/p>\n<ul>\n<li><a target=_blank title='HTML5 Mark Tag Div Contenteditable Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html5-mark-tag-div-contenteditable-tutorial\/'>HTML5 Mark Tag Div Contenteditable Tutorial<\/a> &#8230; along with &#8230;<\/li>\n<li><a title='Glowing Text Validation Primer Tutorial' href='#gtvpt'>Glowing Text Validation Primer Tutorial<\/a>&#8216;s thread of blog postings below inspired by the CSS brilliance of <a target=_blank title='W3schools glowing text information' href='https:\/\/www.w3schools.com\/howto\/tryit.asp?filename=tryhow_css_glowing_text'>W3School&#8217;s glowing text idea<\/a><\/li>\n<\/ul>\n<p> &#8230; today&#8217;s use quite apt for this &#8220;mark&#8221; tag&#8217;s text highlighting talent.  It&#8217;s default highlighting is a strong yellow background colour, but you can apply this &#8220;glowing text&#8221; CSS class to achieve a more &#8220;in your face result&#8221;, which you can try (<a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/markit.html-GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/markit.html-GETME\">markit.html<\/a>&#8216;s) <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/markit.html\">live run<\/a> link &#8230; or below &#8230;<\/p>\n<p><iframe src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/markit.html\" style=\"width:100%;height:450px;\"><\/iframe><\/p>\n<p> &#8230; yourself, to see what the effect is of &#8220;mark highlighting&#8221; and &#8220;glowing text&#8221;.<\/p>\n<hr>\n<p id='gtvpt'>Previous relevant <a target=_blank title='Glowing Text Validation Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/glowing-text-validation-primer-tutorial\/'>Glowing Text Validation 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\/glowing_text_validation.jpg\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Glowing Text Validation Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/glowing_text_validation.jpg\" title=\"Glowing Text Validation Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Glowing Text Validation Primer Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s application of the use of CSS brilliance of <a target=_blank title='W3schools glowing text information' href='https:\/\/www.w3schools.com\/howto\/tryit.asp?filename=tryhow_css_glowing_text'>W3School&#8217;s glowing text idea<\/a> with <a title='Shooting Star Game Primer Tutorial' href='#ssgpt'>Shooting Star Game Primer Tutorial<\/a> was just one idea regarding the use of glowing text.  What about using it with form validation?<\/p>\n<p>Yes, that&#8217;s &#8220;a goer&#8221; <font size=1>&#8230; see, even the pamplettes are nodding<\/font>.  The reason, of course, is that glowing text is a mechanism whereby you can grab the attention of even the most blas\u00e9 of online users.  And especially if the field you are &#8220;form validating&#8221; is mission critical, this could be a good ploy.<\/p>\n<p>See how we apply this (by making mistakes filling in the forms) with &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/html5_form_constraint_validation.html--GETME\" title=\"\/HTMLCSS\/html5_form_constraint_validation.html--GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/html5_form_constraint_validation.html--GETME\" title=\"\/HTMLCSS\/html5_form_constraint_validation.html\">html5_form_constraint_validation.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/html5_form_constraint_validation.html\" title=\"Click picture\">live run<\/a> as featured on <a target=_blank title='HTML5 Form API Validation Revisit Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html5-form-api-validation-revisit-tutorial\/'>HTML5 Form API Validation Revisit Tutorial<\/a><\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/oninvalid.html-GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/oninvalid.html-GETME\">oninvalid.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/oninvalid.html\" title=\"Click picture\">live run<\/a> as featured on <a target=_blank title='\"HTML Oninvalid Event Form Validation Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-oninvalid-event-form-validation-primer-tutorial\/'>HTML Oninvalid Event Form Validation Primer Tutorial<\/a><\/li>\n<\/ul>\n<hr>\n<p id='ssgpt'>Previous relevant <a target=_blank title='Shooting Star Game Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/shooting-star-game-primer-tutorial\/'>Shooting Star 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\/shooting_star_game.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Shooting Star Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/shooting_star_game.jpg\" title=\"Shooting Star Game Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Shooting Star Game Primer Tutorial<\/p><\/div>\n<p>We&#8217;ve got one of those pretty simple &#8220;click &#8217;em up&#8221; games for you today, inspired by the CSS brilliance of <a target=_blank title='W3schools glowing text information' href='https:\/\/www.w3schools.com\/howto\/tryit.asp?filename=tryhow_css_glowing_text'>W3School&#8217;s glowing text idea<\/a>, thanks.<\/p>\n<p>That set us to thinking of Emojis we could apply (in front of the great background ideas derived from this advice) and looked up <a target=_blank title='Emojipedia' href='http:\/\/www.emojipedia.org'>Emojipedia<\/a> (is good for looking up Emoji names or concepts in words) and onto <a target=_blank title='FileFormation Information website' href='http:\/\/www.fileformat.info'>FileFormat Information<\/a> (is great for HTML Entity determinations for your less complex Emojis) and even <a target=_blank title='Iemoji website' href='http:\/\/www.iemoji.com'>Iemoji<\/a> (is great for HTML Entity determinations for Emojis of all complexities) to determine some components to our game, those being &#8230;<\/p>\n<ul>\n<li>&#127775; &#8230; star<\/li>\n<li>&#9732;&#65039; &#8230; comet<\/li>\n<li>&#127765; &#8230; moon<\/li>\n<\/ul>\n<p> &#8230; which, in turn, led to thoughts regarding a game &#8230;<\/p>\n<ul>\n<li>for one player<\/li>\n<li>that rewards fast reflexes &#8230; and &#8230;<\/li>\n<li>scores via onclick event logic on each component<\/li>\n<li>according to levels of difficulty &#8230; and &#8230;<\/li>\n<li>lessens the score for &#8220;blazing away&#8221; clicks (or touches) &#8230; for that, if a player score is (made up of) <i>score\/goes<\/i> then &#8220;goes&#8221; is incremented by any document.body onclick event during the game<\/li>\n<\/ul>\n<p>Levels of difficulty &#8230; pour quoi?  Well, we can change the &#8230;<\/p>\n<ul>\n<li>Emoji font-size &#8230; and\/or &#8230;<\/li>\n<li>Movement potential of emoji (in pixels) in any &#8220;setTimeout(movecomponents, 100);&#8221; <sup>1<\/sup>\/<sub>10<\/sub>th of a second call cycle<\/li>\n<\/ul>\n<p>Have a go of today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/shooting_star_game.html_GETME\">shooting_star_game.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/shooting_star_game.html\" title=\"Click picture\">game<\/a> if you like, to see this in action.<\/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='#d45778' onclick='var dv=document.getElementById(\"d45778\"); 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='d45778' 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='#d45813' onclick='var dv=document.getElementById(\"d45813\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/validation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45813' 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='#d45850' onclick='var dv=document.getElementById(\"d45850\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/mark\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45850' 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='#d45895' onclick='var dv=document.getElementById(\"d45895\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/quiz\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45895' 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='#d45906' onclick='var dv=document.getElementById(\"d45906\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/svg\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45906' 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='#d45919' onclick='var dv=document.getElementById(\"d45919\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/div\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45919' 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='#d45925' onclick='var dv=document.getElementById(\"d45925\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/circle\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45925' 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='#d48356' onclick='var dv=document.getElementById(\"d48356\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/annotation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d48356' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>In constructing yesterday&#8217;s Ajax Auto-completion Refinement Tutorial&#8216;s flowchart tutorial picture via Flowchart and Venn Diagram Glow Tutorial&#8216;s Flowchart and Venn Diagram web application, we found it had shortfalls performing the &#8220;Yes&#8221; and &#8220;No&#8221; (what we call loose) text annotations that &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/flowchart-and-venn-diagram-loose-text-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,37],"tags":[1832,1798,2566,2262,208,281,342,354,1613,3030,576,3111,652,1988,997,1254,1319,1367],"class_list":["post-48356","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-annotation","tag-border-radius","tag-box-shadow","tag-center","tag-circle","tag-css","tag-div","tag-dom","tag-flowchart","tag-glow","tag-html","tag-intersection","tag-javascript","tag-position","tag-programming","tag-text","tag-tutorial","tag-venn-diagram"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/48356"}],"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=48356"}],"version-history":[{"count":10,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/48356\/revisions"}],"predecessor-version":[{"id":48384,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/48356\/revisions\/48384"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=48356"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=48356"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=48356"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}