<!doctype html>
<html>
<head>
<title>Create Your Own English Phrase - RJM Programming - March, 2018</title>
<script type='text/javascript'>

var ourphrase='';
var ourdelim='';
var score=0;
var goes=0;
var notatend=false, clicked=false;
var xprefix="", prefix="", nothing="", cnotatend="", cnt=0;
var pok=true;

function check(iois) {
if (iois != null) {
if (iois.src != '') {
var aconto = (iois.contentWindow || iois.contentDocument);
if (aconto != null) {
try {
if (aconto.document) { aconto = aconto.document; }
if (aconto.body.innerHTML != '') {
ourphrase=aconto.body.innerHTML;

var csel='<select onfocus="pok=false;" id="mysel" onchange="pok=true; selchange(this.value,this);"><option value="">Optionally pick a little word below to place at cursor ...</option></select>';

var lwords=ourphrase.split(String.fromCharCode(10));
for (var ij=0; ij<lwords.length; ij++) {
csel=csel.replace('</select>','<option value="' + lwords[ij] + '">' + lwords[ij] + '</option></select>');
}

document.getElementById('littleword').innerHTML=csel;

ourphrase='';
ourdelim='';
}
} catch(eee) { }
}
}
}
}

function selchange(stv,stvo) {
if (stv != '') {
document.getElementById('myprefix').value=xprefix.replace(/\&\;nbsp\;/g,' ').replace(/\ \;/g,' '); //.replace(String.fromCharCode(160),' ').replace(String.fromCharCode(160),' ').replace(String.fromCharCode(160),' ').replace(String.fromCharCode(160),' ').replace(String.fromCharCode(160),' ');
while (document.getElementById('myprefix').value.indexOf(String.fromCharCode(160)) != -1) {
document.getElementById('myprefix').value=document.getElementById('myprefix').value.replace(String.fromCharCode(160),' ');
}
prefix='';
//alert(xprefix);
//prefix=stv;
//placeCaret(document.getElementById('danswer'),notatend);
//prefix='';
if (document.getElementById('myprefix').value == '') {
//document.getElementById('myh3').innerHTML=('sTv=' + stv);
document.getElementById('danswer').innerHTML=stv + ' ' + document.getElementById('danswer').innerHTML;
} else if (document.getElementById('danswer').innerHTML.replace(/\&\;nbsp\;/g,' ').replace(/\ \;/g,' ').replace(String.fromCharCode(160),' ').replace(String.fromCharCode(160),' ').replace(String.fromCharCode(160),' ').replace(String.fromCharCode(160),' ').replace(String.fromCharCode(160),' ') == document.getElementById('myprefix').value.replace(/\&\;nbsp\;/g,' ').replace(/\ \;/g,' ')) {
var was2=document.getElementById('danswer').innerHTML.replace(/\&\;nbsp\;/g,' ').replace(/\ \;/g,' ');
while (was2.indexOf(String.fromCharCode(160)) != -1) {
was2=was2.replace(String.fromCharCode(160),' ');
}
document.getElementById('danswer').innerHTML=document.getElementById('danswer').innerHTML.replace(/\&\;nbsp\;/g,' ').replace(/\ \;/g,' ').replace(String.fromCharCode(160),' ').replace(String.fromCharCode(160),' ').replace(String.fromCharCode(160),' ').replace(String.fromCharCode(160),' ').replace(String.fromCharCode(160),' ') + stv + ' ';
} else if (1 == 1) {
var was=document.getElementById('danswer').innerHTML.replace(/\&\;nbsp\;/g,' ').replace(/\ \;/g,' ').replace(String.fromCharCode(160),' ').replace(String.fromCharCode(160),' ').replace(String.fromCharCode(160),' ').replace(String.fromCharCode(160),' ').replace(String.fromCharCode(160),' ').replace(String.fromCharCode(160),' ');
while (was.indexOf(String.fromCharCode(160)) != -1) {
was=was.replace(String.fromCharCode(160),' ');
}
document.getElementById('danswer').innerHTML=document.getElementById('danswer').innerHTML.replace(/\&\;nbsp\;/g,' ').replace(/\ \;/g,' ');
document.getElementById('danswer').innerHTML=was.replace(document.getElementById('myprefix').value, document.getElementById('myprefix').value + stv);
} else {
//document.getElementById('myh3').innerHTML=('stv=' + stv);
document.getElementById('danswer').innerHTML+=ourdelim + stv;
}
pok=true;
document.getElementById('myprefix').value='';
ourdelim=' ';
document.getElementById('danswer').click();
}
stvo.value='';
}

