{"id":48596,"date":"2020-04-15T03:01:35","date_gmt":"2020-04-14T17:01:35","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=48596"},"modified":"2020-04-16T14:42:16","modified_gmt":"2020-04-16T04:42:16","slug":"parabola-quiz-google-chart-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/parabola-quiz-google-chart-tutorial\/","title":{"rendered":"Parabola Quiz Google Chart Tutorial"},"content":{"rendered":"<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","protected":false},"excerpt":{"rendered":"<p>We&#8217;ve found a new reason to tinker with deliberate image blurring on top of the usual &#8230; hiding sensitive data on images (where we find Gimp very good to use) as an SVG filter as used in Gimp Guillotine Follow &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/parabola-quiz-google-chart-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":[2,12,14,15,37],"tags":[69,92,152,1654,503,519,3142,590,738,752,898,932,997,1776,1319,1417],"class_list":["post-48596","post","type-post","status-publish","format-standard","hentry","category-ajax","category-elearning","category-event-driven-programming","category-games","category-tutorials","tag-ajax","tag-apple-mail","tag-blur","tag-data-uri","tag-gmail","tag-google-charts","tag-google-page-insights","tag-image","tag-mail","tag-mathematics","tag-parabola","tag-php","tag-programming","tag-screenshot","tag-tutorial","tag-webmail"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/48596"}],"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=48596"}],"version-history":[{"count":10,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/48596\/revisions"}],"predecessor-version":[{"id":48643,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/48596\/revisions\/48643"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=48596"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=48596"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=48596"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}