{"id":27676,"date":"2017-01-21T03:01:49","date_gmt":"2017-01-20T17:01:49","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=27676"},"modified":"2017-04-28T19:08:09","modified_gmt":"2017-04-28T09:08:09","slug":"job-search-grid-game-cookie-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/job-search-grid-game-cookie-tutorial\/","title":{"rendered":"Job Search Grid Game Cookie Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/job_search_grid_game.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Job Search Grid Game Cookie Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/job_search_grid_game_cookies.JPG\" title=\"Job Search Grid Game Cookie Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Job Search Grid Game Cookie Tutorial<\/p><\/div>\n<p>Yesterday we got to a point with a web project we were working on called the &#8220;Job Search Grid Game&#8221; (and thanks here to <a target=_blank title='Science Puzzles for Young Einsteins by Helene Hovanec ISBN 0-8069-3542-1' href='https:\/\/books.google.com.au\/books?isbn=0806958499'>Science Puzzles for Young Einsteins<\/a> by Helene Hovanec ISBN 0-8069-3542-1 for the inspiration) and we ended up with a game that could use <a target=_blank title='Content Management System information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Content_management_system'>Content Management System<\/a> ideas whereby the user could control the content of the game.  Guess you might categorize this functionality as &#8220;personalization&#8221;.<\/p>\n<p>That &#8220;personalization&#8221; only lasted as long as that web browser session lasted, and there was no recourse to recall any of that user &#8220;personalized&#8221; game data settings again, but today we&#8217;ve started, by using this project as the &#8220;guinea pig&#8221; project to start down the road of seeing whether the use of <a target=_blank title='Google search of HTTP cookies' href='https:\/\/www.google.com.au\/search?q=HTTP+cookies&#038;rlz=1C1AOHY_enAU717AU717&#038;oq=HTTP+cookies&#038;aqs=chrome..69i57j0l5.2997j0j4&#038;sourceid=chrome&#038;ie=UTF-8'>HTTP cookies<\/a> might assist to extend functionality for &#8230; <\/p>\n<ul>\n<li>only users who tailor their game via that &#8220;Management&#8221; link down the bottom of the game &#8230; and who &#8230;<\/li>\n<li>use this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/job_search_grid_game.htm\">new live run<\/a> link (rather than the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/job_search_grid_game.html\">old live run<\/a> link) &#8230; because there are checks to see that &#8230;<\/li>\n<li>functionality occurs if the calling HTML has code such as &lt;div id=dcookies_okay&gt;&lt;input type=hidden id=cookies_okay value=&#8221;&gt;&lt;\/input&gt;&lt;\/div&gt;<\/li>\n<\/ul>\n<p>We&#8217;ve tried thoughts that are quite &#8220;generic&#8221; by nature here, but we have to better monitor web browser cookie usage limits, as we go further down the road, but we &#8230;<\/p>\n<ul>\n<li>in a web browser address bar URL such as http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/<b>job_search_grid_game.htm<\/b> that <b>bold<\/b> part is combined with a reworked date and timestamp to be the &#8220;name&#8221; of the cookie &#8230; and only if &#8230;<\/li>\n<li>the web browser address bar URL must contain a &#8220;&amp;&#8221; to attract any attention as a candidate for the creation of a new cookie &#8230; which, if never encountered before &#8230;<\/li>\n<li>placed on a dropdown &#8220;cookie&#8221; list of game configurations that indicate the date and timestamp for reference purposes &#8230; and, as for all web browser scenarios &#8230;<\/li>\n<li>cookie logic only works while the user has not cleared the Browser History at their web browser<\/li>\n<\/ul>\n<p> &#8230; and that HTML (select element) dropdown is placed, in &#8220;overlay&#8221; style &#8230;<\/p>\n<ul>\n<li>position:absolute; top:0px ; left: 300px;<\/li>\n<li>opacity: 0.7;<\/li>\n<li>zIndex: 56;\n<\/li>\n<p> &#8230; the Javascript logic for which has been placed into some external Javascript you could call <a target=_blank title='cookie_get.js' href='http:\/\/www.rjmprogramming.com.au\/cookie_get.js_GETME'>cookie_get.js<\/a> that we are going to place at http:\/\/www.rjmprogramming.com.au\/ (document root) for maximal access purposes, and which is called by the <a target=_blank title='job_search_grid_game.htm' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/job_search_grid_game.html_GETME'>job_search_grid_game.htm<\/a> via &#8230;<\/p>\n<p><code>&lt;script type='text\/javascript' src='..\/..\/..\/..\/cookie_get.js'&gt;&lt;\/script&gt;<\/code><\/p>\n<p> &#8230; which is like saying any webpage out from document root to four subfolder hierarchy could all access this external Javascript with the same codeline between &lt;head&gt; and &lt;\/head&gt; as above, and that external Javascript uses a <i>setTimeout<\/i> function call to separate its logic from any clashes with <i>document.body<\/i> onload event logic, or any jQuery document ready logic.<\/p>\n<p>Now the HTML and Javascript could be called <a target=_blank title='job_search_grid_game.htm' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/job_search_grid_game.html-GETME'>job_search_grid_game.htm<\/a> and changed from yesterday for HTTP Cookie functionality in <a target=_blank title='Changes' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/job_search_grid_game.html-GETME'>this way<\/a>.<\/p>\n<p>We hope you get something out of these &#8220;early days&#8221; HTTP Cookie thoughts, that we may apply to some of our <a target=_blank title='Game tutorials' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/game'>game<\/a> web applications.<\/p>\n<hr>\n<p id='jsggt'>Previous relevant <a target=_blank title='Job Search Grid Game Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/job-search-grid-game-tutorial\/'>Job Search Grid 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\/job_search_grid_game.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Job Search Grid Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/job_search_grid_game.JPG\" title=\"Job Search Grid Game Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Job Search Grid Game Tutorial<\/p><\/div>\n<p>We are always on the lookout for a good quiz or game.   But what if that idea is &#8220;sort of&#8221; &#8230; both?  Well, we just had to give the dog a bone!  <font size=1>But we digress.<\/font><\/p>\n<p>This is where we have to thank <a target=_blank title='Science Puzzles for Young Einsteins by Helene Hovanec ISBN 0-8069-3542-1' href='https:\/\/books.google.com.au\/books?isbn=0806958499'>Science Puzzles for Young Einsteins<\/a> by Helene Hovanec ISBN 0-8069-3542-1 profusely.  This book is full of wonderful brain games that combine puzzle feels with game feel and quiz feel.  We normally like to shape a game based on another we stumble across, and add our own content, but, alas, the content here for today&#8217;s game is so good, it makes my brain hurt thinking of another set to make it work.  And that is where we &#8220;value add&#8221;.  Not with the &#8220;default content&#8221; of the game, but to value add to the experience we CMS it.  So what does &#8220;CMS it&#8221; mean?  Well, &#8220;CMS&#8221; stands for <a target=_blank title='Content Management System information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Content_management_system'>&#8220;Content Management System&#8221;<\/a>, and we use the principles of CMS to encapsulate all the variable aspects we can think of about this game &#8230; <font size=1>within reason<\/font> and present that in an HTML form &#8230;<\/p>\n<ul>\n<li>method=GET<\/li>\n<li>action=.\/job_search_grid_game.html<\/li>\n<\/ul>\n<p> &#8230; our usual &#8220;suspects&#8221; for such goings on.  So should the information not be too long, this should allow the user to set their own content for the game &#8230; <font size=1>all you young and old Einsteins out there<\/font>.<\/p>\n<p>However, if you find today&#8217;s <a target=_blank title='Live run' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/job_search_grid_game.html'>game<\/a> interesting and\/or stimulating, rest assured Helene Hovanec has filled a book full of puzzles and quizzes and challenges like this, and so we would recommend you get out there and buy <a target=_blank title='Science Puzzles for Young Einsteins by Helene Hovanec ISBN 0-8069-3542-1' href='https:\/\/books.google.com.au\/books?isbn=0806958499'>Science Puzzles for Young Einsteins<\/a> by Helene Hovanec ISBN 0-8069-3542-1.<\/p>\n<p>Within the HTML and Javascript <a target=_blank title='job_search_grid_game.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/job_search_grid_game.html_GETME'>job_search_grid_game.html<\/a> code you will find lots of calls to Javascript&#8217;s <a target=_blank title='Javascript eval information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_eval.asp'>eval<\/a> method to get a CMS job done, but not involve a serverside language &#8230; <font size=1>does not compute<\/font> &#8230; <font size=1>whatttevvvvvvvver<\/font>.<\/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='#d27663' onclick='var dv=document.getElementById(\"d27663\"); 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='d27663' 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='#d27676' onclick='var dv=document.getElementById(\"d27676\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/cookie\/\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d27676' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday we got to a point with a web project we were working on called the &#8220;Job Search Grid Game&#8221; (and thanks here to Science Puzzles for Young Einsteins by Helene Hovanec ISBN 0-8069-3542-1 for the inspiration) and we ended &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/job-search-grid-game-cookie-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":[216,257,2014,1860,281,399,409,452,476,477,576,652,876,894,1988,997,1126,1238,1319,1496],"class_list":["post-27676","post","type-post","status-publish","format-standard","hentry","category-elearning","category-games","category-tutorials","tag-cms","tag-content","tag-content-management-system","tag-cookie","tag-css","tag-eval","tag-external-javascript","tag-form","tag-game","tag-games-2","tag-html","tag-javascript","tag-opacity","tag-overlay","tag-position","tag-programming","tag-settimeout","tag-table","tag-tutorial","tag-z-index"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/27676"}],"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=27676"}],"version-history":[{"count":9,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/27676\/revisions"}],"predecessor-version":[{"id":29884,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/27676\/revisions\/29884"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=27676"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=27676"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=27676"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}