Tag Archives: innerHTML

HTML Square Horizontal Rule Editable Image Map Jigsaw Tutorial

Posted on by

Adding to yesterday’s HTML Square Horizontal Rule Image Map Jigsaw Tutorial, today we add logic to be able to … Edit the image map via an HTML div contenteditable=true element showing the image map’s outerHTML representation … as well as … Execute a new window of that image map in action, via an onclick event on the HTML textarea captured entire HTML for a working image map (that you could Copy and Paste and work on yourself separately should you prefer to work it that way, too) … as well as “rubberbanding” for non-mobile platforms (alas, more work for mobile platforms here), which is achieved by coding event logic for the onmousemove event (and readying the mobile platform ontouchmove event). “Rubberbanding” is the prediction of one of your image map (shape=”rect”) area subelements ahead of it being written to the image map that happens after your top left click and proceeding to temporarily define the proposed area as a dashed HTML div element overlayed over your image. It is the scrolling of that image to reach other parts and requires scrolling that needs more thought soon regarding mobile platform improvements. Why “rubberband”? Well, if we are expecting you to create an entire “jigsaw” of area subelements, you’ll need some “lining up” mechanisms to assist you, we figure. So please try for yourself, via the top yellow button click, with the changed square_hr_tracing.htm‘s Image Map Jigsaw Guillotine live run link, for your perusal. Previous relevant HTML Square Horizontal Rule Image Map Jigsaw Tutorial is shown below. We like the image editor GIMP’s Guillotine functionality we last talked about at Gimp Guillotine Follow Up Memory Tutorial and wanted to start out creating image maps in a similar vein, and remembering back to hard copy digitizing days and incorporating the idea of “snap” onto an existant co-ordinate, so that we felt like swapping “Guillotine” with “:Jigsaw” in the title of today’s tutorial. It is early days on this project, but we found a good place to launch from, namely the recent HTML Square Horizontal Rule Tracing Image Reveal Game Tutorial where we worked with background images, whereas today we work with … HTML img elements underpinning the … HTML map element we help the user create full of HTML area shape=”rect” elements … as you may recall GIMP Guillotine functionality also has as one of its functionality features. Please try for yourself, via … Continue reading →

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

HTML Square Horizontal Rule Image Map Jigsaw Tutorial

Posted on by

