There is more we want to do to extend the functionality of yesterdayโs Middle Word Game that we presented with Middle Word Game Primer Tutorial as shown below. Weโre going to break this two part set of changes into โฆ
- what functionality that remains in the realm of client-side HTML and Javascript and CSS scope โฆ todayโs changes โฆ and
- what functionality needing a server side piece of PHP code โฆ for tomorrow
Todayโs changes address โฆ
- share functionality via email (via email client program)
- allow for spaces in vertical word(s) solution โฆ because, even now, it could happen with user supplied word data
- allow for that default blurb explaining what the vertical word(s) are, to be changed โฆ more in readiness for tomorrowโs work, but a client side piece of logic
Now, with that first change, you may have thought that weโd need the server side intervention there, but all we do is send the user to their default email program by clicking an HTML a link pointing at a mailto:[emailAddress]?subject=[Subject]&body=[URLtoLinkTo] type of href property (on that link). As you can imagine, it is possible to piece together a Javascript encodeURIComponent() version of [URLtoLinkTo] value via the current webpageโs document.URL plus any random word length decision, along with its associated wordlist data, plus score information, and now, as of today, plus any โblurbโ information (which will become more clear with regard to motivation here, tomorrow).
Here is the HTML and Javascript and CSS going into this ESL game design above you could call middle_word_gamehtml changed from yesterday in inthis way, for your perusal.
Previous relevant Middle Word Game Primer Tutorial is shown below.
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 liverun 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_gamehtml for your perusal.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.