<!doctype html>
<html>
<head>
<title>Concepts Regarding Workplaces - RJM Programming - May, 2019</title>
<style>
td, th { vertical-align: top; }
</style>
<script type='text/javascript'>

var conceptarr=["safe workplace;rights","respect;rights+ethical+responsibilities","information;rights","training;rights","leave entitlements;rights","discrimination;unethical","lack of discrimination;rights+ethical","bullying;unethical","harassment;unethical","honesty;ethical","support;ethical","lack of support to colleagues;unethical","disrespect;unethical","maintain rules;responsibilities","punctuality;responsibilities","reliability;responsibilities","behave well;responsibilities","dress appropriately;responsibilities","follow code of conduct;responsibilities","speak up when needed;responsibilities","join union;rights","tolerance;ethical","fairness;ethical","document incidents;ethical","report incidents;ethical"];
var score=0, goes=0;
var choice=-1;
var sofar=";-1;";
var cnt=0, hrcnt=0;
var cangoin="";
var trtemp="";
var onetonameid="trtemplate";
var evenrows=location.search.split('mode=')[1] ? decodeURIComponent(location.search.split('mode=')[1].split('&')[0]) : '1';
var isIE = (navigator.appName == 'Microsoft Internet Explorer' || (navigator.appName == "Netscape" && navigator.appVersion.indexOf('Edge') > -1));
var infotemplate=isIE ? ' ... <div style=display:inline-block;><div></div></div>' : ' ... <details style=display:inline-block;><summary></summary></details>';


function doit(instris, extraword) {
//if (instris.indexOf('</font>') != -1) {
var jnfotemplate=infotemplate;
var rprefix='</';
var rsuffix='';
if (jnfotemplate.indexOf('</summary>') != -1) {
rprefix='</summary>';
}
var rwith='<a id=a' + instris.split('</font>')[0].replace(/\ /g,'_') + ' onclick="document.getElementById(';
rwith+="'" + instris.split('</font>')[0].replace(/\ /g,'_') + extraword.replace(/\ /g,'_') + "'";
rwith+=').style.display=' + "'block'";
rwith+=';" style=text-decoration:underline;cursor:pointer; target=';
rwith+=instris.split('</font>')[0].replace(/\ /g,'_') + extraword.replace(/\ /g,'_');
rwith+=' href=//www.rjmprogramming.com.au/HTMLCSS/karaoke_youtube_api.htm?emoji=on&nokaraoke=y&youtubeid=%20%20%20%20%20%20%20%20%20%20%20%20%20%20';
rwith+=encodeURIComponent(instris.split('</font>')[0] + ' ' + extraword + ' in the workplace');
rwith+='>(YouTube Video Search)</a>';
rsuffix+='<br><iframe style=margin-left:-60px;display:none;height:800px;width:620px; id=';
rsuffix+=instris.split('</font>')[0].replace(/\ /g,'_') + extraword.replace(/\ /g,'_');
rsuffix+=' name=' + instris.split('</font>')[0].replace(/\ /g,'_') + extraword.replace(/\ /g,'_') + '></iframe>';
//rsuffix+=rprefix;
if (jnfotemplate.indexOf('</summary>') != -1) {
//alert(instris + jnfotemplate.replace(rprefix, rwith + rprefix).replace('</details>', '') + rsuffix + '</details>');
//alert("; document.getElementById('d" + instris.split('</font>')[0].replace(/\ /g,'_') + "').click();");
rwith=rwith.replace("';", "'; document.getElementById('d" + instris.split('</font>')[0].replace(/\ /g,'_') + "').setAttribute('open',true);");
return instris + jnfotemplate.replace(">"," id=d" + instris.split('</font>')[0].replace(/\ /g,'_') + " onclick=\" if (this.innerHTML.indexOf('none') != -1) { document.getElementById('a" + instris.split('</font>')[0].replace(/\ /g,'_') + "').click(); }\">").replace(rprefix, rwith + rprefix).replace('</details>', '') + rsuffix + '</details>';
}
//alert(instris + jnfotemplate.replace(rprefix, rwith + rsuffix + rprefix));
return instris + jnfotemplate.replace(">"," onclick=\"document.getElementById('a" + instris.split('</font>')[0].replace(/\ /g,'_') + "').click();\">").replace(rprefix, rwith + rsuffix + rprefix);
}

