{"id":45919,"date":"2019-08-08T03:01:41","date_gmt":"2019-08-07T17:01:41","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=45919"},"modified":"2019-08-08T11:19:52","modified_gmt":"2019-08-08T01:19:52","slug":"horizontal-rule-and-div-glowing-lines-and-vertices-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/horizontal-rule-and-div-glowing-lines-and-vertices-tutorial\/","title":{"rendered":"Horizontal Rule and Div Glowing Lines and Vertices Tutorial"},"content":{"rendered":"<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","protected":false},"excerpt":{"rendered":"<p>There is another graphical idea we&#8217;d like to add some (W3School&#8217;s glowing text inspired) &#8220;glow&#8221; to, like in the spirit of yesterday&#8217;s Image Map with Overlay SVG Glowing Polygon Tutorial, but this time, we want it as a user controllable &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/horizontal-rule-and-div-glowing-lines-and-vertices-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":[46,2566,281,342,1833,3030,3029,2349,2770,576,592,2598,745,1717,997,1022,1209,1212,1226,2567,1319,2215],"class_list":["post-45919","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-3d","tag-box-shadow","tag-css","tag-div","tag-drop-shadow","tag-glow","tag-glowing-box","tag-highlight","tag-horizontal-rule","tag-html","tag-image-map","tag-line","tag-map","tag-multiple-choice","tag-programming","tag-quiz","tag-style","tag-styling","tag-svg","tag-text-shadow","tag-tutorial","tag-vertex"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/45919"}],"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=45919"}],"version-history":[{"count":2,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/45919\/revisions"}],"predecessor-version":[{"id":45921,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/45919\/revisions\/45921"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=45919"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=45919"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=45919"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}