Build a sentence demo – Teacher Kyle

A demo of the build a sentence html
It works best if you “refresh the page” after scrolling down so that the black lines are close to the top of the page.
Kyle’s draggable
_________ _________ ________________________ ___________?
____________ ________ __________ .
Kyle's draggable
<!DOCTYPE HTML>
<!!!!!!!!!!!!!!!!!!!!!!!!!!! IMPORTANT NOTE - Just change around Line 70 - 90 !!!!!!!>
<html lang="en-US">
<div id='background'>
<head id='head'>
	<meta charset="utf8">
	<title>Kyle's draggable</title>
	<link href='https://fonts.googleapis.com/css?family=Andika' rel='stylesheet' type='text/css'>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script src="https://apis.google.com/js/platform.js" async defer></script>	
		
    <div id = "empty" style='display: none;'></div>
	
		<style>
		
				body
		{
			/*background-image:url('https://teacherkyle.xyz/assets/images/BG.png') ;
			background-size: 100% 100%;
			background-repeat: no-repeat;*/
			text-align: center;
			padding: 10px;
			color: black;
			font-size: 2rem;
			font-family: 'Andika';
			/*margin: 0;*/
			/*position:absolute;*/
			
		}		
</style>

</head>

<div id= 'SentenceDiv01'>_________ _________ ________________________ ___________?</div>
<br>
<br>
<div id= 'SentenceDiv02'>____________ ________ __________ .</div>

<div id= 'theWordsHolder' style='display: inline-block; overflow: visible; white-space: nowrap; vertical-align: top;'>
<div id= 'words01' style='display: inline-block; width: 15%; overflow: visible; white-space: nowrap; vertical-align: top;'></div>
<div id= 'words02' style='display: inline-block; width: 15%; overflow: visible; white-space: nowrap; vertical-align: top;'></div>
<div id= 'words03' style='display: inline-block; width: 15%; overflow: visible; white-space: nowrap; vertical-align: top;'></div>
<div id= 'words04' style='display: inline-block; width: 15%; overflow: visible; white-space: nowrap; vertical-align: top;'></div>
<div id= 'words05' style='display: inline-block; width: 15%; overflow: visible; white-space: nowrap; vertical-align: top;'></div>
<div id= 'words06' style='display: inline-block; width: 15%; overflow: visible; white-space: nowrap; vertical-align: top;'></div>
<div id= 'words07' style='display: inline-block; width: 15%; overflow: visible; white-space: nowrap; vertical-align: top;'></div>
<div id= 'words08' style='display: inline-block; width: 15%; overflow: visible; white-space: nowrap; vertical-align: top;'></div>
</div>
<div id= 'logSpan'></div>	 
	
<script>


var blankFillers01 = [];
var blankFillers02 = ["you","I","he","he","she","she","they","they"];
var blankFillers03 = ["clean____ the table","cook____ dinner", "play____ a game","paint____ the fence","water____ the flowers","climb_____ a tree","ed", "ing"];
var blankFillers04 = ["now", "last night"];
var blankFillers05 = ["Yes,","No,"];
var blankFillers06 = ["is","isn't","am","did","I'm","not","didn't"];
var blankFillers07 = [];
var blankFillers08 = [];
var blankFillers=[0,blankFillers01,blankFillers02,blankFillers03,blankFillers04,blankFillers05,blankFillers06,blankFillers07,blankFillers08];

var wordInitialPlaces01 = []; var wordInitialPlaces02 = []; var wordInitialPlaces03 = []; var wordInitialPlaces04 = []; var wordInitialPlaces05 = []; var wordInitialPlaces06 = [];
var wordInitialPlaces07 = []; var wordInitialPlaces08 = [];