function check(obtn) {
var iths=0, ths="rights,responsibilities,ethical,unethical";
goes++;
//alert(cangoin + ' ... ' + obtn.id.replace('b',''));
if (cangoin.indexOf('+' + obtn.id.replace('b','') + '+') != -1) {
score++;
for (iths=0; iths<ths.split(',').length; iths++) {
if (obtn.id.replace('b','') == ths.split(',')[iths]) {
document.getElementById(obtn.id.replace('b','')).innerHTML+='+ ' + doit(document.getElementById('wci').value,obtn.id.replace('b','')) + '<br>';
} else if (eval('' + evenrows) == 1) {
document.getElementById(ths.split(',')[iths]).innerHTML+=' <br>';
}
}
cangoin=cangoin.replace('+' + obtn.id.replace('b','') + '+', '+');
//alert(cangoin);
} else {
score--;
}
document.getElementById('score').innerHTML='Score: ' + score + '/' + goes;
}

function pickone() {
var thist=0, thisb=0, ltop=-1, lbot=-1, jj, iths=0, ths="rights,responsibilities,ethical,unethical", hrrect, jp=0;
//if (cnt > 0) { alert('cangoin=' + cangoin); }
if (cnt > 0 && cangoin.replace(/\+/g,'') != '') {
while (cangoin.replace(/\+/g,'') != '') {
//alert('yes re ' + cangoin.substring(1).split('+')[0]);
for (iths=0; iths<ths.split(',').length; iths++) {
if (cangoin.substring(1).split('+')[0] == ths.split(',')[iths]) {
document.getElementById(cangoin.substring(1).split('+')[0]).innerHTML+='<font size=1 color=red>- ' + doit(document.getElementById('wci').value + '</font>',cangoin.substring(1).split('+')[0]) + '<br>';
} else if (eval('' + evenrows) == 1) {
document.getElementById(ths.split(',')[iths]).innerHTML+='<font size=1 color=red> </font><br>';
}
}
cangoin=cangoin.replace('+' + cangoin.substring(1).split('+')[0] + '+', '+');
}
}
if (cnt > 0) {
if (eval('' + evenrows) == 4) {
document.getElementById('hrdiv').innerHTML+='<hr id=hr' + hrcnt + '><br>';
hrcnt++;
document.getElementById('hrdiv').innerHTML+='<hr id=hr' + hrcnt + '><br>';
hrcnt++;
document.getElementById('hrdiv').innerHTML+='<hr id=hr' + hrcnt + '><br>';
hrcnt++;
document.getElementById('hrdiv').innerHTML+='<hr id=hr' + hrcnt + '><br>';
hrcnt++;
} else if (eval('' + evenrows) >= 0) {
document.getElementById('rights').innerHTML+='<hr id=hr' + hrcnt + '><br>';
hrcnt++;
document.getElementById('responsibilities').innerHTML+='<hr id=hr' + hrcnt + '><br>';
hrcnt++;
document.getElementById('ethical').innerHTML+='<hr id=hr' + hrcnt + '><br>';
hrcnt++;
document.getElementById('unethical').innerHTML+='<hr id=hr' + hrcnt + '><br>';
hrcnt++;
}
if (eval('' + evenrows) >= 2) {
for (jj=eval(-4 + eval('' + hrcnt)); jj<=eval(-1 + eval('' + hrcnt)); jj++) {
if (eval('' + evenrows) >= 4) {
hrrect=document.getElementById(ths.split(',')[jp]).getBoundingClientRect();
document.getElementById('hr' + jj).style.position='absolute';
//document.getElementById('hr' + jj).style.zIndex='9';
document.getElementById('hr' + jj).style.left=('' + hrrect.left).replace('px','').split('.')[0] + 'px';
if (eval('' + evenrows) == 5) {
document.getElementById('hr' + jj).style.width=('' + hrrect.width).replace('px','').split('.')[0] + 'px';
document.getElementById('hr' + jj).style.opacity='0.2';
document.getElementById('hr' + jj).style.zIndex='-1';
document.getElementById('hr' + jj).style.marginTop='-25px';
}
} else {
hrrect=document.getElementById('hr' + jj).getBoundingClientRect();
}
thist=eval(('' + hrrect.top).replace('px',''));
thisb=eval(eval('' + thist) + eval(('' + hrrect.height).replace('px','')));
if (ltop < 0 || thist > ltop) { ltop=thist; }
if (lbot < 0 || thisb > lbot) { lbot=thist; }
jp++;
}
for (jj=eval(-4 + eval('' + hrcnt)); jj<=eval(-1 + eval('' + hrcnt)); jj++) {
if (eval('' + evenrows) >= 4) {
document.getElementById('hr' + jj).style.top=('' + thisb).replace('px','').split('.')[0] + 'px';
//alert(document.getElementById('hr' + jj).outerHTML);
} else {
hrrect=document.getElementById('hr' + jj).getBoundingClientRect();
thist=eval(('' + hrrect.top).replace('px',''));
if (eval('' + evenrows) == 2) {
document.getElementById('hr' + jj).style.marginTop='' + eval(eval('' + ltop) - eval('' + thist)) + 'px';
} else {
document.getElementById('hr' + jj).style.paddingTop='' + eval(eval('' + ltop) - eval('' + thist)) + 'px';
document.getElementById('hr' + jj).style.backgroundColor='lightgreen';
document.getElementById('hr' + jj).style.borderColor='lightgreen';
}
}
}
}
}
cangoin="";
if (cnt >= conceptarr.length) { alert('Ready for another game?'); location.href=document.URL; }
if (eval('' + evenrows) < 0 && cnt > 0) {
document.getElementById(onetonameid).innerHTML=document.getElementById(onetonameid).innerHTML.replace(/\ id\=/g, ' data-id=').replace(/pink\;/g, 'pink;visibility:hidden;');
document.getElementById('mytbody').innerHTML+=trtemp.replace('trtemplate', 'trtemplate' + cnt);
onetonameid='trtemplate' + cnt;
}
choice=-1;
while (sofar.indexOf(';' + choice + ';') != -1) {
choice=Math.floor(Math.random() * conceptarr.length);
}
sofar+='' + choice + ';';
cnt++;
document.getElementById('wci').value=conceptarr[choice].split(';')[0];
cangoin='+' + conceptarr[choice].split(';')[1] + '+';
}

