<html>
<head>
<title>Analogue Clock via Conic Gradient - RJM Programming - March, 2023</title>
<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>
<script type='text/javascript'>
var opacity=location.search.split('opacity=')[1] ? decodeURIComponent(location.search.split('opacity=')[1].split('&')[0]) : "0.5";
var numerator=location.search.split('numerator=')[1] ? decodeURIComponent(location.search.split('numerator=')[1].split('&')[0]) : "0";
var denominator=location.search.split('denominator=')[1] ? decodeURIComponent(location.search.split('denominator=')[1].split('&')[0]) : "0";
var btoas=location.search.split('btis=')[1] ? atob(decodeURIComponent(location.search.split('btis=')[1].split('&')[0])) : "";
var collist=document.head.innerHTML.split('conic-gradient(')[1].split(');')[0].split(', ');
var newlist='', newlistr='', viadb=false, score=0, goes=0;
var eqmode=false;
var numeratortwo=numerator, denominatortwo=denominator;
var signs=['+','-','x','/'], isign=0;
function eachsec() {
var inew=0, iangdeg=0.0, ii, iii;
document.getElementById('atend').title='Analogue Clock via Conic Gradient or Double Click for Fractions Game toggle - RJM Programming - March, 2023 ... ' + ('' + new Date());
if (btoas.indexOf('/') != -1 && denominator == '0') {
numerator=btoas.split('/')[0];
denominator=btoas.split('/')[1];
numeratortwo=numerator;
denominatortwo=denominator;
document.getElementById('atend').style.position='relative';
//document.getElementById('myrtd').innerHTML='';
btoas=' ';
//} else if (btoas == '') {
//document.getElementById('myrtd').innerHTML='';
}
if (denominator.length == 1) {
if (opacity != '0.5' || denominator != '0') {
if (denominator != '0') {
newlist=collist[0].split(' ')[0].replace(',0.5', ',1.0') + ' 0deg';
for (ii=1; ii<eval('' + denominator); ii++) {
if (eval('' + ii) < eval('' + numerator)) {
newlist+=', ' + collist[eval(ii % 2)].split(' ')[0].replace(',0.5', ',1.0') + ' ' + eval(ii * 360.0 / eval('' + denominator)) + 'deg';
} else {
newlist+=', rgba(250,250,250,1.0) ' + eval(ii * 360.0 / eval('' + denominator)) + 'deg';
}
}
for (iii=eval('' + denominator); iii<eval('' + collist.length); iii++) {
if (eval(iii * 360.0 / eval('' + denominator)) < 360) {
newlist+=', rgba(250,250,250,1.0) ' + eval(iii * 360.0 / eval('' + denominator)) + 'deg';
}
}
//alert(numeratortwo);
//alert(denominatortwo);
newlistr=collist[0].split(' ')[0].replace(',0.5', ',1.0') + ' 0deg';
for (ii=1; ii<eval('' + denominatortwo); ii++) {
if (eval('' + ii) < eval('' + numeratortwo)) {
newlistr+=', ' + collist[eval(ii % 2)].split(' ')[0].replace(',0.5', ',1.0') + ' ' + eval(ii * 360.0 / eval('' + denominatortwo)) + 'deg';
} else {
newlistr+=', rgba(250,250,250,1.0) ' + eval(ii * 360.0 / eval('' + denominatortwo)) + 'deg';
}
}
for (iii=eval('' + denominatortwo); iii<eval('' + collist.length); iii++) {
if (eval(iii * 360.0 / eval('' + denominatortwo)) < 360) {
newlistr+=', rgba(250,250,250,1.0) ' + eval(iii * 360.0 / eval('' + denominatortwo)) + 'deg';
}
}
//alert('<style>' + ' #atend { conic-gradient(' + newlist + '); } </style>');
document.getElementById('dstyle').innerHTML+='<style>' + ' #atend { background: conic-gradient(' + newlist + ') !important; } </style>';
document.getElementById('dstyle').innerHTML+='<style>' + ' #atright { background: conic-gradient(' + newlistr + ') !important; } </style>';
denominator='0' + denominator;
setTimeout(ask, 5000);
} else {
document.getElementById('dstyle').innerHTML='<style>' + document.head.innerHTML.split('<style>')[1].split('</style>')[0].replace(/\,0.5\)/g, ',' + opacity + ')') + '</style>';
}
opacity='0.5';
}
}
}
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 (' + denominatortwo + ' / ' + numeratortwo + ')' + String.fromCharCode(10);
varw+=' = ' + eval(eval('' + numerator) * eval('' + denominatortwo)) + ' / ' + eval(eval('' + denominator.slice(-1)) * eval('' + numeratortwo)) + String.fromCharCode(10);
} else if (document.getElementById('ssign').value == 'x' || document.getElementById('ssign').value == '*') {
varw+=' = (' + numerator + ' / ' + denominator.slice(-1) + ') x (' + numeratortwo + ' / ' + denominatortwo + ')' + String.fromCharCode(10);
varw+=' = ' + eval(eval('' + numerator) * eval('' + numeratortwo)) + ' / ' + eval(eval('' + denominator.slice(-1)) * eval('' + denominatortwo)) + String.fromCharCode(10);
}
return outstr + String.fromCharCode(10) + varw + ' = ' + realans + ' ' + String.fromCharCode(10);
}
function ask() {
//if (!document.getElementById('ssign')) { setTimeout(ask, 1000); return ''; }
var ans='', sufans=' Enter + to solve fractional equations.';
if (eqmode) { sufans=' Enter - to just solve leftmost fractional question.'; }
if (!viadb) {
while (('' + ans).indexOf('/') == -1 && ('' + ans).replace(/^1$/g, '1.0').replace(/^0$/g, '0.0').indexOf('.') == -1) {
ans=prompt('What fraction of the "cake" is coloured? (eg. 2/3)' + sufans, '');
//if (ans == null) { ans=''; }
if (('' + ans).trim() == '+') { eqmode=true; sufans=' Enter - to just solve leftmost fractional question.'; document.getElementById('myrtd').style.display='table-cell'; document.getElementById('mymtd').style.display='table-cell'; setTimeout(ask,2000); return ''; }
if (('' + ans).trim() == '-') { eqmode=false; sufans=' Enter + to solve fractional equations.'; document.getElementById('myrtd').style.display='none'; document.getElementById('mymtd').style.display='none'; setTimeout(ask,2000); return ''; }
}
if (eqmode) {
if (ans.replace(/\ /g,'').replace(/x/g,'*') == ('' + numerator + '/' + denominator.substring(1) + document.getElementById('ssign').value.replace('x','*') + numeratortwo + '/' + denominatortwo).replace(/\ /g,'').replace(/x/g,'*') || Math.abs(eval('(' + numerator + '/' + denominator.substring(1) + ') ' + document.getElementById('ssign').value.replace('x','*') + ' (' + numeratortwo + '/' + denominatortwo + ')') - eval(('' + ans).replace(/x/g, '*'))) < 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 ' + showworking('(' + numerator + '/' + denominator.substring(1) + ') ' + document.getElementById('ssign').value.replace('xJUNKx','*') + ' (' + numeratortwo + '/' + denominatortwo + ')', eval('(' + numerator + '/' + denominator.substring(1) + ') ' + document.getElementById('ssign').value.replace('x','*') + ' (' + numeratortwo + '/' + denominatortwo + ')')) + ' leaving your Fractions Game score as ' + score + ' of ' + goes);
}
} else {
if (ans == '' + numerator + '/' + denominator.substring(1) || Math.abs(eval('' + numerator + '/' + denominator.substring(1)) - eval(('' + ans).replace(/x/g, '*'))) < 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);
}
}
}
isign=eval(0 + Math.floor(Math.random() * signs.length));
document.getElementById('ssign').value=signs[isign];
numeratortwo='' + eval(1 + Math.floor(Math.random() * 7));
denominatortwo='0';
while (eval('' + denominatortwo) < eval('' + numeratortwo)) {
denominatortwo='' + eval(0 + Math.floor(Math.random() * 9));
}
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;
}
setInterval(eachsec, 1000);
</script>
</head>
<body>
<table id=mytable><tbody id=mytbody><tr id=mytr><td id=mytd>
<script type='text/javascript'>
if (denominator == '0' && btoas == '') {
document.write('<div 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: 386.5px; top: 17.3594px; width: 602px; height: 602px; border-radius: 612px; ">');
document.write('<iframe scrolling="no" frameborder="0" style="z-index:23;margin-left:127px;margin-top:130px;height:400px;" src="analogue_clock.htm?backcol=transparent&x=7654#xbody"></iframe>');
} else {
document.write('<div ondblclick=" viadb=true; ask(); " title="Analogue Clock via Conic Gradient or Double Click for Fractions Game toggle - RJM Programming - March, 2023" id="atend" style="width: 602px; height: 602px; border-radius: 612px; ">');
}
</script>
</div></td><td id=mymtd style=display:none;vertical-align:middle;> <select id=ssign style=font-size:32px;background-color:yellow; readonly disable><option value='+'>➕</option><option value='-'>➖</option><option value='x'>✖</option><option value='/'>➗</option></select></td><td id=myrtd style=display:none;> <div ondblclick=" viadb=true; ask(); " title="Analogue Clock via Conic Gradient or Double Click for Fractions Game toggle - RJM Programming - March, 2023" id="atright" style="width: 602px; height: 602px; border-radius: 612px; "></div></td></tr></tbody></table>
<div id=dstyle></div>
</body>
</html>