{"id":29253,"date":"2017-04-01T03:01:57","date_gmt":"2017-03-31T17:01:57","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=29253"},"modified":"2017-04-28T18:51:13","modified_gmt":"2017-04-28T08:51:13","slug":"close-relatives-game-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/close-relatives-game-primer-tutorial\/","title":{"rendered":"Close Relatives Game Primer Tutorial"},"content":{"rendered":"
\"Close<\/a>

Close Relatives Game Primer Tutorial<\/p><\/div>\n

We’ve got an ESL<\/a> game, written in HTML and Javascript today, that we’ve called “Close Relatives 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,0,0,0];
\nvar which=0, score=0, goes=0;
\nvar defsel='<select id=? onchange=\"changed(this);\"><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 which=Math.floor(Math.random() * thedefaults.length)<\/b>;
\n document.getElementById('nameof').innerHTML=thedefaults[which].name;
\n vsnw=thedefaults[which].numwords;
\n for (j=0; j<4; j++) {
\n tdbit='';
\n document.getElementById('clue' + 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}
\n<\/b>
\n<\/script>
\n<\/head>
\n<body onload=' pickobject();<\/i> ' style='background-color:yellow;'>
\n<\/code><\/p>\n

Featuring in the 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> Close_Relative('Category One',['clue1of4|answer1of4','clue2of4|answer2of4','clue3of4|answer3of4','clue4of4|answer4of4']),
\n new<\/b> Close_Relative('Last Category',['clue1of4|answer1of4','clue2of4|answer2of4','clue3of4|answer3of4','clue4of4|answer4of4'])
\n];
\n<\/code><\/p>\n

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


\nfunction Close_Relative(name, darray) {
\n this.name = name;
\n this.clues = [darray[0].split('|')[0], darray[1].split('|')[0], darray[2].split('|')[0], darray[3].split('|')[0]];
\n this.answers = [darray[0].split('|')[1], darray[1].split('|')[1], darray[2].split('|')[1], darray[3].split('|')[1]];
\n this.numwords = [darray[0].split('|')[0].split(' ').length, darray[1].split('|')[0].split(' ').length, darray[2].split('|')[0].split(' ').length, darray[3].split('|')[0].split(' ').length];
\n}
\n<\/code><\/p>\n

As far as content 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

So here’s the HTML and Javascript and CSS going into this ESL game design above you could call close_relatives.html<\/a> for your perusal, or you can try with this live run<\/a> link. We will be returning, because there is more to show you here, regarding making this ESL web application game better. We hope you 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