</script>
</head>
<body onload=" document.getElementById('selmode').value=evenrows; trtemp=document.getElementById('trtemplate').outerHTML; setTimeout(pickone,5000);">
<h1>Concepts Regarding Workplaces</h1>
<h2>Via <select style='display: inline-block;' onchange=" location.href=document.URL.split('?')[0].split('#')[0] + '?mode=' + this.value; " id=selmode><option value=-1>New Table Row</option><option value=1>Blank Lines before Horizontal Rules across All Columns</option><option value=0>Ragged Horizontal Rules can Happen</option><option value=2>Margin Top to Horizontal Rules</option><option value=3>Light Green Padding Top to Horizontal Rules</option><option value=4>Absolutely Positioning Invisible Horizontal Rules</option><option value=5>Absolutely Positioning Visible Horizontal Rules</option></select></h2>
<h3>RJM Programming - May, 2019</h3>
<h4 id=score>Score: 0/0</h4>

<p>Workplace Concept: <input style="width:60%;" placeholder="Click places where what gets placed here, fits." id="wci" type="text"></input><br><br>

<table style="width:100%;" border=20>
<tr><th>Rights</th><th>Responsibilities</th><th>Ethical</th><th>Unethical</th></tr>
<tr><th colspan=4><input style="width:96%;background-color:yellow;" type=button onclick="pickone();" value="Next please"></input></th></tr>
<tr id=trtemplate><td id=rights><input style="margin-left:7%;width:86%;background-color:pink;" onclick="check(this);" type=button id=brights value="Can go below ..."></input><br><br></td><td id=responsibilities><input style="margin-left:7%;width:86%;background-color:pink;" onclick="check(this);" type=button id=bresponsibilities value="Can go below ..."></input><br><br></td><td id=ethical><input style="margin-left:7%;width:86%;background-color:pink;" onclick="check(this);" type=button id=bethical value="Can go below ..."></input><br><br></td><td id=unethical><input style="margin-left:7%;width:86%;background-color:pink;" onclick="check(this);" type=button id=bunethical value="Can go below ..."></input><br><br></td></tr>
<tbody id=mytbody>
</tbody>
</table>
<div id=hrdiv></div>
</body>
</html>