function putoncursor(stv,stvo) {
selchange(stv,stvo);
}

function getword() {
ourphrase='';
ourdelim='';
document.getElementById('mysel').value='';
document.getElementById('anotherword').value='';
document.getElementById('danswer').innerHTML='';
pok=true;
}

function dcheck(diois) {
if (document.getElementById('danswer').innerHTML != '') {
goes++;
score++;
window.open("//www.thefreedictionary.com/" + document.getElementById('danswer').innerHTML.replace(/\<br\>/g,'+').replace(/\ \;/g,'+').replace(/\ /g,'+'), '_blank');
document.getElementById('score').innerHTML='Score: ' + score + '/' + goes;
ourphrase='';
getword();
}
}

function anotherpcae() {
if (pok) {
document.getElementById("danswer").innerHTML=document.getElementById("danswer").innerHTML.replace(/\ /g,' ');
placeCaret(document.getElementById("danswer"), notatend);
document.getElementById('danswer').click();
}
setTimeout(anotherpcae, 9000);
}

function fixfirefox() {

if (navigator.userAgent.toLowerCase().indexOf('firefox') != -1) {
if (document.getElementById("danswer").innerHTML.indexOf('<br>') != -1) {
document.getElementById("danswer").innerHTML=document.getElementById("danswer").innerHTML.replace(/\ \;\ \;\<br\>/g,' <BR>').replace(/\<br\>\ \;\ \;/g,' <BR>').replace(/\<br\>\<br\>/g,' <BR>').replace(/\<br\>\ \;\<br\>/g,' <BR>').replace(/\ \;\<br\>/g,' ').replace(/\ \<br\>/g,' ').replace(/\<br\>/g,'');
}
}

}

function getCaretPositionString() { // https://stackoverflow.com/questions/48946330/angular5-get-cursor-position-in-a-contenteditable-div-using-innerhtml-and-pipe
var element = document.querySelector('#danswer');
var preCaretRange;
try {
var range = window.getSelection().getRangeAt(0);
preCaretRange = range.cloneRange();
preCaretRange.selectNodeContents(element);
preCaretRange.setEnd(range.endContainer, range.endOffset);
document.getElementById('myprefix').value=preCaretRange.toString();
} catch (eee) {
preCaretRange=document.getElementById('danswer').innerHTML;
document.getElementById('myprefix').value=document.getElementById('danswer').innerHTML;
}
//alert('|' + ('' + preCaretRange.toString()) + '|');
//if (('' + preCaretRange.toString()).length == 0) { notatend=true; } else { notatend=false; }
return ('' + preCaretRange.toString()); //.length;
}


