English Phrase Creation Game Primer Tutorial

English Phrase Creation Game Primer Tutorial

English Phrase Creation Game Primer Tutorial

There’s one last Linux and Mac OS X dictionary files concept to augment what we left off yesterday with English Phrase Guessing Game Primer Tutorial. It concerns the dictionary file …


/usr/share/dict/connectives

… which contains a list of those very important English “little words”, but vital words. To make use of this list we allow for surprise.php PHP helper file be able to supply, via “&littlewords=y”, a sorted list of these “little words”. The way we can use this to create a word game, is to add into an HTML select element (dropdown) “helper” to assist the user piecing together a phrase, which we then look up on the “net” for self-validation, but no scoring today.

The HTML div element set to contenteditable=true element appears again, so just like with the recent Emoji Name Search Fairy Story PHP Tutorial, where content can “flow” to this HTML div element from choices made at other HTML elements, we need to cater, because this HTML div has that contenteditable=true characteristic, for where the user has placed the cursor for that HTML div element. We’ve adjusted some Javascript code from there for these “cursor manipulation and interpretation” purposes in today’s “English Phrase Creation Game”.

Here’s a live run and here is the HTML programming source code you could call created_phrase.html which got created via these cloning changes.


Previous relevant English Phrase Guessing Game Primer Tutorial is shown below.

English Phrase Guessing Game Primer Tutorial

English Phrase Guessing Game Primer Tutorial

Following on from yesterday’s First Name Guessing Game for Two Primer Tutorial exploring more regarding Linux and Mac OS X dictionary file arrangements we want to tell you about another such resource available to you in the form of the file …


/usr/share/dict/web2a

… where you can find a collection of, in our case, English, phrases (and word pairings). Again, this could be a source for some password creation thoughts, or we use this file to create today’s “English Phrase Guessing Game” by asking the user to fill in the first word or phrase part to score a point.

This was a pretty easy English word game to construct, but it featured some interesting techniques we like around here …

  • an HTML iframe hosting of the middlemanperson surprise.php resource we call on to make use of “/usr/share/dict/web2a” file via the URL snippet “&phrase=y”
  • a Client Pre-Emptive Iframe feel as to how that middlemanperson surprise.php communicates with its supervisory phrase.html today, using that HTML iframe’s onload event to check for content, in today’s case, we hope, an English phrase (or word pairing) of length 3 to 24 … and how did we work out the range …

    awk '(NR==1||length<shortest){shortest=length} END {print shortest}' /usr/share/dict/web2a # 3 is shortest thanks to advice of this useful link, thanks
    awk ' { if ( length > L ) { L=length} }END{ print L}' /usr/share/dict/web2a # 24 is longest thanks to advice of this useful link, thanks
  • the game “standards” for randomosity as per …

    var lis=eval(Math.floor(Math.random() * 21) + 3);
  • the usual “Score: 0/0″ (implied score/goes) scoring arrangements
  • the usual Javascript setTimeout timer methodology control of the game’s flow
  • the often used offering to find out more on a wrong answer via a window.open English dictionary popup mechanism, prompted for via a Javascript prompt window
  • the recent obsession, the HTML div element set to contenteditable=true mode allows for slightly simpler looking user interaction flagged via the onblur event
  • the “I give up” mechanism (that can be really annoying NOT to have, in some games) handled via means of the onclick event, today, via a click on the non-div elements (though we did try it, unsuccessfully with the HTML div element, but it being contenteditable=true, really needs a click (into it) left aside to allow for the HTML div element to get the focus)

Your typical game ideas, in large part.

Here’s a live run and here is the HTML programming source code you could call phrase.html which, again, uses some PHP we’ve talked about with a lot of our word games at this blog, the very shy surprise.php … aptly named, don’t you think?!


Previous relevant First Name Guessing Game for Two Primer Tutorial is shown below.

First Name Guessing Game for Two Primer Tutorial

First Name Guessing Game for Two Primer Tutorial

It may not be immediately imaginable what would be the synergies between today’s proposed “First Name Guessing Game for Two” and Word Guessing Game for Two Primer Tutorial‘s “Word Guessing Game for Two”. Other than that a First Name is a Word, isn’t there too much difference here to clone the “Word Guessing Game for Two” into a new “First Name Guessing Game for Two” when even dictionaries usually do not venture into the world of First Names, so much a product of our culture and history? But, believe it or not these two games are so alike that, apart from tweaks to prompt wordings and message wordings, all that is needed to succeed after the cloning is to make the middlemanperson surprise.php get called for Linux (or Mac OS X FreeBSD) dictionary file usage such that instead of accessing a dictionary file called …


/usr/share/dict/words

… that contains a list of singular, in our case, English, words to access, for the purposes of our new “First Name Guessing Game for Two” the dictionary file …


/usr/share/dict/propernames

… cute,huh?! But a big ask for a complete list of First Names around the world! Nevertheless, it is good to have this list for our game today, and some other ideas that you can think of, am sure. Maybe, a basis in letters for part of a password idea, for example. Seeing this same dictionary file on both Mac OS X and Linux was an encouraging sign of support from the operating systems here.

The event and organizational side of the web application is just as described for Word Guessing Game for Two Primer Tutorial below. We just call surprise.php with an extra …


&firstname=y

… within its URL. Also, references to the online English dictionary become a bit inapplicable, but we substitute in, here, on these a links, use of the excellent Behind the Name website, thanks.

So here’s a live run and here is the HTML programming source code you could call nameguessgame.html which got created via these cloning changes.

You can also see this play out at WordPress 4.1.1’s First Name Guessing Game for Two Primer Tutorial.


Previous relevant Word Guessing Game for Two Primer Tutorial is shown below.

Word Guessing Game for Two Primer Tutorial

Word Guessing Game for Two Primer Tutorial

Word Games help vocabulary for ESL students. There is also not much doubt that collaboration can help ESL students, who also learn quicker with other students present.

Today we create a web application Word Guessing Game designed for two. Not two devices, the one device for two users (hovering over it). So for …

  • non-mobile users can play the game with one user using the mouse and the other using the keyboard
  • mobile users can play with one user using touch on the blue areas of the web application and the other using touch on other places

The events we code for are …

  • onclick … will be recognised on non-mobile platforms
  • ontouchstart … will be recognised on mobile platforms (where it will supercede any onlick event)
  • onkeyup … will be recognised on non-mobile platforms

… so you can see that the colour coding of the webpage becomes important for the mobile platform usage.

Today’s game tests English vocabulary skills. Why just English? Well, it uses English words, based on the dictionary arrangements at its (web) server, which happens to be based on English.

Programmers often use Linux dictionary files as a means to get a word list, and that list could be in any language, and for ours it is English.

Here’s a live run and here is the HTML programming source code you could call wordguessgame.html which, again, uses some PHP we’ve talked about with a lot of our word games at this blog, on a “Client Pre-Emptive Iframe” scenario in a couple of HTML iframe elements we include into today’s game. We thank this free online English dictionary that gets called on if the user chooses to.

We hope you try it, and like it. By the way, you can also play the game as a single user.

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


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


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, Event-Driven Programming, Games, Tutorials and tagged , , , , , , , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>