diff --git a/export/exporthtml_snakes.php b/export/exporthtml_snakes.php
index 12bea6f..8215c17 100644
--- a/export/exporthtml_snakes.php
+++ b/export/exporthtml_snakes.php
@@ -35,7 +35,10 @@ defined('MOODLE_INTERNAL') || die();
 
 <link rel="stylesheet" type="text/css" href="css/subModal.css" />
     <script type="text/javascript" src="js/common.js"></script>
-    <script type="text/javascript" src="js/subModal.js"></script>
+
+<?php
+    createsubmodaljs();
+?>
     
 <style type="text/css">
 #pawn
@@ -67,6 +70,7 @@ body
 // Snakes for Moodle by Maria Rigkou.
 
 var boards = 1;
+var board_images = new Array( boards);
 var board_names = new Array( boards);
 var pawn_width = new Array(boards);
 var pawn_height = new Array(boards);
@@ -94,6 +98,7 @@ var quest_resp = "";    // Answer
 var quest_feedb = "";   // feedback
 var quest_total = 25; // Count of questions
 
+board_images[ 0] = '<?php echo $board->fileboard; ?>';
 board_names[ 0] = "<?php echo $game->name; ?>";
 board_cols [0] = <?php echo $board->cols; ?>;
 board_rows [0] = <?php echo $board->rows; ?>;
@@ -161,6 +166,7 @@ function ShowMainForm()
     var col_width = (board_width[current_board]-board_headerx[current_board]-board_footerx[current_board])/cols;
     var col_height = (board_height[current_board]-board_headery[current_board]-board_footery[current_board])/rows;
 
