Middle Word Game Share Tutorial
โœ‚๐Ÿƒ๐Ÿพโ€โ™€๏ธ๐Ÿƒ๐Ÿผโ€โ™‚๏ธ
๐Ÿ“–

Middle Word Game Share Tutorial

Middle Word Game Share Tutorial

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_gameโšซhtml changed from yesterday in inthis way, for your perusal.



Previous relevant Middle Word Game Primer Tutorial is shown below.

Middle Word Game Primer Tutorial

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 โ€ฆ

  1. 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 โ€ฆ
  2. randomly pick whether the game is for 5 or 6 or 7 or 8 letter English words โ€ฆ
  3. 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 โ€ฆ

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.


If this was interesting you may be interested in this too.

This entry was posted in eLearning, Games, Tutorials and tagged , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *