Word Guessing or Synonym Game Right Click Tutorial

Word Guessing or Synonym Game Right Click Tutorial

Word Guessing or Synonym Game Right Click Tutorial

When we presented Word Guessing or Synonym Game for Two Tutorial we were curious about …

  • word game …
  • played by more than one player …
  • all using the one device

… and, back then, settled on a two player word game that worked it so that …

  1. one player enters word guesses via mouse or touch gestures on that “one device” …
  2. one player enters word guesses via keyboard on that “one device”

… but, today, we’re revisiting this word game trying to add

  1. one player enters word guesses via mouse or touch gestures on that “one device” …
  2. one player enters word guesses via keyboard on that “one device”
  3. one player enters word guesses via right mouse clicks on that “one device” …

… via the great context menu (ie. right click “oncontextmenu” event) access advice used in …


if (document.addEventListener) {
document.addEventListener('contextmenu', function(e) {
if (rcok) {
e.preventDefault();
activeplayer=3; //alert("You've tried to open context menu"); //here you draw your own menu
document.getElementById('tblthree').style.visibility='visible';
document.getElementById('tblone').style.visibility='hidden';
document.getElementById('sone').style.textDecoration='underline';
document.getElementById('sone').style.cursor='pointer';
}
}, false);
} else {
document.attachEvent('oncontextmenu', function() {
if (rcok) {
window.event.returnValue = false;
activeplayer=3; //alert("You've tried to open context menu");
document.getElementById('tblthree').style.visibility='visible';
document.getElementById('tblone').style.visibility='hidden';
document.getElementById('sone').style.textDecoration='underline';
document.getElementById('sone').style.cursor='pointer';
}
});
}

the changed wordguessgame.html code in live run Word Guess Game for Up to Three.


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

Word Guessing or Synonym Game for Two Tutorial

Word Guessing or Synonym Game for Two Tutorial

The reminder of just how brilliant is the …

… adding onto …

  • Word Guess “buzzing in” for two players … with …
  • Synonym (in English) Guess “buzzing in” for two players

… as some additional functionality to this game calling on the good ol’ “/usr/share/dict/words” inbuilt dictionary of words that comes with Linux (and macOS) “out of the box” … hooooorayyyyy!

In broad brush terms, we use …

  • the Linux “/usr/share/dict/words” inbuilt dictionary of English words to pick a candidate word …
  • ask, via jQuery Ajax of WordReference if this word has synonyms …
    1. if not, reask “/usr/share/dict/words” inbuilt dictionary for a word … else …
    2. sit there and wait for a “buzz in” via mouse or keyboard for a player answer, and if they are correct, their score increases by the length of the synonym word(s)

Here’s a live run and here is the HTML programming source code you could call the changed wordguessgame.html code.


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.

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>