{"id":54949,"date":"2022-02-20T03:01:42","date_gmt":"2022-02-19T17:01:42","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=54949"},"modified":"2022-02-20T18:34:07","modified_gmt":"2022-02-20T08:34:07","slug":"start-word-suggestions-for-wordle-intersessional-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/start-word-suggestions-for-wordle-intersessional-tutorial\/","title":{"rendered":"Start Word Suggestions for Wordle Intersessional Tutorial"},"content":{"rendered":"
\"Start<\/a>

Start Word Suggestions for Wordle Intersessional Tutorial<\/p><\/div>\n

Yesterday’s English Word Guessing Game Intranet Tutorial<\/a>‘s use of window.localStorage<\/a> methodologies got us rethinking the “Start Word for Wordle<\/a>” ideas in the recent Start Word Suggestions for Wordle Sort Tutorial<\/a>‘s web application.<\/p>\n

Those, again, Javascript prompt<\/a> window driven user interactions, are a tad annoying to handle, but if they could be “standing order”ised then that might help. Here we need to store the setting in the web browser, hence the use of HTTP Cookies or window.localStorage<\/a> (or window.sessionStorage).<\/p>\n

Along the way, we wanted to offer another option, “common”, to be a user definable setting saying that words suggested would have to be “ridgy didge” in The Free Dictionary<\/a>, thanks, lexicon.<\/p>\n

Getting this going, we realized this might take longer, and when the word “longer” comes into play, we (tend to) think (as you would)<\/font> …<\/p>\n


\ndocument.body.style.cursor='progress';
\n<\/code><\/p>\n

… to signal to the user that processing may take some time. And for the first time we can remember, we were interested in floating to the right of that “spinning ball” progress<\/i> cursor some reason for the wait, that being a (most likely rearranged) version of the Javascript prompt<\/a> window entry the user made.<\/p>\n

At the Javascript function onl()<\/i> document.body “onload” event logic, changes made<\/font> augment the new “just before <\/body>” <div id=cwords><\/div> initially static HTML element …<\/p>\n

<?php echo ”
\n
\n var pointerX = -1;
\n var pointerY = -1;
\n
\n function pointerCheck() {
\n\tif (pointerX != -1) {
\n\t document.getElementById('cwords').style.position='absolute';
\n\t document.getElementById('cwords').style.top='' + eval(0 + eval('' + pointerY)) + 'px';
\n\t document.getElementById('cwords').style.left='' + eval(30 + eval('' + pointerX)) + 'px';
\n\t document.getElementById('cwords').style.zIndex='99';
\n\t document.getElementById('cwords').style.backgroundColor='orange';
\n\t document.getElementById('cwords').innerHTML=document.getElementById('lsbits').title;
\n\t}
\n }<\/font>
\n

\n function onl() {
\n if (('' + localStorage.getItem('start_word_for_wordle_helper')).replace(\/^null$\/g,'') != '') {
\n document.getElementById('lsbits').title=decodeURIComponent(localStorage.getItem('start_word_for_wordle_helper')).replace('&sugnum=',' ').replace(encodeURIComponent('&sugnum='),' ');
\n if (document.URL.indexOf('others=') == -1) {
\n document.body.style.cursor='progress';
\n document.onmousemove = function(event) { \/\/ thanks to https:\/\/www.codegrepper.com\/code-examples\/javascript\/get+cursor+position+javascript<\/a>
\n if (event.clientX || event.clientY) {
\n pointerX = event.clientX;
\n pointerY = event.clientY;
\n } else {
\n\t pointerX = event.pageX;
\n\t pointerY = event.pageY;
\n\t }
\n };
\n setInterval(pointerCheck, 1000);
\n location.href=(document.URL + '&others=' + (localStorage.getItem('start_word_for_wordle_helper'))).replace('.php&','.php?').replace(encodeURIComponent('&sugnum='),'&sugnum=');
\n }
\n }<\/font>
\n
\n if (window.self !== window.top) {
\n document.body.innerHTML = ('' + document.body.innerHTML).replace(\/h1\/g, 'h2');
\n }
\n makesortable();
\n }
\n<\/code>
\n“; ?><\/p>\n

… help make this happen.<\/p>\n

All this can give the changed<\/a> start_word_for_wordle_helper.php<\/a> live run<\/a> an intersessional personalization feel to it.<\/p>\n

\n

\n

Previous relevant Start Word Suggestions for Wordle Iframe Tutorial<\/a> is shown below.<\/p>\n

\"Start<\/a>

Start Word Suggestions for Wordle Iframe Tutorial<\/p><\/div>\n

Yesterday’s Start Word Suggestions for Wordle Styling and Scripting Tutorial<\/a>‘s presentation used a hashtag navigation link, “or below<\/a>“, to take the user to an HTML iframe hosted execution of our current web application of interest. Sometimes in such a scenario, you might be dealing with a vastly reduced width and\/or height to work with, and find your presentation to this iframe appears a bit too wide or too high. And so, today, we outline an idea or two about how to handle that.<\/p>\n

    \n
  1. decide on a strategy for “iframe” modus operandi CSS styling improvement or HTML design improvement or Javascript DOM dynamic styling improvement … we’ve decided, today …<\/li>\n
  2. for “iframe” modus operandi we want to reduce width by turning the “h1” element into an “h2” element … which amounts to an HTML design improvement<\/i> implemented via a Javascript DOM action conduit, as per …<\/li>\n
  3. decide on an intervention point for that Javascript DOM action conduit<\/i> … you guessed it … document.body onload event as the webpage loads<\/font> …
    \n<?php
    \n
    \necho \"<html>\" . $hsc . \"<body onload=onl();<\/font>><h1><span>Start five letter word for <a target=_blank href='\/\/www.powerlanguage.co.uk\/wordle\/'>Wordle<\/a> ... <\/span><input onclick=mixitup(); title='Allow for Unique Letters, Weirdness Sorting' type=button style=display:inline-block; value='via '><\/input><\/span><form id=myform style=display:inline-block; action=.\/start_word_for_wordle_helper.php method=POST><input id=mysub type=submit value=Submit style=display:none;><\/input><select style=display:inline-block; id=sugnum name=sugnum onchange=document.getElementById('mysub').click();><option id=defopt value=-\" . $sugnum . \">\" . $sugnum . \"<\/option><option value=1>1<\/option><option value=2>2<\/option><option value=3>3<\/option><option value=4>4<\/option><option value=5>5<\/option><option value=6>6<\/option><option value=7>7<\/option><option value=8>8<\/option><option value=9>9<\/option><option value=10>10<\/option><option value=20>20<\/option><option value=25>25<\/option><option value=50>50<\/option><option value=100>100<\/option><\/select><span> suggestions ...<\/span><\/h1><h3>RJM Programming ... February, 2022<\/h3><h4>Suggestions below (bigger associated number, the weirder is the suggestion) ...<\/h4><br>\" . $tablebit . \"<\/body><\/html>\";
    \n<\/code>
    \n?>
    \n … then …<\/li>\n
  4. write the new Javascript document.body onload event logic …
    \n<?php echo ”
    \n
    \n function onl() {
    \n if (window.self !== window.top) {
    \n document.body.innerHTML = ('' + document.body.innerHTML).replace(\/h1\/g, 'h2');
    \n }
    \n }
    \n<\/code>
    \n“; ?>
    \n … a total “document.body.innerHTML” (content) solution working here (but is not always a good solution) to change the “type” of an element\n<\/li>\n<\/ol>\n

    … representing a “hosting mode of use” style variation with our changed<\/a> start_word_for_wordle_helper.php<\/a> live run<\/a> link, or below<\/a>, web application!<\/p>\n

    \n

    \n

    Previous relevant Start Word Suggestions for Wordle Styling and Scripting Tutorial<\/a> is shown below.<\/p>\n

    \"Start<\/a>

    Start Word Suggestions for Wordle Styling and Scripting Tutorial<\/p><\/div>\n

    Yesterday’s Start Word Suggestions for Wordle Primer Tutorial<\/a> proof of concept “Start Five Letter Word for Wordle<\/a> Suggester” web application managed to create a workable webpage that did not need a “head”<\/a> element. What are you missing with no “head” element? Primarily …<\/p>\n