{"id":29353,"date":"2017-04-05T03:01:16","date_gmt":"2017-04-04T17:01:16","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=29353"},"modified":"2017-04-28T18:45:25","modified_gmt":"2017-04-28T08:45:25","slug":"scientific-research-game-php-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/scientific-research-game-php-tutorial\/","title":{"rendered":"Scientific Research Game PHP Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scientific_research.htm\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Scientific Research Game PHP Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scientific_research_php.jpg\" title=\"Scientific Research Game PHP Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Scientific Research Game PHP Tutorial<\/p><\/div>\n<p>With yesterday&#8217;s start to our <a target=_blank title='ESL information from Wikipedia ... thanks' href='https:\/\/en.m.wikipedia.org\/wiki\/English_as_a_second_or_foreign_language'>ESL<\/a> game, written in HTML and Javascript, called &#8220;Scientific Research Game&#8221; we made great forward progress off a prototype scenario based on the <a target=_blank title='Close Relatives Game Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/close-relatives-game-primer-tutorial\/'>Close Relatives Game Primer Tutorial<\/a> project that preceded it &#8230; notice &#8220;Primer&#8221; here &#8230; we worked from prototype <i>up<\/i> &#8230; in a similar satisfactory way that &#8230;<\/p>\n<ul>\n<li>IDEs provide you with great forward progress initially via &#8220;skeletal&#8221; project code &#8220;startups&#8221;, shall we say &#8230; or &#8230;<\/li>\n<li>CMS often use a &#8220;template&#8221; webpage (or ASP.Net &#8220;master pages&#8221;)<\/li>\n<\/ul>\n<p> &#8230; and you build <i>up<\/i> from that.  We&#8217;re all in favour of this, because you now know the OOP design and what data items to work with.  You get a web application unit tested for the bare minimum data arrangements perhaps, this way.  No mean feat.  But, today, we&#8217;re here to tell you that you can still do that &#8220;prototype&#8221; start to a web application, and jump to the end, if you&#8217;ve done the &#8220;hard yards&#8221; (just once) by &#8230;<\/p>\n<ul>\n<li>we assume from your &#8220;prototype&#8221; work of yesterday, with its small codeset, most likely, what the particular data issues you have with this web application &#8230; and, now, we want you to set that aside and &#8230;<\/li>\n<li>take the latest version of the &#8220;Close Relatives Game&#8221; project in <a target=_blank title='Close Relatives Game PHP Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/close-relatives-game-php-tutorial\/'>Close Relatives Game PHP Tutorial<\/a>, with all its fancy &#8220;bells and whistles&#8221; and make a new version of the &#8220;Scientific Research Game&#8221; as a copy &#8230;<\/li>\n<li>apply those global substitutions you are so familiar with from yesterday&#8217;s prototyping &#8230; then &#8230;<\/li>\n<li>incorporate back into the new &#8220;Scientific Research Game&#8221; the particulars of that initialization of Javascript objects and OOP constructor thinking and random Javascript object choosing from its older version that you unit tested to satisfaction yesterday &#8230; voila &#8230; all that was left that was difficult, now, for us, was &#8230;<\/li>\n<li>in our &#8220;Scientific Research Game&#8221; web application all of the &#8216;business logic&#8217; difficulties left revolved just around user entered data validation (the reason being that the &#8220;Scientific Research Game&#8221; rejects letters rather than changing letters) &#8230; but the vast majority of &#8220;bells and whistles&#8221; came across intact<\/li>\n<\/ul>\n<p> &#8230; in a prototyping &#8220;down&#8221; feeling way, and in a way that you do not feel that you are repeating effort unnecessarily.  The only other &#8220;mild&#8221; consideration was, with HTTP Cookie thoughts, change the &#8220;categories=&#8221; thinking to &#8220;srclues=&#8221; thinking, because HTTP Cookies span applications and sessions, and it is good to differentiate.<\/p>\n<p>That leaves us with the (protyping <i>down<\/i>) HTML and Javascript and CSS going into this ESL game design above you could call <a target=_blank title='scientific_research.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scientific_research.html--GETME'>scientific_research.htm<\/a> for your perusal, or you can try with this <a target=_blank title='scientific_research.htm' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scientific_research.htm'>live run<\/a> link.  <a target=_blank title='scientific_research.html' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scientific_research.html--GETME'>These changes<\/a> got us from the &#8220;Close Relatives Game&#8221; latest version prototype to the &#8220;Scientific Research Game&#8221; latest version with all the &#8216;bells and whistles&#8217; (helped out by the &#8220;doddle to make&#8221; <a target=_blank title='scientific_research.php' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scientific_research.php-GETME'>scientific_research.php<\/a> large data set email helper based on <a target=_blank title='scientific_research.php' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scientific_research.php-GETME'>the &#8220;Close Relatives Game&#8221; PHP<\/a>) referencing back to how yesterday&#8217;s (prototyping <i>up<\/i>) &#8230;<\/p>\n<blockquote>\n<p>So here&#8217;s the HTML and Javascript and CSS going into this ESL game design above you could call <a target=_blank title='scientific_research.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scientific_research.html-GETME'>scientific_research.html<\/a> for your perusal, or you can try with this <a target=_blank title='scientific_research.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scientific_research.html'>live run<\/a> link.  <a target=_blank title='scientific_research.html' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scientific_research.html-GETME'>These changes<\/a> got us from the &#8220;Close Relatives Game&#8221; prototype to the &#8220;Scientific Research Game&#8221; initial version.<\/p>\n<\/blockquote>\n<hr>\n<p id='srgpt'>Previous relevant <a target=_blank title='Scientific Research Game Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/scientific-research-game-primer-tutorial\/'>Scientific Research 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\/scientific_research.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Scientific Research Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scientific_research.jpg\" title=\"Scientific Research Game Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Scientific Research Game Primer Tutorial<\/p><\/div>\n<p>We&#8217;ve got another <a target=_blank title='ESL information from Wikipedia ... thanks' href='https:\/\/en.m.wikipedia.org\/wiki\/English_as_a_second_or_foreign_language'>ESL<\/a> game, written in HTML and Javascript today, that we&#8217;ve called &#8220;Scientific Research Game&#8221; and its main feature is an HTML <a target=_blank title='HTML table element information from W3schools' href='http:\/\/www.w3schools.com\/tags\/tag_table.asp'>table<\/a> element, whose contents is filled out via the data of &#8230;<\/p>\n<p><code>an array of Javascript objects<\/code><\/p>\n<p> &#8230; the index of which is chosen by our <b>favourite<\/b> (Javascript) random selection technique &#8230;<\/p>\n<p><code><br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\nvar vsnw=[0];<br \/>\nvar which=0, score=0, goes=0;<br \/>\nvar defsel='&lt;select id=? onchange=\"changed(this);\"&gt;&lt;option value=\"\"&gt;Reject this letter&lt;\/option&gt;&lt;option value=\"a\"&gt;a&lt;\/option&gt;&lt;option value=\"b\"&gt;b&lt;\/option&gt;&lt;option value=\"c\"&gt;c&lt;\/option&gt;&lt;option value=\"d\"&gt;d&lt;\/option&gt;&lt;option value=\"e\"&gt;e&lt;\/option&gt;&lt;option value=\"f\"&gt;f&lt;\/option&gt;&lt;option value=\"g\"&gt;g&lt;\/option&gt;&lt;option value=\"h\"&gt;h&lt;\/option&gt;&lt;option value=\"i\"&gt;i&lt;\/option&gt;&lt;option value=\"j\"&gt;j&lt;\/option&gt;&lt;option value=\"k\"&gt;k&lt;\/option&gt;&lt;option value=\"l\"&gt;l&lt;\/option&gt;&lt;option value=\"m\"&gt;m&lt;\/option&gt;&lt;option value=\"n\"&gt;n&lt;\/option&gt;&lt;option value=\"o\"&gt;o&lt;\/option&gt;&lt;option value=\"p\"&gt;p&lt;\/option&gt;&lt;option value=\"q\"&gt;q&lt;\/option&gt;&lt;option value=\"r\"&gt;r&lt;\/option&gt;&lt;option value=\"s\"&gt;s&lt;\/option&gt;&lt;option value=\"t\"&gt;t&lt;\/option&gt;&lt;option value=\"u\"&gt;u&lt;\/option&gt;&lt;option value=\"v\"&gt;v&lt;\/option&gt;&lt;option value=\"w\"&gt;w&lt;\/option&gt;&lt;option value=\"x\"&gt;x&lt;\/option&gt;&lt;option value=\"y\"&gt;y&lt;\/option&gt;&lt;option value=\"z\"&gt;z&lt;\/option&gt;&lt;\/select&gt;';<br \/>\n<i>function pickobject()<\/i> {<br \/>\n  var tdbit='',j,k;<br \/>\n  if (document.getElementById('col1').innerHTML == \"\") document.getElementById('col1').innerHTML=clue_heading;<br \/>\n  which=<b>Math.floor(Math.random() * thedefaults.length)<\/b>;<br \/>\n  document.getElementById('nameof').innerHTML=thedefaults[which].name;<br \/>\n  vsnw[0]=thedefaults[which].numletters;<br \/>\n  for (j=0; j&lt;1; j++) {<br \/>\n    tdbit='';<br \/>\n    document.getElementById('clue' + eval(1 + j)).innerHTML=thedefaults[which].clues[j];<br \/>\n    document.getElementById('whatisleft' + eval(1 + j)).innerHTML=thedefaults[which].clues[j];<br \/>\n    for (k=0; k&lt;thedefaults[which].clues[j].length; k++) {<br \/>\n     if (thedefaults[which].clues[j].substring(k, eval(1 + k)) == \" \") {<br \/>\n      tdbit+=\"&lt;select style='background-color:yellow;'&gt;&lt;option value=' '&gt; &lt;\/option&gt;&lt;\/select&gt;\";<br \/>\n     } else {<br \/>\n      tdbit+=defsel.replace('?', 'ans_' + eval(1 + j) + '_' + eval(1 + k)).replace(\"&gt;\" + thedefaults[which].clues[j].substring(k, eval(1 + k)) + \"&lt;\",\" selected&gt;\" + thedefaults[which].clues[j].substring(k, eval(1 + k)) + \"&lt;\").replace(\"&gt;\" + thedefaults[which].answers[j].substring(k, eval(1 + k)) + \"&lt;\",\" title=' '&gt;\" + thedefaults[which].answers[j].substring(k, eval(1 + k)) + \"&lt;\");<br \/>\n     }<br \/>\n    }<br \/>\n    document.getElementById('answer' + eval(1 + j)).innerHTML=tdbit;<br \/>\n  }<br \/>\n}<b><\/b><br \/>\n&lt;\/script&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body onload=' <i>pickobject();<\/i> ' style='background-color:yellow;'&gt;<br \/>\n<\/code><\/p>\n<p>Now, does this sound familiar to you?  If you are a recent regular, it is bound to, because we &#8220;shaped&#8221; the Object Oriented Programming (OOP) style of data design and construction from some of the principles of data design and construction we used in the recent blog posting thread culminating in <a target=_blank title='Close Relatives Game PHP Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/close-relatives-game-php-tutorial\/'>Close Relatives Game PHP Tutorial<\/a>.  The other commonality lies with the game&#8217;s data source.  So, as far as that goes, we&#8217;d like 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 &#8230; thanks for the inspiration.<\/p>\n<p>The &#8220;Scientific Research Game&#8221; Javascript coding for Object use is a &#8220;Constructor&#8221; function feeling arrangement as <i>an array of Javascript objects<\/i> is initialized and that &#8220;Constructor&#8221; function is called via keyword <b>new<\/b> as per &#8230;<\/p>\n<p><code><br \/>\nvar thedefaults = [<br \/>\n <b>new<\/b> Scientific_Research('Hint One',['cluecontainsanswerandmore1|answer1']),<br \/>\n <b>new<\/b> Scientific_Research('Hint Two',['cluecontainsanswerandmore2|answer2'])<br \/>\n];<br \/>\n<\/code><\/p>\n<p> &#8230; type of usage for our Constructor &#8230;<\/p>\n<p><code><br \/>\nfunction Scientific_Research(name, darray) {<br \/>\n  this.name = name;<br \/>\n  this.clues = [darray[0].split('|')[0]];<br \/>\n  this.answers = [darray[0].split('|')[1]];<br \/>\n  this.numletters = eval(darray[0].split('|')[0].length - darray[0].split('|')[1].length);<br \/>\n}<br \/>\n<\/code><\/p>\n<p>We hope you can see how one game&#8217;s HTML and Javascript OOP design can be a prototype whose basic principles can help you consider what is needed for another game design in that same basic field of application.<\/p>\n<p>So here&#8217;s the HTML and Javascript and CSS going into this ESL game design above you could call <a target=_blank title='scientific_research.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scientific_research.html-GETME'>scientific_research.html<\/a> for your perusal, or you can try with this <a target=_blank title='scientific_research.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scientific_research.html'>live run<\/a> link.  <a target=_blank title='scientific_research.html' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scientific_research.html-GETME'>These changes<\/a> got us from the &#8220;Close Relatives Game&#8221; prototype to the &#8220;Scientific Research Game&#8221; initial version.<\/p>\n<p>Again, we will be returning, because there is more to show you here, regarding making this ESL web application game better.  We hope you will hang around for the whole thread of blog postings on this.<\/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='#d29330' onclick='var dv=document.getElementById(\"d29330\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/esl\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d29330' 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='#d29353' onclick='var dv=document.getElementById(\"d29353\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/email\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d29353' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>With yesterday&#8217;s start to our ESL game, written in HTML and Javascript, called &#8220;Scientific Research Game&#8221; we made great forward progress off a prototype scenario based on the Close Relatives Game Primer Tutorial project that preceded it &#8230; notice &#8220;Primer&#8221; &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/scientific-research-game-php-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,13,15,37],"tags":[2078,1860,380,385,396,452,476,477,576,652,739,849,2010,875,932,997,1761,1000,1133,1137,1319,1345,1452],"class_list":["post-29353","post","type-post","status-publish","format-standard","hentry","category-elearning","category-esl","category-games","category-tutorials","tag-constructor","tag-cookie","tag-email","tag-emoji","tag-esl","tag-form","tag-game","tag-games-2","tag-html","tag-javascript","tag-mailto","tag-object","tag-object-oriented-programming","tag-oop","tag-php","tag-programming","tag-prompt","tag-prompt-popup-box","tag-share","tag-sharing","tag-tutorial","tag-url","tag-word"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/29353"}],"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=29353"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/29353\/revisions"}],"predecessor-version":[{"id":29869,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/29353\/revisions\/29869"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=29353"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=29353"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=29353"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}