{"id":60263,"date":"2023-07-29T03:01:44","date_gmt":"2023-07-28T17:01:44","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=60263"},"modified":"2023-08-19T19:08:15","modified_gmt":"2023-08-19T09:08:15","slug":"enneagram-type-game-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/enneagram-type-game-tutorial\/","title":{"rendered":"Enneagram Type Game Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/enneagram_type_game.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Australian Street Type Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/enneagram_type_game.jpg\" title=\"Australian Street Type Game Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Enneagram Type Game Tutorial<\/p><\/div>\n<p>A lot of us wonder what goes towards making up our personalities.  We remember doing a <a target=Myers-Briggs href='https:\/\/www.google.com\/search?q=myers-briggs&#038;rlz=1C5CHFA_enAU973AU973&#038;oq=myers-briggs&#038;gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIJCAEQABhDGIoFMgcIAhAAGIAEMgcIAxAAGIAEMgcIBBAAGIAEMgcIBRAAGIAEMg0IBhAuGMcBGNEDGIAEMgcIBxAAGIAEMgcICBAAGIAEMgcICRAAGIAE0gEIMzYzN2owajSoAgCwAgA&#038;sourceid=chrome&#038;ie=UTF-8'>Myers-Briggs<\/a> test for some job as part of the vetting process.  We thought we&#8217;d write another experimental drag and drop game, like yesterday&#8217;s  <a title='Australian Street Type Game Tutorial' href='#astgt'>Australian Street Type Game Tutorial<\/a>, regarding &#8230;<\/p>\n<blockquote><p>\n<a target=_blank href=https:\/\/www.enneagraminstitute.com\/type-descriptions>Enneagram Types<\/a>\n<\/p><\/blockquote>\n<p> &#8230; of human personalities, and we found a webpage <a target=_blank href=https:\/\/www.psychologyjunkie.com\/enneagram-famous-people\/>linking these categorizations to Hollywood Movie Stars<\/a> for you to get the gist of the ideas.  We also thank <a target=_blank href=https:\/\/wikipedia.org>Wikipedia<\/a> as our source for Movie Star images.<\/p>\n<p>It being a topic &#8230;<\/p>\n<ol>\n<li>beyond our ken<\/li>\n<li>outside our usual subject matter<\/li>\n<\/ol>\n<p> &#8230; you may be wondering how we stumbled upon the idea?  We let <a target=_blank title=Google href='https:\/\/google.com'>Google<\/a> autocomplete our &#8230;<\/p>\n<p><code><br \/>\n<a target=_blank title=? href='https:\/\/www.google.com\/search?q=nine+types+of+&#038;rlz=1C5CHFA_enAU973AU973&#038;sxsrf=AB5stBgKOZ3R9OfKPslQyEVW_q0hC8SvzA%3A1690497285559&#038;ei=BfHCZJfpIcahseMPu5al8AE&#038;oq=nine+types+of+&#038;gs_lp=Egxnd3Mtd2l6LXNlcnAiDm5pbmUgdHlwZXMgb2YgKgIIATIFEAAYgAQyBRAAGIAEMgUQABiABDIFEAAYgAQyBRAAGIAEMgUQLhiABDIFEAAYgAQyBRAAGIAEMgUQABiABDIFEAAYgARImp4BUABY2DlwAHgBkAEAmAHYAaABoBSqAQYwLjEyLjK4AQHIAQD4AQHCAgcQIxiKBRgnwgIEECMYJ8ICCxAuGIoFGNQCGJECwgIIEAAYigUYkQLCAgsQLhiABBixAxiDAcICCxAAGIAEGLEDGIMBwgIREC4YgAQYsQMYgwEYxwEY0QPCAggQLhiKBRiRAsICExAuGIoFGLEDGIMBGMcBGNEDGEPCAgcQABiKBRhDwgIHEC4YigUYQ8ICDRAAGIoFGLEDGIMBGEPCAgoQABiKBRixAxhDwgIIEAAYgAQYsQPCAgsQLhiKBRixAxiRAsICCBAuGLEDGIAEwgIOEC4YgAQYsQMYgwEY1ALCAhcQLhixAxiABBiXBRjcBBjeBBjgBNgBAeIDBBgAIEGIBgG6BgYIARABGBQ&#038;sclient=gws-wiz-serp'>nine types of <\/a><br \/>\n<\/code><\/p>\n<p> &#8230; search textbox typing, fully expecting &#8220;Carol&#8221;<sub title='Well, you had to be there ...'>?<\/sub> to be at the top of the list when we saw &#8230;<\/p>\n<p><code><br \/>\n<a target=_blank title=? href='https:\/\/www.google.com\/search?q=nine+types+of+enneagram&#038;rlz=1C5CHFA_enAU973AU973&#038;sxsrf=AB5stBgcETOXMtG8UFv6DDlokZCzMcVm-A%3A1690514138499&#038;ei=2jLDZJyAHsXQ2roP6b2vuA0&#038;oq=nine+types+of+&#038;gs_lp=Egxnd3Mtd2l6LXNlcnAiDm5pbmUgdHlwZXMgb2YgKgIIATIHECMYigUYJzIHECMYigUYJzIHECMYigUYJzIHEAAYigUYQzIFEAAYgAQyBRAAGIAEMgUQABiABDIFEAAYgAQyBRAuGIAEMgUQABiABEjQrgZQuQZYuQZwAXgBkAEAmAHZAaAB2QGqAQMyLTG4AQHIAQD4AQHCAgoQABhHGNYEGLADwgIUEC4YgAQYlwUY3AQY3gQY4ATYAQHiAwQYACBBiAYBkAYIugYGCAEQARgU&#038;sclient=gws-wiz-serp'>nine types of enneagram<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; to flesh out a family of &#8220;game interest&#8221;, we hope?!<\/p>\n<p>Our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/enneagram_type_game.php-GETME\">first draft<\/a> PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/enneagram_type_game.php\">game<\/a> is also playable below &#8230;<\/p>\n<p><iframe style=\"width:100%;height:1200px;\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/enneagram_type_game.php\"><\/iframe><\/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\/enneagram-type-game-tutorial\/'>Enneagram Type Game Tutorial<\/a>.<\/p-->\n<hr>\n<p id='astgt'>Previous relevant <a target=_blank title='Australian Street Type Game Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/australian-street-type-game-tutorial\/'>Australian Street Type Game 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\/street_type_game.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Australian Street Type Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/street_type_game.jpg\" title=\"Australian Street Type Game Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Australian Street Type Game Tutorial<\/p><\/div>\n<p>The experimental drag and drop theme continues on today, after <a title='Experimental Drag and Drop Game Tutorial' href='#eddgt'>Experimental Drag and Drop Game Tutorial<\/a>&#8216;s debut game application, with a <a target=_blank href=https:\/\/en.wikipedia.org\/wiki\/Street_suffix>Wikipedia<\/a> inspired &#8220;Australian Street Type&#8221; game today.<\/p>\n<p>Huh?!  Well, you know those street names that baffle?  Or are we easily baffleable?!  Anyway, you had to be there.  And if you ever feel you&#8217;re alone with an interest, just look it up in <a target=_blank href=https:\/\/en.wikipedia.org>Wikipedia<\/a> or <a target=_blank href=https:\/\/google.com>Google<\/a> and you&#8217;re almost sure to find out &#8230;<\/p>\n<blockquote><p>\nyou are not alone\n<\/p><\/blockquote>\n<p>Yes, our Wikipedia page mentioned Australian Street Type Designations with their lawyerly Australian Street Type Descriptions.  Who could ask for more?  <a target=_blank title=? href='https:\/\/www.youtube.com\/watch?v=kTcRRaXV-fg'>Well?!<\/a><\/p>\n<p>To make this happen we wrote some PHP, which leans on <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html---GETME\">a changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html---GETME\">experimental_drag_and_drop.html<\/a> HTML and Javascript and CSS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.htm\" title=\"Click picture\">game web application<\/a> basis, or template, to mould and bend towards our purpose <font size=1>&#8230; nga ha ha!<\/font><\/p>\n<p>Our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/street_type_game.php_GETME\">first draft<\/a> PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/street_type_game.php\">game<\/a> is also playable below &#8230;<\/p>\n<p><iframe style=\"width:100%;height:800px;\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/street_type_game.php\"><\/iframe><\/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\/new-experimental-drag-and-drop-game-tutorial\/'>New Experimental Drag and Drop Game Tutorial<\/a>.<\/p-->\n<hr>\n<p id='eddgt'>Previous relevant <a target=_blank title='Experimental Drag and Drop Game Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/experimental-drag-and-drop-game-tutorial\/'>Experimental Drag and Drop Game 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\/experimental_drag_and_drop.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Experimental Drag and Drop Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop_game.jpg\" title=\"Experimental Drag and Drop Game Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Experimental Drag and Drop Game Tutorial<\/p><\/div>\n<p>It can be interesting turning a &#8220;concept&#8221; (or even a &#8220;proof of concept&#8221; web application) into an, on the side, &#8220;game&#8221; web application, and that way, learn what&#8217;s possible via user action.  This is how we felt about yesterday&#8217;s <a title='Experimental Drag and Drop Primer Tutorial' href='#eddpt'>Experimental Drag and Drop Primer Tutorial<\/a> and that teamed with the wonder about how we could add some useful complexity to our &#8220;Experimental Drag and Drop&#8221; web application&#8217;s &#8230;<\/p>\n<blockquote><p>\nDrop Zone\n<\/p><\/blockquote>\n<p>Can &#8220;inheritance&#8221; be harnessed to make it work for some complexity of nested HTML elements inside that &#8220;Drop Zone&#8221; element when the document.body&#8217;s onload event happens?  We wondered whether a Brady Bunch style 3&#215;3 table could be the go?   And whether the nine cells could have a &#8220;score&#8221; associated with them, and that set of scores be changing over time to make the game more challenging and interesting?  Well &#8230;<\/p>\n<blockquote><p>\nYes\n<\/p><\/blockquote>\n<p> &#8230; is the answer <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html--GETME\">regarding making a game out of a proof of concept<\/a> with our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html--GETME\">experimental_drag_and_drop.html<\/a> HTML and Javascript and CSS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.htm\" title=\"Click picture\">game web application<\/a> (also shown below) using these techniques, about which we think some of you readers will be interested?!<\/p>\n<p><iframe style=width:100%;height:600px; src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.htm'><\/iframe><\/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\/experimental-drag-and-drop-game-tutorial\/'>Experimental Drag and Drop Game Tutorial<\/a>.<\/p-->\n<hr>\n<p id='eddpt'>Previous relevant <a target=_blank title='Experimental Drag and Drop Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/experimental-drag-and-drop-primer-tutorial\/'>Experimental Drag and Drop 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\/experimental_drag_and_drop.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Experimental Drag and Drop Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.jpg\" title=\"Experimental Drag and Drop Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Experimental Drag and Drop Primer Tutorial<\/p><\/div>\n<p>We&#8217;ve added the word <i>experimental<\/i> into today&#8217;s blog posting title, mainly because our <a target=_blank title='DataTransfer object information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/DataTransfer'>first of two inspirational webpage sources<\/a> (last modified on 23\/02\/2023) regarding <font size=1>somewhat<\/font> alternative <a target=_blank title='Drag and Drop information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Drag_and_drop'>&#8220;Drag and Drop&#8221;<\/a> functionalities told us, regarding the <i>DataTransfer<\/i> object informational &#8220;DataTransfer&#8221; webpage &#8230;<\/p>\n<blockquote cite='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/DataTransfer'><p>\nExperimental: This is an experimental technology<br \/>\nCheck the Browser compatibility table carefully before using this in production.\n<\/p><\/blockquote>\n<p> &#8230; but our testing of the methodologies on various platforms hasn&#8217;t totally failed yet on any of the several desktop and mobile platform scenarios we&#8217;ve tried.  On mobile, we just held on for a sustained touch (down) to make it possible.  So maybe the industry has caught up with the ideas?  We&#8217;re hoping so, because &#8220;drag and drop&#8221; is a kind of natural thing online users think of to do, and people associate it with &#8220;getting things done&#8221; we reckon.<\/p>\n<p>Anyway, we relied on the great source code of the second of two inspirational webpages <a target=_blank title='DataTransfer: setData() method' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/DataTransfer\/setData'>DataTransfer: setData() method<\/a>, thanks &#8230;<\/p>\n<blockquote cite='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/DataTransfer\/setData'><p>\nThe DataTransfer.setData() method sets the drag operation&#8217;s drag data to the specified data and type. If data for the given type does not exist, it is added at the end of the drag data store, such that the last item in the types list will be the new type. If data for the given type already exists, the existing data is replaced in the same position. That is, the order of the types list is not changed when replacing data of the same type.\n<\/p><\/blockquote>\n<p> &#8230; to <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html-GETME\">get us going<\/a> with our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html-GETME\">&#8220;proof of concept&#8221;<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html\" title=\"Click picture\">web application<\/a> (also shown below) using these techniques, about which we think some of you readers will be interested?!<\/p>\n<p><iframe style=width:100%;height:500px; src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html'><\/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='#d60044' onclick='var dv=document.getElementById(\"d60044\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/drag-and-drop\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60044' 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='#d60054' onclick='var dv=document.getElementById(\"d60054\"); 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='d60054' 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='#d60254' onclick='var dv=document.getElementById(\"d60254\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/wikipedia\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60254' 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='#d60263' onclick='var dv=document.getElementById(\"d60263\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/table\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60263' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>A lot of us wonder what goes towards making up our personalities. We remember doing a Myers-Briggs test for some job as part of the vetting process. We thought we&#8217;d write another experimental drag and drop game, like yesterday&#8217;s Australian &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/enneagram-type-game-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,15,37],"tags":[2304,193,1580,2237,364,4385,4414,4424,4425,429,476,477,513,4421,576,4419,4420,4416,2599,4422,4417,4418,932,997,4415,4413,1238,4423,1319,1431],"class_list":["post-60263","post","type-post","status-publish","format-standard","hentry","category-elearning","category-games","category-tutorials","tag-categorization","tag-category","tag-cell","tag-drag","tag-drag-and-drop","tag-drop","tag-drop-zone","tag-eneagram","tag-enneagram-type","tag-file_get_contents","tag-game","tag-games-2","tag-google","tag-hollywood","tag-html","tag-human","tag-movie-star","tag-myers-briggs","tag-people","tag-person","tag-personality","tag-personality-test","tag-php","tag-programming","tag-psychology","tag-street-type","tag-table","tag-traits","tag-tutorial","tag-wikipedia"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/60263"}],"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=60263"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/60263\/revisions"}],"predecessor-version":[{"id":60523,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/60263\/revisions\/60523"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=60263"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=60263"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=60263"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}