Numbers Guessing Game
Your Numbers Game
Get
clueYour
answerYour
ScoreClue? Score 0/0
-
Recent Posts
- PHP Exif Quiz Geographicals Tutorial
- PHP Exif Quiz Tutorial
- PHP Exif Retention off iPhone Images Tutorial
- List to Grid Layout CSS Media Query Tutorial
- List to Grid Layout Primer Tutorial
- Out and About WordPress Blog Content Tweaks Just with iPhone Tutorial
- Command Line History By Date Tutorial
- Overseas Travel Global Roaming Mobile Primer Tutorial
Categories
- Ajax
- Android
- Animation
- Anything You Like
- Code::Blocks
- Coding
- Colour Matching
- Data Integration
- Database
- Delphi
- Eclipse
- eLearning
- ESL
- Event-Driven Programming
- Games
- GIMP
- GUI
- Hardware
- Installers
- iOS
- Land Surveying
- Moodle
- Music Poll
- NetBeans
- Networking
- News
- Not Categorised
- OOP
- Operating System
- Photography
- Projects
- Signage Poll
- Software
- SpectroPhotometer
- Tiki Wiki
- Trips
- Tutorials
- Uncategorized
- Visual Studio
- Xcode
Meta
Tags
Ajax animation background button canvas command line CSS Did you know DOM dropdown email emoji event form game Google Google chart hashtag HTML IFRAME image iOS Javascript MAMP media mobile navigation onclick overlay PHP popup programming select share sharing SMS SVG table text textarea tutorial url video web browser webpageYour Background Image
OnTopList
Tag Archives: geographicals
Colour Wheel Canvas Analogue Clock Background Blend Mode Tutorial
Revisiting the web application of Colour Wheel Canvas Analogue Clock Background Tutorial happened with the original idea to talk about … W3school’s How To Avatar Images webpage … and saw it was mainly a CSS border-radius:50%; way to show circular or elliptical (or oval) content, so moved on with this concept, thanks, and onto considering an “avatar” feel to our … Colour Wheel HTML and Javascript changed colour_wheel.html at this live run link, adding an “avatar” mode of elliptical analogue clock background, the images of which can now have, and show us, the use of the CSS background-blend-mode And with this, we recommend you try this “play around” link as well, we interfaced the web application to user usage by … turn a hardcoded “,” into a glowing (see Flowchart and Venn Diagram Glow Tutorial) “a” link (with no “href” property, so not navigational) that a click on will set “avatar mode” … and then … that “a” element’s innerHTML content is turned into a chance for the user to set a CSS background-blend-mode for the background images defaulting to “multiply” in the list … Value Description normal This is default. Sets the blending mode to normal multiply Sets the blending mode to multiply screen Sets the blending mode to screen overlay Sets the blending mode to overlay darken Sets the blending mode to darken lighten Sets the blending mode to lighten color-dodge Sets the blending mode to color-dodge saturation Sets the blending mode to saturation color Sets the blending mode to color luminosity Sets the blending mode to luminosity … that is turned into an HTML select (dropdown) element This background-blend-mode looks to be a pretty useful CSS property. Previous relevant Colour Wheel Canvas Analogue Clock Background Tutorial is shown below. Time and place are very suitable concepts for web application work such as that of yesterday’s Colour Wheel Canvas Analogue Clock Resize Tutorial. Today’s work introduces into this “Colour Wheel” (so far analogue clock) TimeZone functionality, to us a great nexus of time to place, and able to be helped out by serverside PHP DateTimeZone class. And what are the sources we use for this new “place” work? Wikipedia … and another “usual suspect” for us … Google Charts Map Chart has its internal menus that can get you to Google Maps maps And how do we present this new “place” work? We start using the HTML5 canvas … Continue reading
Posted in eLearning, Event-Driven Programming, Tutorials
Tagged avatar, background, background image, background-blend-mode, background-position, background-repeat, border-radius, canvas, colour, geographicals, Google, Google Charts, graphics, HTML, HTML5, IFRAME, Javascript, latitude, line, longitude, map, map chart, multiple, PATH, place, programming, resize, setTimeout, thickness, timezone, tutorial, wheel, Wikipedia
Leave a comment
Wikipedia Flipcard Quiz Emoji Tutorial
We wanted to do more integration on top of yesterday’s Wikipedia Flipcard Quiz Google Charts Tutorial integration with our Flipcards beginnings to our “Wikipedia Based Placename Flipcard Quiz” web application. Our two integration extension thoughts were to start involving … Google Maps YouTube videos … into our “Colour Wheel” child arrangements (and so, also to it standing alone, that you can read about with Colour Wheel Canvas Analogue Clock Background Tutorial) that gave us (“when”) TimeZone place information yesterday. But we realize, with integration like this, space can be at a premium, and we’ve decided with both these integrations above, that their “shopfronts” will just be two single emojis, eventually linking to (optionally used) window.open popup windows (that you may or may not allow on the web browser you are using) … as per … Google Maps 🗺 YouTube videos 📹 … the former a very easy “a” (within a “div” element) change, but the latter far more interesting in that it involves reducing down a whole inhouse interfacing web application (to the YouTube video via its Embedded Iframe API) to a single Emoji from having been a screen full of web application. So, for this, which components changed in which ways … the changed “parent” flip_card.html‘s live run link merely involves crediting our helperer outerers, thanks … whereas … the changed “child” colour_wheel.html‘s live run link … needed to … // Global variables var ytidea=’//www.rjmprogramming.com.au/HTMLCSS/karaoke_youtube_api.htm?youtubeid=++++San+Francisco&minimize=y&youtube_duration=&email=&emoji=on’; var gmidea=’//www.google.com/maps/place/Kaliningrad,+Kaliningrad+Oblast,+Russia/@54.7115288,20.324448,11z/’; //data=!3m1!4b1!4m5!3m4!1s0x46e33d8d4b7c21a9:0x5050960016126ed3!8m2!3d54.7104264!4d20.4522144′; // // New Javascript function // function lookforstz() { var gmi=gmidea; if (document.getElementById(‘stz’).innerHTML != ”) { document.getElementById(‘divideo’).innerHTML=”<iframe title=\”YouTube videos about ” + (document.getElementById(‘stz’).innerText || document.getElementById(‘stz’).contentWindow || document.getElementById(‘stz’).contentDocument) + “\” id=ivideo style=’display:inline-block;width:40px;height:30px;overflow:hidden;’ src='” + ytidea.replace(‘San+Francisco’,encodeURIComponent(” + (document.getElementById(‘stz’).innerText || document.getElementById(‘stz’).contentWindow || document.getElementById(‘stz’).contentDocument))) + ‘&ir=’ + Math.floor(Math.random() * 198765342) + “‘></iframe>”; gmi=gmi.replace(“Kaliningrad,+Kaliningrad+Oblast,+Russia”, (” + (document.getElementById(‘stz’).innerText || document.getElementById(‘stz’).contentWindow || document.getElementById(‘stz’).contentDocument)).replace(/\ /g, ‘+’)); if (xlongis < -900) { document.getElementById(‘divmap’).innerHTML=”<a onclick=\”window.open(‘” + gmi.split(‘@’)[0] + “‘,’_blank’,’top=20,left=20,width=700,height=500′);\” style=\”cursor:pointer;\” title=\”Google Maps\”>🗺</a>”; } else { gmi=gmi.replace(“54.7115288”, ylatis); gmi=gmi.replace(“20.324448″, xlongis); document.getElementById(‘divmap’).innerHTML=”<a onclick=\”” + gmi + “\” title=\”Google Maps\”>🗺</a>”; } } else { setTimeout(lookforstz, 1000); } } // // Onload logic Javascript function change // function onl() { var atend=false; document.getElementById(‘sele’).value=(location.search.split(‘mode=’)[1] ? decodeURIComponent(location.search.split(‘mode=’)[1].split(‘&’)[0]) : ”); if (bcol != ‘white’ && bcol.toLowerCase() == ‘transparent’) { document.getElementById(‘ourcanvas’).style.border=’1px solid ‘ + bcol.toLowerCase(); } if (done == 0) { if (document.URL.indexOf(‘mode=’) != -1) { if (document.getElementById(‘addthis’).value == ‘-0.0’) { document.getElementById(‘addthis’).value == ‘0.0’; setTimeout(lookforstz, 1000); // document.getElementById(‘divideo’).innerHTML=”<iframe id=ivideo style=’display:inline-block;width:30px;height:30px’ src='” + ytidea.replace(‘San+Francisco’,”) + “‘></iframe>”; } atend=true; } done … Continue reading
Posted in eLearning, Event-Driven Programming, GUI, Tutorials
Tagged background image, CSS, emoji, flipcard, geo chart, geographicals, geography, Google, Google Charts, Google Maps, HTML, image, integration, Javascript, map, PHP, place, placename, programming, quiz, score, software integration, timezone, w3schools, Wikipedia, YouTube
Leave a comment
Wikipedia Flipcard Quiz Google Charts Tutorial
Another big player for us with our web applications, especially those of the “where” (or geographical) variety, we thank, is … Google Chart’s Geo Chart … whereby we can “map” a place onto a world map to show context additional to existant functionality for yesterday’s Wikipedia Flipcard Quiz Primer Tutorial. And then to get even more context for our places, we make use of the fact that the list of places is actually a TimeZone list of places that means we can interface to … PHP TimeZone functionality … to incorporate a “when” factor into the mix for this work. This integration involves code from rjmprogramming.com.au domain interfaces to the useful public interfacings above, and so can integrate this via parent/child webpage supervisor/child iframe element arrangements. As you might surmise, you want to make all these new possibilities optional, pending an “OK” button press of a Javascript popup window confirm window to replace yesterday’s alert window. See how the changed flip_card.html‘s live run link now works these “where” and “when” functionality extensions. Previous relevant Wikipedia Flipcard Quiz Primer Tutorial is shown below. Two big “W” contributors for us in our research of the WWW Internet world are … W3schools … for HTML and Javascript and CSS and even PHP and SVG research, today, specifically, Flipcards (that contain place images on “heads” and hints for the user on “tails”) … and … Wikipedia … an online encyclopaedia for lots of research about anything, today our interest honed in on placename information Today, these two giants help us out with a quiz akin to that of the previous Overlay Iframe Remembering Textarea Client Quiz Wikipedia Tutorial in its Wikipedia “smarts”, but implementing W3schools flipcard “smarts”, to construct a quiz where the questions are visual clues, only, and the user can score points for correct answers via either a … select (dropdown) element containing an alphabetically sorted list of possibilities … or … textbox where the user can type their guess Sometimes the simple concepts are the best. We hope you think so too, as you try flip_card.html‘s live run link. Previous relevant Overlay Iframe Remembering Textarea Client Quiz Wikipedia Tutorial is shown below. With the Teletext Country Capital Quiz section of the functionality of the web application of Overlay Iframe Remembering Textarea Client Wikipedia Tutorial we wanted a different style of Wikipedia integration. We wanted to help out the user with their … Continue reading
Posted in eLearning, Event-Driven Programming, Tutorials
Tagged background image, CSS, flipcard, geo chart, geographicals, geography, Google, Google Charts, HTML, image, Javascript, map, PHP, place, placename, programming, quiz, score, timezone, w3schools, Wikipedia
Leave a comment
Colour Wheel Canvas Analogue Clock Background Tutorial
Time and place are very suitable concepts for web application work such as that of yesterday’s Colour Wheel Canvas Analogue Clock Resize Tutorial. Today’s work introduces into this “Colour Wheel” (so far analogue clock) TimeZone functionality, to us a great nexus of time to place, and able to be helped out by serverside PHP DateTimeZone class. And what are the sources we use for this new “place” work? Wikipedia … and another “usual suspect” for us … Google Charts Map Chart has its internal menus that can get you to Google Maps maps And how do we present this new “place” work? We start using the HTML5 canvas element “background” as the means to doing this, and we do this allowing for … multiple background images … eg. style=”background: URL([urlBackgroundImage1]), URL([urlBackgroundImage2]), URL([urlBackgroundImage3]);” … teamed with … background repeat … eg. style=”background-repeat: no-repeat;” … and positioning wise … background position … eg. rotational use of (the “float” feeling) left top,center top,right top,right center,right bottom,center bottom,left bottom,left center … leaving “center center” for your analogue clock (showing your TimeZone time) And now that TimeZones are involved, a hover over the canvas element can flesh out the day of the week in its depiction of that TimeZone’s current time. In and out of Wikipedia and/or using the PHP DateTimeZone class, geographical latitude and longitude becomes available to the programmer, and that is our conduit to interfacing to Google Charts Map Chart. You can retry today’s HTML and Javascript changed colour_wheel.html at this live run link. Previous relevant Colour Wheel Canvas Analogue Clock Resize Tutorial is shown below. “To resize, or not to resize, that is (often) the question.” In “web application land” this question’s answer often revolves around whether a “web application” is a “production tool”, needing to work for lots of platforms, in as many situations as possible. Today, adding to yesterday’s Colour Wheel Canvas Analogue Clock Primer Tutorial we were motivated to improve the … resizing of the window scenario … as per … <body align=”center” style=”background-color: lightblue;” onload=” onl();” onresize=”if (document.URL.indexOf(‘&’) != -1) { location.href=document.URL.replace(‘?x=’,’?xx=’).split(‘#’)[0].split(‘&x=’)[0] + ‘&x=’ + Math.floor(Math.random() * 12895643); } else if (document.URL.indexOf(‘?’) != -1) { location.href=document.URL.split(‘#’)[0].split(‘&’)[0] + ‘&x=’ + Math.floor(Math.random() * 12895643); } else { location.href=document.URL.split(‘#’)[0].split(‘?’)[0] + ‘?x=’ + Math.floor(Math.random() * 12895643); }”> … lead to partly because yesterday’s web application incarnation was not good with … embedding of the web application within an HTML (child) iframe … Continue reading
Posted in eLearning, Event-Driven Programming, Tutorials
Tagged background, background image, background-position, background-repeat, canvas, colour, geographicals, Google, Google Charts, graphics, HTML, HTML5, IFRAME, Javascript, latitude, line, longitude, map, map chart, multiple, PATH, place, programming, resize, setTimeout, thickness, timezone, tutorial, wheel, Wikipedia
Leave a comment
Ajax Auto-completion Internationalization Stay Tutorial
With yesterday’s Ajax Auto-completion Internationalization Trip Tutorial … we got to a destination on a trip … and today, as far as being online goes with this, we start thinking more about … your stay at that destination … new options today involving … accomodation via starting with a Google image search helper … weather via the wonderful Weather Underground API … inhouse Sunrise and Sunset information … inhouse Moon position and other planetary positioning … for those astronomy enthusiasts … via that Python and PHP work of PHP/Javascript/HTML and Python PyEphem Moon Angle Tutorial To do this we again rely on transference of data attributes between HTML Ajax created elements and the dynamically created “Trip Mode” select (dropdown) element. You can see some of this going into the Ajax created elements, as per … if (is_capital) { idname=” onclick=\” if (stopoffs.indexOf(this.value) != -1) { stopoffs=’~’; } if (accoms.indexOf(this.getAttribute(‘data-accom’)) == -1) { accoms+=this.id + ‘=’ + this.getAttribute(‘data-accom’) + ‘~’; } if (weathers.indexOf(this.getAttribute(‘data-weatherurl’).replace(‘EncodedPlaceGoesHere’,encodeURIComponent(‘” + myThisDiv.innerHTML.split(‘,’)[0] + “‘))) == -1) { weathers+='” + myThisDiv.innerHTML + “‘.toLowerCase().split(‘ (‘)[0].replace(/\ /g,’_’) + ‘=’ + this.getAttribute(‘data-weatherurl’).replace(‘EncodedPlaceGoesHere’,encodeURIComponent(‘” + myThisDiv.innerHTML.split(‘,’)[0] + “‘)) + ‘~’; } stopoffs+=this.value + ‘~’;\” name=\”” + myThisCapital.toLowerCase().split(‘ (‘)[0].replace(/\ /g,’_’) + “\” id=\”” + myThisDiv.innerHTML.toLowerCase().split(‘ (‘)[0].replace(/\ /g,’_’) + “\” data-accom=\”” + (myThisDiv.innerHTML.toLowerCase().split(‘ (‘)[0] + ‘, ‘ + myThisCapital.toLowerCase().split(‘ (‘)[0]).replace(/\ /g,’+’) + “\” “; } else { idname=” onclick=\”if (stopoffs.indexOf(this.value) != -1) { stopoffs=’~’; } if (accoms.indexOf(this.getAttribute(‘data-accom’)) == -1) { accoms+=this.id + ‘=’ + this.getAttribute(‘data-accom’) + ‘~’; } if (weathers.indexOf(this.getAttribute(‘data-weatherurl’).replace(‘EncodedPlaceGoesHere’,encodeURIComponent(‘” + myThisDiv.innerHTML.split(‘,’)[0] + “‘))) == -1) { weathers+='” + myThisDiv.innerHTML + “‘.toLowerCase().split(‘ (‘)[0].replace(/\ /g,’_’) + ‘=’ + this.getAttribute(‘data-weatherurl’).replace(‘EncodedPlaceGoesHere’,encodeURIComponent(‘” + myThisDiv.innerHTML.split(‘,’)[0] + “‘)) + ‘~’; } stopoffs+=this.value + ‘~’;\” id=\”” + myThisCapital.toLowerCase().split(‘ (‘)[0].replace(/\ /g,’_’) + “\” name=\”” + myThisDiv.innerHTML.toLowerCase().split(‘ (‘)[0].replace(/\ /g,’_’) + “\” data-accom=\”” + (myThisCapital.toLowerCase().split(‘ (‘)[0] + ‘, ‘ + myThisDiv.innerHTML.toLowerCase().split(‘ (‘)[0]).replace(/\ /g,’+’) + “\” “; } … and then transferred up into the dynamically created “Trip Mode” select (dropdown) element (ie. the one with multiple entry abilities (by this time)), as per … function loadifsrc(iois) { var xintstuff=”, latlong=”; if (iois.src != ”) { var aconto = (iois.contentWindow || iois.contentDocument); if (aconto != null) { if (aconto.document) { aconto = aconto.document; } if (iois.src.indexOf(‘tdinto=’) != -1) { xintstuff=document.getElementById(iois.src.split(‘tdinto=’)[1].split(‘&’)[0]).innerHTML; } else { xintstuff=aconto.body.innerHTML; } //alert(xintstuff); if (xintstuff.indexOf(‘ data-geo=”‘) != -1) { latlong=xintstuff.split(‘ data-geo=”‘)[1].split(‘”‘)[0]; if ((” + iois.title).indexOf(‘countryname=’) != -1 && (” + iois.title).indexOf(‘~’) != -1) { if (accoms.indexOf(” + (” + iois.title).split(‘~’)[1] + ‘=’) != -1) … Continue reading
Posted in Ajax, eLearning, Event-Driven Programming, Trips, Tutorials
Tagged Ajax, API, autocompletion, collaboration, div, dropdown, email, email client, emoji, geo chart, geographicals, Google, Google Charts, Google Maps, hover, HTML Global Attributes, IFRAME, indexOf, Javascript, keyboard, long hover, lowercase, mailto, map, map chart, multiple, onions, onkeypress, onmouseout, onmouseover, optional, programming, select, setTimeout, share, sharing, table, timezone, trip, trip planner, tutorial, uppercase, weather, Wikipedia
Leave a comment
Ajax Auto-completion Internationalization Trip Tutorial
We add onto yesterday’s Ajax Auto-completion Internationalization Capitals Tutorial some Trip Planning functionality today. Don’t know about you, but we find ourselves mulling over maps for hours, wondering about far off lands. Now that Google Maps makes it so easy to deal with … map detail around a single place … it also … in “Directions” mode Google Maps becomes a trip planning tool par excellence … and so we harness that, along with the newly introduced … allow for integration of inhouse Timezone Places web application … so that when the user chooses the “Country” button display mode (rather than the “Capital” button display mode) they see Country Timezone Webpage Child Iframes lined up from left to right, to … get ideas of the “when” of timezones … incorporating … the inhouse menus (with suboptions like “Weather”) interfacing to the great Google Charts Map Chart maps … to try to meld a bit of “when” with “where”, two of the important concepts when it comes to trippingtrips. Remember that Google Maps can be used to visit a place ahead of time and download a set of “offline maps” that do not require WiFi later to access, as those caught out by huge (accidental and “in all innocence”) global roaming phone bills can probably attest to. Getting this going, in broad brush terms, what did we do? well, the dogs got up pretty early and needed feeding … then the cat came along, like “Lord Muck” … and so … the fish gave me sideways glances until “fish flaked” … when they then looked out at 2:15 or maybe 4:45 or is that one at 14:30 … … but we digress … we need latitude and longitude geographicals in order to display the map data … and so in the … newly included (in the top h1 header element) we have an HTML select element dropdown … function sadd(inih) { var purlis=”, psuffix=”; if (inih.indexOf(“‘s the capital city of “) != -1) { if (inih.indexOf(‘#’) != -1) { psuffix=’ (‘ + inih.split(‘#’)[1] + ‘)’; } purlis=document.URL.split(‘#’)[0].split(‘?’)[0] + ‘?capital=’ + encodeURIComponent(inih.split(‘#’)[0].split(‘ (‘)[0].split(“‘s “)[0].replace(‘, ‘,’,_’).replace(/\ /g,’_’)) + ‘#’ + encodeURIComponent(inih.split(“‘s the capital city of “)[1].replace(‘, ‘,’,_’).replace(/\ /g,’_’) + psuffix); } else if (inih.indexOf(“‘s capital city is “) != -1) { purlis=document.URL.split(‘#’)[0].split(‘?’)[0] + ‘?country=’ + encodeURIComponent(inih.split(‘#’)[0].split(‘ (‘)[0].split(“‘s “)[0].replace(‘, ‘,’,_’).replace(/\ /g,’_’)) + ‘#’ + encodeURIComponent(inih.split(“‘s capital city is “)[1].replace(‘, ‘,’,_’).replace(/\ /g,’_’) + psuffix); } … Continue reading
Posted in Ajax, eLearning, Event-Driven Programming, Trips, Tutorials
Tagged Ajax, autocompletion, collaboration, div, dropdown, email, email client, emoji, geo chart, geographicals, Google, Google Charts, Google Maps, hover, IFRAME, indexOf, Javascript, keyboard, long hover, lowercase, mailto, map, map chart, multiple, onions, onkeypress, onmouseout, onmouseover, optional, programming, select, setTimeout, share, sharing, table, timezone, trip, trip planner, tutorial, uppercase, Wikipedia
Leave a comment


Thanks. Since then, a Shower Songs project at https://www.rjmprogramming.com.au/HTMLCSS/shower_songs.html is an improvement regarding "Radio Play" on mobile platforms.