{"id":39688,"date":"2018-07-25T03:01:01","date_gmt":"2018-07-24T17:01:01","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=39688"},"modified":"2018-07-25T17:53:13","modified_gmt":"2018-07-25T07:53:13","slug":"who-am-i-game-linked-iframe-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/who-am-i-game-linked-iframe-tutorial\/","title":{"rendered":"Who Am I Game Linked Iframe Tutorial"},"content":{"rendered":"
\"Who<\/a>

Who Am I Game Linked Iframe Tutorial<\/p><\/div>\n

Today’s work adds functionality onto yesterday’s Who Am I Game Primer Tutorial<\/a>, allowing for this game to involve two players. Two players using the one computer or device? We do this today by making use of the HTML (textbox) input element type=password<\/a>, that when used, given a non-snooping second player, allows for a second player to type in a name of a person for the other player to try and guess the name of, so long as that person has two words in their name and appears in a reasonably standard way on Wikipedia<\/a> … thanks again. Obviously, no programmer can think up names of interest nearly as well as you users out there, we figure, and this is one motivation for the changes, though if you read below, there are other ideas to take home from today’s work.<\/p>\n

In our “nesting” frame of mind lately, a technique used to make this happen is like a “linked list” of HTML iframe children “slapped” on top of their parent in an overlay<\/a> methodology making the parent totally transparent (ie. opacity=0) just before “slapping over” the child iframe with an increased z-index property and styled also with position:absolute;top:0px;left:0px;width:100%;height:100vh; and the score passed along in a URL, importantly, hidden from a non-snoopy competitor as this URL does not reach the address bar of the browser. Just because the parent effectively becomes invisible does not stop it being accessible to fill out that, best hidden, final clue …<\/p>\n


\nMy name is Xavier Xenon.
\n<\/code><\/p>\n

… or some such. In the design of the game, this final clue is a necessary part of the data structure that makes the game’s webflow work.<\/p>\n

And what of looking up Wikipedia for information about player nominated people? The technique used here is jQuery Ajax<\/a>, enabling the use of PHP code called but not part of any HTML iframe “child” arrangements.<\/p>\n

Get a friend and feel free to try who_am_i.htm<\/a>‘s live run<\/a>‘s game of “Who Am I?”. We developed it from yesterday’s work in this way<\/a>.<\/p>\n

\n

Previous relevant Who Am I Game Primer Tutorial<\/a> is shown below.<\/p>\n

\"Who<\/a>

Who Am I Game Primer Tutorial<\/p><\/div>\n

Today’s Who Am I Game makes use of the “linked list” feel, and event propogation features of yesterday’s HTML a Link innerHTML Extender and Event Propogation Primer Tutorial<\/a> with the way in which it scores points for the game.<\/p>\n

The aim of the game is to guess who we are talking about with the game clues, the fewer the number of clues you need to solve the person’s name, the more you score.<\/p>\n

Feel free to try who_am_i.html<\/a>‘s live run<\/a>‘s game of “Who Am I?”. We developed it from yesterday’s work in this way<\/a>.<\/p>\n

There you will note our use of a multi-dimensional array of clues (an array of clues for each person of interest, within that multi-dimensional array we call “clues”), and see that those arrays within an array don’t all have to be the same length, reflecting the fact that we don’t have the same number of clues for our people we are asking you to guess the name of.<\/p>\n

\n

Previous relevant HTML a Link innerHTML Extender and Event Propogation Primer Tutorial<\/a> is shown below.<\/p>\n

\"HTML<\/a>

HTML a Link innerHTML Extender and Event Propogation Primer Tutorial<\/p><\/div>\n

Guess the recent PDF Attachments Add Page Tutorial<\/a> got me in the mood for “nesting”, and a curiosity I’ve always had, but never “implemented”, is to do a Javascript DOM thing that feels a lot like “linked list” work and involving an HTML “a” link’s innerHTML<\/a> property.<\/p>\n

Today’s tutorial picture<\/a>, we are hoping, is “worth a thousand words”, because this is a bit esoteric explaining purely in words, but will try as a “stepped set of instructions” below …<\/p>\n

    \n
  1. start with a “a” link that looks as below …
    \n
    \n<a title='Show me' style='text-decoration:underline;cursor:pointer;' id='origsnake1' onclick=\"show('tdsnake',this);\">Snakes ... <\/a>
    \n<\/code>\n<\/li>\n
  2. allow for user interaction that offers you to extend that “a” link’s wording as per the HTML …
    \n
    \n<input type=text id='iadd' value=''><\/input> <input style='background-color:yellow;' onclick=\"addthis(document.getElementById('iadd'));\" type='button' value='Add...'><\/input>
    \n<\/code>\n<\/li>\n
  3. clicking that button calls on the salient<\/em> “linked list” feeling Javascript DOM code …
    \n
    \nvar addto='origsnake1';
    \nfunction addthis(inputo) {
    \n var nextto=eval(1 + eval(addto.replace('origsnake','')));
    \n document.getElementById(addto).innerHTML+=\"<\/a><a title='Show me' style='text-decoration:underline;cursor:pointer;' id='origsnake\" + nextto + \"' onclick=\\\"show('tdsnake',this);\\\">\" + inputo.value.replace(' ... ','').replace(' ...','').replace('...','') + \" ... \";<\/em>
    \n addto='origsnake' + nextto;
    \n}
    \n<\/code>\n<\/li>\n
  4. and the user clicking on one of those “a” links calls on Javascript code …
    \n
    \nfunction show(supervisor,curo) {
    \n alert(\"This innerHTML=\" + curo.innerHTML + \" and the overall table cell innerHTML=\" + document.getElementById(supervisor).innerHTML);
    \n}
    \n<\/code>
    \n … that propogates up through the hierarchy of “a” links created on the fly this way\n<\/li>\n<\/ol>\n

    Perhaps you are in “nesting” form too, and find a_extender.html<\/a>‘s live run<\/a> interesting too?!<\/p>\n

    If this was interesting you may be interested in this<\/a> too.<\/p>\n