function placeCaret(el, isStart) { // thanks to https://stackoverflow.com/questions/4233265/contenteditable-set-caret-at-the-end-of-the-text-cross-browser
if (!clicked || 1 == 1) {
if (prefix != "") {
if (el.innerHTML.indexOf(prefix) != -1) {
el.innerHTML=el.innerHTML.replace(prefix, prefix + isStart);
prefix+=isStart;
} else if (el.innerHTML.replace(/ /g,' ').indexOf(prefix.replace(/ /g,' ')) != -1) {
el.innerHTML=el.innerHTML.replace(/ /g,' ').replace(prefix.replace(/ /g,' '), prefix.replace(/ /g,' ') + isStart);
prefix+=isStart;
} else {
var words=prefix.replace(/ /g,' ').split(' ');
var firstgo=prefix.replace(/ /g,' '); //.replace(/ /g,' ').replace(words[0] + ' ',' ');
var origfg=prefix;
for (var iij=0; iij<words.length; iij++) {
if (origfg == prefix) {
firstgo=firstgo.replace(/ /g,' ').replace(words[iij] + ' ',' ');
//alert('|' + firstgo + '| ... ' + el.innerHTML.replace(/ /g,' ').indexOf(firstgo) + ' vs |' + el.innerHTML.replace(/ /g,' ') + '|');
if (el.innerHTML.replace(/ /g,' ').indexOf(firstgo) != -1) {
if (firstgo.trim() != '') {
el.innerHTML=el.innerHTML.replace(/ /g,' ').replace(firstgo.replace(/ /g,' '), firstgo.replace(/ /g,' ') + isStart);
prefix=firstgo.replace(/ /g,' ');
}
} else if (el.innerHTML.replace(/ /g,' ').indexOf(firstgo.trim()) != -1) {
if (firstgo.trim() != '') {
el.innerHTML=el.innerHTML.replace(/ /g,' ').replace(firstgo.replace(/ /g,' ').trim(), firstgo.replace(/ /g,' ').trim() + isStart);
prefix=firstgo.replace(/ /g,' ').trim();
}
}
}
}
prefix+=isStart;
}
} else if (1 == 2 && navigator.userAgent.toLowerCase().indexOf('firefox') != -1) {
el=el;
} else {
el.focus();
if (typeof window.getSelection != "undefined"
&& typeof document.createRange != "undefined") {
var range = document.createRange();
range.selectNodeContents(el);
range.collapse(isStart);
clicked=false;
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (typeof document.body.createTextRange != "undefined") {
var textRange = document.body.createTextRange();
textRange.moveToElementText(el);
textRange.collapse(isStart);
clicked=false;
textRange.select();
}
}
}
clicked=false;
}

</script>
</head>
<body onload='anotherpcae(); getword();'>
<h1>Create Your Own English Phrase</h1>
<h3 id=myh3>RJM Programming - March, 2018</h3>
<h4>Use "Little Word" Dropdown Helper and/or Other Word TextBox Below to Help You Create Your Own English Phrase</h4>
<table style='width:100%;' border=5><tr><td id='littleword'></td><td id='otherword'>Place this/these word(s) at cursor: <input onkeydown="pok=false;" onblur='pok=true; putoncursor(this.value,this);' id='anotherword' type='text' value=''></input></td><td><input onclick="dcheck(document.getElementById('danswer'));" style='background-color:yellow;' type='button' id='finished' value='Finished Phrase Creation ... Check If Okay'></input></td></tr></table>
<h4 style='display:none;' id='score'>Score: 0/0</h4>
<br>

<div onchange="prefix=getCaretPositionString();" onclick="xprefix=nothing; prefix=nothing; clicked=true; xprefix=getCaretPositionString(); " title="Create your own English phrase" contenteditable=true id='danswer' style='border: 5px solid pink; background-color: yellow; font-size: 42px;height:55px;width:100%;'></div>

<script type='text/javascript'>
if (document.URL.toLowerCase().indexOf('rjmprogramming.com.au') != -1) {
document.write("<iframe style='display:none;' onload='check(this);' id='myiframehastobe' src='//www.rjmprogramming.com.au/PHP/surprise.php?littlewords=y&youllneverfindthis=y'></iframe>");
} else {
document.write("<iframe style='display:none;' onload='check(this);' id='myiframehastobe' src='PHP/surprise.php?littlewords=y&youllneverfindthis=y'></iframe>");
}
</script>
<input id="myprefix" type=text style="position:absolute;top:-120px;left:-120px;" value=""></input>
</body>
</html>