Middle Word Game Primer Tutorial
Today’s ESL game, written in HTML (and Javascript and CSS), we’ve called “Middle Word Game”‘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. The big alternative to table use is to use HTML div 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 …
- tbody … like the “container” for table body contents
- tr … row
- td … cell
… 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’s game, that asks the user to reveal a vertical English word describing a “job description” 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 …
- 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 … this is like our (full) palette … then …
- randomly pick whether the game is for 5 or 6 or 7 or 8 letter English words …
- 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 “full” palette reaches beyond the needs of the actual game …
- for a row beyond the random game (top to bottom) needs, the tr row is given the property display:none else display:table-row … whereas …
- for a cell beyond the random game (left to right) needs, the td cell is given the property display:none else display:table-cell
Perhaps the trap with HTML table work above is to think to use td cell property display:block for those visible parts of the (full) palette, but then, that “trap” might be a “Robert trap”. 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’ll agree if you give it a go with our live run link to our game.
As far as content goes we have two sources to profusely thank, those being …
- Science Puzzles for Young Einsteins by Helene Hovanec ISBN 0-8069-3542-1 … thanks for the inspiration
- Great Scrabble English word finder website … thanks
So here’s the HTML and Javascript and CSS going into this ESL game design above you could call middle_word_game.html for your perusal.
If this was interesting you may be interested in this too.