function getParameterByName(name) {
	var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
	return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
var seeHearSpeakSpell = 'Hear';
var whichVocab = getParameterByName('whichSentence');
if(whichVocab == null){whichVocab ='';}


var charSize = '';

function setUp(){
	var sentence1 = document.getElementById('SentenceDiv01'); sentence1.style.fontSize ='150%';
	var sentence2 = document.getElementById('SentenceDiv02'); sentence2.style.fontSize ='150%';
	
	
	//Change this Part VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV 
		
	sentence1.innerHTML = "__________________________________________"
	sentence2.innerHTML = "__________________________________________"	
	//document.getElementById('specialBlank').style.color = 'gray';
	
		blankFillers01 = ["What","Where"];
		blankFillers02 = ["is","are","am","is","are"];
		blankFillers03 = ["I","you","he","she","He","She"];
		blankFillers04 = ["watching","doing", "brushing","watching","doing","brushing"];
		blankFillers05 = ["my","your","his","her","his","her","the",'the'];
		blankFillers06 = ["teeth","homework","dishes","TV","teeth","homework","dishes","TV"];
		blankFillers07 = ["living room","dining room","bedroom",'bathroom','kitchen'];
		blankFillers08 = [".",",","?","in the"];
		blankFillers=[0,blankFillers01,blankFillers02,blankFillers03,blankFillers04,blankFillers05,blankFillers06,blankFillers07,blankFillers08];
	
	// Change this Part ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
	


// Get the words into divs and draggable and placed
/////////////// 01
for(i=0;i<blankFillers01.length;i++){
	var tempDiv = document.createElement('div');
	tempDiv.id = 'draggableDiv01-'+i;
	tempDiv.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%;"
	if (charSize == 'letter'){tempDiv.style.fontSize = '500%'}
	tempDiv.innerHTML = blankFillers01[i];
	document.getElementById('words01').appendChild(tempDiv);
	dragElement(document.getElementById("draggableDiv01-"+i));
}/*position: absolute;*/
for(i=0;i<blankFillers01.length;i++){
	var tempDiv = document.getElementById("draggableDiv01-"+i)
	wordInitialPlaces01.push([tempDiv.getBoundingClientRect().x,tempDiv.getBoundingClientRect().y])
	//console.log(wordInitialPlaces01)
}
for(i=0;i<blankFillers01.length;i++){
	var tempDiv = document.getElementById("draggableDiv01-"+i)
	tempDiv.style.position = 'absolute';
	tempDiv.style.top = wordInitialPlaces01[i][1]+'px';
	tempDiv.style.left = wordInitialPlaces01[i][0]+'px';
}
/////////////// 02
for(i=0;i<blankFillers02.length;i++){
var tempDiv = document.createElement('div');
tempDiv.id = 'draggableDiv02-'+i;
tempDiv.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%;"
if (charSize == 'letter'){tempDiv.style.fontSize = '500%'}
tempDiv.innerHTML = blankFillers02[i];
document.getElementById('words02').appendChild(tempDiv);
dragElement(document.getElementById("draggableDiv02-"+i));
}/**/
for(i=0;i<blankFillers02.length;i++){
	var tempDiv = document.getElementById("draggableDiv02-"+i)
	wordInitialPlaces02.push([tempDiv.getBoundingClientRect().x,tempDiv.getBoundingClientRect().y])
}
for(i=0;i<blankFillers02.length;i++){
	var tempDiv = document.getElementById("draggableDiv02-"+i)
	tempDiv.style.position = 'absolute';
	tempDiv.style.top = wordInitialPlaces02[i][1]+'px';
	tempDiv.style.left = wordInitialPlaces02[i][0]+'px';
}

/////////////// 03
for(i=0;i<blankFillers03.length;i++){
var tempDiv = document.createElement('div');
tempDiv.id = 'draggableDiv03-'+i;
tempDiv.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%;"
if (charSize == 'letter'){tempDiv.style.fontSize = '500%'}
tempDiv.innerHTML = blankFillers03[i];
document.getElementById('words03').appendChild(tempDiv);
dragElement(document.getElementById("draggableDiv03-"+i));
}/**/
for(i=0;i<blankFillers03.length;i++){
	var tempDiv = document.getElementById("draggableDiv03-"+i)
	wordInitialPlaces03.push([tempDiv.getBoundingClientRect().x,tempDiv.getBoundingClientRect().y])
}
for(i=0;i<blankFillers03.length;i++){
	var tempDiv = document.getElementById("draggableDiv03-"+i)
	tempDiv.style.position = 'absolute';
	tempDiv.style.top = wordInitialPlaces03[i][1]+'px';
	tempDiv.style.left = wordInitialPlaces03[i][0]+'px';
}

/////////////// 04
for(i=0;i<blankFillers04.length;i++){
var tempDiv = document.createElement('div');
tempDiv.id = 'draggableDiv04-'+i;
tempDiv.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%;"
if (charSize == 'letter'){tempDiv.style.fontSize = '500%'}
tempDiv.innerHTML = blankFillers04[i];
document.getElementById('words04').appendChild(tempDiv);
dragElement(document.getElementById("draggableDiv04-"+i));
}/**/
for(i=0;i<blankFillers04.length;i++){
	var tempDiv = document.getElementById("draggableDiv04-"+i)
	wordInitialPlaces04.push([tempDiv.getBoundingClientRect().x,tempDiv.getBoundingClientRect().y])
}
for(i=0;i<blankFillers04.length;i++){
	var tempDiv = document.getElementById("draggableDiv04-"+i)
	tempDiv.style.position = 'absolute';
	tempDiv.style.top = wordInitialPlaces04[i][1]+'px';
	tempDiv.style.left = wordInitialPlaces04[i][0]+'px';
}

/////////////// 05
for(i=0;i<blankFillers05.length;i++){
var tempDiv = document.createElement('div');
tempDiv.id = 'draggableDiv05-'+i;
tempDiv.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%;"
if (charSize == 'letter'){tempDiv.style.fontSize = '500%'}
tempDiv.innerHTML = blankFillers05[i];
document.getElementById('words05').appendChild(tempDiv);
dragElement(document.getElementById("draggableDiv05-"+i));
}/**/
for(i=0;i<blankFillers05.length;i++){
	var tempDiv = document.getElementById("draggableDiv05-"+i)
	wordInitialPlaces05.push([tempDiv.getBoundingClientRect().x,tempDiv.getBoundingClientRect().y])
}
for(i=0;i<blankFillers05.length;i++){
	var tempDiv = document.getElementById("draggableDiv05-"+i)
	tempDiv.style.position = 'absolute';
	tempDiv.style.top = wordInitialPlaces05[i][1]+'px';
	tempDiv.style.left = wordInitialPlaces05[i][0]+'px';
}

/////////////// 06
for(i=0;i<blankFillers06.length;i++){
var tempDiv = document.createElement('div');
tempDiv.id = 'draggableDiv06-'+i;
tempDiv.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%;"
if (charSize == 'letter'){tempDiv.style.fontSize = '500%'}
tempDiv.innerHTML = blankFillers06[i];
document.getElementById('words06').appendChild(tempDiv);
dragElement(document.getElementById("draggableDiv06-"+i));
}/**/
for(i=0;i<blankFillers06.length;i++){
	var tempDiv = document.getElementById("draggableDiv06-"+i)
	wordInitialPlaces06.push([tempDiv.getBoundingClientRect().x,tempDiv.getBoundingClientRect().y])
}
for(i=0;i<blankFillers06.length;i++){
	var tempDiv = document.getElementById("draggableDiv06-"+i)
	tempDiv.style.position = 'absolute';
	tempDiv.style.top = wordInitialPlaces06[i][1]+'px';
	tempDiv.style.left = wordInitialPlaces06[i][0]+'px';
}

/////////////// 07
for(i=0;i<blankFillers07.length;i++){
var tempDiv = document.createElement('div');
tempDiv.id = 'draggableDiv07-'+i;
tempDiv.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%;"
if (charSize == 'letter'){tempDiv.style.fontSize = '500%'}
tempDiv.innerHTML = blankFillers07[i];
document.getElementById('words07').appendChild(tempDiv);
dragElement(document.getElementById("draggableDiv07-"+i));
}/**/
for(i=0;i<blankFillers07.length;i++){
	var tempDiv = document.getElementById("draggableDiv07-"+i)
	wordInitialPlaces07.push([tempDiv.getBoundingClientRect().x,tempDiv.getBoundingClientRect().y])
}
for(i=0;i<blankFillers07.length;i++){
	var tempDiv = document.getElementById("draggableDiv07-"+i)
	tempDiv.style.position = 'absolute';
	tempDiv.style.top = wordInitialPlaces07[i][1]+'px';
	tempDiv.style.left = wordInitialPlaces07[i][0]+'px';
}

/////////////// 08
for(i=0;i<blankFillers08.length;i++){
var tempDiv = document.createElement('div');
tempDiv.id = 'draggableDiv08-'+i;
tempDiv.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%;"
if (charSize == 'letter'){tempDiv.style.fontSize = '500%'}
tempDiv.innerHTML = blankFillers08[i];
document.getElementById('words08').appendChild(tempDiv);
dragElement(document.getElementById("draggableDiv08-"+i));
}/**/
for(i=0;i<blankFillers08.length;i++){
	var tempDiv = document.getElementById("draggableDiv08-"+i)
	wordInitialPlaces08.push([tempDiv.getBoundingClientRect().x,tempDiv.getBoundingClientRect().y])
}
for(i=0;i<blankFillers08.length;i++){
	var tempDiv = document.getElementById("draggableDiv08-"+i)
	tempDiv.style.position = 'absolute';
	tempDiv.style.top = wordInitialPlaces08[i][1]+'px';
	tempDiv.style.left = wordInitialPlaces08[i][0]+'px';
}



//set div widths
var maxWidths = [0,0,0,0,0,0,0,0,0,0]

for ( j=1;j<blankFillers.length;j++){
	var tempWordsDiv = document.getElementById('words0'+j);
	for (k=0; k<tempWordsDiv.childElementCount ;k++){
		tempDiv = tempWordsDiv.childNodes[k]
		console.log(maxWidths[j],tempDiv.getBoundingClientRect().width)
		if (maxWidths[j]<tempDiv.getBoundingClientRect().width){maxWidths[j]=Math.floor(tempDiv.getBoundingClientRect().width)+20;}
	}
}

for ( j=1;j<blankFillers.length;j++){
	maxWidths[9] += maxWidths[j];
}

var leftPlaces=[0,0,0,0,0,0,0,0,0];
//this moves all the divs over in columns
for ( j=1;j<blankFillers.length;j++){	
	for(k=1;k<j;k++){
		leftPlaces[j]+=maxWidths[k]+Math.floor(maxWidths[k]/maxWidths[9]*120);
	}
}
for ( j=1;j<blankFillers.length;j++){	
		console.log(j);
	for (k=0; k<blankFillers[j].length; k++){
		console.log(j,k,blankFillers[j].length);
		var tempDiv = document.getElementById("draggableDiv0"+j+"-"+k);
		tempDiv.style.left = leftPlaces[j]+'px';
		//tempDiv.style.left = Math.floor(leftPlaces[j]/leftPlace[7])*window.innerWidth+'px';
	}
}
console.log(maxWidths,leftPlaces);	
}setUp();

//Make the divs Draggable VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV
function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  /*if (document.getElementById(elmnt.id + "header")) {
    // if present, the header is where you move the DIV from:
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    // otherwise, move the DIV from anywhere inside the DIV:
    */
	elmnt.onmousedown = dragMouseDown;
	elmnt.ontouchstart = dragTouchDown;
	
  //}

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
	
  }
   function dragTouchDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the touch position at startup:
    pos3 = e.touches[0].clientX;
    pos4 = e.touches[0].clientY;
    document.ontouchend = closeTouchElement;
    document.ontouchmove = elementTouchDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }
  function elementTouchDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new touch position:
    pos1 = pos3 - e.touches[0].clientX;
    pos2 = pos4 - e.touches[0].clientY;
    pos3 = e.touches[0].clientX;
    pos4 = e.touches[0].clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }
  

  function closeDragElement() {
    // stop moving when mouse button is released:
    document.onmouseup = null;
    document.onmousemove = null;
  }
  
  function closeTouchElement() {
    // stop moving when touch is released:
    document.ontouchend = null;
    document.ontouchmove = null;
  }
}	
</script>

</html>
_________ _________ ________________________ ___________?
____________ ________ __________ .