Tag Archives: HTMLCSS

SVG and Gradient Fraction Game Operators Tutorial

Posted on by

Onto the SVG “cake” display functionality added with yesterday’s SVG and Gradient Fraction Game Tutorial into our Fractions Game web application, we’re adding … SVG circle “cakes” that can be rotated … but not in the SVG … rather in the nesting HTML div … as per … rotdeg=eval(Math.floor(eval(360.0 * numerator / denominator)) % 360); rotdegr=eval(Math.floor(eval(360.0 * numeratortwo / denominatortwo)) % 360); document.getElementById(‘dstyle’).innerHTML+='<style>’ + ‘ #atend { background-image: none !important; transform: rotate(‘ + rotdeg + ‘deg); } </style>’; document.getElementById(‘dstyle’).innerHTML+='<style>’ + ‘ #atright { background-image: none !important; transform: rotate(‘ + rotdegr + ‘deg); } </style>’; … as a “distinguisher” (of SVG as distinct from conic-gradient) and “for user interest, and challenge, sake” two new mathematics operators to offer on that “operator dropdown” … in addition to + – x / …  % (ie. modulo eg. in Javascript eval(3/4 % 1/2) is 1/4 is 0.25)  ^ (ie. “left fraction base” to the power of “right fraction power” eg. (1/4 ^ 1/2) ( we can internally express as Math.pow(1/4, 1/2) ) is 1/2 is 0.5) … today, again “for user interest, and challenge, sake” … naturally, as far as answers go, we’ve always accepted decimal answers … in the changed circular_sectors.html Fractions Game. Previous relevant SVG and Gradient Fraction Game Tutorial is shown below. To add onto yesterday’s Gradient Fraction Game Mobile Tutorial … exclusively gradient … conic linear radial … “cake” displays in our Fractions Game … and add in … SVG circle and rectangle alternative displays … it is not hard coding work, only really involving the rearrangement of the “stop colour” element … function stopit(incsv) { //alert(incsv); // <stop offset=’0%’ stop-color=’#f00’/><stop offset=’100%’ stop-color=’#0ff’/> var incsvs=incsv.split(‘%, ‘); var outstops=”<stop offset=’0%’ stop-color='” + incsvs[0].split(‘ ‘)[0] + “‘/>”; for (var iis=1; iis<incsvs.length; iis++) { outstops+=”<stop offset='” + (incsvs[iis].split(‘ ‘)[1].trim() + “%”).replace(‘%%’,’%’) + “‘ stop-color='” + incsvs[iis].split(‘ ‘)[0] + “‘/>”; } //alert(outstops); //document.getElementById(‘atend’).title=outstops.replace(/255/g, ‘127’); return outstops.replace(/255/g, ‘127’); } … code syntax. But before that we went down a garden path thinking we could have all 5 “cake” display options be … as the CSS property background-image to a table cell nesting HTML div element … sort of like this webpage‘s (thanks all the same) … #atright { background-image: url(“data:image/svg+xml;utf8,<svg xmlns=’http://www.w3.org/2000/svg’ width=’10’ height=’10’><linearGradient id=’gradient’><stop offset=’10%’ stop-color=’%23F00’/><stop offset=’90%’ stop-color=’%23fcc’/> </linearGradient><rect fill=’url(%23gradient)’ x=’0′ y=’0′ width=’100%’ height=’100%’/></svg>”); } // … or … #atend { background-image: url(“data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+PGxpbmVhckdyYWRpZW50IGlkPSdncmFkaWVudCc+PHN0b3Agb2Zmc2V0PScxMCUnIHN0b3AtY29sb3I9JyNGMDAnLz48c3RvcCBvZmZzZXQ9JzkwJScgc3RvcC1jb2xvcj0nI2ZjYycvPiA8L2xpbmVhckdyYWRpZW50PjxyZWN0IGZpbGw9J3VybCgjZ3JhZGllbnQpJyB4PScwJyB5PScwJyB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJy8+PC9zdmc+”); } … and though we had lots of success with work of … Continue reading →

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