We like the image editor GIMP’s Guillotine functionality we last talked about at Gimp Guillotine Follow Up Memory Tutorial and wanted to start out creating image maps in a similar vein, and remembering back to hard copy digitizing days and incorporating the idea of “snap” onto an existant co-ordinate, so that we felt like swapping “Guillotine” with “Jigsaw” in the title of today’s tutorial. It is early days on this project, but we found a good place to launch from, namely the recent HTML Square Horizontal Rule Tracing Image Reveal Game Tutorial where we worked with background images, whereas today we work with … HTML img elements underpinning the … HTML map element we help the user create full of HTML area shape=”rect” elements … as you may recall GIMP Guillotine functionality also has as one of its functionality features. Please try for yourself, via the top yellow button click, with the changed square_hr_tracing.htm‘s Image Map Jigsaw Guillotine live run link. And you may want to follow back through recent “”HTML Square Horizontal Rule” blog thread postings from HTML Square Horizontal Rule Memories Card Game Tutorial below. Previous relevant HTML Square Horizontal Rule Memories Card Game Tutorial is shown below. Back to the grid and line and vertex work of the recent HTML Square Horizontal Rule Graph Multiple Numerics Tutorial, today we add on some functionality to its underlying web application’s grid underpinnings which is a card game called Memories, where two players take turns trying to find matching pairs from cards turned face down, but shown during each player’s turn. As you’d expect with game work in Javascript we have codelines like … mm = Math.floor(Math.random() * 52); … to put into mm an index for an array of 52 members of a card deck array, as the Memories game uses one card deck. And so, to start the Memories game in Javascript below, a call of memories(”); … var memnames = [“Player 1”, “Player 2”]; var memcard = [“”, “”]; var memcardio = [null, null]; var thispicture = 0, memplayer = 1, memturn = 1; var memtricks = [0, 0]; var memscores = [0, 0]; var memgoes = [0, 0]; var usedcards = []; var deckcards = []; var of100 = []; var sdeckcards = []; var defcard = “images/back01.gif”; var mypictures = new Array(“images/01c.gif”, “images/01d.gif”, “images/01h.gif”, “images/01s.gif”, “images/02c.gif”, “images/02d.gif”, “images/02h.gif”, “images/02s.gif”, “images/03c.gif”, “images/03d.gif”, “images/03h.gif”, “images/03s.gif”, “images/04c.gif”, “images/04d.gif”, … Continue reading →

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

HTML Square Horizontal Rule Memories Card Game Tutorial

Posted on by

Back to the grid and line and vertex work of the recent HTML Square Horizontal Rule Graph Multiple Numerics Tutorial, today we add on some functionality to its underlying web application’s grid underpinnings which is a card game called Memories, where two players take turns trying to find matching pairs from cards turned face down, but shown during each player’s turn. As you’d expect with game work in Javascript we have codelines like … mm = Math.floor(Math.random() * 52); … to put into mm an index for an array of 52 members of a card deck array, as the Memories game uses one card deck. And so, to start the Memories game in Javascript below, a call of memories(”); … var memnames = [“Player 1”, “Player 2”]; var memcard = [“”, “”]; var memcardio = [null, null]; var thispicture = 0, memplayer = 1, memturn = 1; var memtricks = [0, 0]; var memscores = [0, 0]; var memgoes = [0, 0]; var usedcards = []; var deckcards = []; var of100 = []; var sdeckcards = []; var defcard = “images/back01.gif”; var mypictures = new Array(“images/01c.gif”, “images/01d.gif”, “images/01h.gif”, “images/01s.gif”, “images/02c.gif”, “images/02d.gif”, “images/02h.gif”, “images/02s.gif”, “images/03c.gif”, “images/03d.gif”, “images/03h.gif”, “images/03s.gif”, “images/04c.gif”, “images/04d.gif”, “images/04h.gif”, “images/04s.gif”, “images/05c.gif”, “images/05d.gif”, “images/05h.gif”, “images/05s.gif”, “images/06c.gif”, “images/06d.gif”, “images/06h.gif”, “images/06s.gif”, “images/07c.gif”, “images/07d.gif”, “images/07h.gif”, “images/07s.gif”, “images/08c.gif”, “images/08d.gif”, “images/08h.gif”, “images/08s.gif”, “images/09c.gif”, “images/09d.gif”, “images/09h.gif”, “images/09s.gif”, “images/10c.gif”, “images/10d.gif”, “images/10h.gif”, “images/10s.gif”, “images/11c.gif”, “images/11d.gif”, “images/11h.gif”, “images/11s.gif”, “images/12c.gif”, “images/12d.gif”, “images/12h.gif”, “images/12s.gif”, “images/13c.gif”, “images/13d.gif”, “images/13h.gif”, “images/13s.gif” ); function latersrc() { // delayed scoring allowing for peek at second card picked by player memcardio[1].src=memcard[1]; memcard[1]=memcard[1].split(‘/’)[eval(-1 + memcard[1].split(‘/’).length)]; if (memcard[0].substring(0,2) == memcard[1].substring(0,2)) { memcardio[0].style.visibility=’hidden’; memcardio[1].style.visibility=’hidden’; memscores[eval(-1 + memplayer)]++; memgoes[eval(-1 + memplayer)]++; document.getElementById(‘qh4’).innerHTML=preqh4 + ‘Yay! <div style=”display:inline-block;” contenteditable=true onchange=”memnames[‘ + eval(-1 + memplayer) + ‘]=this.innerHTML;” onblur=”memnames[‘ + eval(-1 + memplayer) + ‘]=this.innerHTML;”>’ + memnames[eval(-1 + memplayer)] + ‘</div> <sup>’ + memscores[eval(-1 + memplayer)] + ‘/’ + memgoes[eval(-1 + memplayer)] + ‘</sup> (vs ‘ + ‘<div style=”display:inline-block;” contenteditable=true onchange=”memnames[‘ + eval(1 – eval(memplayer – 1)) + ‘]=this.innerHTML;” onblur=”memnames[‘ + eval(1 – eval(memplayer – 1)) + ‘]=this.innerHTML;”>’ + memnames[eval(1 – eval(memplayer – 1))] + ‘</div> <sup>’ + memscores[eval(1 – eval(memplayer – 1))] + ‘/’ + memgoes[eval(1 – eval(memplayer – 1))] + ‘</sup>) continue to try to pick pair(s)’; memturn=1; if (eval(eval(” + memscores[0]) + eval(” + memscores[1])) >= 26) { alert(document.getElementById(‘qh4’).textContent.split(‘ continue to try to pick pair(s)’)[0] + ‘ … ready for new game?’).replace(‘Vertex Pointing or SOS (for two) or ‘,”); memories(”); } … Continue reading →

Posted in eLearning, Event-Driven Programming, Games, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

HTML Square Horizontal Rule Graph Multiple Numerics Tutorial

Posted on by

We feel an “onions of the 4th dimension” sneeze moment coming on. Yes, yesterday’s HTML Square Horizontal Rule Four Graphs Tutorial “Four Graphs” were all fine and good, but as of yesterday, their data was restricted to one numerical dimension and another dimension that could be a string or numerical, but what if you have an interest in BArts and BScience and BLaw, just say, well, what do you say?! anyone, anyone? … yes, Efrem Zimbalist Jr … we allow for … one character or numerical standalone field (perhaps for our budding BCows) … and, as of today, allow for … one or more numerical fields … the only hint for which you get “running this show” is that a Javascript variable … var origphsuffix=” (and optionally keep the semicolon delimitation going for more numerical field Labels)”; … is now appended onto the textbox placeholder property when asking its second Graphs question about the labelling. Such a small thing for such pain over a day! But rest assured Daffy Duck is put to work making the code work properly. To see the four graphs (with onions on the side) in action please don’t be shy trying the changed square_hr_tracing.htm‘s Bar Graph live run or Area Graph live run or Line Graph live run or Column Graph live run link. We’ll leave you with a this worked example also shown below … Previous relevant HTML Square Horizontal Rule Four Graphs Tutorial is shown below. Yesterday’s Mathematical Induction n + 1 feeling HTML Square Horizontal Rule Line Graph Tutorial dealt with the simpler two … Column Graph Line Graph … the scaffolding needed for today’s harder work to add functionality for … Area Graph Bar Graph … where … Area Graph challenge primarily revolved around how to create polygonal backgrounds, and here we got great help from both encasing SVG within an absolutely positioned HTML div in order to control SVG positioning (thanks heaps) and regarding Area Chart looks to end up with some Area Graph only Javascript … if (document.getElementById(‘h1column’).innerHTML == ‘Area’) { // thanks to https://stackoverflow.com/questions/41988955/absolute-positioning-of-svg-element-not-working and https://datavizcatalogue.com/methods/area_graph.html var mintop=Math.min(eval(” + document.getElementById(‘hrlg’ + lasthr).style.top.replace(‘px’,”)), eval(” + document.getElementById(‘hrlg’ + hrlgcnt).style.top.replace(‘px’,”))); var minleft=Math.min(eval(” + document.getElementById(‘hrlg’ + lasthr).style.left.replace(‘px’,”)), eval(” + document.getElementById(‘hrlg’ + hrlgcnt).style.left.replace(‘px’,”))); var thisheight=Math.abs(zerozeroy – mintop); var thiswidth=Math.abs(eval(” + document.getElementById(‘hrlg’ + lasthr).style.left.replace(‘px’,”)) – eval(” + document.getElementById(‘hrlg’ + hrlgcnt).style.left.replace(‘px’,”))); var az='<div class=”svg-container” style=”opacity:0.5;position:absolute;top:’ + Math.floor(eval(14 + mintop)) + ‘px;left:’ + Math.floor(minleft) + ‘px;width:’ … Continue reading →

Posted in eLearning, Event-Driven Programming, Not Categorised, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

HTML Square Horizontal Rule Four Graphs Tutorial

Posted on by

Yesterday’s Mathematical Induction n + 1 feeling HTML Square Horizontal Rule Line Graph Tutorial dealt with the simpler two … Column Graph Line Graph … the scaffolding needed for today’s harder work to add functionality for … Area Graph Bar Graph … where … Area Graph challenge primarily revolved around how to create polygonal backgrounds, and here we got great help from both encasing SVG within an absolutely positioned HTML div in order to control SVG positioning (thanks heaps) and regarding Area Chart looks to end up with some Area Graph only Javascript … if (document.getElementById(‘h1column’).innerHTML == ‘Area’) { // thanks to https://stackoverflow.com/questions/41988955/absolute-positioning-of-svg-element-not-working and https://datavizcatalogue.com/methods/area_graph.html var mintop=Math.min(eval(” + document.getElementById(‘hrlg’ + lasthr).style.top.replace(‘px’,”)), eval(” + document.getElementById(‘hrlg’ + hrlgcnt).style.top.replace(‘px’,”))); var minleft=Math.min(eval(” + document.getElementById(‘hrlg’ + lasthr).style.left.replace(‘px’,”)), eval(” + document.getElementById(‘hrlg’ + hrlgcnt).style.left.replace(‘px’,”))); var thisheight=Math.abs(zerozeroy – mintop); var thiswidth=Math.abs(eval(” + document.getElementById(‘hrlg’ + lasthr).style.left.replace(‘px’,”)) – eval(” + document.getElementById(‘hrlg’ + hrlgcnt).style.left.replace(‘px’,”))); var az='<div class=”svg-container” style=”opacity:0.5;position:absolute;top:’ + Math.floor(eval(14 + mintop)) + ‘px;left:’ + Math.floor(minleft) + ‘px;width:’ + Math.floor(thiswidth) + ‘px;height:’ + Math.floor(thisheight) + ‘px;”><svg height=”100%” width=”100%”><polygon points=”‘; //0,0 ‘ + Math.floor(eval(” + dwl) + eval(eval(” + dw) / 2)) + ‘,0 ‘ + Math.floor(eval(” + dwl) + eval(eval(” + dw) / 2)) + ‘,’ + Math.floor(eval(yfactor * eval(eval(” + yvalue) – eval(” + yoffset)))) + ‘ ‘ + Math.floor(eval(” + dwl) + eval(eval(” + dw) / 2)) + ‘,’ + Math.floor(eval(yfactor * eval(eval(” + yvalue) – eval(” + yoffset)))) + ‘” style=”fill:lime;stroke:purple;stroke-width:1″ /></svg></div>’; az+=” + Math.floor(eval(” + document.getElementById(‘hrlg’ + lasthr).style.left.replace(‘px’,”)) – minleft) + ‘,’; az+=” + Math.floor(eval(” + document.getElementById(‘hrlg’ + lasthr).style.top.replace(‘px’,”)) – mintop) + ‘ ‘; az+=” + Math.floor(eval(” + document.getElementById(‘hrlg’ + hrlgcnt).style.left.replace(‘px’,”)) – minleft) + ‘,’; az+=” + Math.floor(eval(” + document.getElementById(‘hrlg’ + hrlgcnt).style.top.replace(‘px’,”)) – mintop) + ‘ ‘; az+=” + Math.floor(eval(” + document.getElementById(‘hrlg’ + hrlgcnt).style.left.replace(‘px’,”)) – minleft) + ‘,’; az+=” + Math.floor(eval(eval(eval(” + zerozeroy)) – mintop)) + ‘ ‘; az+=” + Math.floor(eval(” + document.getElementById(‘hrlg’ + lasthr).style.left.replace(‘px’,”)) – minleft) + ‘,’; az+=” + Math.floor(eval(eval(eval(” + zerozeroy)) – mintop)) + ‘ ‘; az+='” style=”fill:’ + acol + ‘;stroke:purple;stroke-width:1″ /></svg></div>’; document.getElementById(‘daxes’).innerHTML+=az; } … half the day gone … while … Bar Graph challenge was the posterior-about-visage way X is Y and Y is X about it, and deciding on a messaging strategy, that being in broad brush terms … sending out a URL into an email link URL the order of first and second items in any semicolon separated data is reversed (so as to fit in with the other 3 … Continue reading →

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | 1 Comment

HTML Square Horizontal Rule Line Graph Tutorial

Posted on by

Software integration work, whether it be internally in amongst your own code, or externally, integrating with APIs and our software sharing arrangements, needs to be approached systematically, and not in a rush. As such, we find the general idea of mathematical induction, as we first came across in high school mathematics … The method of induction requires two cases to be proved. The first case, called the base case (or, sometimes, the basis), proves that the property holds for the number 0. The second case, called the induction step, proves that, if the property holds for one natural number n, then it holds for the next natural number n + 1. These two steps establish the property P(n) for every natural number n = 0, 1, 2, 3, … The base step need not begin with zero. Often it begins with the number one, and it can begin with any natural number, establishing the truth of the property for all natural numbers greater than or equal to the starting number. … both a useful way to approach many of these software integration jobs, as well as almost forcing calm, and the absence of dangerous rushing, with the coding tasks at hand. Yes, proving anything for one case, yesterday’s HTML Square Horizontal Rule Column Graph Tutorial one being Column Graphs, is all well and good, but it would be dangerous to step straight to integrate all four that we intend to do (those being Column, Line, Bar, Area Graphs), in one step. As mathematical induction would tell us, prove it for n + 1, that being Line Graphs in today’s case. When you integrate for n + 1 you almost invariably sort out … HTML element type requirements for your current integration drive sharing arrangement nuances, including those coming back from email links data and display code places for where to differentiate, and to come back to when we start integrating the other two Graph types later navigation requirements within the domain of the web application, for us with this work, mainly centering around manipulations of Javascript location.hash containing the parts of a URL including and after the hash (ie. #) character … matters that should not be rushed when several options of functionality are flying about being integrated (no doubt on the “flying about being integrated” cycle). And so, even though what differentiates a Column Graph from a Line Graph … Continue reading →

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

HTML Square Horizontal Rule Column Graph Tutorial

Posted on by

We follow up yesterday’s HTML Square Horizontal Rule Plot Polynomial Tutorial mathematical theme with a mathematics meets statistics theme, today, writing some functionality to create Column Graphs. Like with the Plot functionalities we like having the vertices there, but that little bit different is that we make those vertex helpers disappear once the Column Graph has been created, and perhaps, shared, via similar Email sharing logic to that introduced yesterday. Identical to Like yesterday we have 3 parts to user input involving that one textbox again … four comma separated fields involves a plot range entry (Column Graph) Title, Number of data sets, Minimum Y (numerical), Maximum Y … whereas … three comma two semicolon separated fields involves a polynomial equation entry X-Axis label; Y-Axis label (for numerical) … whereas … two comma semicolon separated fields involves a linear equation X value; Y value ask for each of the (Number of) data sets As you would know if you think about a Column Graph it is debatable on the X-Axis (non-numerical) labelling if you … try to fit the X-Axis labels in below the column (that we randomly colour with opacity 0.5) … or … create a legend … and we’ve decided on the former, but may reserve final judgement on this over time, perhaps writing code later to determine which approach would look better, and use that approach when apt. We’ll see. We’d like to thank this useful link for the inspiration with today’s tutorial picture of this worked example (where a trap for young players sees us setting the Maximum Y value from 40 to 45 (as a multiple of 9 (Y-axis segments left for graph (after surrounds)) to avoid “decimal fractions of people”) also shown below … Early days, but interesting days, and it goes without saying, we would listen to your feedback on trying the changed square_hr_tracing.htm‘s Column Graph live run link. Previous relevant HTML Square Horizontal Rule Plot Polynomial Tutorial is shown below. Yesterday’s HTML Square Horizontal Rule Plot Axes Tutorial start with … linear equation plotting … has been extended today (by one dimension) to … polynomial equation … and along the way we … highlight Y axis intercepts and X axis intercepts limit the plotting range to the range the user selected first off label the axes … and sharing wise we allow … email link collaboration What else is new to us, … Continue reading →

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Comments Off on HTML Square Horizontal Rule Column Graph Tutorial

HTML Square Horizontal Rule Plot Polynomial Tutorial

Posted on by

Yesterday’s HTML Square Horizontal Rule Plot Axes Tutorial start with … linear equation plotting … has been extended today (by one dimension) to … polynomial equation … and along the way we … highlight Y axis intercepts and X axis intercepts limit the plotting range to the range the user selected first off label the axes … and sharing wise we allow … email link collaboration What else is new to us, and perhaps to you, today? It’s the “Eat at Joes” type of idea to effectively animate an HTML input type=text textbox. Why, pray tell. Two reasons occur to us … as we do more and more web application coding we find the labelling of HTML input type=textbox textboxes “externally” (ie. creating another different HTML element of some sort sitting adjacent to textbox) annoying in the sense of easily making it look good … but more and more … as we do more and more web application coding we find the use of the “placeholder” attribute of HTML input type=textbox textboxes useful and easy … and today we do some inhouse animation, because we have two bits of functionality available and decipherable from the one textbox because an entry with … four comma separated fields involves a plot range entry … whereas … three comma separated fields involves a polynomial equation entry … whereas … two comma separated fields involves a linear equation … so, that being the case … … we get that first one above as information off the user and immediately animate via a setTimeout invocation (ie. setTimeout(toggleplaceholder, 5000); ) via the textbox “placeholder” attribute via … function toggleplaceholder() { if (oiois != null) { if (oiois.value == ”) { if (oiois.placeholder != ‘Line formula y=Gx + O … G is gradient, O is Y-offset … please comma separate G,O’) { oiois.placeholder=’Line formula y=Gx + O … G is gradient, O is Y-offset … please comma separate G,O’; } else { oiois.placeholder=’Polynomial formula y=A*x*x + B*x + C … please comma separate A,B,C’; } setTimeout(toggleplaceholder, 5000); } else { oiois=null; } } } The email link collaboration work has meant that we can show you below some equations “baked” ahead of time … Example of 2 Linear Equations: y = 2x + 12 y = -2x – 8 … and thanks to this very useful link for methodologies to discover X axis intercepts for polynomial equations … Continue reading →

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment