{"id":18936,"date":"2015-12-20T02:01:17","date_gmt":"2015-12-19T16:01:17","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=18936"},"modified":"2017-06-18T21:24:02","modified_gmt":"2017-06-18T11:24:02","slug":"htmljavascript-canvas-fractions-drag-and-drop-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-canvas-fractions-drag-and-drop-tutorial\/","title":{"rendered":"HTML\/Javascript Canvas Fractions Drag and Drop Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/fraction_chalkboard.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML\/Javascript Canvas Chalkboard Drag and Drop Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/fraction_dd_chalkboard.jpg\" title=\"HTML\/Javascript Canvas Fractions Drag and Drop Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Canvas Fractions Drag and Drop Tutorial<\/p><\/div>\n<p>A few days back we spoke about drag and drop events where we presented <a target=_blank title='The Three P Three Modes Drag and Drop Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/the-three-p-three-modes-drag-and-drop-tutorial\/'>The Three P Three Modes Drag and Drop Tutorial<\/a> and the event discussion then &#8230;<\/p>\n<blockquote>\n<p>Eventwise, you&#8217;ll want to research &#8230;<\/p>\n<p>So what events were relevant to the left hand (drag) side areas?<\/p>\n<ul>\n<li><a target=_blank title='Event ondragstart information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_ondragstart.asp'>ondragstart<\/a>=&#8221;drag(event)&#8221; &#8230; where we can differentiate a drag and drop from a click\/touch <font color=red>(with mobile and non-mobile platforms we allow for <i>onclick<\/i> event also)<\/font><\/li>\n<p><!--li><a target=_blank title='Event onclick information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onclick.asp'>onclick<\/a>=\"adrag(event)\" ... to allow for platforms that do not support drag and drop<\/li-->\n<\/ul>\n<p>And what additional property?<\/p>\n<ul>\n<li><a target=_blank title='Property draggable information from w3schools' href='http:\/\/www.w3schools.com\/tags\/att_global_draggable.asp'>draggable<\/a>=&#8221;true&#8221;<\/li>\n<\/ul>\n<p>So what events were relevant to the right hand canvas element drop zone?<\/p>\n<ul>\n<!--li><a target=_blank title='Event onmouseover information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onmouseover.asp'>onmouseover<\/a>=\" if (!misdown && pickedcard != '') { omo(event); } \" ... allows for identification of the dropped onto card\/image in a drag and drop event<\/li>\n\n\n\n\n<li><a target=_blank title='Event onmouseup information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onmouseup.asp'>onmouseup<\/a>=\"omu(event)\" ... allows for identification of the dropped onto card\/image in a drag and drop event<\/li>\n\n\n\n\n<li><a target=_blank title='Event onclick information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onclick.asp'>onclick<\/a>=\"omu(event)\" ... to allow for platforms that do not support drag and drop to allow for identification of the right hand image<\/li-->\n<li><a target=_blank title='Event ondragover information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_ondragover.asp'>ondragover<\/a>=&#8221;allowDrop(event)&#8221; <font color=red>(with mobile and non-mobile platforms we allow for <i>onclick<\/i> event to call allowDrop(event) and drop(event))<\/font><\/li>\n<li><a target=_blank title='Event ondrop information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_ondrop.asp'>ondrop<\/a>=&#8221;drop(event)&#8221; <font color=red>(with mobile and non-mobile platforms we allow for <i>onclick<\/i> event to call allowDrop(event) and drop(event))<\/font><\/li>\n<\/ul>\n<\/blockquote>\n<p> &#8230; is pretty apt for today&#8217;s mathematics Fractions game (using an HTML <a target=_blank title='HTML Canvas Reference' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>canvas<\/a> element) as well if you replace &#8220;left&#8221; with &#8220;top&#8221; and &#8220;right&#8221; with &#8220;bottom&#8221;.<\/p>\n<p>This work today is actually a revisit of this web application we first talked about previously with <a title='HTML\/Javascript Canvas Fractions Game Tutorial' href='#hjcfgt'>HTML\/Javascript Canvas Fractions Game Tutorial<\/a> as shown way below and last talked about with <a title='HTML\/Javascript Canvas Visual Double Click Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-canvas-visual-double-click-tutorial\/'>HTML\/Javascript Canvas Visual Double Click Tutorial<\/a> as shown just below, but today&#8217;s drag and drop (or mobile discrete &#8220;top&#8221; touch and discrete &#8220;bottom&#8221; touch) functionality highlights a user experience (UX) thought we believe in here.  If you can make your application not need one of the input\/output duo of mouse or keyboard you improve the user experience for some users.  The drag and drop is an option to avoid any need to use the keyboard in this web application.  As such, we see this, as a great improvement with the web application.<\/p>\n<p>Here is a link to some downloadable HTML programming code &#8230; rename to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/fraction_chalkboard.html--GETME' title='fraction_chalkboard.html'>fraction_chalkboard.html<\/a> changed for drag and drop in <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/fraction_chalkboard.html--GETME' title='fraction_chalkboard.html'>this way<\/a>, and here is a <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/fraction_chalkboard.html' title='fraction_chalkboard.html'>live run link<\/a>.<\/p>\n<hr>\n<p id='hjcvdct'>Previous relevant <a target=_blank title='HTML\/Javascript Canvas Visual Double Click Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-canvas-visual-double-click-tutorial\/'>HTML\/Javascript Canvas Visual Double Click 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\/Canvas\/Game\/Chalkboard\/fraction_visualwithdoubleclick_chalkboard.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML\/Javascript Canvas Visual Double Click Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/fraction_visualwithdoubleclick_chalkboard.jpg\" title=\"HTML\/Javascript Canvas Visual Double Click Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Canvas Visual Double Click Tutorial<\/p><\/div>\n<p>The Canvas HTML element tag can be used as the container to draw graphics on the fly usually via the use of Javascript functions for rendering and event management.<\/p>\n<p>In today&#8217;s tutorial we add to the functionality of the previous <a target=_blank title='HTML\/Javascript Canvas Double Click Tutorial' href='#hjcdct'>HTML\/Javascript Canvas Double Click Tutorial<\/a>, as shown below, where we draw an image on the canvas via drawImage() method, by, today, allowing the user to have additional optional double click functionality (on iOS we say \u201cuse any gesture\u201d) to add some other advice or help prior to the user attempting their answer to the mathematical fractions question posed on the chalkboard (via advice regarding coding logic (thanks) based on <a target=_blank title='[Solved] How to create Event to dynamic canvas? - CodeProject' href='http:\/\/www.codeproject.com\/Questions\/691499\/How-to-create-Event-to-dynamic-canvas'>link<\/a> here).  In addition we offer the visual help by <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=1538' title='Google Pie Chart tutorial'>adding<\/a> Google <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/piechart' title='Pie Chart information from Google'>Pie Charts<\/a> to visually represent your fractional values (which may aid the user).<\/p>\n<p>You may want to read more at <a target=_blank title='HTML Canvas Reference' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>HTML Canvas Reference<\/a> as a generic reference, or here, at the tutorial <a target=_blank title='javascript - How do I add a simple onClick event handler to a canvas element? - Stack Overflow' href='http:\/\/stackoverflow.com\/questions\/9880279\/how-do-i-add-a-simple-onclick-event-handler-to-a-canvas-element'>javascript &#8211; How do I add a simple onClick event handler to a canvas element? &#8211; Stack Overflow<\/a>.<\/p>\n<p>As you can imagine, this HTML canvas element, new to HTML5, can be very useful for some practical client-side web functionality.<\/p>\n<p>Link to some downloadable HTML programming code &#8230; rename to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/fraction_visualwithdoubleclick_chalkboard.html_GETME' title='fraction_visualwithdoubleclick_chalkboard.html'>fraction_visualwithdoubleclick_chalkboard.html<\/a><\/p>\n<p>You&#8217;ll notice heavy use of the Javascript <a target=_blank title='Javascript Math.random() information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_random.asp'>Math.random()<\/a> function.<\/p>\n<p>We hope you enjoy this tutorial as a <a target=_blank title='Canvas HTML element live run tutorial'  href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/fraction_visualwithdoubleclick_chalkboard.html\">live run<\/a>.<\/p>\n<p>Pretty close to &#8220;almost finally&#8221;, need to thank a great link for coding ideas with this tutorial, here, at this <a target=_blank title='[Solved] How to create Event to dynamic canvas? - CodeProject' href='http:\/\/www.codeproject.com\/Questions\/691499\/How-to-create-Event-to-dynamic-canvas'>link<\/a>.<\/p>\n<p>Pretty close to &#8220;finally&#8221;, have a look at the differences in code that arrived at the comparison part of the extra visual Google Pie Chart &#8220;visual fraction representation&#8221; functionality by examining <a target=_blank title='fraction_somevisual_chalkboard.html' href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/fraction_somevisual_chalkboard.html-GETME\">Changes just for Pie Chart Visual Comparisons<\/a> link and the comparison part of all extra double click functionality (on iOS we say \u201cuse any gesture\u201d) by examining <a target=_blank title='fraction_allvisual_chalkboard.html' href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/fraction_allvisual_chalkboard.html-GETME\">Changes for all Double Click functionality (on iOS we say \u201cuse any gesture\u201d)<\/a> link.<\/p>\n<p>Yes &#8230; you&#8217;ve reached the end &#8230; hope you have a good time practising your mathematics knowledge of Fractions (there is also post-answer advice (different to optional double click (on iOS we say \u201cuse any gesture\u201d) pre-answer advice and Pie Charts), if you want to learn &#8230; you can get it when you give an incorrect answer)!   Try the double clicking canvas functionality (on iOS we say \u201cuse any gesture\u201d), as well, if you like.<\/p>\n<hr \/>\n<p id='hjcdct'>Previous <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=7591' title='HTML\/Javascript Canvas Double Click Tutorial'>HTML\/Javascript Canvas Double Click 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\/Canvas\/Game\/Chalkboard\/fraction_withdoubleclick_chalkboard.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML\/Javascript Canvas Double Click Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/fraction_withdoubleclick_chalkboard.jpg\" title=\"HTML\/Javascript Canvas Double Click Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Canvas Double Click Tutorial<\/p><\/div>\n<p>The Canvas HTML element tag can be used as the container to draw graphics on the fly usually via the use of Javascript functions for rendering and event management.<\/p>\n<p>In today&#8217;s tutorial we add to the functionality of the previous <a target=_blank title='HTML\/Javascript Canvas Fractions Game Tutorial' href='#hjcfgt'>HTML\/Javascript Canvas Fractions Game Tutorial<\/a>, as shown below, where we draw an image on the canvas via drawImage() method, by, today, allowing the user to have additional optional double click functionality (on iOS we say \u201cuse any gesture\u201d) to add some other advice or help prior to the user attempting their answer to the mathematical fractions question posed on the chalkboard (via advice regarding coding logic (thanks) based on <a target=_blank title='[Solved] How to create Event to dynamic canvas? - CodeProject' href='http:\/\/www.codeproject.com\/Questions\/691499\/How-to-create-Event-to-dynamic-canvas'>link<\/a> here).<\/p>\n<p>You may want to read more at <a target=_blank title='HTML Canvas Reference' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>HTML Canvas Reference<\/a> as a generic reference, or here, at the tutorial <a target=_blank title='javascript - How do I add a simple onClick event handler to a canvas element? - Stack Overflow' href='http:\/\/stackoverflow.com\/questions\/9880279\/how-do-i-add-a-simple-onclick-event-handler-to-a-canvas-element'>javascript &#8211; How do I add a simple onClick event handler to a canvas element? &#8211; Stack Overflow<\/a>.<\/p>\n<p>As you can imagine, this HTML canvas element, new to HTML5, can be very useful for some practical client-side web functionality.<\/p>\n<p>Link to some downloadable HTML programming code &#8230; rename to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/fraction_withdoubleclick_chalkboard.html_GETME' title='fraction_withdoubleclick_chalkboard.html'>fraction_withdoubleclick_chalkboard.html<\/a>\n<\/p>\n<p>You&#8217;ll notice heavy use of the Javascript <a target=_blank title='Javascript Math.random() information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_random.asp'>Math.random()<\/a> function.<\/p>\n<p>We hope you enjoy this tutorial as a <a target=_blank title='Canvas HTML element live run tutorial'  href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/fraction_withdoubleclick_chalkboard.html\">live run<\/a>.<\/p>\n<p>Almost finally, need to thank a great link for coding ideas with this tutorial, here, at this <a target=_blank title='[Solved] How to create Event to dynamic canvas? - CodeProject' href='http:\/\/www.codeproject.com\/Questions\/691499\/How-to-create-Event-to-dynamic-canvas'>link<\/a>.<\/p>\n<p>Finally, have a look at the differences in code that arrived at this extra canvas double click functionality (on iOS we say \u201cuse any gesture\u201d) by examining <a target=_blank title='fraction_withdoubleclick_chalkboard.html' href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/fraction_chalkboard.html-GETME\">fraction_withdoubleclick_chalkboard.html<\/a> link.<\/p>\n<p>Yes &#8230; you&#8217;ve reached the end &#8230; hope you have a good time practising your mathematics knowledge of Fractions (there is also post-answer advice (different to optional double click (on iOS we say \u201cuse any gesture\u201d) pre-answer advice), if you want to learn &#8230; you can get it when you give an incorrect answer)!   Try the double clicking canvas functionality (on iOS we say \u201cuse any gesture\u201d), as well, if you like.<\/p>\n<hr \/>\n<p id='hjcfgt'>Previous <a target=_blank title='HTML\/Javascript Canvas Fractions Game Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=7258'>HTML\/Javascript Canvas Fractions Game Tutorial<\/a> of interest is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/fraction_chalkboard.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML\/Javascript Canvas Chalkboard Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/fraction_chalkboard.jpg\" title=\"HTML\/Javascript Canvas Fractions Game Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Canvas Fractions Game Tutorial<\/p><\/div>\n<p>The Canvas HTML element tag can be used as the container to draw graphics on the fly usually via the use of Javascript functions for rendering and event management.<\/p>\n<p>In today&#8217;s tutorial we touch on the functionality to draw an image on the canvas via drawImage() method.   In the case of this tutorial that image contributes to the user answering some mathematics questions regarding fractions on a simulated <i>&#8220;chalkboard&#8221;<\/i>.<\/p>\n<p>You may want to read more at <a target=_blank title='HTML Canvas Reference' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>HTML Canvas Reference<\/a> as a generic reference, or here, at the tutorial <a target=_blank title='javascript - How do I add a simple onClick event handler to a canvas element? - Stack Overflow' href='http:\/\/stackoverflow.com\/questions\/9880279\/how-do-i-add-a-simple-onclick-event-handler-to-a-canvas-element'>javascript &#8211; How do I add a simple onClick event handler to a canvas element? &#8211; Stack Overflow<\/a>.<\/p>\n<p>As you can imagine, this HTML canvas element, new to HTML5, can be very useful for some practical client-side web functionality.<\/p>\n<p>Link to some downloadable HTML programming code &#8230; rename to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/fraction_chalkboard.html_GETME' title='fraction_chalkboard.html'>fraction_chalkboard.html<\/a>\n<\/p>\n<p>You&#8217;ll notice heavy use of the Javascript <a target=_blank title='Javascript Math.random() information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_random.asp'>Math.random()<\/a> function.<\/p>\n<p>We hope you enjoy this tutorial as a <a target=_blank title='Canvas HTML element live run tutorial'  href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/fraction_chalkboard.html\">live run<\/a>.<\/p>\n<p>Yes &#8230; you&#8217;ve reached the end &#8230; hope you have a good time practising your mathematics knowledge of fractions (there is advice, if you want to learn &#8230; you can get it when you give an incorrect answer)!<\/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='#d7258' onclick='var dv=document.getElementById(\"d7258\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=canvas\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d7258' 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='#d7591' onclick='var dv=document.getElementById(\"d7591\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=canvas\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d7591' 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='#d7687' onclick='var dv=document.getElementById(\"d7687\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=mathematics\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d7687' 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='#d18936' onclick='var dv=document.getElementById(\"d18936\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=ux\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d18936' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>A few days back we spoke about drag and drop events where we presented The Three P Three Modes Drag and Drop Tutorial and the event discussion then &#8230; Eventwise, you&#8217;ll want to research &#8230; So what events were relevant &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-canvas-fractions-drag-and-drop-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,17,37],"tags":[184,281,364,400,477,576,578,652,752,2238,997,1319,1356],"class_list":["post-18936","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-games","category-gui","category-tutorials","tag-canvas","tag-css","tag-drag-and-drop","tag-event","tag-games-2","tag-html","tag-html5","tag-javascript","tag-mathematics","tag-output","tag-programming","tag-tutorial","tag-ux"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/18936"}],"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=18936"}],"version-history":[{"count":5,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/18936\/revisions"}],"predecessor-version":[{"id":18971,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/18936\/revisions\/18971"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=18936"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=18936"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=18936"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}