{"id":28193,"date":"2017-02-14T03:01:46","date_gmt":"2017-02-13T17:01:46","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=28193"},"modified":"2017-04-28T18:54:20","modified_gmt":"2017-04-28T08:54:20","slug":"middle-word-game-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/middle-word-game-primer-tutorial\/","title":{"rendered":"Middle Word Game Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_word_game.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Middle Word Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_word_game.JPG\" title=\"Middle Word Game Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Middle Word Game Primer Tutorial<\/p><\/div>\n<p>Today&#8217;s <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 and CSS), we&#8217;ve called &#8220;Middle Word Game&#8221;&#8216;s 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.   You may know that we like the table element around here as a reliable controller of horizontal alignment.   The big alternative to table use is to use HTML <a target=_blank title='HTML div element information from W3schools' href='http:\/\/www.w3schools.com\/tags\/tag_div.asp'>div<\/a> elements that, in large part, can achieve the majority of design features a table can.   But we also like the way a table is made up of other parts (ignoring the thead and th for now), including &#8230;<\/p>\n<ul>\n<li>tbody &#8230; like the &#8220;container&#8221; for table body contents<\/li>\n<li>tr &#8230; row<\/li>\n<li>td &#8230; cell<\/li>\n<\/ul>\n<p> &#8230; that are all pretty self-explanatory.   But when it comes to flexibility to do with a mix of visible and non-visible aspects perhaps it is more natural to think to handle this with an HTML div element design.  Today&#8217;s game, that asks the user to reveal a vertical English word describing a &#8220;job description&#8221; for an Information Technology job within a (table) grid of 5 or 6 or 7 or 8 letter horizontal English words, though, perseveres with a table design that &#8230;<\/p>\n<ol>\n<li>calculates the maximum dimensions for a table (grid) of cells covering the maximal size for 5 or 6 or 7 or 8 letter English words from the user defined (or programmatic default) set of word data &#8230; this is like our (full) palette &#8230; then &#8230;<\/li>\n<li>randomly pick whether the game is for 5 or 6 or 7 or 8 letter English words &#8230;<\/li>\n<li>examining top to bottom, left to right, start filling in letters, or not (ie. if it is for a user chosen HTML select element dropdown for that vertical English word to solve), and when the &#8220;full&#8221; palette reaches beyond the needs of the actual game &#8230;\n<ul>\n<li>for a row beyond the random game (top to bottom) needs, the tr row is given the property <a target=_blank title='CSS property display information from W3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_class_display.asp'>display<\/a>:<i>none<\/i> else display:<i>table-row<\/i> &#8230; whereas &#8230;<\/li>\n<li>for a cell beyond the random game (left to right) needs, the td cell is given the property display:<i>none<\/i> else display:<i>table-cell<\/i><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>Perhaps the trap with HTML table work above is to think to use td cell property display:<i>block<\/i> for those visible parts of the (full) palette, but then, that &#8220;trap&#8221; might be a &#8220;Robert trap&#8221;.  In any case, this table design works like a charm, and still keeps the table usage that suits the nature of a grid of letters which is what this game is about, am sure you&#8217;ll agree if you give it a go with our <a target=_blank title='Game' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_word_game.html'>live run<\/a> link to our game.<\/p>\n<p>As far as content goes we have two sources to profusely thank, those being &#8230;<\/p>\n<ul>\n<li><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<\/li>\n<li><a target=_blank title='Great scrabble word finder website' href='http:\/\/wordfinder.yourdictionary.com\/letter-words\/'>Great Scrabble English word finder website<\/a> &#8230; thanks<\/li>\n<\/ul>\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='middle_word_game.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_word_game.html_GETME'>middle_word_game.html<\/a> for your perusal.<\/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='#d28193' onclick='var dv=document.getElementById(\"d28193\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/table\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d28193' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Today&#8217;s ESL game, written in HTML (and Javascript and CSS), we&#8217;ve called &#8220;Middle Word Game&#8221;&#8216;s main feature is an HTML table element. You may know that we like the table element around here as a reliable controller of horizontal alignment. &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/middle-word-game-primer-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,1,37],"tags":[1580,281,396,476,477,576,652,1075,1238,1453],"class_list":["post-28193","post","type-post","status-publish","format-standard","hentry","category-elearning","category-games","category-uncategorised","category-tutorials","tag-cell","tag-css","tag-esl","tag-game","tag-games-2","tag-html","tag-javascript","tag-row","tag-table","tag-word-game"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/28193"}],"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=28193"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/28193\/revisions"}],"predecessor-version":[{"id":29876,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/28193\/revisions\/29876"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=28193"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=28193"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=28193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}