{"id":62094,"date":"2023-12-28T03:01:56","date_gmt":"2023-12-27T17:01:56","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=62094"},"modified":"2023-12-28T06:29:55","modified_gmt":"2023-12-27T20:29:55","slug":"phpjavascript-decoding-scrambled-words-game-css-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/phpjavascript-decoding-scrambled-words-game-css-tutorial\/","title":{"rendered":"PHP\/Javascript Decoding Scrambled Words Game CSS Tutorial"},"content":{"rendered":"
\"PHP<\/a>

PHP\/Javascript Decoding Scrambled Words Game CSS Tutorial<\/p><\/div>\n

It can be hard for a Javascript DOM aficionado to be restricted to “just CSS styling” means by which to give a web application “a bit of a” makeover. Yes, “a bit of a” is apt. We’re not going overboard, and besides, CSS styling is an art form a lot of people are better at than moi. And we tend towards “mild masochism”, so there you go. Never mind, it is CSS selector possibilities we want to impart today, and today, with our new PHP writes CSS code …<\/p>\n

<?php
\n
\necho \"\\n\" , '<style>' . \"\\n\";
\necho \"\\n\" , ' h1 { text-shadow: -2px 2px 2px #2dff95; } ' . \"\\n\";
\necho \"\\n\" , ' select { text-shadow: -1px 1px 1px #ff2d95; } ' . \"\\n\";
\necho \"\\n\" , ' span b i { text-shadow: -1px 1px 1px #95ff2d; min-width:60px; } ' . \"\\n\";
\necho \"\\n\" , ' h2 { text-shadow: -1px 1px 1px #952dff; } ' . \"\\n\";
\necho \"\\n\" , ' .guess* { width: 60px; } ' . \"\\n\"; \/\/ thanks to https:\/\/stackoverflow.com\/questions\/13352080\/match-all-elements-having-class-name-starting-with-a-specific-string
\necho \"\\n\" , \" select[name^='guess'] { width: 60px; } \" . \"\\n\"; \/\/ https:\/\/stackoverflow.com\/questions\/41832255\/css-class-name-selector-name-starts-with
\necho \"\\n\" , ' input { margin-top: 25px; border-radius: 20px; } ' . \"\\n\";
\necho \"\\n\" , \" input[type='button'] { background-color: magenta; padding: 5 5 5 5; } \" . \"\\n\";
\necho \"\\n\" , \" input[value^='Please'] { background-color: lightgreen; } \" . \"\\n\";
\necho \"\\n\" , \" #selease { background-color: orange; border-radius: 20px; padding: 5 5 5 5; } \" . \"\\n\";
\necho \"\\n\" , '<\/style>' . \"\\n\";
\n<\/code>
\n?><\/p>\n

… it wasn’t used in anger<\/font> today, because of our “masochistic tendencies”, but that “class starts with” CSS selector syntax we hadn’t ever used, and is very interesting …<\/p>\n

<style>
\n
\n.guess* { width: 40px; } \/\/ thanks to https:\/\/stackoverflow.com\/questions\/13352080\/match-all-elements-having-class-name-starting-with-a-specific-string<\/a>
\n<\/code>
\n<\/style><\/p>\n

… let alone what was used (ie. select element name attribute “starts with” ^ syntax) and opens up interesting possibilities too …<\/p>\n

<style>
\n
\n select[name^='guess'] { width: 40px; } \/\/ https:\/\/stackoverflow.com\/questions\/41832255\/css-class-name-selector-name-starts-with<\/a>
\n<\/code>
\n<\/style><\/p>\n

… in the mildly made over<\/a> decodewords.php<\/a> web application<\/a> following on from the recent PHP\/Javascript Decoding Scrambled Words Game Difficulty Tutorial<\/a>.<\/p>\n

So, thank you, real CSS styling aficionados out there in the online wooooooooorrrrrrllllllllddddd!<\/p>\n

\n

\n

Previous relevant PHP\/Javascript Decoding Scrambled Words Game Difficulty Tutorial<\/a> is shown below.<\/p>\n

\"PHP<\/a>

PHP\/Javascript Decoding Scrambled Words Game Difficulty Tutorial<\/p><\/div>\n

We often find it hard coding an online game, working out with an audience where to pitch its “difficulty value”. On revisiting the Decoding Scrambled Letter Game of PHP\/Javascript Decoding Scrambled Words Game Tutorial<\/a> the other day, it took us a while to re<\/sub>figure out what was going on, and on understanding, realized it is a decoding game and maybe it will be difficult, and it should stay that way. But then again, if users just give up without trying it, well, that is not very good either.<\/p>\n

So we decided to make changes that were optional regarding how the user plays the game, but helped just like hints can help in a game. Besides, we’ve been itching to try to involve that game a lot of us played as children …<\/p>\n

\nYou’re getting warmer!\n<\/p><\/blockquote>\n

… when a player is getting closer to the correct answer. This is a way to help while not exactly “giving the game away”, so to speak.<\/p>\n

What can hide data from a user who is not interested in Web Inspectors? Yes, global data attributes<\/a> are a way, and in this new “Easy” mode of play for the game, all those dropdown (ie. select) elements are given a data-correct<\/i> global data attribute allowing us, as programmers, to start using new document.body “onload” Javascript (function datait) functionality, as below …<\/p>\n


\nfunction datait() {
\n var thisword='';
\n for (var ii=1; ii<=4; ii++) {
\n thisword=document.getElementById('word' + ii + 'of4').value;
\n for (var jj=1; jj<=thisword.length; jj++) {
\n if (document.getElementById('guess' + ii + '' + jj)) {
\n if (document.URL.toLowerCase().indexOf('debug=y') != -1) {
\n document.getElementById('lotsofcheck').checked=true;
\n document.getElementById('sc').style.display='inline-block';
\n document.getElementById('guess' + ii + '' + jj).setAttribute('data-correct', thisword.substring(eval(-1 + jj)).substring(0,1));
\n } else if (document.URL.toLowerCase().indexOf('debug=') != -1) {
\n document.getElementById('sc').style.display='inline-block';
\n document.getElementById('guess' + ii + '' + jj).setAttribute('data-correct', thisword.substring(eval(-1 + jj)).substring(0,1));
\n }
\n }
\n }
\n }
\n if (document.URL.toLowerCase().indexOf('debug=') != -1) {
\n document.getElementById('defopt').innerText='Easy';
\n }
\n}
\n
\nfunction hardvseasy(oselo) {
\n if (oselo.value == 'easy' && document.URL.toLowerCase().indexOf('debug=y') == -1) {
\n if (document.URL.indexOf('?') == -1) {
\n location.href=document.URL.split('#')[0] + '?debug=y';
\n } else {
\n location.href=document.URL.split('#')[0] + '&debug=y';
\n }
\n } else if (oselo.value == 'hard' && document.URL.toLowerCase().indexOf('debug=') != -1) {
\n if (document.URL.indexOf('?') == -1) {
\n location.href=document.URL.split('#')[0].replace(\/debug\/g, 'gubed');
\n } else {
\n location.href=document.URL.split('#')[0].replace(\/debug\/g, 'gubed');
\n }
\n }
\n}
\n<\/code><\/p>\n

… in the changed<\/a> decodewords.php<\/a> web application<\/a>.<\/p>\n

\n

\n

Previous relevant PHP\/Javascript Decoding Scrambled Words Game Tutorial<\/a> is shown below.<\/p>\n

\"PHP<\/a>

PHP\/Javascript Decoding Scrambled Words Game Tutorial<\/p><\/div>\n

Do you like word games? Today’s game takes four randomly generated words, encodes them, and asks you to decode them … the words have 4 to 9 characters in them … mind you, out of them, you’d have<\/a> \u5947\u602a\u7684\u5b57\u7b26 or \u5909\u306a\u6587\u5b57 or \u0432\u0435\u0441\u0435\u043b\u044b\u0435 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0438 or \uc774\uc0c1\ud55c \ubb38\uc790 or \u0645\u0636\u062d\u06a9\u06c1 \u062e\u06cc\u0632 \u062d\u0631\u0648\u0641 or \u5947\u602a\u7684\u5b57\u7b26 or \u0905\u091c\u0940\u092c \u0905\u0915\u094d\u0937\u0930 or \u10e1\u10d0\u10e1\u10d0\u10ea\u10d8\u10da\u10dd \u10d2\u10db\u10d8\u10e0\u10d4\u10d1\u10d8 or \u178f\u17bd\u17a2\u1780\u17d2\u179f\u179a\u178a\u17c2\u179b\u1782\u17bd\u179a\u17b1\u17d2\u1799\u17a2\u179f\u17cb\u179f\u17c6\u178e\u17be\u1785 or \u0bb5\u0bc7\u0b9f\u0bbf\u0b95\u0bcd\u0b95\u0bc8 \u0b8e\u0bb4\u0bc1\u0ba4\u0bcd\u0ba4\u0bc1\u0b95\u0bcd\u0b95\u0bb3\u0bcd or \u0e15\u0e31\u0e27\u0e15\u0e25\u0e01 or \u0627\u0644\u0623\u062d\u0631\u0641 \u0645\u0636\u062d\u0643 or \u05de\u05d0\u05b8\u05d3\u05e0\u05e2 \u05d0\u05d5\u05ea\u05d9\u05d5\u05ea or \u0ab0\u0aae\u0ac2\u0a9c\u0ac0 \u0a85\u0a95\u0acd\u0ab7\u0ab0\u0acb or \u03b1\u03c3\u03c4\u03b5\u03af\u03bf\u03c5\u03c2 \u03c7\u03b1\u03c1\u03b1\u03ba\u03c4\u03ae\u03c1\u03b5\u03c2 or \u0ca4\u0cae\u0cbe\u0cb7\u0cc6\u0caf \u0caa\u0cbe\u0ca4\u0ccd\u0cb0\u0c97\u0cb3\u0cc1 or \u09ae\u099c\u09be\u09b0 \u0985\u0995\u09cd\u09b7\u09b0 or \u0ea5\u0eb1\u0e81\u0eaa\u0eb0\u0e99\u0eb0 funny or \u0432\u044f\u0441\u0451\u043b\u044b\u044f \u043f\u0435\u0440\u0441\u0430\u043d\u0430\u0436\u044b or \u0c39\u0c3e\u0c38\u0c4d\u0c2f \u0c05\u0c15\u0c4d\u0c37\u0c30\u0c3e\u0c32\u0c41 … we’re going to call the game “Decoding Scrambled Words”<\/i> … and you score a point for each unscrambled set of words. It uses English words, based on the dictionary arrangements at its (web) server. Maybe it would be a good game to learn English vocabulary.<\/p>\n

Programmers often use Linux dictionary files<\/a> as a means to get a word list, and that list could be in any language, and for ours it is English, so to make it for another language, change the code inside the four file_get_contents() calls in decodewords.php<\/a><\/p>\n

This game<\/a> has two parts to it for PHP and Javascript to respectively get a word to use and arrange the user interaction.<\/p>\n

Hopefully you can figure the rules when you click the picture above for a live run<\/a>.<\/p>\n

Thank you to The Free Dictionary<\/a> for its great online presence as a dictionary resource, for the functionality to optionally explain a word’s dictionary meaning. The image map “click parts of the picture” vocabulary ESL tutorials<\/a> at this blog use the same resource to explain dictionary information about clicked on “things”.<\/p>\n

Anyway, see how you go with this game of interest and history!<\/p>\n

Anyway, see how you go with this game of logic and tactics!<\/p>\n

Maybe a view of this<\/a> could inspire you?!<\/p>\n

Here is a link to some downloadable PHP (with Javascript) programming code you could rename to decodewords.php<\/a><\/p>\n

If this was interesting you may be interested in this<\/a> too.<\/p>\n