{"id":48605,"date":"2020-04-16T03:01:11","date_gmt":"2020-04-15T17:01:11","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=48605"},"modified":"2020-04-19T09:51:18","modified_gmt":"2020-04-18T23:51:18","slug":"quadratic-equation-inline-html-email-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/quadratic-equation-inline-html-email-tutorial\/","title":{"rendered":"Quadratic Equation Inline HTML Email Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/quadratic_chalkboard.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Quadratic Equation Inline HTML Email Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/quadratic_chalkboard_inline_email.jpg\" title=\"Quadratic Equation Inline HTML Email Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Quadratic Equation Inline HTML Email Tutorial<\/p><\/div>\n<p>Mathematicians out there will know that &#8230;<\/p>\n<ul>\n<li><i>Quadratic Equation<\/i> solutions as quizzed about with today&#8217;s feature web application of <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-more-quadratic-equations-tutorial\/' title='HTML\/Javascript Quadratic Equations Game Tutorial'>HTML\/Javascript Quadratic Equations Game Tutorial<\/a> &#8230;<\/li>\n<li>can benefit from the visual aspects of drawing <i>Parabolae<\/i> (as with yesterday&#8217;s <a title='Parabola Quiz Google Chart Tutorial' href='#pqgct'>Parabola Quiz Google Chart Tutorial<\/a>)<\/li>\n<\/ul>\n<p> &#8230; and the linkage here got us to thinking and wondering whether the <i>Quadratic Equation<\/i> web application could benefit from Inline HTML Email Form integration.  We had a <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=G8bm6XlxuCY'>4:06<\/a> minute meeting and decided that, yes, we could have performed the meeting in reverse with no adverse impact &#8230; but we digress?!   <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=nKdSvhCg3VY#t=1m26s'>Yes<\/a>, that would be nice.<\/p>\n<p>And, cutting to the chase, what was the biggest issue?  Sorry to disappoint with the answer that isn&#8217;t <i>&#8220;Ajax issues&#8221;<\/i>, that isn&#8217;t <i>&#8220;event violation time limits on Safari when a prompt window hangs off an onclick event piece of logic&#8221;<\/i>, that isn&#8217;t <i>&#8220;input type=text focus not happening on mobile issues&#8221;<\/i> &#8230; but is &#8230; dah, dah dah dah dah dah, dah, dah dah &#8230; the <i>&#8221; + &#8220;<\/i> (ie. plus) character.  It has been the &#8220;Inline HTML Email&#8221; theme baddie of the week around here.  Why?  Because it gets lost in translation &#8230;<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/quadratic_chalkboard_inline_email_bad.jpg\" title=\"Bad look\"><\/img><\/p>\n<p> &#8230; a lot getting to Inline HTML Emails largely, we have no doubt, because the &#8220;+&#8221; character is PHP urlencode(&#8221; &#8220;) (ie. what blanks go from a form and over to the recipient as, quite often &#8230; ie. when not the &#8220;%20&#8243; that encodeURIComponent(&#8221; &#8220;) produces).<\/p>\n<p>And so, the recent <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tic-tac-toe-two-email-players-via-inline-html-email-bugs-tutorial\/' title='Tic-Tac-Toe Two Email Players via Inline HTML Email Bugs Tutorial'>Tic-Tac-Toe Two Email Players via Inline HTML Email Bugs Tutorial<\/a> &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/tic-tac-toe-two-email-players-via-inline-html-email-bugs-tutorial\/'>\n<ul>\n<li><a target=_blank title='Gmail' href='https:\/\/gmail.com'>Gmail<\/a> webmail email client has a great feature to the right top of an opened email with the (ol&#8217;) three (vertical) dots menu and its &#8220;Show original&#8221; option, that in our Inline Email Form option (down the report) shows the HTML our web application &#8220;got through&#8221; to the Gmail client email application &#8230; noting that &#8220;got through&#8221; is not always the same as &#8220;meant to get through&#8221; &#8230;<\/li>\n<\/ul>\n<\/blockquote>\n<p> &#8230; debugging tool is the best one to use to track down such a problem.  By the way, today&#8217;s work, for the first time for a while, viewed much better in Gmail Webmail rather than (the view where some emojis did not translate as well in) Apple Mail.<\/p>\n<p>In some situations it won&#8217;t work but for today&#8217;s work, what fixed this, was to, just before creating the Inline HTML Email Form via PHP <a target=_blank title='PHP mail method information' href='http:\/\/php.net\/manual\/en\/function.mail.php'>mail<\/a> we made one timely and crucial <font color=blue>Javascript <a target=_blank title='Javascript RegExp information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/jsref_obj_regexp.asp'>regular expressions<\/a> (RegExp) <a target=_blank title='Javascript string replace function information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_replace.asp'><i>replace<\/i><\/a> as per<\/font> &#8230;<\/p>\n<p><code><br \/>\n    document.getElementById('formtable').value=encodeURIComponent('&lt;body&gt;&lt;meta charset=\"utf-8\"\/&gt;&lt;form action=' + document.URL.split('?')[0].split('#')[0] + ' method=GET&gt;' + document.body.innerHTML.split('&lt;if' + 'rame ')[0].replace(document.getElementById('demail').outerHTML,'').replace(' id=\"unknown\"',' name=\"unknown\" id=\"unknown\"')<font color=blue>.replace(\/\\ \\+\\ \/g, ' ' + String.fromCodePoint(10133) + ' ')<\/font> + '&lt;input type=hidden name=oklist value=\"' + oklist + '\"&gt;&lt;\/input&gt;&lt;input type=hidden name=url value=\"' + url + '\"&gt;&lt;\/input&gt;&lt;br&gt;&lt;br&gt;&lt;input style=\"margin-left:300px;display:inline-block;background-color:yellow;width:10%;\" type=submit value=Check&gt;&lt;\/input&gt;&lt;\/form&gt;&lt;\/body&gt;');<br \/>\n<\/code><\/p>\n<p>And so there is now a new &#8220;Quadratic Equation Quiz&#8221; component to this &#8220;Quadratic Equation DotDotDot Sentence  Game&#8221; web application for you to try with the <a href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/quadratic_chalkboard.html\" title=\"Click picture\" target=\"_blank\">live run<\/a> that you could call <a href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/quadratic_chalkboard.HTML-GETME\" title=\"quadratic_chalkboard.html\" target=\"_blank\">quadratic_chalkboard.html<\/a> and which changed in <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/quadratic_chalkboard.html-GETME\" title=\"Code difference for quadratic_chalkboard.html\" target=\"_blank\">this way<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/quadratic-equation-inline-html-email-tutorial\/'>Quadratic Equation Inline HTML Email Tutorial<\/a>.<\/p-->\n<hr>\n<p id='pqgct'>Previous relevant <a target=_blank title='Parabola Quiz Google Chart Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/parabola-quiz-google-chart-tutorial\/'>Parabola Quiz Google Chart Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/ParabolaLineGraph\/parabola_lgraph.php\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Parabola Quiz Google Chart Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/ParabolaLineGraph\/parabola_quiz.gif\" title=\"Parabola Quiz Google Chart Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Parabola Quiz Google Chart Tutorial<\/p><\/div>\n<p>We&#8217;ve found a new reason to tinker with deliberate image blurring on top of the usual &#8230;<\/p>\n<ul>\n<li>hiding sensitive data on images (where we find <a target=_blank href='http:\/\/www.gimp.org' title='Gimp, or GIMP'>Gimp<\/a> very good to use)<\/li>\n<li>as an SVG filter as used in <a target=_blank title='Gimp Guillotine Follow Up SVG Filter Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/gimp-guillotine-follow-up-svg-filter-tutorial\/'>Gimp Guillotine Follow Up SVG Filter Tutorial<\/a><\/li>\n<li>video blurring effects (via CSS &#8220;blur&#8221; filter) as shown at <a target=_blank title='Video via Image Filter and Canvas Magnifier Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/video-via-image-filter-and-canvas-magnifier-tutorial\/'>Video via Image Filter and Canvas Magnifier Tutorial<\/a> &#8230; and now, today, we&#8217;re interested because &#8230;<\/li>\n<li>a game we&#8217;ve opened up to being an Inline HTML Email Form quiz benefits from having a &#8220;blurred&#8221; (actually bad resolution) image presented in an email<\/li>\n<\/ul>\n<p> &#8230; stemming from a renewed desire to exhaust our interest in &#8230;<\/p>\n<ul>\n<li>data-URI image<\/li>\n<li>Inline HTML Email<\/li>\n<\/ul>\n<p> &#8230; readily admitting that Gmail Webmail (email client) is a no go, but Apple Mail is a go, so we will offer an &#8220;a&#8221; link alternative for those email clients that do not allow data-URI images.<\/p>\n<p>Our other interest was whether we could involve <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Charts<\/a> directly in an Inline HTML Email.  Well, it pans out &#8230; &#8220;not directly&#8221; &#8230; but what if we make use of the great <a title='Google Page Insights' href='https:\/\/developers.google.com\/speed\/pagespeed\/insights\/'>Google Page Insights<\/a> webpage screenshotting &#8220;smarts&#8221; (that we combine with <a target=_blank title='Ajax' href='https:\/\/www.w3schools.com\/js\/js_ajax_intro.asp'>Ajax<\/a>).  We were wary of URLs presented to Google Page Insights that involved &#8220;&#038;&#8221; (second and on) argument delimiters, but on revisiting this, pleasantly surprised by these URLs working to &#8230;<\/p>\n<ul>\n<li>present a Google Chart after asking the user for graph drawing parameters<\/li>\n<li>those parameters allowing for a quiz emailee address to be defined, in which case &#8230;<\/li>\n<li>the PHP web application, building on the previous one of <a title='Mathematics Equation Google Chart Line Chart Primer Tutorial' href='#megclcpt'>Mathematics Equation Google Chart Line Chart Primer Tutorial<\/a> calls Google Page Insights to receive a data-URI string as the &#8220;src&#8221; parameter for an &#8220;img&#8221; element that shows &#8230;<\/li>\n<li>in an Apple Mail (but not Gmail Webmail) email this data-URI (user defined parabola) image shows very blurry, too blurry to make out the numbers, so &#8230;<\/li>\n<li>as a quiz for that emailee we can ask them to try to guess what the user <font color=blue>placed for<\/font> &#8230;<br \/>\n<code style=\"font-size:32px;\"><br \/>\ny = <font color=blue>?<\/font>x<sup style=\"font-size:16px;\">2<\/sup> + (<font color=blue>?<\/font>)x + (<font color=blue>?<\/font>)<br \/>\n<\/code><br \/>\n &#8230; but &#8230;\n<\/li>\n<li>to avoid too much frustration, we offer a pretty helpful &#8220;Hint&#8221; link both for Gmail Webmail users (who will not see that data-URI image) and other users a tad worried by image blurriness you can see in today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/ParabolaLineGraph\/parabola_quiz.gif\" title=\"Tutorial picture\">animated GIF<\/a> presentation<\/li>\n<\/ul>\n<p>And so there is now a new &#8220;Parabola Quiz&#8221; component to this Parabola Equation PHP (and Google Chart <a target=_blank title='Google Chart Line Chart information' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/linechart'>Line Chart<\/a> interfacing) web application for you to try with the <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/ParabolaLineGraph\/parabola_lgraph.php\" title=\"Click picture\" target=\"_blank\">live run<\/a> that you could call <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/ParabolaLineGraph\/parabola_lgraph.php----GETME\" title=\"parabola_lgraph.php\" target=\"_blank\">parabola_lgraph.php<\/a> and which changed in <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/ParabolaLineGraph\/parabola_lgraph.php----GETME\" title=\"Code difference for parabola_lgraph.php\" target=\"_blank\">this way<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank href='\/\/www.rjmprogramming.com.au\/ITblog\/parabola-quiz-google-chart-tutorial'>Parabola Quiz Google Chart Tutorial<\/a>.<\/p-->\n<hr>\n<p id='megclcpt'>Previous relevant <a target=_blank title='Mathematics Equation Google Chart Line Chart Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/mathematics-equation-google-chart-line-chart-primer-tutorial\/'>Mathematics Equation Google Chart Line Chart 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\/PHP\/ParabolaLineGraph\/parabola_lgraph.php\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Mathematics Equation Google Chart Line Chart Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/ParabolaLineGraph\/graph.JPG\" title=\"Mathematics Equation Google Chart Line Chart Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Mathematics Equation Google Chart Line Chart Primer Tutorial<\/p><\/div>\n<p>In the recent <a target=_blank title='Mathematics Equation Backtracking Game Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/mathematics-equation-backtracking-game-primer-tutorial\/'>Mathematics Equation Backtracking Game Primer Tutorial<\/a> we found that there was not much to do to consider the drawing and display of a straight line by saying the <i>a<\/i> in &#8230;<\/p>\n<p><code>Y = aX<sup>2<\/sup> + bX + c<\/code><\/p>\n<p> &#8230; is zero &#8230; and this turned the <i>parabola<\/i> data our Google Chart Parabola Line Graph code was initially designed for, into code that could display a <i>straight line<\/i>.  But what about other equations?  Well, we think the same code should suffice for that too, though we have to rearrange a fair bit more for that idea in the code, and ask a lot of the user.  They use the ^ for &#8220;power of&#8221; for instance, and we&#8217;re sure we&#8217;ll think of more issues with requirements on this as time goes on, but the initial extension to functionality thoughts here swirled around equations  where the most complex it gets for a <i>parabola<\/i> is &#8220;to the power of&#8221; 2.  What about  equations of curves of other powers bigger than 2 and less than 1, including negative powers.  Given some suitable entries by the user, this is now possible using this same one codebase utilising the Google Chart Line Chart web application interface with this <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/ParabolaLineGraph\/parabola_lgraph.php\" title=\"Code difference for parabola_lgraph.php\" target=\"_blank\">live run<\/a> that you could call <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/ParabolaLineGraph\/parabola_lgraph.php---GETME\" title=\"Code difference for parabola_lgraph.php\" target=\"_blank\">parabola_lgraph.php<\/a> and which changed in <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/ParabolaLineGraph\/parabola_lgraph.php---GETME\" title=\"Code difference for parabola_lgraph.php\" target=\"_blank\">this way<\/a>.  So you can look at today&#8217;s tutorial picture, and below we&#8217;d like to show you a Cubic Polynomial, as we found discussed at this <a target=_blank title='Useful link' href='http:\/\/mathworld.wolfram.com\/CubicPolynomial.html'>useful link<\/a>, thanks.<\/p>\n<p><iframe width=100% height=700 title=CubicPolynomial src='http:\/\/www.rjmprogramming.com.au\/PHP\/ParabolaLineGraph\/parabola_lgraph.php?minval=-100&#038;onclick=y&#038;maxval=100&#038;e2=4%20*%20(x*x*x)%2B%203%20*(x*x)%2B%202%20*%20x%20%20%2B%201&#038;e1=0&#038;e0=0'><\/iframe><\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d27577' onclick='var dv=document.getElementById(\"d27577\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/google-charts\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d27577' 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='#d48596' onclick='var dv=document.getElementById(\"d48596\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/inline-html\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d48596' 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='#d48605' onclick='var dv=document.getElementById(\"d48605\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/inline-html\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d48605' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Mathematicians out there will know that &#8230; Quadratic Equation solutions as quizzed about with today&#8217;s feature web application of HTML\/Javascript Quadratic Equations Game Tutorial &#8230; can benefit from the visual aspects of drawing Parabolae (as with yesterday&#8217;s Parabola Quiz Google &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/quadratic-equation-inline-html-email-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,15,37],"tags":[92,2022,503,576,738,752,997,1790,2700,1319,1417],"class_list":["post-48605","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-games","category-tutorials","tag-apple-mail","tag-codepoint","tag-gmail","tag-html","tag-mail","tag-mathematics","tag-programming","tag-quadratic-equation","tag-string-fromcodepoint","tag-tutorial","tag-webmail"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/48605"}],"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=48605"}],"version-history":[{"count":11,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/48605\/revisions"}],"predecessor-version":[{"id":48728,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/48605\/revisions\/48728"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=48605"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=48605"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=48605"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}