{"id":22140,"date":"2016-05-23T03:01:18","date_gmt":"2016-05-22T17:01:18","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=22140"},"modified":"2016-05-26T07:32:55","modified_gmt":"2016-05-25T21:32:55","slug":"personalized-story-game-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/personalized-story-game-tutorial\/","title":{"rendered":"Personalized Story Game Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/personalized_story.html' title='Personalized Story Game Tutorial'><img decoding=\"async\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/personalized_story.jpg\"  \/><\/a><p class=\"wp-caption-text\">Personalized Story Game Tutorial<\/p><\/div>\n<p>There are a lot of oral storytelling traditions in the world.  Before electronic devices storytelling would take up a much greater proportion of a lot of people&#8217;s spare time, than, we daresay, it does now.  But if just straight &#8220;storytelling&#8221; in that oral tradition is happening less, aren&#8217;t there also ways to do it in the digital world?  Well, (again we daresay) social media and blogs are probably full of it, just more with the written word than the &#8220;having to be there&#8221; oral tradition, and the &#8220;having to be there&#8221; has extended to people watching audio visual performances on <a target=_blank title='YouTube' href='http:\/\/youtube.com'>YouTube<\/a> and the more professional &#8220;storytelling&#8221; movie and television studio production means via those movie and television and streaming company website facilities.<\/p>\n<p>Here, today, though, with our HTML and Javascript programming source code you could call <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/personalized_story.html_GETME' title='Personalized Story Game Tutorial'>personalized_story.html<\/a>, and its <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/personalized_story.html' title='Personalized Story Game Tutorial'>live run<\/a>, we try to take a simple story beginning, and allow the playing around with a good starting point, as a lot of us did <i>a lot<\/i> (perhaps endlessly) at school.  Wonder how many of these school experts at this craft ended up being the world&#8217;s greatest writers?<\/p>\n<p>Today&#8217;s story basis is a &#8220;fable&#8221; reworked once already, that we saw at <a target=_blank title='Thanks for the story start' href='http:\/\/www.listener.co.nz\/culture\/books\/little-red-riding-hood-does-over-the-big-bad-wolf\/'>http:\/\/www.listener.co.nz\/culture\/books\/little-red-riding-hood-does-over-the-big-bad-wolf\/<\/a> &#8230; thanks.  We then proceeded to cut it up into &#8220;adjustable bits&#8221; (to be toggleable between HTML <a target=_blank title='HTML a tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_a.asp'><i>a<\/i><\/a> tags and HTML <a target=_blank title='HTML select tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_select.asp'><i>select<\/i><\/a> &#8220;dropdown&#8221; elements nested within HTML <i>a<\/i> tags) between &#8220;non-adjustable bits&#8221;.  And for two hours it stayed like this, and then we decided that the &#8220;non-adjustable bits&#8221; should be allowed to be &#8220;adjustable&#8221; just the once at the start via &#8220;in the know&#8221; web browser address bar URLs with some complexity.  To ease the complexity you, the user can use the form below if you like, and if you change things, you&#8217;ll be choosing lots of &#8220;You&#8217;ll be prompted &#8230;&#8221; dropdown options as you execute the &#8220;Personalized Story&#8221; game, no doubt.<\/p>\n<div id='fstory'>\n<form target='_blank' method='GET' action='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/personalized_story.html'>\n<input type='hidden' name='space' value=' '><\/input><input type='text' name='ib0' value=''><\/input><span id='spa1'>Once upon a time<\/span><input type='text' name='ib1' value=' there was a big bad '><\/input><span id='spa2'>wolf<\/span><input type='text' name='ib2' value=' that got done over by '><\/input><span id='spa3'>Little Red Riding Hood<\/span><input type='text' name='ib3' value='. That was '><\/input><span id='spa4'>Bonk\u2019s headline<\/span><input type='text' name='ib4' value='. I am writing this '><\/input><span id='spa5'>editorial<\/span><input type='text' name='ib5' value=' from the '><\/input><span id='spa6'>hospital waiting room<\/span><input type='text' name='ib6' value=' where I ended up due to '><\/input><span id='spa7'>no virtue of my own<\/span><input type='text' name='ib7' value=\". I\u2019m not one to \"><\/input><span id='spa8'>assign blame where it\u2019s due<\/span><input type='text' name='ib8' value=', but this time I can '><\/input><span id='spa9'>squarely point my middle digit<\/span><input type='text' name='ib9' value=' at '><\/input><span id='spa10'>my mates Bonk and Dare<\/span><input type='text' name='ib10' value='.'><\/input><\/p>\n<p><input type='submit' value='Go to Your Tailored Personalized Story Game'><\/input><br \/>\n<\/form>\n<\/div>\n<p>The ultimate idea with this &#8220;Personalized Story&#8221; is that you may want to share your writing with sympathetic or critical colleagues, and so, if you click the &#8220;Share Your Story&#8221; button, you can do this.<\/p>\n<p>Simple programmatic ideas for what is so natural for so many humans.<\/p>\n<p id=htable>So will leave you with a small pictorial story &#8230; hover\/click the Show links to show &#8230;<\/p>\n<p><script type='text\/javascript'>function fixnextcell(ow,whi) {\n  if (whi == 1) {\n    document.getElementById('he_s_tory').innerHTML='<a id=tda2 style=cursor:hand; onmouseover=fixnextcell(this,2); onclick=fixnextcell(this,2);>Show<\/a>'; \n    ow.innerHTML=\"Hi <img onclick=window.open(this.src) style='height:60px;' src='http:\/\/www.peterfuda.com\/wp-content\/uploads\/2014\/11\/Story-Image-e1415228963753.jpg' title='Story'><\/img>\";  \n  } else if (whi == 2) {\n    document.getElementById('his_tory').innerHTML='<a id=tda3 style=cursor:hand; onmouseover=fixnextcell(this,3); onclick=fixnextcell(this,3);>Show<\/a>';  \n    ow.innerHTML=\"He's <img onclick=window.open(this.src) style='height:60px;' src='http:\/\/static.independent.co.uk\/s3fs-public\/thumbnails\/image\/2014\/03\/09\/17\/cameron%20thumbs%20upv2.jpg' title='David Cameron'><\/img>\";  \n  } else if (whi == 3) {\n    ow.innerHTML=\"<img onclick=window.open(this.src) style='height:60px;' src='http:\/\/static.independent.co.uk\/s3fs-public\/thumbnails\/image\/2014\/03\/09\/17\/cameron%20thumbs%20upv2.jpg' title='David Cameron'><\/img> His Tory? <img onclick=window.open(this.src) style='height:60px;' src='https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/2\/25\/Boris_Johnson_July_2015.jpg\/220px-Boris_Johnson_July_2015.jpg'><\/img><br \/> ... history.\";  \n  }\n }<\/script><\/p>\n<table>\n<tr>\n<td id='hi_story'><a id='tda1' style=cursor:hand; onmouseover=fixnextcell(this,1); onclick=fixnextcell(this,1);>Show<\/a><\/td>\n<td id='he_s_tory'><\/td>\n<td id='his_tory'><\/td>\n<\/tr>\n<\/table>\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='#d22140' onclick='var dv=document.getElementById(\"d22140\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/game\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d22140' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>There are a lot of oral storytelling traditions in the world. Before electronic devices storytelling would take up a much greater proportion of a lot of people&#8217;s spare time, than, we daresay, it does now. But if just straight &#8220;storytelling&#8221; &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/personalized-story-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":[476,477,576,652,997,1203,1319],"class_list":["post-22140","post","type-post","status-publish","format-standard","hentry","category-elearning","category-games","category-tutorials","tag-game","tag-games-2","tag-html","tag-javascript","tag-programming","tag-story","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/22140"}],"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=22140"}],"version-history":[{"count":26,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/22140\/revisions"}],"predecessor-version":[{"id":22255,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/22140\/revisions\/22255"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=22140"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=22140"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=22140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}