20_cloze_javascript_header

<script>  
	var handled = false,
	  clozes = document.getElementsByClassName("cloze"),
	  clr = window.getComputedStyle(clozes[0]).color,
	  bg = window.getComputedStyle(clozes[0]).background,
	  holder = [];
	hint = document.getElementById("hint");
	if (hint) {hintText = hint.innerHTML;}
	extra = document.getElementById("extra");
	if (extra) {extraText = extra.innerHTML;}
	if (extra || hint) {extraStep = 1;} else {extraStep = 0;}
	for (i = 0; i < clozes.length; ++i) {holder.push(clozes[i].innerHTML);}
	if (clozes.length > 1) {
	  for (i = 0; i < clozes.length; ++i) {
		//clozes[i].style.background = clr;
			clozes[i].style.fontWeight = "bold";
		clozeChildren = clozes[i].getElementsByTagName("*");
		//for (j = 1; j < clozeChildren.length; ++j) {clozeChildren[j].style.background = clr;}
			clozes[i].innerHTML = "[|||]";
	  }
	  for (i = 0; i < clozes.length; ++i) {
		(function(j) {
		  clozes[j].onclick = function() {
			this.innerHTML = holder[j];
					this.style.fontWeight = "normal";
			this.style.background = bg;
			clozeChildren = this.getElementsByTagName("*");
			for (k = 1; k < clozeChildren.length; ++k) {
			  clozeChildren[k].style.background = bg;
			}
			this.style.cursor = 'text';
		  }
		})(i);
		clozes[i].style.cursor = 'help';
	  }
	  if (hint) {
		hint.innerHTML = 'HINT';
		hint.onclick = function() {
		  this.innerHTML = hintText;
		}
	  }
	  if (extra) {
		extra.innerHTML = '<hr>[more info]';
		extra.onclick = function() {
		  this.innerHTML = extraText;
		}
	  }
	}


	document.onkeypress = function(ev) {
	  if (handled) return false;
	}
	document.onkeydown = function() {
	  if (clozes.length > 1) {
		for (i = 0; i < clozes.length + extraStep; ++i) {
		  if ((event.which == 32 || event.which == 37 || event.which == 38 || event.which == 39 || event.which == 40 || event.which == 13) && i < clozes.length) {
			if (clozes[i].style.background != bg || clozes[i].innerHTML == "[|||]") {
				clozes[i].innerHTML = holder[i];
				clozes[i].style.fontWeight = "normal";
				clozes[i].style.background = bg;
				clozeChildren = clozes[i].getElementsByTagName("*");
				for (j = 1; j < clozeChildren.length; ++j) {
					clozeChildren[j].style.background = bg;
				}
				handled = true;
				return false
			}
		  }
		  if ((event.which == 32 || event.which == 37 || event.which == 38 || event.which == 39 || event.which == 40 || event.which == 13) && i == clozes.length) {
			if ((extra && extra.innerHTML != extraText) || (hint && hint.innerHTML != hintText)) {
				if (hint) {
					hint.innerHTML = hintText;
				}
				if (extra) {
					extra.innerHTML = extraText;
				}
				handled = true;
				return false
			}
		  }
		}
	  }
	  handled = false;
	  return true;
	}
	window.setTimeout(function() {
	  window.focus()
	}, 0);
</script>