SVG and Gradient Fraction Game Tutorial

Posted on by

To add onto yesterday’s Gradient Fraction Game Mobile Tutorial … exclusively gradient … conic linear radial … “cake” displays in our Fractions Game … and add in … SVG circle and rectangle alternative displays … it is not hard coding work, only really involving the rearrangement of the “stop colour” element … function stopit(incsv) { //alert(incsv); // <stop offset=’0%’ stop-color=’#f00’/><stop offset=’100%’ stop-color=’#0ff’/> var incsvs=incsv.split(‘%, ‘); var outstops=”<stop offset=’0%’ stop-color='” + incsvs[0].split(‘ ‘)[0] + “‘/>”; for (var iis=1; iis<incsvs.length; iis++) { outstops+=”<stop offset='” + (incsvs[iis].split(‘ ‘)[1].trim() + “%”).replace(‘%%’,’%’) + “‘ stop-color='” + incsvs[iis].split(‘ ‘)[0] + “‘/>”; } //alert(outstops); //document.getElementById(‘atend’).title=outstops.replace(/255/g, ‘127’); return outstops.replace(/255/g, ‘127’); } … code syntax. But before that we went down a garden path thinking we could have all 5 “cake” display options be … as the CSS property background-image to a table cell nesting HTML div element … sort of like this webpage‘s (thanks all the same) … #atright { background-image: url(“data:image/svg+xml;utf8,<svg xmlns=’http://www.w3.org/2000/svg’ width=’10’ height=’10’><linearGradient id=’gradient’><stop offset=’10%’ stop-color=’%23F00’/><stop offset=’90%’ stop-color=’%23fcc’/> </linearGradient><rect fill=’url(%23gradient)’ x=’0′ y=’0′ width=’100%’ height=’100%’/></svg>”); } // … or … #atend { background-image: url(“data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+PGxpbmVhckdyYWRpZW50IGlkPSdncmFkaWVudCc+PHN0b3Agb2Zmc2V0PScxMCUnIHN0b3AtY29sb3I9JyNGMDAnLz48c3RvcCBvZmZzZXQ9JzkwJScgc3RvcC1jb2xvcj0nI2ZjYycvPiA8L2xpbmVhckdyYWRpZW50PjxyZWN0IGZpbGw9J3VybCgjZ3JhZGllbnQpJyB4PScwJyB5PScwJyB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJy8+PC9zdmc+”); } … and though we had lots of success with work of this ilk with our “Just Javascript” series of blog posts, we found the technique flaky today, so opted to, instead … fill HTML div element’s innerHTML (ie. content) with “raw” SVG set that HTML div element’s CSS style property background-image to “none” … as the approach we landed upon, allowing for SVG … if (issvg > 0) { var mySVG = “<svg xmlns=’http://www.w3.org/2000/svg’ width=’10’ height=’10’><linearGradient id=’gradient’><stop offset=’10%’ stop-color=’#F00’/><stop offset=’90%’ stop-color=’#fcc’/> </linearGradient><rect fill=’url(#gradient)’ x=’0′ y=’0′ width=’100%’ height=’100%’/></svg>”; if (issvg == 1) { mySVG=”<svg xmlns=’http://www.w3.org/2000/svg’ width='” + pwidth + “‘ height='” + pheight + “‘ viewport=’0 0 100 100′><linearGradient id=’test’>” + stopit(newlist) + ” </linearGradient><circle fill=’url(#test)’ cx='” + eval(pwidth / 2) + “‘ cy='” + eval(pheight / 2) + “‘ r='” + eval(pwidth / 2) + “‘ stroke=’none’ stroke-width=’12’/></svg>”; //.replace(/\~/g, String.fromCharCode(10)); } else if (issvg == 2) { mySVG=”<svg xmlns=’http://www.w3.org/2000/svg’ width='” + pwidth + “‘ height='” + pheight + “‘ viewport=’0 0 100 100′><linearGradient id=’test’>” + stopit(newlist) + ” </linearGradient><rect fill=’url(#test)’ width='” + eval(pwidth / 1) + “‘ height='” + eval(pheight / 1) + “‘ stroke=’none’ stroke-width=’12’/></svg>”; //.replace(/\~/g, String.fromCharCode(10)); } document.getElementById(‘atend’).innerHTML=mySVG; if (issvg == 1) { mySVG=”<svg xmlns=’http://www.w3.org/2000/svg’ width='” + pwidth + “‘ height='” + pheight + “‘ viewport=’0 0 100 100′><linearGradient id=’testr’>” + stopit(newlistr) + ” </linearGradient><circle fill=’url(#testr)’ cx='” + eval(pwidth / … Continue reading →

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

Gradient Fraction Game Mobile Tutorial

Posted on by

Many responsive web design purists will push the web developers out there to never … express HTML element dimensions in “static” “px” types of units … but rather … express HTML element dimensions in “%” or “vx” or “vh” proportional style of units … and, of course, their advice has a lot of merit, but, sometimes, like today, we want to be a bit pragmatic here and say … a third way, particularly suiting an initial development phase that suited a display on a laptop (and deploying “static” “px” types of units that look okay on a laptop), for instance, but then wanting to look more apt on your smaller mobile devices, you could … ensure you have within the webpage head element a “meta” viewport element such as (our) … <meta id=’myviewport’ name=’viewport’ content=’width=device-width, initial-scale=1, minimum-scale=0.1, maximum-scale=8, user-scalable=yes’ > stay with “static” “px” types of units but if analysis (which can be before document.body “onload” event (and, you couldn’t possibly have heard it from me, cough cough, but dovetail findings within Javascript document.write statements within the document.body static HTML)) of either/both screen.width and/or screen.height indicates lack of suitablility … var fromprefix=’border-radius: 612px;’, toprefix=”margin-top: 0px;”; var pwidth=602, pheight=602, pbr=612, ptop=17.3594, pleft=386.5, thirtytwo=32, ocbit=”; var worry=false; if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) && btoas.trim() == ” && denominator == ‘0’ && numerator == ‘0’) { ocbit=’ onclick=” viadb=true; ask(); ” ‘; } if (eval(eval(” + screen.width) – eval(eval(” + pbr) * 2)) < 0 && (btoas.trim() != ” || denominator != ‘0’ || numerator != ‘0’)) { thirtytwo=Math.floor(eval(eval(” + thirtytwo) * Math.floor(eval(eval(” + screen.width) / 2.1)) / eval(” + pbr))); ptop=eval(eval(” + ptop) * Math.floor(eval(eval(” + screen.width) / 2.1)) / eval(” + pbr)); pleft=eval(eval(” + pleft) * Math.floor(eval(eval(” + screen.width) / 2.1)) / eval(” + pbr)); pbr=Math.floor(eval(eval(” + screen.width) / 2.1)); fromprefix=’border-radius: ‘ + pbr + ‘px;’ pwidth=eval(-10 + pbr); pheight=eval(-10 + pbr); worry=true; //alert(‘width,height,br,top,left=’ + pwidth + ‘,’ + pheight + ‘,’ + pbr + ‘,’ + ptop + ‘,’ + pleft); } … Javascript “head” code affecting the “body” … <body> <script type=’text/javascript’> document.write(‘<table id=mytable><tbody id=mytbody><tr id=mytr><td id=mytd>’); if (denominator == ‘0’ && btoas == ”) { if (worry) { document.write(‘<div’ + ocbit + ‘ ondblclick=” viadb=true; ask(); ” title=”Analogue Clock via Conic Gradient or Double Click for Fractions Game toggle – RJM Programming – March, 2023″ id=”atend” style=”position: absolute; left: ‘ + pleft + ‘px; top: ‘ + ptop + ‘px; … Continue reading →

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

Gradient Fraction Game Equations Tutorial

Posted on by

There are three styles of CSS gradient … conic linear radial … and “different folks may learn via diff’rent CSS strokes”, so we incorporate a way for the user, when using the Fractions Game component of our latest web application, so that they can toggle the “cake” display among these three styles of gradient display. Also, extending yesterday’s Conic Gradient Fraction Game Equations Tutorial, we … allow, during the Fractions Game mode usage, have a window.prompt Cancel click send the user back to the Analogue Clock, so that unnecessary and errant window.prompt popup windows are avoided … and … we incorporate “lowest common denominator” … function lcdextra(varn, vard) { var retv=”, iv=0; for (iv=Math.min(Math.abs(varn),Math.abs(vard)); iv>=2; iv–) { if (eval(Math.abs(varn) % iv) == 0 && eval(Math.abs(vard) % iv) == 0) { varn /= iv; vard /= iv; retv+=’ = ‘ + varn + ‘ / ‘ + vard + String.fromCharCode(10); } } return retv; } … calculations into our “show workings” section as Ms Trimpole would have wanted involve emoji operators in that same “show workings” section to better mimic how we were taught at school in Mathematics class … in the changed circular_sectors.html Fractions Game. Previous relevant Conic Gradient Fraction Game Equations Tutorial is shown below. We’re extending the functionality started with yesterday’s Dual Purpose Conic Gradient Primer Tutorial‘s second “dual purpose” … Fractions Game piece of functionality … Adding to its possibility the optional user job of solving operator …  +  –  x  / … types of fraction based equations Simply put, changes to allow for this involved … forsaking position:absolute “cakes” for your usual default position:relative positioning … within … single row, three cell (cake, sign, cake) display … prior to … hardly changed window.prompt user interaction, to answer … but … more complex analysis for equation based scenarios … function showworking(instr, realans) { var outstr=instr; var xnumerator=numerator, xnumeratortwo=numeratortwo, xdenominatortwo=denominatortwo; var varw=”; if (document.getElementById(‘ssign’).value == ‘+’) { if (denominatortwo == denominator.slice(-1)) { varw+=’ = (‘ + numerator + ‘ + ‘ + numeratortwo + ‘) / ‘ + denominatortwo + String.fromCharCode(10); varw+=’ = ‘ + eval(eval(” + numerator) + eval(” + numeratortwo)) + ‘ / ‘ + xdenominatortwo + String.fromCharCode(10); } else { varw+=’ = (‘ + numerator + ‘ x ‘ + denominatortwo + ‘ + ‘ + numeratortwo + ‘ x ‘ + denominator.slice(-1) + ‘) / (‘ + denominator.slice(-1) + ‘ x ‘ + denominatortwo … Continue reading →

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

Conic Gradient Fraction Game Equations Tutorial

Posted on by

We’re extending the functionality started with yesterday’s Dual Purpose Conic Gradient Primer Tutorial‘s second “dual purpose” … Fractions Game piece of functionality … Adding to its possibility the optional user job of solving operator …  +  –  x  / … types of fraction based equations Simply put, changes to allow for this involved … forsaking position:absolute “cakes” for your usual default position:relative positioning … within … single row, three cell (cake, sign, cake) display … prior to … hardly changed window.prompt user interaction, to answer … but … more complex analysis for equation based scenarios … function showworking(instr, realans) { var outstr=instr; var xnumerator=numerator, xnumeratortwo=numeratortwo, xdenominatortwo=denominatortwo; var varw=”; if (document.getElementById(‘ssign’).value == ‘+’) { if (denominatortwo == denominator.slice(-1)) { varw+=’ = (‘ + numerator + ‘ + ‘ + numeratortwo + ‘) / ‘ + denominatortwo + String.fromCharCode(10); varw+=’ = ‘ + eval(eval(” + numerator) + eval(” + numeratortwo)) + ‘ / ‘ + xdenominatortwo + String.fromCharCode(10); } else { varw+=’ = (‘ + numerator + ‘ x ‘ + denominatortwo + ‘ + ‘ + numeratortwo + ‘ x ‘ + denominator.slice(-1) + ‘) / (‘ + denominator.slice(-1) + ‘ x ‘ + denominatortwo + ‘)’ + String.fromCharCode(10); xnumerator*=denominatortwo; xnumeratortwo*=eval(” + denominator.slice(-1)); xdenominatortwo*=eval(” + denominator.slice(-1)); varw+=’ = (‘ + xnumerator + ‘ + ‘ + xnumeratortwo + ‘) / ‘ + xdenominatortwo + String.fromCharCode(10); varw+=’ = ‘ + eval(eval(” + xnumerator) + eval(” + xnumeratortwo)) + ‘ / ‘ + xdenominatortwo + String.fromCharCode(10); } } else if (document.getElementById(‘ssign’).value == ‘-‘) { if (denominatortwo == denominator.slice(-1)) { varw+=’ = (‘ + numerator + ‘ – ‘ + numeratortwo + ‘) / ‘ + denominatortwo + String.fromCharCode(10); varw+=’ = ‘ + eval(numerator – numeratortwo) + ‘ / ‘ + xdenominatortwo + String.fromCharCode(10); } else { varw+=’ = (‘ + numerator + ‘ x ‘ + denominatortwo + ‘ – ‘ + numeratortwo + ‘ x ‘ + denominator.slice(-1) + ‘) / (‘ + denominator.slice(-1) + ‘ x ‘ + denominatortwo + ‘)’ + String.fromCharCode(10); xnumerator*=denominatortwo; xnumeratortwo*=eval(” + denominator.slice(-1)); xdenominatortwo*=eval(” + denominator.slice(-1)); varw+=’ = (‘ + xnumerator + ‘ – ‘ + xnumeratortwo + ‘) / ‘ + xdenominatortwo + String.fromCharCode(10); varw+=’ = ‘ + eval(eval(” + xnumerator) – eval(” + xnumeratortwo)) + ‘ / ‘ + xdenominatortwo + String.fromCharCode(10); } } else if (document.getElementById(‘ssign’).value == ‘/’) { varw+=’ = (‘ + numerator + ‘ / ‘ + denominator.slice(-1) + ‘) x (‘ … Continue reading →

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

Dual Purpose Conic Gradient Primer Tutorial

Posted on by

Yes, today, we have a “proof of concept” circular_sectors.html … dual purpose … as a … local time analogue clock (also, below) … calling on a changed analogue_clock.html … or … Fractions Game ondblclick (double click) event … ondblclick=” viadb=true; ask(); “ … toggling … var viadb=false; function ask() { var ans=”; if (!viadb) { while ((” + ans).indexOf(‘/’) == -1 && (” + ans.replace(/^1$/g, ‘1.0’)).indexOf(‘.’) == -1) { ans=prompt(‘What fraction of the “cake” is coloured? (eg. 2/3)’, ”); } if (ans == ” + numerator + ‘/’ + denominator.substring(1) || Math.abs(eval(” + numerator + ‘/’ + denominator.substring(1)) – eval(” + ans)) < 0.005) { score++; goes++; alert(‘Well done! This makes your Fractions Game score to be ‘ + score + ‘ of ‘ + goes); } else { goes++; alert(‘Sorry … the fraction you wanted is ‘ + numerator + ‘/’ + denominator.substring(1) + ‘ leaving your Fractions Game score as ‘ + score + ‘ of ‘ + goes); } } numerator=” + eval(1 + Math.floor(Math.random() * 7)); denominator=’0’; while (eval(” + denominator) < eval(” + numerator)) { denominator=” + eval(0 + Math.floor(Math.random() * 9)); } if (viadb) { if (btoas == ”) { location.href=document.URL.split(‘?’)[0].split(‘#’)[0] + ‘?btis=’ + encodeURIComponent(btoa(” + numerator + ‘/’ + denominator)); } else { location.href=document.URL.split(‘?’)[0].split(‘#’)[0]; // + ‘?btis=’ + encodeURIComponent(btoa(” + numerator + ‘/’ + denominator)); } } viadb=false; } … control … using … CSS conic-gradient background … <style> #atend { background: conic-gradient(rgba(255,0,0,0.5) 0deg, rgba(0,0,255,0.5) 30deg, rgba(0,255,0,0.5) 60deg, rgba(255,192,203,0.5) 90deg, rgba(0,0,139,0.5) 120deg, rgba(144,238,144,0.5) 150deg, rgba(255,165,0,0.5) 180deg, rgba(173,216,230,0.5) 210deg, rgba(2,48,32,0.5) 240deg, rgba(255,0,255,0.5) 270deg, rgba(0,100,100,0.5) 300deg, rgba(128,128,0,0.5) 330deg); } </style> … scenario, building on what we learnt when we presented CSS Gradient Creations Conic Tutorial a little while back. Previous relevant CSS Gradient Creations Conic Tutorial is shown below. Yesterday’s CSS Conic Gradient Primer Tutorial set us to thinking about integrating these Conic Gradients into our “Gradient Central” web application where you can create your own gradients which we last talked about with CSS Gradient Creations Mobile Width Tutorial. These gradients … linear-gradient radial-gradient conic-gradient … are helping our webpage designs allow for colour gradation and subtlety we appreciate around here. They can often effectively fill in for that “graphic flair” not all of us possess, in our webpage designs. What came up that was a bit new to us with this Conic Gradient integration? And yes, most tutorials bring up something new! Input element … Continue reading →

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

HTML/Javascript Reveal Image In Front of Image Tutorial

Posted on by

Continuing on with our discussion regarding HTML, Javascript and CSS on the theme of “reveal”, today we reveal an image in front of another, and triggered when the user clicks a link, following on from the previous HTML/Javascript/CSS Reveal Image Behind Primer Tutorial as shown below. With today’s tutorial you could argue that it also belongs with the series of blog posts related to “overlay”. Here is a tutorial that “reveals” that image in front of an image of the night sky using HTML, Javascript and CSS, featuring: Encasing working visible HTML elements within div element for ease of: positioning scrolling, or not visibility control z-index position:absolute Javascript DOM methods to dynamically change HTML, particularly with respect to visibility, and size and positioning So here is a tutorial about Images “revealed” in front of others, and here is the HTML programming source code you could call reveal_imageinfront.html for the theme of an image in front of the night sky. Previous relevant HTML/Javascript Reveal Image Behind Image Primer Tutorial is shown below. Continuing on with our discussion regarding HTML, Javascript and CSS on the theme of “reveal”, today we reveal an image behind another, increasing its size over time, and all triggered when the user clicks a link, following on from the previous HTML/Javascript/CSS Reveal Information Primer Tutorial as shown below. Here is a tutorial that “reveals” that image behind a keyhole image using HTML, Javascript and CSS, featuring: Encasing working visible HTML elements within div element for ease of: positioning scrolling, or not visibility control z-index position:absolute Simple masking image keyhole.png which would only require an image editor to the sophistication of PaintBrush to create Javascript DOM methods to dynamically change HTML, particularly with respect to visibility, and size and positioning So here is a tutorial about Images “revealed” behind others, and here is the HTML programming source code you could call reveal_keyhole.html for the theme of an image behind a keyhole … huh?! If you try this game you may discover its inspiration. Content-wise, how could there be thanks enough to the “masters”, but have you ever read Giorgio Vasari‘s book Lives of the Most Excellent Painters, Sculptors, and Architects ? … and we’ll include some links (or inactive link prefixes) below … thank you, terima kasih, gracias, merci, 谢谢, danke, спасибо, धन्यवाद, grazie, ขอขอบคุณ, cảm ơn bạn, آپ کا شکریہ, ありがとう, teşekkür ederim, dankon, obrigado, dankie,شكرا, σας ευχαριστώ, … Continue reading →

Posted in eLearning, Tutorials | Tagged , , , , , , , , , | Leave a comment