{"id":29330,"date":"2017-04-04T03:01:19","date_gmt":"2017-04-03T17:01:19","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=29330"},"modified":"2017-04-28T18:46:33","modified_gmt":"2017-04-28T08:46:33","slug":"scientific-research-game-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/scientific-research-game-primer-tutorial\/","title":{"rendered":"Scientific Research Game Primer Tutorial"},"content":{"rendered":"
\"Scientific<\/a>

Scientific Research Game Primer Tutorial<\/p><\/div>\n

We’ve got another ESL<\/a> game, written in HTML and Javascript today, that we’ve called “Scientific Research Game” and its main feature is an HTML table<\/a> element, whose contents is filled out via the data of …<\/p>\n

an array of Javascript objects<\/code><\/p>\n

… the index of which is chosen by our favourite<\/b> (Javascript) random selection technique …<\/p>\n


\n<script type='text\/javascript'>
\nvar vsnw=[0];
\nvar which=0, score=0, goes=0;
\nvar defsel='<select id=? onchange=\"changed(this);\"><option value=\"\">Reject this letter<\/option><option value=\"a\">a<\/option><option value=\"b\">b<\/option><option value=\"c\">c<\/option><option value=\"d\">d<\/option><option value=\"e\">e<\/option><option value=\"f\">f<\/option><option value=\"g\">g<\/option><option value=\"h\">h<\/option><option value=\"i\">i<\/option><option value=\"j\">j<\/option><option value=\"k\">k<\/option><option value=\"l\">l<\/option><option value=\"m\">m<\/option><option value=\"n\">n<\/option><option value=\"o\">o<\/option><option value=\"p\">p<\/option><option value=\"q\">q<\/option><option value=\"r\">r<\/option><option value=\"s\">s<\/option><option value=\"t\">t<\/option><option value=\"u\">u<\/option><option value=\"v\">v<\/option><option value=\"w\">w<\/option><option value=\"x\">x<\/option><option value=\"y\">y<\/option><option value=\"z\">z<\/option><\/select>';
\nfunction pickobject()<\/i> {
\n var tdbit='',j,k;
\n if (document.getElementById('col1').innerHTML == \"\") document.getElementById('col1').innerHTML=clue_heading;
\n which=Math.floor(Math.random() * thedefaults.length)<\/b>;
\n document.getElementById('nameof').innerHTML=thedefaults[which].name;
\n vsnw[0]=thedefaults[which].numletters;
\n for (j=0; j<1; j++) {
\n tdbit='';
\n document.getElementById('clue' + eval(1 + j)).innerHTML=thedefaults[which].clues[j];
\n document.getElementById('whatisleft' + eval(1 + j)).innerHTML=thedefaults[which].clues[j];
\n for (k=0; k<thedefaults[which].clues[j].length; k++) {
\n if (thedefaults[which].clues[j].substring(k, eval(1 + k)) == \" \") {
\n tdbit+=\"<select style='background-color:yellow;'><option value=' '> <\/option><\/select>\";
\n } else {
\n tdbit+=defsel.replace('?', 'ans_' + eval(1 + j) + '_' + eval(1 + k)).replace(\">\" + thedefaults[which].clues[j].substring(k, eval(1 + k)) + \"<\",\" selected>\" + thedefaults[which].clues[j].substring(k, eval(1 + k)) + \"<\").replace(\">\" + thedefaults[which].answers[j].substring(k, eval(1 + k)) + \"<\",\" title=' '>\" + thedefaults[which].answers[j].substring(k, eval(1 + k)) + \"<\");
\n }
\n }
\n document.getElementById('answer' + eval(1 + j)).innerHTML=tdbit;
\n }
\n}<\/b>
\n<\/script>
\n<\/head>
\n<body onload=' pickobject();<\/i> ' style='background-color:yellow;'>
\n<\/code><\/p>\n

Now, does this sound familiar to you? If you are a recent regular, it is bound to, because we “shaped” 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 Close Relatives Game PHP Tutorial<\/a>. The other commonality lies with the game’s data source. So, as far as that goes, we’d like to thank Science Puzzles for Young Einsteins<\/a> by Helene Hovanec ISBN 0-8069-3542-1 … thanks for the inspiration.<\/p>\n

The “Scientific Research Game” Javascript coding for Object use is a “Constructor” function feeling arrangement as an array of Javascript objects<\/i> is initialized and that “Constructor” function is called via keyword new<\/b> as per …<\/p>\n


\nvar thedefaults = [
\n new<\/b> Scientific_Research('Hint One',['cluecontainsanswerandmore1|answer1']),
\n new<\/b> Scientific_Research('Hint Two',['cluecontainsanswerandmore2|answer2'])
\n];
\n<\/code><\/p>\n

… type of usage for our Constructor …<\/p>\n


\nfunction Scientific_Research(name, darray) {
\n this.name = name;
\n this.clues = [darray[0].split('|')[0]];
\n this.answers = [darray[0].split('|')[1]];
\n this.numletters = eval(darray[0].split('|')[0].length - darray[0].split('|')[1].length);
\n}
\n<\/code><\/p>\n

We hope you can see how one game’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

So here’s the HTML and Javascript and CSS going into this ESL game design above you could call scientific_research.html<\/a> for your perusal, or you can try with this live run<\/a> link. These changes<\/a> got us from the “Close Relatives Game” prototype to the “Scientific Research Game” initial version.<\/p>\n

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

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