+    document.write('<img id="boardimage" src="images/' + board_images[ current_board] + '">');
     document.write('<div id="dicecont">&nbsp;</div>');
 
     if( current_position  >= 0) {
@@ -510,3 +516,306 @@ function move_pawn() {
 
 </body>
 </html>
+
+<?php
+function createsubmodaljs() {
+?>
+<script type="text/javascript" src="js/common.js">
+var gPopupMask = null;
+var gPopupContainer = null;
+var gPopFrame = null;
+var gReturnFunc;
+var gPopupIsShown = false;
+var gDefaultPage = "/loading.html";
+var gHideSelects = false;
+var gReturnVal = null;
+
+var gTabIndexes = new Array();
+// Pre-defined list of tags we want to disable/enable tabbing into
+var gTabbableTags = new Array("A","BUTTON","TEXTAREA","INPUT","IFRAME");	
+
+// If using Mozilla or Firefox, use Tab-key trap.
+if (!document.all) {
+	document.onkeypress = keyDownHandler;
+}
+
+/**
+ * Initializes popup code on load.	
+ */
+function initPopUp() {
+	// Add the HTML to the body
+	theBody = document.getElementsByTagName('BODY')[0];
+	popmask = document.createElement('div');
+	popmask.id = 'popupMask';
+	popcont = document.createElement('div');
+	popcont.id = 'popupContainer';
+	popcont.innerHTML = '' +
+		'<div id="popupInner">' +
+			'<div id="popupTitleBar">' +
+				'<div id="popupTitle"></div>' +
+				'<div id="popupControls">' +
+					'<img src="close.gif" onclick="hidePopWin(false);" id="popCloseBox" />' +
+				'</div>' +
+			'</div>' +
+			'<iframe src="'+ gDefaultPage +'" style="width:100%;height:100%;background-color:transparent;" scrolling="auto" frameborder="0" allowtransparency="true" id="popupFrame" name="popupFrame" width="100%" height="100%"></iframe>' +
+		'</div>';
+	theBody.appendChild(popmask);
+	theBody.appendChild(popcont);
+	
+	gPopupMask = document.getElementById("popupMask");
+	gPopupContainer = document.getElementById("popupContainer");
+	gPopFrame = document.getElementById("popupFrame");	
+	
+	// check to see if this is IE version 6 or lower. hide select boxes if so
+	// maybe they'll fix this in version 7?
+	var brsVersion = parseInt(window.navigator.appVersion.charAt(0), 10);
+	if (brsVersion <= 6 && window.navigator.userAgent.indexOf("MSIE") > -1) {
+		gHideSelects = true;
+	}
+	
+	// Add onclick handlers to 'a' elements of class submodal or submodal-width-height
+	var elms = document.getElementsByTagName('a');
+	for (i = 0; i < elms.length; i++) {
+		if (elms[i].className.indexOf("submodal") == 0) { 
+			// var onclick = 'function (){showPopWin(\''+elms[i].href+'\','+width+', '+height+', null);return false;};';
+			// elms[i].onclick = eval(onclick);
+			elms[i].onclick = function(){
+				// default width and height
+				var width = 400;
+				var height = 200;
+				// Parse out optional width and height from className
+				params = this.className.split('-');
+				if (params.length == 3) {
+					width = parseInt(params[1]);
+					height = parseInt(params[2]);
+				}
+				showPopWin(this.href,width,height,null); return false;
+			}
+		}
+	}
+}
+addEvent(window, "load", initPopUp);
+
+ /**
+	* @argument width - int in pixels
+	* @argument height - int in pixels
+	* @argument url - url to display
+	* @argument returnFunc - function to call when returning true from the window.
+	* @argument showCloseBox - show the close box - default true
+	*/
+function showPopWin(url, width, height, returnFunc, showCloseBox) {
+	// show or hide the window close widget
+	if (showCloseBox == null || showCloseBox == true) {
+		document.getElementById("popCloseBox").style.display = "block";
+	} else {
+		document.getElementById("popCloseBox").style.display = "none";
+	}
+	gPopupIsShown = true;
+	disableTabIndexes();
+	gPopupMask.style.display = "block";
+	gPopupContainer.style.display = "block";
+	// calculate where to place the window on screen
+	centerPopWin(width, height);
+	
+	var titleBarHeight = parseInt(document.getElementById("popupTitleBar").offsetHeight, 10);
+
+
+	gPopupContainer.style.width = width + "px";
+	gPopupContainer.style.height = (height+titleBarHeight) + "px";
+	
+	setMaskSize();
+
+	// need to set the width of the iframe to the title bar width because of the dropshadow
+	// some oddness was occuring and causing the frame to poke outside the border in IE6
+	gPopFrame.style.width = parseInt(document.getElementById("popupTitleBar").offsetWidth, 10) + "px";
+	gPopFrame.style.height = (height) + "px";
+	
+	// set the url
+	gPopFrame.src = url;
+	
+	gReturnFunc = returnFunc;
+	// for IE
+	if (gHideSelects == true) {
+		hideSelectBoxes();
+	}
+	
+	window.setTimeout("setPopTitle();", 600);
+}
+
+//
+var gi = 0;
+function centerPopWin(width, height) {
+	if (gPopupIsShown == true) {
+		if (width == null || isNaN(width)) {
+			width = gPopupContainer.offsetWidth;
+		}
+		if (height == null) {
+			height = gPopupContainer.offsetHeight;
+		}
+		
+		//var theBody = document.documentElement;
+		var theBody = document.getElementsByTagName("BODY")[0];
+		//theBody.style.overflow = "hidden";
+		var scTop = parseInt(getScrollTop(),10);
+		var scLeft = parseInt(theBody.scrollLeft,10);
+	
+		setMaskSize();
+		
+		//window.status = gPopupMask.style.top + " " + gPopupMask.style.left + " " + gi++;
+		
+		var titleBarHeight = parseInt(document.getElementById("popupTitleBar").offsetHeight, 10);
+		
+		var fullHeight = getViewportHeight();
+		var fullWidth = getViewportWidth();
+		
+		gPopupContainer.style.top = (scTop + ((fullHeight - (height+titleBarHeight)) / 2)) + "px";
+		gPopupContainer.style.left =  (scLeft + ((fullWidth - width) / 2)) + "px";
+		//alert(fullWidth + " " + width + " " + gPopupContainer.style.left);
+	}
+}
+addEvent(window, "resize", centerPopWin);
+addEvent(window, "scroll", centerPopWin);
+window.onscroll = centerPopWin;
+
+
+/**
+ * Sets the size of the popup mask.
+ *
+ */
+function setMaskSize() {
+	var theBody = document.getElementsByTagName("BODY")[0];
+			
+	var fullHeight = getViewportHeight();
+	var fullWidth = getViewportWidth();
+	
+	// Determine what's bigger, scrollHeight or fullHeight / width
+	if (fullHeight > theBody.scrollHeight) {
+		popHeight = fullHeight;
+	} else {
+		popHeight = theBody.scrollHeight;
+	}
+	
+	if (fullWidth > theBody.scrollWidth) {
+		popWidth = fullWidth;
+	} else {
+		popWidth = theBody.scrollWidth;
+	}
+	
+	gPopupMask.style.height = popHeight + "px";
+	gPopupMask.style.width = popWidth + "px";
+}
+
+/**
+ * @argument callReturnFunc - bool - determines if we call the return function specified
+ * @argument returnVal - anything - return value 
+ */
+function hidePopWin(callReturnFunc) {
+	gPopupIsShown = false;
+	var theBody = document.getElementsByTagName("BODY")[0];
+	theBody.style.overflow = "";
+	restoreTabIndexes();
+	if (gPopupMask == null) {
+		return;
+	}
+	gPopupMask.style.display = "none";
+	gPopupContainer.style.display = "none";
+	if (callReturnFunc == true && gReturnFunc != null) {
+		// Set the return code to run in a timeout.
+		// Was having issues using with an Ajax.Request();
+		gReturnVal = window.frames["popupFrame"].returnVal;
+		window.setTimeout('gReturnFunc(gReturnVal);', 1);
+	}
+	gPopFrame.src = gDefaultPage;
+	// display all select boxes
+	if (gHideSelects == true) {
+		displaySelectBoxes();
+	}
+}
+
+/**
+ * Sets the popup title based on the title of the html document it contains.
+ * Uses a timeout to keep checking until the title is valid.
+ */
+function setPopTitle() {
+	return;
+	if (window.frames["popupFrame"].document.title == null) {
+		window.setTimeout("setPopTitle();", 10);
+	} else {
+		document.getElementById("popupTitle").innerHTML = window.frames["popupFrame"].document.title;
+	}
+}
+
+// Tab key trap. iff popup is shown and key was [TAB], suppress it.
+// @argument e - event - keyboard event that caused this function to be called.
+function keyDownHandler(e) {
+    if (gPopupIsShown && e.keyCode == 9)  return false;
+}
+
+// For IE.  Go through predefined tags and disable tabbing into them.
+function disableTabIndexes() {
+	if (document.all) {
+		var i = 0;
+		for (var j = 0; j < gTabbableTags.length; j++) {
+			var tagElements = document.getElementsByTagName(gTabbableTags[j]);
+			for (var k = 0 ; k < tagElements.length; k++) {
+				gTabIndexes[i] = tagElements[k].tabIndex;
+				tagElements[k].tabIndex="-1";
+				i++;
+			}
+		}
+	}
+}
+
+function returnRefresh() 
+{   
+	//alert("I am active!");
+	window.location.reload(); 
+} 
+
+// For IE. Restore tab-indexes.
+function restoreTabIndexes() {
+	if (document.all) {
+		var i = 0;
+		for (var j = 0; j < gTabbableTags.length; j++) {
+			var tagElements = document.getElementsByTagName(gTabbableTags[j]);
+			for (var k = 0 ; k < tagElements.length; k++) {
+				tagElements[k].tabIndex = gTabIndexes[i];
+				tagElements[k].tabEnabled = true;
+				i++;
+			}
+		}
+	}
+}
+
+
+/**
+ * Hides all drop down form select boxes on the screen so they do not appear above the mask layer.
+ * IE has a problem with wanted select form tags to always be the topmost z-index or layer
+ *
+ * Thanks for the code Scott!
+ */
+function hideSelectBoxes() {
+  var x = document.getElementsByTagName("SELECT");
+
+  for (i=0;x && i < x.length; i++) {
+    x[i].style.visibility = "hidden";
+  }
+}
+
+/**
+ * Makes all drop down form select boxes on the screen visible so they do not 
+ * reappear after the dialog is closed.
+ * 
+ * IE has a problem with wanting select form tags to always be the 
+ * topmost z-index or layer.
+ */
+function displaySelectBoxes() {
+  var x = document.getElementsByTagName("SELECT");
+
+  for (i=0;x && i < x.length; i++){
+    x[i].style.visibility = "visible";
+  }
+}
+</script>
+<?php
+}