{"id":31725,"date":"2017-07-27T03:01:09","date_gmt":"2017-07-26T17:01:09","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=31725"},"modified":"2017-07-27T11:18:07","modified_gmt":"2017-07-27T01:18:07","slug":"skeletal-system-game-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/skeletal-system-game-primer-tutorial\/","title":{"rendered":"Skeletal System Game Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/skeleton_map.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Skeletal System Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/skeleton_map.jpg\" title=\"Skeletal System Game Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Skeletal System Game Primer Tutorial<\/p><\/div>\n<p>We think there are two great &#8220;concepts&#8221; that help us understand the interplay between Javascript DOM and CSS styling when creating client side web applications, those being &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Reveal blog postings at this blog' href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/reveal\">&#8220;reveal&#8221;<\/a><\/li>\n<li><a target=_blank title='Overlay blog postings at this blog' href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay\">&#8220;overlay&#8221;<\/a><\/li>\n<\/ul>\n<p> &#8230; and today we combine these two concepts with another explained by the recent <a title='Body Cavities Game Primer Tutorial' href='#bcgpt'>Body Cavities Game Primer Tutorial<\/a> &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/body-cavities-game-primer-tutorial\/'>\n<p><a title='Piano Playing Web Application Mobile Tutorial' href='#ppwamt'>Piano playing<\/a> and Anatomy &#8230; what do they have in common?  Hopefully not that &#8220;anatomy leaves you feeling flat&#8221; (boom, boom).  Or &#8220;playing the piano is simply <i>organ<\/i>smic&#8221;.  No, for us, it is that we are using the same &#8220;online&#8221; tool, the much referred to (at this blog) <a target=_blank title='mobilefish' href='http:\/\/www.mobilefish.com\/services\/image_map\/image_map.php'>mobilefish<\/a> HTML <a target=_blank title='HTML map tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_map.asp'>map<\/a> tag creation tool.  We like how the <a target=_blank title='HTML map tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_map.asp'>map<\/a> tag links graphics with categorizations or labels for all those visual learners out there.  By now, a lot of computer users can predict clickable images that direct you to our navigable webpages, and many of us too, know when to predict that an HTML <a target=_blank title='HTML map tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_map.asp'>map<\/a> element may be in play to allow for the clicking or touching of regions of an image to direct you to different webpages.  As the <a target=_blank title='HTML map tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_map.asp'>map<\/a> would imply, a common image type is that of a geographical map, and today we act as though the Human Body, and its body cavities are like that.  Our web application &#8220;game&#8221; quizzes the user about which body cavity contains a body part of interest.<\/p>\n<\/blockquote>\n<p> &#8230; working together in today&#8217;s &#8220;Skeletal System Game&#8221; web application you can try for yourself at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/skeleton_map.html\" title='Click picture'>live run<\/a> and\/or download its HTML and Javascript (DOM) and CSS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/skeleton_map.html_GETME\" title='skeleton_map.html'>skeleton_map.html<\/a> if you like.<\/p>\n<p>Why choose the HTML <i>map<\/i> approach again?  Well, at least for us, we find the visual approach to learning parts of the body a natural way to go, though readily admit there&#8217;ll be people out there on your street thinking &#8220;the knee bone&#8217;s connected to the&#8230; thigh bone&#8221; and others whispering &#8220;the shin bone&#8217;s connected to the&#8230; knee bone&#8221; and yet others shouting &#8220;the toe bone&#8217;s connected to the&#8230; foot bone&#8221;.  All that being that, you can play <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/skeleton_map.html\" title='skeleton_map.html'>today&#8217;s game<\/a> and be able to shout, yourself &#8220;the foot phalanges connected to the&#8230; metatarsals&#8221; and see what it&#8217;s like to be misunderstood, for yourself.<\/p>\n<p>Breaking today&#8217;s web application into &#8220;concept&#8221; parts, we might consider the &#8220;overlay&#8221; build up steps &#8230;<\/p>\n<ol>\n<li>thanks to <i>HLTAAP001 Recognise healthy body systems &#8211; Reading 1: Apply knowledge of the basic structure of the healthy human body NSW DET 2007<\/i> inspiration upload the skeleton image to <a target=_blank title='mobilefish' href='http:\/\/www.mobilefish.com\/services\/image_map\/image_map.php'>mobilefish<\/a><\/li>\n<li>do the work creating HTML <i>map<\/i> tag <i>area<\/i> elements in &#8220;polygon&#8221; form<\/li>\n<li>download into <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/skeleton_map.html_GETME\" title='skeleton_map.html'>skeleton_map.html<\/a> as this &#8220;basis for the game&#8221;<\/li>\n<li>add Javascript logic at the document.body <i>onload<\/i> event (timing) to construct HTML div elements with (two of our <font size=1>&#8230; no <i>opacity<\/i> considerations were required<\/font>) our usual &#8220;overlay&#8221; CSS suspects &#8230;\n<ul>\n<li><a target=_blank title='CSS position:absolute information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_class_position.asp'>position:absolute<\/a> property<\/li>\n<li><a target=_blank title='CSS z-index information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_pos_z-index.asp'>z-index<\/a><\/li>\n<\/ul>\n<p>&#8230; that harness those &#8220;polygon&#8221; <i>coords<\/i> (property&#8217;s) minimum and maximum x and y co-ordinates to assist in teaming that &#8220;position:absolute&#8221; above with &#8230;<\/p>\n<ol>\n<li><a target=_blank title='CSS left information from w3schools' href='https:\/\/www.w3schools.com\/cssref\/pr_class_position.asp'>left<\/a><\/li>\n<li><a target=_blank title='CSS top information from w3schools' href='https:\/\/www.w3schools.com\/cssref\/pr_class_position.asp'>top<\/a><\/li>\n<li><a target=_blank title='CSS width information from w3schools' href='https:\/\/www.w3schools.com\/cssref\/pr_class_position.asp'>width<\/a><\/li>\n<li><a target=_blank title='CSS height information from w3schools' href='https:\/\/www.w3schools.com\/cssref\/pr_class_position.asp'>height<\/a><\/li>\n<\/ol>\n<p>&#8230; in conjunction with a blank innerHTML property along with a background (yellow) colour and a thin red border\n<\/li>\n<\/ol>\n<p> &#8230; as the &#8220;presentation mode&#8221; and the &#8220;reveal&#8221; aspects happen as &#8230;<\/p>\n<ul>\n<li>the user starts the interactivity of the game, guessing where on the skeleton you click a label that points at the Skeletal System bone(s) indicated on an HTML select &#8220;dropdown&#8221; element, whose value is controlled, randomly, by the web application itself<\/li>\n<li>if the user clicks correctly, the score is updated and the wording that goes with that clicked label is &#8220;revealed&#8221; via the populating of that corresponding HTML div element&#8217;s innerHTML property<\/li>\n<li>else if the user is wrong, the score is still updated but the &#8220;reveal&#8221; does not happen<\/li>\n<\/ul>\n<hr>\n<p id='bcgpt'>Previous relevant <a target=_blank title='Body Cavities Game Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/body-cavities-game-primer-tutorial\/'>Body Cavities 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\/body_cavities.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Body Cavities Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_cavities.gif\" title=\"Body Cavities Game Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Body Cavities Game Primer Tutorial<\/p><\/div>\n<p><a title='Piano Playing Web Application Mobile Tutorial' href='#ppwamt'>Piano playing<\/a> and Anatomy &#8230; what do they have in common?  Hopefully not that &#8220;anatomy leaves you feeling flat&#8221; (boom, boom).  Or &#8220;playing the piano is simply <i>organ<\/i>smic&#8221;.  No, for us, it is that we are using the same &#8220;online&#8221; tool, the much referred to (at this blog) <a target=_blank title='mobilefish' href='http:\/\/www.mobilefish.com\/services\/image_map\/image_map.php'>mobilefish<\/a> HTML <a target=_blank title='HTML map tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_map.asp'>map<\/a> tag creation tool.  We like how the <a target=_blank title='HTML map tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_map.asp'>map<\/a> tag links graphics with categorizations or labels for all those visual learners out there.  By now, a lot of computer users can predict clickable images that direct you to our navigable webpages, and many of us too, know when to predict that an HTML <a target=_blank title='HTML map tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_map.asp'>map<\/a> element may be in play to allow for the clicking or touching of regions of an image to direct you to different webpages.  As the <a target=_blank title='HTML map tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_map.asp'>map<\/a> would imply, a common image type is that of a geographical map, and today we act as though the Human Body, and its body cavities are like that.  Our web application &#8220;game&#8221; quizzes the user about which body cavity contains a body part of interest.<\/p>\n<p>There is a lot to learn in anatomy, and where organs and other body parts are located become an important part of its study, pretty naturally, as the way it all works is quite remarkable in its design, with body part adjacency often going hand in hand with bodily functionality &#8230; lucky for us.  Makes you wonder about those &#8220;big questions&#8221;, doesn&#8217;t it?<\/p>\n<p>Anyway, we hope you enjoy our &#8220;Body Cavities Game&#8221; powered by &#8230;<\/p>\n<ul>\n<li>the inspiration, and source of the wherewithal to create the underlying <a target=_blank title='HTML map tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_map.asp'>map<\/a>&#8216;s image <img decoding=\"async\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_cavities.jpg\" title=\"Body cavities image ... thanks to Study Guide Individual Support in Australia by TAFE NSW (ISBN: 978-1742365275)\"><\/img> &#8230; thanks to <i>Study Guide<\/i> Individual Support in Australia by TAFE NSW (ISBN: 978-1742365275) &#8230; <\/li>\n<li>the <a target=_blank title='mobilefish' href='http:\/\/www.mobilefish.com\/services\/image_map\/image_map.php'>mobilefish<\/a> HTML <a target=_blank title='HTML map tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_map.asp'>map<\/a> tag creation tool to create the HTML for the <a target=_blank title='mobilefish' href='http:\/\/www.mobilefish.com\/services\/image_map\/image_map.php'>mobilefish<\/a> HTML <a target=_blank title='HTML map tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_map.asp'>map<\/a> element of today&#8217;s\n<li>Javascript global <i>var organinfo[]<\/i> array built up as elements consisting of &#8220;[bodyPart;<a target=_blank title='HTML map tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_map.asp'>map<\/a>ID]&#8221; content<\/li>\n<li>Javascript <a target=_blank title='Javascript event onload information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onload.asp'><i>onload<\/i><\/a> &#8220;kicked off&#8221; <i>Math.floor(Math.random() * organinfo.length)<\/i> method of selecting a random body part of interest that the user links to a click or touch of the <a target=_blank title='HTML map tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_map.asp'>map<\/a> body cavities image<\/li>\n<li>Javascript <a target=_blank title='Javascript event onclick information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onclick.asp'><i>onclick<\/i><\/a> event logic for the HTML <a target=_blank title='HTML area element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_area.asp'>area<\/a> &#8220;polygon&#8221; segments coming out of <a target=_blank title='mobilefish' href='http:\/\/www.mobilefish.com\/services\/image_map\/image_map.php'>mobilefish<\/a> also feature the lack of the <i>href<\/i> property, deliberately &#8230; why? &#8230; read <a target=_blank title='HTML a Tag Navigation Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-a-tag-navigation-primer-tutorial\/'>HTML a Tag Navigation Primer Tutorial<\/a> about &#8220;staying right where you are&#8221; by doing away with the <i>href<\/i> property being defined<\/li>\n<\/ul>\n<p>Try it yourself at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_cavities.html\" title='Click picture'>live run<\/a> link and\/or download the HTML and Javascript source code at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_cavities.html_GETME\" title=\"body_cavities.html\">body_cavities.html<\/a> link.<\/p>\n<p><b><i>Stop Press<\/i><\/b><\/p>\n<p>Here&#8217;s some inline CSS we&#8217;ve introduced to <a target=_blank title='CSS transform and rotaton information from w3schools' href='http:\/\/www.w3schools.com\/css\/css3_2dtransforms.asp'>straighten up our image<\/a>, which thankfully does not break any <a target=_blank title='HTML map tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_map.asp'>map<\/a> tag functionality.  At first we thought we&#8217;d try to merge the <a target=_blank title='Brighten up with CSS filter' href='https:\/\/stackoverflow.com\/questions\/11535392\/how-to-decrease-image-brightness-in-css'>brightened up<\/a> image by using the <a target=_blank title='CSS background information from w3schools' href='https:\/\/www.w3schools.com\/cssref\/css3_pr_background.asp'>background-clip and background-size and background url<\/a> but then found that a <a target=_blank title='CSS linear gradient information from w3schools' href='https:\/\/www.w3schools.com\/cssref\/func_linear-gradient.asp'>linear gradient<\/a> would be less obtrusive, the colours of which we found out via Mac OS X&#8217;s Digital Colour Meter utilities desktop application we talked about at <a target=_blank title='click picture' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/digital-colour-meter-on-mac-laptop-tutorial'>Digital Colour Meter on Mac Laptop Tutorial<\/a> to end up with some inline CSS &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\n#lhtd {<br \/>\n    filter: brightness(148%);<br \/>\n    -webkit-filter: brightness(148%);<br \/>\n    -moz-filter: brightness(148%);<br \/>\n    -o-filter: brightness(148%);<br \/>\n    -ms-filter: brightness(148%);<br \/>\n    border: 0px solid #8096B1;<br \/>\n    -moz-transform:    rotate(350deg);<br \/>\n    -o-transform:      rotate(350deg);<br \/>\n    -webkit-transform: rotate(350deg);<br \/>\n    -ms-transform:     rotate(350deg);<br \/>\n    transform:         rotate(350deg);<br \/>\n}<br \/>\n<b><\/b><br \/>\ntable {<br \/>\n    background: url('body_cavities.jpg');<br \/>\n    background-size:60px 60px;<br \/>\n    background-repeat: repeat;<br \/>\n    background-color: #C1E0FA;<br \/>\n    background: -webkit-gradient(#CAE6F3, #C1E0FA);<br \/>\n    background: -o-linear-gradient(#CAE6F3, #C1E0FA);<br \/>\n    background: -moz-linear-gradient(#CAE6F3, #C1E0FA);<br \/>\n    background: linear-gradient(#CAE6F3, #C1E0FA);<br \/>\n}<br \/>\n<b><\/b><br \/>\n#rhtd {<br \/>\n    background-color: lightblue;<br \/>\n}<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p>Try it, again, yourself at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_cavities.html\" title='Click picture'>live run<\/a> link and\/or download the HTML and Javascript source code at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_cavities.html-GETME\" title=\"body_cavities.html\">body_cavities.html<\/a> link, changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_cavities.html-GETME\" title=\"body_cavities.html\">this way<\/a>.<\/p>\n<hr>\n<p id='ppwamt'>Previous relevant <a target=_blank title='Piano Playing Web Application Mobile Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/piano-playing-web-application-mobile-tutorial\/'>Piano Playing Web Application Mobile 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\/piano.htm?tonic=%20\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Xcode SpriteKit Game Mobile Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/piano_playing.jpg\" title=\"Xcode SpriteKit Game Mobile Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Piano Playing Web Application Mobile Tutorial<\/p><\/div>\n<p>Our Piano Playing web application has moved on to a &#8220;second draft&#8221;.   Nothing has changed about it using those audio mp3 files from the other day when we presented <a target=_blank title='Xcode SpriteKit Game Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/xcode-spritekit-game-primer-tutorial\/'>Xcode SpriteKit Game Primer Tutorial<\/a> to &#8220;reframe&#8221; their use for creating a client based web application featuring &#8230;<\/p>\n<ol>\n<li>simulated piano keys that can be pressed by the user &#8230; and\/or &#8230;<\/li>\n<li>the user can play some scales, arpeggios or chords with a nominated tonic note and in major or minor keys<\/li>\n<li>show a visual &#8220;cue&#8221; just below the piano keys to show the piano key note last played &#8230; we did start out on an <a target=_blank href='https:\/\/www.w3schools.com\/graphics\/svg_intro.asp' title='SVG information from w3schools'>SVG<\/a> type of solution based on the code of <a target=_blank title='Legend for and from HTML Map Element Web Server Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/legend-for-and-from-html-map-element-web-server-tutorial\/'>Legend for and from HTML Map Element Web Server Tutorial<\/a> where &#8220;overlays&#8221; appear in an HTML table &#8220;legend&#8221;, but trying &#8220;overlaying&#8221; in this way caused problems, so today we show our &#8220;visual&#8221; helpers overlaying the border down the bottom of the piano keys comprising &#8230;\n<ul>\n<li>HTML <a target=_blank href='https:\/\/www.w3schools.com\/tags\/tag_div.asp' title='HTML div information from w3schools'>div<\/a> elements &#8230; involving &#8230;<\/li>\n<li>CSS <a target=_blank href='https:\/\/www.w3schools.com\/cssref\/pr_border.asp' title='CSS border information from w3schools'>border<\/a>: 1px solid red; \/\/ initially, and also dynamically controlled &#8230; and with the usual &#8220;overlay&#8221; suspects &#8230;<\/li>\n<li>CSS <a target=_blank href='https:\/\/www.w3schools.com\/cssref\/pr_class_position.asp' title='CSS position:absolute information from w3schools'>position<\/a>:absolute; left: 0; top: 0;<\/li>\n<li>CSS <a target=_blank href='https:\/\/www.w3schools.com\/cssref\/pr_pos_z-index.asp' title='CSS z-index information from w3schools'>z-index<\/a>: 9;<\/li>\n<li>CSS <a target=_blank href='https:\/\/www.w3schools.com\/cssref\/css3_pr_opacity.asp' title='CSS opacity information from w3schools'>opacity<\/a>: 1.0; \/\/ initially, and also dynamically controlled<\/li>\n<\/li>\n<li>iOS mobile users (only) are presented with new HTML <a target=_blank title='HTML audio element information from w3schools' href='https:\/\/www.w3schools.com\/html\/html5_audio.asp'>audio<\/a> elements awaiting user &#8220;click\/touch&#8221; intervention, to make the audio happen, as per Apple requirements on audio media, here<\/li>\n<\/ol>\n<p>So with this second draft we associate audio &#8220;cues&#8221; with &#8220;visual&#8221; ones, and include functionality to cater for the mobile device habit of disallowing automated audio plays, by fitting in with this restriction, but use HTML audio elements, showing their controls, for users to push the Play buttons necessary to satisfy iOS media rules.  For today, as with WordPress 4.1.1&#8217;s <a target=_blank title='Piano Playing Web Application Mobile Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/piano-playing-web-application-mobile-tutorial\/'>Piano Playing Web Application Mobile Tutorial<\/a>, try the piano playing web application (with the HTML and Javascript <a target=_blank title='piano.htm' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/piano.html-GETME'>piano.htm<\/a>), changed in <a target=_blank title='piano.htm' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/piano.html-GETME'>this way<\/a> with respect to that previous &#8220;first draft&#8221;, at this <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/piano.htm'>live run<\/a> link (where, again, the C major scale, one octave is played first up), or, live also, below, in an HTML <a target=_blank title='HTML iframe element information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_iframe.asp'>iframe<\/a> &#8230;<\/p>\n<p><iframe style='width:100%;height:800px;' title='Click picture' src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/piano.htm?tonic=%20'><\/iframe><\/p>\n<p>We hope you like it.  Even with the iOS mobile version, you may find a secondary iOS user with the web application can help out the primary piano practicer, playing along with the scales played on a real piano.<\/p>\n<hr>\n<p id='ppwapt'>Previous relevant <a target=_blank title='Piano Playing Web Application Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/piano-playing-web-application-primer-tutorial\/'>Piano Playing Web Application 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\/piano.html?tonic=%20\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Xcode SpriteKit Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/pianoplaying.jpg\" title=\"Xcode SpriteKit Game Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Piano Playing Web Application Primer Tutorial<\/p><\/div>\n<p>We hope you enjoy our new &#8220;first draft&#8221; of a Piano Playing web application.  We&#8217;re using those audio mp3 files from the other day when we presented <a target=_blank title='Xcode SpriteKit Game Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/xcode-spritekit-game-primer-tutorial\/'>Xcode SpriteKit Game Primer Tutorial<\/a> to &#8220;reframe&#8221; their use for creating a client based web application comprising, essentially &#8230;<\/p>\n<ol>\n<li>audio files, thanks to <a target=_blank title='Useful link, thanks' href='http:\/\/www.caseyrule.com\/projects\/midi\/soundfonts\/FluidR3_GM\/agogo-mp3\/'>useful link<\/a><\/li>\n<li>image of piano, thanks to <a target=_blank title='openclipart' href='http:\/\/openclipart.org'>openclipart<\/a><\/li>\n<li>map tag creation, thanks to <a target=_blank title='mobilefish' href='http:\/\/www.mobilefish.com\/services\/image_map\/image_map.php'>mobilefish<\/a><\/li>\n<li>our Javascript logic to play scales or arpeggios or chords in major and minor keys, for the user&#8217;s listening &#8220;indulgence&#8221;, or perhaps to accompany a user learning the piano<\/li>\n<\/ol>\n<p>This first draft needs more work regarding tying audio &#8220;cues&#8221; with &#8220;visual&#8221; ones, and getting around the mobile device habit of disallowing automated audio plays.  That will be for future postings.  But for today, as with WordPress 4.1.1&#8217;s <a target=_blank title='Piano Playing Web Application Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/piano-playing-web-application-primer-tutorial\/'>Piano Playing Web Application Primer Tutorial<\/a>, try the piano playing web application (with the HTML and Javascript <a target=_blank title='piano.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/piano.html_GETME'>piano.html<\/a>) at this <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/piano.html'>live run<\/a> link (where the C major scale, one octave is played first up), or, live also, below, in an HTML <a target=_blank title='HTML iframe element information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_iframe.asp'>iframe<\/a>, curiously the technique by which we play the audio files (allowing for a bank of 9 HTML iframe elements be able to play up to 9 notes at the same time, hopefully enough for most future functionality thoughts &#8230; time will tell) &#8230;<\/p>\n<p><iframe style='width:100%;height:800px;' title='Click picture' src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/piano.html?tonic=%20'><\/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='#d29635' onclick='var dv=document.getElementById(\"d29635\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/music\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d29635' 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='#d29672' onclick='var dv=document.getElementById(\"d29672\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/dom\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d29672' 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='#d31542' onclick='var dv=document.getElementById(\"d31542\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/map\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d31542' 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='#d31725' onclick='var dv=document.getElementById(\"d31725\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/reveal\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d31725' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We think there are two great &#8220;concepts&#8221; that help us understand the interplay between Javascript DOM and CSS styling when creating client side web applications, those being &#8230; &#8220;reveal&#8221; &#8220;overlay&#8221; &#8230; and today we combine these two concepts with another &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/skeletal-system-game-primer-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":[75,99,281,342,354,576,652,745,894,2278,962,997,1063,2277,1319],"class_list":["post-31725","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-anatomy","tag-area","tag-css","tag-div","tag-dom","tag-html","tag-javascript","tag-map","tag-overlay","tag-physiology","tag-polygon","tag-programming","tag-reveal","tag-skeleton","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/31725"}],"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=31725"}],"version-history":[{"count":7,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/31725\/revisions"}],"predecessor-version":[{"id":31736,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/31725\/revisions\/31736"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=31725"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=31725"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=31725"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}