{"id":130,"date":"2023-01-03T00:51:07","date_gmt":"2023-01-03T00:51:07","guid":{"rendered":"https:\/\/teacherkyle.xyz\/?page_id=130"},"modified":"2023-01-03T00:51:08","modified_gmt":"2023-01-03T00:51:08","slug":"build-a-sentence-demo","status":"publish","type":"page","link":"https:\/\/teacherkyle.xyz\/index.php\/build-a-sentence-demo\/","title":{"rendered":"Build a sentence demo"},"content":{"rendered":"\n<div class=\"wp-block-group has-cyan-bluish-gray-background-color has-background has-global-padding is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-12dd3699 wp-block-group-is-layout-constrained\">\n<p style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0\">A demo of the build a sentence html<\/p>\n\n\n\n<p>\u00a0 \u00a0It works best if you &#8220;refresh the page&#8221; after scrolling down so that the black lines are close to the top of the page.<\/p>\n<\/div>\n\n\n\n<!DOCTYPE HTML>\n<!!!!!!!!!!!!!!!!!!!!!!!!!!! IMPORTANT NOTE - Just change around Line 70 - 90 !!!!!!!>\n<html lang=\"en-US\">\n<div id='background'>\n<head id='head'>\n\t<meta charset=\"utf8\">\n\t<title>Kyle&#8217;s draggable<\/title>\n\t<link href='https:\/\/fonts.googleapis.com\/css?family=Andika' rel='stylesheet' type='text\/css'>\n\t<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.3\/jquery.min.js\"><\/script>\n\t<script src=\"https:\/\/apis.google.com\/js\/platform.js\" async defer><\/script>\t\n\t\t\n    <div id = \"empty\" style='display: none;'><\/div>\n\t\n\t\t<style>\n\t\t\n\t\t\t\tbody\n\t\t{\n\t\t\t\/*background-image:url('https:\/\/teacherkyle.xyz\/assets\/images\/BG.png') ;\n\t\t\tbackground-size: 100% 100%;\n\t\t\tbackground-repeat: no-repeat;*\/\n\t\t\ttext-align: center;\n\t\t\tpadding: 10px;\n\t\t\tcolor: black;\n\t\t\tfont-size: 2rem;\n\t\t\tfont-family: 'Andika';\n\t\t\t\/*margin: 0;*\/\n\t\t\t\/*position:absolute;*\/\n\t\t\t\n\t\t}\t\t\n<\/style>\n\n<\/head>\n\n<div id= 'SentenceDiv01'>_________ _________ ________________________ ___________?<\/div>\n<br>\n<br>\n<div id= 'SentenceDiv02'>____________ ________ __________ .<\/div>\n\n<div id= 'theWordsHolder' style='display: inline-block; overflow: visible; white-space: nowrap; vertical-align: top;'>\n<div id= 'words01' style='display: inline-block; width: 15%; overflow: visible; white-space: nowrap; vertical-align: top;'><\/div>\n<div id= 'words02' style='display: inline-block; width: 15%; overflow: visible; white-space: nowrap; vertical-align: top;'><\/div>\n<div id= 'words03' style='display: inline-block; width: 15%; overflow: visible; white-space: nowrap; vertical-align: top;'><\/div>\n<div id= 'words04' style='display: inline-block; width: 15%; overflow: visible; white-space: nowrap; vertical-align: top;'><\/div>\n<div id= 'words05' style='display: inline-block; width: 15%; overflow: visible; white-space: nowrap; vertical-align: top;'><\/div>\n<div id= 'words06' style='display: inline-block; width: 15%; overflow: visible; white-space: nowrap; vertical-align: top;'><\/div>\n<div id= 'words07' style='display: inline-block; width: 15%; overflow: visible; white-space: nowrap; vertical-align: top;'><\/div>\n<div id= 'words08' style='display: inline-block; width: 15%; overflow: visible; white-space: nowrap; vertical-align: top;'><\/div>\n<\/div>\n<div id= 'logSpan'><\/div>\t \n\t\n<script>\n\n\nvar blankFillers01 = [];\nvar blankFillers02 = [\"you\",\"I\",\"he\",\"he\",\"she\",\"she\",\"they\",\"they\"];\nvar blankFillers03 = [\"clean____ the table\",\"cook____ dinner\", \"play____ a game\",\"paint____ the fence\",\"water____ the flowers\",\"climb_____ a tree\",\"ed\", \"ing\"];\nvar blankFillers04 = [\"now\", \"last night\"];\nvar blankFillers05 = [\"Yes,\",\"No,\"];\nvar blankFillers06 = [\"is\",\"isn't\",\"am\",\"did\",\"I'm\",\"not\",\"didn't\"];\nvar blankFillers07 = [];\nvar blankFillers08 = [];\nvar blankFillers=[0,blankFillers01,blankFillers02,blankFillers03,blankFillers04,blankFillers05,blankFillers06,blankFillers07,blankFillers08];\n\nvar wordInitialPlaces01 = []; var wordInitialPlaces02 = []; var wordInitialPlaces03 = []; var wordInitialPlaces04 = []; var wordInitialPlaces05 = []; var wordInitialPlaces06 = [];\nvar wordInitialPlaces07 = []; var wordInitialPlaces08 = [];\n\nfunction getParameterByName(name) {\n\tvar match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);\n\treturn match && decodeURIComponent(match[1].replace(\/\\+\/g, ' '));\n}\nvar seeHearSpeakSpell = 'Hear';\nvar whichVocab = getParameterByName('whichSentence');\nif(whichVocab == null){whichVocab ='';}\n\n\nvar charSize = '';\n\nfunction setUp(){\n\tvar sentence1 = document.getElementById('SentenceDiv01'); sentence1.style.fontSize ='150%';\n\tvar sentence2 = document.getElementById('SentenceDiv02'); sentence2.style.fontSize ='150%';\n\t\n\t\n\t\/\/Change this Part VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV \n\t\t\n\tsentence1.innerHTML = \"__________________________________________\"\n\tsentence2.innerHTML = \"__________________________________________\"\t\n\t\/\/document.getElementById('specialBlank').style.color = 'gray';\n\t\n\t\tblankFillers01 = [\"What\",\"Where\"];\n\t\tblankFillers02 = [\"is\",\"are\",\"am\",\"is\",\"are\"];\n\t\tblankFillers03 = [\"I\",\"you\",\"he\",\"she\",\"He\",\"She\"];\n\t\tblankFillers04 = [\"watching\",\"doing\", \"brushing\",\"watching\",\"doing\",\"brushing\"];\n\t\tblankFillers05 = [\"my\",\"your\",\"his\",\"her\",\"his\",\"her\",\"the\",'the'];\n\t\tblankFillers06 = [\"teeth\",\"homework\",\"dishes\",\"TV\",\"teeth\",\"homework\",\"dishes\",\"TV\"];\n\t\tblankFillers07 = [\"living room\",\"dining room\",\"bedroom\",'bathroom','kitchen'];\n\t\tblankFillers08 = [\".\",\",\",\"?\",\"in the\"];\n\t\tblankFillers=[0,blankFillers01,blankFillers02,blankFillers03,blankFillers04,blankFillers05,blankFillers06,blankFillers07,blankFillers08];\n\t\n\t\/\/ Change this Part ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n\t\n\n\n\/\/ Get the words into divs and draggable and placed\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ 01\nfor(i=0;i<blankFillers01.length;i++){\n\tvar tempDiv = document.createElement('div');\n\ttempDiv.id = 'draggableDiv01-'+i;\n\ttempDiv.style = \"padding: 0px; cursor: move; z-index: 10; border-left: 5px solid #ff0000; border-right: 5px solid #ff0000; background-color: #ff0000; color: #000000; z-index: 9; text-align: center; line-height: 1.2 ;font-size: 150%;\"\n\tif (charSize == 'letter'){tempDiv.style.fontSize = '500%'}\n\ttempDiv.innerHTML = blankFillers01[i];\n\tdocument.getElementById('words01').appendChild(tempDiv);\n\tdragElement(document.getElementById(\"draggableDiv01-\"+i));\n}\/*position: absolute;*\/\nfor(i=0;i<blankFillers01.length;i++){\n\tvar tempDiv = document.getElementById(\"draggableDiv01-\"+i)\n\twordInitialPlaces01.push([tempDiv.getBoundingClientRect().x,tempDiv.getBoundingClientRect().y])\n\t\/\/console.log(wordInitialPlaces01)\n}\nfor(i=0;i<blankFillers01.length;i++){\n\tvar tempDiv = document.getElementById(\"draggableDiv01-\"+i)\n\ttempDiv.style.position = 'absolute';\n\ttempDiv.style.top = wordInitialPlaces01[i][1]+'px';\n\ttempDiv.style.left = wordInitialPlaces01[i][0]+'px';\n}\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ 02\nfor(i=0;i<blankFillers02.length;i++){\nvar tempDiv = document.createElement('div');\ntempDiv.id = 'draggableDiv02-'+i;\ntempDiv.style = \"padding: 0px; cursor: move; z-index: 10; border-left: 5px solid #ff8400; border-right: 5px solid #ff8400; background-color: #ff8400; color: #000000; z-index: 9; text-align: center; line-height: 1.2;font-size: 150%;\"\nif (charSize == 'letter'){tempDiv.style.fontSize = '500%'}\ntempDiv.innerHTML = blankFillers02[i];\ndocument.getElementById('words02').appendChild(tempDiv);\ndragElement(document.getElementById(\"draggableDiv02-\"+i));\n}\/**\/\nfor(i=0;i<blankFillers02.length;i++){\n\tvar tempDiv = document.getElementById(\"draggableDiv02-\"+i)\n\twordInitialPlaces02.push([tempDiv.getBoundingClientRect().x,tempDiv.getBoundingClientRect().y])\n}\nfor(i=0;i<blankFillers02.length;i++){\n\tvar tempDiv = document.getElementById(\"draggableDiv02-\"+i)\n\ttempDiv.style.position = 'absolute';\n\ttempDiv.style.top = wordInitialPlaces02[i][1]+'px';\n\ttempDiv.style.left = wordInitialPlaces02[i][0]+'px';\n}\n\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ 03\nfor(i=0;i<blankFillers03.length;i++){\nvar tempDiv = document.createElement('div');\ntempDiv.id = 'draggableDiv03-'+i;\ntempDiv.style = \"padding: 0px; cursor: move; z-index: 10; border-left: 5px solid #fbff00; border-right: 5px solid #fbff00; background-color: #fbff00; color: #000000;z-index: 9; text-align: center; line-height: 1.2;font-size: 150%;\"\nif (charSize == 'letter'){tempDiv.style.fontSize = '500%'}\ntempDiv.innerHTML = blankFillers03[i];\ndocument.getElementById('words03').appendChild(tempDiv);\ndragElement(document.getElementById(\"draggableDiv03-\"+i));\n}\/**\/\nfor(i=0;i<blankFillers03.length;i++){\n\tvar tempDiv = document.getElementById(\"draggableDiv03-\"+i)\n\twordInitialPlaces03.push([tempDiv.getBoundingClientRect().x,tempDiv.getBoundingClientRect().y])\n}\nfor(i=0;i<blankFillers03.length;i++){\n\tvar tempDiv = document.getElementById(\"draggableDiv03-\"+i)\n\ttempDiv.style.position = 'absolute';\n\ttempDiv.style.top = wordInitialPlaces03[i][1]+'px';\n\ttempDiv.style.left = wordInitialPlaces03[i][0]+'px';\n}\n\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ 04\nfor(i=0;i<blankFillers04.length;i++){\nvar tempDiv = document.createElement('div');\ntempDiv.id = 'draggableDiv04-'+i;\ntempDiv.style = \"padding: 0px; cursor: move; z-index: 10; border-left: 5px solid #22ff00; border-right: 5px solid #22ff00; background-color: #22ff00; color: #000000; z-index: 9; text-align: center; line-height: 1.2;font-size: 150%;\"\nif (charSize == 'letter'){tempDiv.style.fontSize = '500%'}\ntempDiv.innerHTML = blankFillers04[i];\ndocument.getElementById('words04').appendChild(tempDiv);\ndragElement(document.getElementById(\"draggableDiv04-\"+i));\n}\/**\/\nfor(i=0;i<blankFillers04.length;i++){\n\tvar tempDiv = document.getElementById(\"draggableDiv04-\"+i)\n\twordInitialPlaces04.push([tempDiv.getBoundingClientRect().x,tempDiv.getBoundingClientRect().y])\n}\nfor(i=0;i<blankFillers04.length;i++){\n\tvar tempDiv = document.getElementById(\"draggableDiv04-\"+i)\n\ttempDiv.style.position = 'absolute';\n\ttempDiv.style.top = wordInitialPlaces04[i][1]+'px';\n\ttempDiv.style.left = wordInitialPlaces04[i][0]+'px';\n}\n\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ 05\nfor(i=0;i<blankFillers05.length;i++){\nvar tempDiv = document.createElement('div');\ntempDiv.id = 'draggableDiv05-'+i;\ntempDiv.style = \"padding: 0px; cursor: move; z-index: 10; border-left: 5px solid #00e9f5; border-right: 5px solid #00e9f5;background-color: #00e9f5; color: #000000; z-index: 9; text-align: center; line-height: 1.2;font-size: 150%;\"\nif (charSize == 'letter'){tempDiv.style.fontSize = '500%'}\ntempDiv.innerHTML = blankFillers05[i];\ndocument.getElementById('words05').appendChild(tempDiv);\ndragElement(document.getElementById(\"draggableDiv05-\"+i));\n}\/**\/\nfor(i=0;i<blankFillers05.length;i++){\n\tvar tempDiv = document.getElementById(\"draggableDiv05-\"+i)\n\twordInitialPlaces05.push([tempDiv.getBoundingClientRect().x,tempDiv.getBoundingClientRect().y])\n}\nfor(i=0;i<blankFillers05.length;i++){\n\tvar tempDiv = document.getElementById(\"draggableDiv05-\"+i)\n\ttempDiv.style.position = 'absolute';\n\ttempDiv.style.top = wordInitialPlaces05[i][1]+'px';\n\ttempDiv.style.left = wordInitialPlaces05[i][0]+'px';\n}\n\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ 06\nfor(i=0;i<blankFillers06.length;i++){\nvar tempDiv = document.createElement('div');\ntempDiv.id = 'draggableDiv06-'+i;\ntempDiv.style = \"padding: 0px; cursor: move; z-index: 10; border-left: 5px solid #df7efc; border-right: 5px solid #df7efc; background-color: #df7efc; color: #000000; z-index: 9; text-align: center; line-height: 1.2;font-size: 150%;\"\nif (charSize == 'letter'){tempDiv.style.fontSize = '500%'}\ntempDiv.innerHTML = blankFillers06[i];\ndocument.getElementById('words06').appendChild(tempDiv);\ndragElement(document.getElementById(\"draggableDiv06-\"+i));\n}\/**\/\nfor(i=0;i<blankFillers06.length;i++){\n\tvar tempDiv = document.getElementById(\"draggableDiv06-\"+i)\n\twordInitialPlaces06.push([tempDiv.getBoundingClientRect().x,tempDiv.getBoundingClientRect().y])\n}\nfor(i=0;i<blankFillers06.length;i++){\n\tvar tempDiv = document.getElementById(\"draggableDiv06-\"+i)\n\ttempDiv.style.position = 'absolute';\n\ttempDiv.style.top = wordInitialPlaces06[i][1]+'px';\n\ttempDiv.style.left = wordInitialPlaces06[i][0]+'px';\n}\n\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ 07\nfor(i=0;i<blankFillers07.length;i++){\nvar tempDiv = document.createElement('div');\ntempDiv.id = 'draggableDiv07-'+i;\ntempDiv.style = \"padding: 0px; cursor: move; z-index: 10; border-left: 5px solid #000000; border-right: 5px solid #000000; background-color: #000000; color: #FFFFFF; z-index: 1; text-align: center; line-height: 1.2;font-size: 150%;\"\nif (charSize == 'letter'){tempDiv.style.fontSize = '500%'}\ntempDiv.innerHTML = blankFillers07[i];\ndocument.getElementById('words07').appendChild(tempDiv);\ndragElement(document.getElementById(\"draggableDiv07-\"+i));\n}\/**\/\nfor(i=0;i<blankFillers07.length;i++){\n\tvar tempDiv = document.getElementById(\"draggableDiv07-\"+i)\n\twordInitialPlaces07.push([tempDiv.getBoundingClientRect().x,tempDiv.getBoundingClientRect().y])\n}\nfor(i=0;i<blankFillers07.length;i++){\n\tvar tempDiv = document.getElementById(\"draggableDiv07-\"+i)\n\ttempDiv.style.position = 'absolute';\n\ttempDiv.style.top = wordInitialPlaces07[i][1]+'px';\n\ttempDiv.style.left = wordInitialPlaces07[i][0]+'px';\n}\n\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ 08\nfor(i=0;i<blankFillers08.length;i++){\nvar tempDiv = document.createElement('div');\ntempDiv.id = 'draggableDiv08-'+i;\ntempDiv.style = \"border-right: 5px solid #929292; border-left: 5px solid #929292;padding: 0px; cursor: move; z-index: 10; background-color: #929292; color: #000000; z-index: 1; text-align: center; line-height: 1.2;font-size: 150%;\"\nif (charSize == 'letter'){tempDiv.style.fontSize = '500%'}\ntempDiv.innerHTML = blankFillers08[i];\ndocument.getElementById('words08').appendChild(tempDiv);\ndragElement(document.getElementById(\"draggableDiv08-\"+i));\n}\/**\/\nfor(i=0;i<blankFillers08.length;i++){\n\tvar tempDiv = document.getElementById(\"draggableDiv08-\"+i)\n\twordInitialPlaces08.push([tempDiv.getBoundingClientRect().x,tempDiv.getBoundingClientRect().y])\n}\nfor(i=0;i<blankFillers08.length;i++){\n\tvar tempDiv = document.getElementById(\"draggableDiv08-\"+i)\n\ttempDiv.style.position = 'absolute';\n\ttempDiv.style.top = wordInitialPlaces08[i][1]+'px';\n\ttempDiv.style.left = wordInitialPlaces08[i][0]+'px';\n}\n\n\n\n\/\/set div widths\nvar maxWidths = [0,0,0,0,0,0,0,0,0,0]\n\nfor ( j=1;j<blankFillers.length;j++){\n\tvar tempWordsDiv = document.getElementById('words0'+j);\n\tfor (k=0; k<tempWordsDiv.childElementCount ;k++){\n\t\ttempDiv = tempWordsDiv.childNodes[k]\n\t\tconsole.log(maxWidths[j],tempDiv.getBoundingClientRect().width)\n\t\tif (maxWidths[j]<tempDiv.getBoundingClientRect().width){maxWidths[j]=Math.floor(tempDiv.getBoundingClientRect().width)+20;}\n\t}\n}\n\nfor ( j=1;j<blankFillers.length;j++){\n\tmaxWidths[9] += maxWidths[j];\n}\n\nvar leftPlaces=[0,0,0,0,0,0,0,0,0];\n\/\/this moves all the divs over in columns\nfor ( j=1;j<blankFillers.length;j++){\t\n\tfor(k=1;k<j;k++){\n\t\tleftPlaces[j]+=maxWidths[k]+Math.floor(maxWidths[k]\/maxWidths[9]*120);\n\t}\n}\nfor ( j=1;j<blankFillers.length;j++){\t\n\t\tconsole.log(j);\n\tfor (k=0; k<blankFillers[j].length; k++){\n\t\tconsole.log(j,k,blankFillers[j].length);\n\t\tvar tempDiv = document.getElementById(\"draggableDiv0\"+j+\"-\"+k);\n\t\ttempDiv.style.left = leftPlaces[j]+'px';\n\t\t\/\/tempDiv.style.left = Math.floor(leftPlaces[j]\/leftPlace[7])*window.innerWidth+'px';\n\t}\n}\nconsole.log(maxWidths,leftPlaces);\t\n}setUp();\n\n\/\/Make the divs Draggable VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV\nfunction dragElement(elmnt) {\n  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;\n  \/*if (document.getElementById(elmnt.id + \"header\")) {\n    \/\/ if present, the header is where you move the DIV from:\n    document.getElementById(elmnt.id + \"header\").onmousedown = dragMouseDown;\n  } else {\n    \/\/ otherwise, move the DIV from anywhere inside the DIV:\n    *\/\n\telmnt.onmousedown = dragMouseDown;\n\telmnt.ontouchstart = dragTouchDown;\n\t\n  \/\/}\n\n  function dragMouseDown(e) {\n    e = e || window.event;\n    e.preventDefault();\n    \/\/ get the mouse cursor position at startup:\n    pos3 = e.clientX;\n    pos4 = e.clientY;\n    document.onmouseup = closeDragElement;\n    \/\/ call a function whenever the cursor moves:\n    document.onmousemove = elementDrag;\n\t\n  }\n   function dragTouchDown(e) {\n    e = e || window.event;\n    e.preventDefault();\n    \/\/ get the touch position at startup:\n    pos3 = e.touches[0].clientX;\n    pos4 = e.touches[0].clientY;\n    document.ontouchend = closeTouchElement;\n    document.ontouchmove = elementTouchDrag;\n  }\n\n  function elementDrag(e) {\n    e = e || window.event;\n    e.preventDefault();\n    \/\/ calculate the new cursor position:\n    pos1 = pos3 - e.clientX;\n    pos2 = pos4 - e.clientY;\n    pos3 = e.clientX;\n    pos4 = e.clientY;\n    \/\/ set the element's new position:\n    elmnt.style.top = (elmnt.offsetTop - pos2) + \"px\";\n    elmnt.style.left = (elmnt.offsetLeft - pos1) + \"px\";\n  }\n  function elementTouchDrag(e) {\n    e = e || window.event;\n    e.preventDefault();\n    \/\/ calculate the new touch position:\n    pos1 = pos3 - e.touches[0].clientX;\n    pos2 = pos4 - e.touches[0].clientY;\n    pos3 = e.touches[0].clientX;\n    pos4 = e.touches[0].clientY;\n    \/\/ set the element's new position:\n    elmnt.style.top = (elmnt.offsetTop - pos2) + \"px\";\n    elmnt.style.left = (elmnt.offsetLeft - pos1) + \"px\";\n  }\n  \n\n  function closeDragElement() {\n    \/\/ stop moving when mouse button is released:\n    document.onmouseup = null;\n    document.onmousemove = null;\n  }\n  \n  function closeTouchElement() {\n    \/\/ stop moving when touch is released:\n    document.ontouchend = null;\n    document.ontouchmove = null;\n  }\n}\t\n<\/script>\n\n<\/html>\n\n\n\n<p>Kyle's draggable<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE HTML>\r\n&lt;!!!!!!!!!!!!!!!!!!!!!!!!!!! IMPORTANT NOTE - Just change around Line 70 - 90 !!!!!!!>\r\n&lt;html lang=\"en-US\">\r\n&lt;div id='background'>\r\n&lt;head id='head'>\r\n\t&lt;meta charset=\"utf8\">\r\n\t&lt;title>Kyle's draggable&lt;\/title>\r\n\t&lt;link href='https:\/\/fonts.googleapis.com\/css?family=Andika' rel='stylesheet' type='text\/css'>\r\n\t&lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.3\/jquery.min.js\">&lt;\/script>\r\n\t&lt;script src=\"https:\/\/apis.google.com\/js\/platform.js\" async defer>&lt;\/script>\t\r\n\t\t\r\n    &lt;div id = \"empty\" style='display: none;'>&lt;\/div>\r\n\t\r\n\t\t&lt;style>\r\n\t\t\r\n\t\t\t\tbody\r\n\t\t{\r\n\t\t\t\/*background-image:url('https:\/\/teacherkyle.xyz\/assets\/images\/BG.png') ;\r\n\t\t\tbackground-size: 100% 100%;\r\n\t\t\tbackground-repeat: no-repeat;*\/\r\n\t\t\ttext-align: center;\r\n\t\t\tpadding: 10px;\r\n\t\t\tcolor: black;\r\n\t\t\tfont-size: 2rem;\r\n\t\t\tfont-family: 'Andika';\r\n\t\t\t\/*margin: 0;*\/\r\n\t\t\t\/*position:absolute;*\/\r\n\t\t\t\r\n\t\t}\t\t\r\n&lt;\/style>\r\n\r\n&lt;\/head>\r\n\r\n&lt;div id= 'SentenceDiv01'>_________ _________ ________________________ ___________?&lt;\/div>\r\n&lt;br>\r\n&lt;br>\r\n&lt;div id= 'SentenceDiv02'>____________ ________ __________ .&lt;\/div>\r\n\r\n&lt;div id= 'theWordsHolder' style='display: inline-block; overflow: visible; white-space: nowrap; vertical-align: top;'>\r\n&lt;div id= 'words01' style='display: inline-block; width: 15%; overflow: visible; white-space: nowrap; vertical-align: top;'>&lt;\/div>\r\n&lt;div id= 'words02' style='display: inline-block; width: 15%; overflow: visible; white-space: nowrap; vertical-align: top;'>&lt;\/div>\r\n&lt;div id= 'words03' style='display: inline-block; width: 15%; overflow: visible; white-space: nowrap; vertical-align: top;'>&lt;\/div>\r\n&lt;div id= 'words04' style='display: inline-block; width: 15%; overflow: visible; white-space: nowrap; vertical-align: top;'>&lt;\/div>\r\n&lt;div id= 'words05' style='display: inline-block; width: 15%; overflow: visible; white-space: nowrap; vertical-align: top;'>&lt;\/div>\r\n&lt;div id= 'words06' style='display: inline-block; width: 15%; overflow: visible; white-space: nowrap; vertical-align: top;'>&lt;\/div>\r\n&lt;div id= 'words07' style='display: inline-block; width: 15%; overflow: visible; white-space: nowrap; vertical-align: top;'>&lt;\/div>\r\n&lt;div id= 'words08' style='display: inline-block; width: 15%; overflow: visible; white-space: nowrap; vertical-align: top;'>&lt;\/div>\r\n&lt;\/div>\r\n&lt;div id= 'logSpan'>&lt;\/div>\t \r\n\t\r\n&lt;script>\r\n\r\n\r\nvar blankFillers01 = &#91;];\r\nvar blankFillers02 = &#91;\"you\",\"I\",\"he\",\"he\",\"she\",\"she\",\"they\",\"they\"];\r\nvar blankFillers03 = &#91;\"clean____ the table\",\"cook____ dinner\", \"play____ a game\",\"paint____ the fence\",\"water____ the flowers\",\"climb_____ a tree\",\"ed\", \"ing\"];\r\nvar blankFillers04 = &#91;\"now\", \"last night\"];\r\nvar blankFillers05 = &#91;\"Yes,\",\"No,\"];\r\nvar blankFillers06 = &#91;\"is\",\"isn't\",\"am\",\"did\",\"I'm\",\"not\",\"didn't\"];\r\nvar blankFillers07 = &#91;];\r\nvar blankFillers08 = &#91;];\r\nvar blankFillers=&#91;0,blankFillers01,blankFillers02,blankFillers03,blankFillers04,blankFillers05,blankFillers06,blankFillers07,blankFillers08];\r\n\r\nvar wordInitialPlaces01 = &#91;]; var wordInitialPlaces02 = &#91;]; var wordInitialPlaces03 = &#91;]; var wordInitialPlaces04 = &#91;]; var wordInitialPlaces05 = &#91;]; var wordInitialPlaces06 = &#91;];\r\nvar wordInitialPlaces07 = &#91;]; var wordInitialPlaces08 = &#91;];\r\n\r\nfunction getParameterByName(name) {\r\n\tvar match = RegExp('&#91;?&amp;]' + name + '=(&#91;^&amp;]*)').exec(window.location.search);\r\n\treturn match &amp;&amp; decodeURIComponent(match&#91;1].replace(\/\\+\/g, ' '));\r\n}\r\nvar seeHearSpeakSpell = 'Hear';\r\nvar whichVocab = getParameterByName('whichSentence');\r\nif(whichVocab == null){whichVocab ='';}\r\n\r\n\r\nvar charSize = '';\r\n\r\nfunction setUp(){\r\n\tvar sentence1 = document.getElementById('SentenceDiv01'); sentence1.style.fontSize ='150%';\r\n\tvar sentence2 = document.getElementById('SentenceDiv02'); sentence2.style.fontSize ='150%';\r\n\t\r\n\t\r\n\t\/\/Change this Part VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV \r\n\t\t\r\n\tsentence1.innerHTML = \"__________________________________________\"\r\n\tsentence2.innerHTML = \"__________________________________________\"\t\r\n\t\/\/document.getElementById('specialBlank').style.color = 'gray';\r\n\t\r\n\t\tblankFillers01 = &#91;\"What\",\"Where\"];\r\n\t\tblankFillers02 = &#91;\"is\",\"are\",\"am\",\"is\",\"are\"];\r\n\t\tblankFillers03 = &#91;\"I\",\"you\",\"he\",\"she\",\"He\",\"She\"];\r\n\t\tblankFillers04 = &#91;\"watching\",\"doing\", \"brushing\",\"watching\",\"doing\",\"brushing\"];\r\n\t\tblankFillers05 = &#91;\"my\",\"your\",\"his\",\"her\",\"his\",\"her\",\"the\",'the'];\r\n\t\tblankFillers06 = &#91;\"teeth\",\"homework\",\"dishes\",\"TV\",\"teeth\",\"homework\",\"dishes\",\"TV\"];\r\n\t\tblankFillers07 = &#91;\"living room\",\"dining room\",\"bedroom\",'bathroom','kitchen'];\r\n\t\tblankFillers08 = &#91;\".\",\",\",\"?\",\"in the\"];\r\n\t\tblankFillers=&#91;0,blankFillers01,blankFillers02,blankFillers03,blankFillers04,blankFillers05,blankFillers06,blankFillers07,blankFillers08];\r\n\t\r\n\t\/\/ Change this Part ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\r\n\t\r\n\r\n\r\n\/\/ Get the words into divs and draggable and placed\r\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ 01\r\nfor(i=0;i&lt;blankFillers01.length;i++){\r\n\tvar tempDiv = document.createElement('div');\r\n\ttempDiv.id = 'draggableDiv01-'+i;\r\n\ttempDiv.style = \"padding: 0px; cursor: move; z-index: 10; border-left: 5px solid #ff0000; border-right: 5px solid #ff0000; background-color: #ff0000; color: #000000; z-index: 9; text-align: center; line-height: 1.2 ;font-size: 150%;\"\r\n\tif (charSize == 'letter'){tempDiv.style.fontSize = '500%'}\r\n\ttempDiv.innerHTML = blankFillers01&#91;i];\r\n\tdocument.getElementById('words01').appendChild(tempDiv);\r\n\tdragElement(document.getElementById(\"draggableDiv01-\"+i));\r\n}\/*position: absolute;*\/\r\nfor(i=0;i&lt;blankFillers01.length;i++){\r\n\tvar tempDiv = document.getElementById(\"draggableDiv01-\"+i)\r\n\twordInitialPlaces01.push(&#91;tempDiv.getBoundingClientRect().x,tempDiv.getBoundingClientRect().y])\r\n\t\/\/console.log(wordInitialPlaces01)\r\n}\r\nfor(i=0;i&lt;blankFillers01.length;i++){\r\n\tvar tempDiv = document.getElementById(\"draggableDiv01-\"+i)\r\n\ttempDiv.style.position = 'absolute';\r\n\ttempDiv.style.top = wordInitialPlaces01&#91;i]&#91;1]+'px';\r\n\ttempDiv.style.left = wordInitialPlaces01&#91;i]&#91;0]+'px';\r\n}\r\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ 02\r\nfor(i=0;i&lt;blankFillers02.length;i++){\r\nvar tempDiv = document.createElement('div');\r\ntempDiv.id = 'draggableDiv02-'+i;\r\ntempDiv.style = \"padding: 0px; cursor: move; z-index: 10; border-left: 5px solid #ff8400; border-right: 5px solid #ff8400; background-color: #ff8400; color: #000000; z-index: 9; text-align: center; line-height: 1.2;font-size: 150%;\"\r\nif (charSize == 'letter'){tempDiv.style.fontSize = '500%'}\r\ntempDiv.innerHTML = blankFillers02&#91;i];\r\ndocument.getElementById('words02').appendChild(tempDiv);\r\ndragElement(document.getElementById(\"draggableDiv02-\"+i));\r\n}\/**\/\r\nfor(i=0;i&lt;blankFillers02.length;i++){\r\n\tvar tempDiv = document.getElementById(\"draggableDiv02-\"+i)\r\n\twordInitialPlaces02.push(&#91;tempDiv.getBoundingClientRect().x,tempDiv.getBoundingClientRect().y])\r\n}\r\nfor(i=0;i&lt;blankFillers02.length;i++){\r\n\tvar tempDiv = document.getElementById(\"draggableDiv02-\"+i)\r\n\ttempDiv.style.position = 'absolute';\r\n\ttempDiv.style.top = wordInitialPlaces02&#91;i]&#91;1]+'px';\r\n\ttempDiv.style.left = wordInitialPlaces02&#91;i]&#91;0]+'px';\r\n}\r\n\r\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ 03\r\nfor(i=0;i&lt;blankFillers03.length;i++){\r\nvar tempDiv = document.createElement('div');\r\ntempDiv.id = 'draggableDiv03-'+i;\r\ntempDiv.style = \"padding: 0px; cursor: move; z-index: 10; border-left: 5px solid #fbff00; border-right: 5px solid #fbff00; background-color: #fbff00; color: #000000;z-index: 9; text-align: center; line-height: 1.2;font-size: 150%;\"\r\nif (charSize == 'letter'){tempDiv.style.fontSize = '500%'}\r\ntempDiv.innerHTML = blankFillers03&#91;i];\r\ndocument.getElementById('words03').appendChild(tempDiv);\r\ndragElement(document.getElementById(\"draggableDiv03-\"+i));\r\n}\/**\/\r\nfor(i=0;i&lt;blankFillers03.length;i++){\r\n\tvar tempDiv = document.getElementById(\"draggableDiv03-\"+i)\r\n\twordInitialPlaces03.push(&#91;tempDiv.getBoundingClientRect().x,tempDiv.getBoundingClientRect().y])\r\n}\r\nfor(i=0;i&lt;blankFillers03.length;i++){\r\n\tvar tempDiv = document.getElementById(\"draggableDiv03-\"+i)\r\n\ttempDiv.style.position = 'absolute';\r\n\ttempDiv.style.top = wordInitialPlaces03&#91;i]&#91;1]+'px';\r\n\ttempDiv.style.left = wordInitialPlaces03&#91;i]&#91;0]+'px';\r\n}\r\n\r\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ 04\r\nfor(i=0;i&lt;blankFillers04.length;i++){\r\nvar tempDiv = document.createElement('div');\r\ntempDiv.id = 'draggableDiv04-'+i;\r\ntempDiv.style = \"padding: 0px; cursor: move; z-index: 10; border-left: 5px solid #22ff00; border-right: 5px solid #22ff00; background-color: #22ff00; color: #000000; z-index: 9; text-align: center; line-height: 1.2;font-size: 150%;\"\r\nif (charSize == 'letter'){tempDiv.style.fontSize = '500%'}\r\ntempDiv.innerHTML = blankFillers04&#91;i];\r\ndocument.getElementById('words04').appendChild(tempDiv);\r\ndragElement(document.getElementById(\"draggableDiv04-\"+i));\r\n}\/**\/\r\nfor(i=0;i&lt;blankFillers04.length;i++){\r\n\tvar tempDiv = document.getElementById(\"draggableDiv04-\"+i)\r\n\twordInitialPlaces04.push(&#91;tempDiv.getBoundingClientRect().x,tempDiv.getBoundingClientRect().y])\r\n}\r\nfor(i=0;i&lt;blankFillers04.length;i++){\r\n\tvar tempDiv = document.getElementById(\"draggableDiv04-\"+i)\r\n\ttempDiv.style.position = 'absolute';\r\n\ttempDiv.style.top = wordInitialPlaces04&#91;i]&#91;1]+'px';\r\n\ttempDiv.style.left = wordInitialPlaces04&#91;i]&#91;0]+'px';\r\n}\r\n\r\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ 05\r\nfor(i=0;i&lt;blankFillers05.length;i++){\r\nvar tempDiv = document.createElement('div');\r\ntempDiv.id = 'draggableDiv05-'+i;\r\ntempDiv.style = \"padding: 0px; cursor: move; z-index: 10; border-left: 5px solid #00e9f5; border-right: 5px solid #00e9f5;background-color: #00e9f5; color: #000000; z-index: 9; text-align: center; line-height: 1.2;font-size: 150%;\"\r\nif (charSize == 'letter'){tempDiv.style.fontSize = '500%'}\r\ntempDiv.innerHTML = blankFillers05&#91;i];\r\ndocument.getElementById('words05').appendChild(tempDiv);\r\ndragElement(document.getElementById(\"draggableDiv05-\"+i));\r\n}\/**\/\r\nfor(i=0;i&lt;blankFillers05.length;i++){\r\n\tvar tempDiv = document.getElementById(\"draggableDiv05-\"+i)\r\n\twordInitialPlaces05.push(&#91;tempDiv.getBoundingClientRect().x,tempDiv.getBoundingClientRect().y])\r\n}\r\nfor(i=0;i&lt;blankFillers05.length;i++){\r\n\tvar tempDiv = document.getElementById(\"draggableDiv05-\"+i)\r\n\ttempDiv.style.position = 'absolute';\r\n\ttempDiv.style.top = wordInitialPlaces05&#91;i]&#91;1]+'px';\r\n\ttempDiv.style.left = wordInitialPlaces05&#91;i]&#91;0]+'px';\r\n}\r\n\r\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ 06\r\nfor(i=0;i&lt;blankFillers06.length;i++){\r\nvar tempDiv = document.createElement('div');\r\ntempDiv.id = 'draggableDiv06-'+i;\r\ntempDiv.style = \"padding: 0px; cursor: move; z-index: 10; border-left: 5px solid #df7efc; border-right: 5px solid #df7efc; background-color: #df7efc; color: #000000; z-index: 9; text-align: center; line-height: 1.2;font-size: 150%;\"\r\nif (charSize == 'letter'){tempDiv.style.fontSize = '500%'}\r\ntempDiv.innerHTML = blankFillers06&#91;i];\r\ndocument.getElementById('words06').appendChild(tempDiv);\r\ndragElement(document.getElementById(\"draggableDiv06-\"+i));\r\n}\/**\/\r\nfor(i=0;i&lt;blankFillers06.length;i++){\r\n\tvar tempDiv = document.getElementById(\"draggableDiv06-\"+i)\r\n\twordInitialPlaces06.push(&#91;tempDiv.getBoundingClientRect().x,tempDiv.getBoundingClientRect().y])\r\n}\r\nfor(i=0;i&lt;blankFillers06.length;i++){\r\n\tvar tempDiv = document.getElementById(\"draggableDiv06-\"+i)\r\n\ttempDiv.style.position = 'absolute';\r\n\ttempDiv.style.top = wordInitialPlaces06&#91;i]&#91;1]+'px';\r\n\ttempDiv.style.left = wordInitialPlaces06&#91;i]&#91;0]+'px';\r\n}\r\n\r\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ 07\r\nfor(i=0;i&lt;blankFillers07.length;i++){\r\nvar tempDiv = document.createElement('div');\r\ntempDiv.id = 'draggableDiv07-'+i;\r\ntempDiv.style = \"padding: 0px; cursor: move; z-index: 10; border-left: 5px solid #000000; border-right: 5px solid #000000; background-color: #000000; color: #FFFFFF; z-index: 1; text-align: center; line-height: 1.2;font-size: 150%;\"\r\nif (charSize == 'letter'){tempDiv.style.fontSize = '500%'}\r\ntempDiv.innerHTML = blankFillers07&#91;i];\r\ndocument.getElementById('words07').appendChild(tempDiv);\r\ndragElement(document.getElementById(\"draggableDiv07-\"+i));\r\n}\/**\/\r\nfor(i=0;i&lt;blankFillers07.length;i++){\r\n\tvar tempDiv = document.getElementById(\"draggableDiv07-\"+i)\r\n\twordInitialPlaces07.push(&#91;tempDiv.getBoundingClientRect().x,tempDiv.getBoundingClientRect().y])\r\n}\r\nfor(i=0;i&lt;blankFillers07.length;i++){\r\n\tvar tempDiv = document.getElementById(\"draggableDiv07-\"+i)\r\n\ttempDiv.style.position = 'absolute';\r\n\ttempDiv.style.top = wordInitialPlaces07&#91;i]&#91;1]+'px';\r\n\ttempDiv.style.left = wordInitialPlaces07&#91;i]&#91;0]+'px';\r\n}\r\n\r\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ 08\r\nfor(i=0;i&lt;blankFillers08.length;i++){\r\nvar tempDiv = document.createElement('div');\r\ntempDiv.id = 'draggableDiv08-'+i;\r\ntempDiv.style = \"border-right: 5px solid #929292; border-left: 5px solid #929292;padding: 0px; cursor: move; z-index: 10; background-color: #929292; color: #000000; z-index: 1; text-align: center; line-height: 1.2;font-size: 150%;\"\r\nif (charSize == 'letter'){tempDiv.style.fontSize = '500%'}\r\ntempDiv.innerHTML = blankFillers08&#91;i];\r\ndocument.getElementById('words08').appendChild(tempDiv);\r\ndragElement(document.getElementById(\"draggableDiv08-\"+i));\r\n}\/**\/\r\nfor(i=0;i&lt;blankFillers08.length;i++){\r\n\tvar tempDiv = document.getElementById(\"draggableDiv08-\"+i)\r\n\twordInitialPlaces08.push(&#91;tempDiv.getBoundingClientRect().x,tempDiv.getBoundingClientRect().y])\r\n}\r\nfor(i=0;i&lt;blankFillers08.length;i++){\r\n\tvar tempDiv = document.getElementById(\"draggableDiv08-\"+i)\r\n\ttempDiv.style.position = 'absolute';\r\n\ttempDiv.style.top = wordInitialPlaces08&#91;i]&#91;1]+'px';\r\n\ttempDiv.style.left = wordInitialPlaces08&#91;i]&#91;0]+'px';\r\n}\r\n\r\n\r\n\r\n\/\/set div widths\r\nvar maxWidths = &#91;0,0,0,0,0,0,0,0,0,0]\r\n\r\nfor ( j=1;j&lt;blankFillers.length;j++){\r\n\tvar tempWordsDiv = document.getElementById('words0'+j);\r\n\tfor (k=0; k&lt;tempWordsDiv.childElementCount ;k++){\r\n\t\ttempDiv = tempWordsDiv.childNodes&#91;k]\r\n\t\tconsole.log(maxWidths&#91;j],tempDiv.getBoundingClientRect().width)\r\n\t\tif (maxWidths&#91;j]&lt;tempDiv.getBoundingClientRect().width){maxWidths&#91;j]=Math.floor(tempDiv.getBoundingClientRect().width)+20;}\r\n\t}\r\n}\r\n\r\nfor ( j=1;j&lt;blankFillers.length;j++){\r\n\tmaxWidths&#91;9] += maxWidths&#91;j];\r\n}\r\n\r\nvar leftPlaces=&#91;0,0,0,0,0,0,0,0,0];\r\n\/\/this moves all the divs over in columns\r\nfor ( j=1;j&lt;blankFillers.length;j++){\t\r\n\tfor(k=1;k&lt;j;k++){\r\n\t\tleftPlaces&#91;j]+=maxWidths&#91;k]+Math.floor(maxWidths&#91;k]\/maxWidths&#91;9]*120);\r\n\t}\r\n}\r\nfor ( j=1;j&lt;blankFillers.length;j++){\t\r\n\t\tconsole.log(j);\r\n\tfor (k=0; k&lt;blankFillers&#91;j].length; k++){\r\n\t\tconsole.log(j,k,blankFillers&#91;j].length);\r\n\t\tvar tempDiv = document.getElementById(\"draggableDiv0\"+j+\"-\"+k);\r\n\t\ttempDiv.style.left = leftPlaces&#91;j]+'px';\r\n\t\t\/\/tempDiv.style.left = Math.floor(leftPlaces&#91;j]\/leftPlace&#91;7])*window.innerWidth+'px';\r\n\t}\r\n}\r\nconsole.log(maxWidths,leftPlaces);\t\r\n}setUp();\r\n\r\n\/\/Make the divs Draggable VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV\r\nfunction dragElement(elmnt) {\r\n  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;\r\n  \/*if (document.getElementById(elmnt.id + \"header\")) {\r\n    \/\/ if present, the header is where you move the DIV from:\r\n    document.getElementById(elmnt.id + \"header\").onmousedown = dragMouseDown;\r\n  } else {\r\n    \/\/ otherwise, move the DIV from anywhere inside the DIV:\r\n    *\/\r\n\telmnt.onmousedown = dragMouseDown;\r\n\telmnt.ontouchstart = dragTouchDown;\r\n\t\r\n  \/\/}\r\n\r\n  function dragMouseDown(e) {\r\n    e = e || window.event;\r\n    e.preventDefault();\r\n    \/\/ get the mouse cursor position at startup:\r\n    pos3 = e.clientX;\r\n    pos4 = e.clientY;\r\n    document.onmouseup = closeDragElement;\r\n    \/\/ call a function whenever the cursor moves:\r\n    document.onmousemove = elementDrag;\r\n\t\r\n  }\r\n   function dragTouchDown(e) {\r\n    e = e || window.event;\r\n    e.preventDefault();\r\n    \/\/ get the touch position at startup:\r\n    pos3 = e.touches&#91;0].clientX;\r\n    pos4 = e.touches&#91;0].clientY;\r\n    document.ontouchend = closeTouchElement;\r\n    document.ontouchmove = elementTouchDrag;\r\n  }\r\n\r\n  function elementDrag(e) {\r\n    e = e || window.event;\r\n    e.preventDefault();\r\n    \/\/ calculate the new cursor position:\r\n    pos1 = pos3 - e.clientX;\r\n    pos2 = pos4 - e.clientY;\r\n    pos3 = e.clientX;\r\n    pos4 = e.clientY;\r\n    \/\/ set the element's new position:\r\n    elmnt.style.top = (elmnt.offsetTop - pos2) + \"px\";\r\n    elmnt.style.left = (elmnt.offsetLeft - pos1) + \"px\";\r\n  }\r\n  function elementTouchDrag(e) {\r\n    e = e || window.event;\r\n    e.preventDefault();\r\n    \/\/ calculate the new touch position:\r\n    pos1 = pos3 - e.touches&#91;0].clientX;\r\n    pos2 = pos4 - e.touches&#91;0].clientY;\r\n    pos3 = e.touches&#91;0].clientX;\r\n    pos4 = e.touches&#91;0].clientY;\r\n    \/\/ set the element's new position:\r\n    elmnt.style.top = (elmnt.offsetTop - pos2) + \"px\";\r\n    elmnt.style.left = (elmnt.offsetLeft - pos1) + \"px\";\r\n  }\r\n  \r\n\r\n  function closeDragElement() {\r\n    \/\/ stop moving when mouse button is released:\r\n    document.onmouseup = null;\r\n    document.onmousemove = null;\r\n  }\r\n  \r\n  function closeTouchElement() {\r\n    \/\/ stop moving when touch is released:\r\n    document.ontouchend = null;\r\n    document.ontouchmove = null;\r\n  }\r\n}\t\r\n&lt;\/script>\r\n\r\n&lt;\/html>  <\/code><\/pre>\n\n\n\n<p>_________ _________ ________________________ ___________?<\/p>\n\n\n\n<p>____________ ________ __________ .<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A demo of the build a sentence html \u00a0 \u00a0It works best if you &#8220;refresh the page&#8221; after scrolling down so that the black lines are close to the top of the page. Kyle&#8217;s draggable _________ _________ ________________________ ___________? ____________ ________ __________ . Kyle&#8217;s draggable _________ _________ ________________________ ___________? ____________ ________ __________ .<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"first-template","meta":{"ngg_post_thumbnail":0,"footnotes":""},"class_list":["post-130","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/teacherkyle.xyz\/index.php\/wp-json\/wp\/v2\/pages\/130","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/teacherkyle.xyz\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/teacherkyle.xyz\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/teacherkyle.xyz\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/teacherkyle.xyz\/index.php\/wp-json\/wp\/v2\/comments?post=130"}],"version-history":[{"count":1,"href":"https:\/\/teacherkyle.xyz\/index.php\/wp-json\/wp\/v2\/pages\/130\/revisions"}],"predecessor-version":[{"id":131,"href":"https:\/\/teacherkyle.xyz\/index.php\/wp-json\/wp\/v2\/pages\/130\/revisions\/131"}],"wp:attachment":[{"href":"https:\/\/teacherkyle.xyz\/index.php\/wp-json\/wp\/v2\/media?parent=130"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}