QnA Markup

Embeddable HTML (iframe). Just cut-and-paste into an HTML document to embed your interactive output.

Width Height (append % or px)

HTML snippet suitable for placement in an existing webpage.

Or cut-and-paste the text below.

<style>

body {

font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;

}

#rawmarkup{

display:none;

}

#QandA img{

width:100%;

}

div.main{

min-width:300px;

max-width:650px;

margin: 0 auto;

padding:0 5px 0 5px;

}

div.frame{

float:left;

width:100%;

margin:5px 0 5px 0;

}

div.full{

float:left;

width:100%;

}

.button{

padding:8px;

margin:8px 0 0px 0;

width:100%;

}

div.question_text{

float:left;

font-family: Verdana, Geneva, sans-serif;

font-size: 14px;

line-height: 20px;

color:#ffffff;

min-width:30px;

background:#5489eb;

border-radius: 15px;

padding:10px 15px 14px 15px;

margin-right:45px;

}

div.question_text a:link, div.question_text a:hover, div.question_text a:active, div.question_text a:visited{ color:#e3fbfc; }

div.question_arrow{

float:left;

width: 0;

height: 0;

border-left: 5px solid transparent;

border-right: 10px solid transparent;

border-top: 15px solid #5489eb;

margin:0 20px;

}

div.ans_text{

float:right;

font-family: Verdana, Geneva, sans-serif;

font-size: 14px;

line-height: 20px;

color:#000000;

min-width:30px;

background:#eeeeee;

border-radius: 15px;

padding:10px 15px 14px 15px;

margin-left:45px;

}

div.ans_arrow{

float:right;

width: 0;

height: 0;

border-left: 10px solid transparent;

border-right: 5px solid transparent;

border-top: 15px solid #eeeeee;

margin:0 20px;

}

div.choices{

float:left;

width:100%;

margin:15px 0 0 0;

}

div.standard_buttons{

float:left;

width:100%;

margin-top:5px;

border-top: 1px solid #ddd;

padding-top:12px;

}

div.credits{

float:left;

dispaly:none;

width:100%;

background:#eee;

margin:0px 0 15px 0;

}

div.credit_text{

font-family: Verdana, Geneva, sans-serif;

font-size: 14px;

line-height: 20px;

padding:4px 15px 10px 15px;

}

li.error{

list-style-type: none;

background:#ffdddd;

margin: 10px 0 0 0;

padding: 5px;

}

.qpad {

float:left;

padding:0 15px;

}

a.sbutton {

float:left;

font-family: Verdana, Geneva, sans-serif;

font-size: 14px;

line-height: 20px;

width:48%;

background: #eee;

border-radius: 8px;

padding:10px 0px 12px 0;

margin: 0 0 3px 0;

border: solid 1px #888;

text-align:center;

color: #000000;

text-decoration: none;

}

a.sbutton:hover, a.sbutton:active {

float:left;

font-family: Verdana, Geneva, sans-serif;

font-size: 14px;

line-height: 20px;

width:48%;

background: #ddd;

border-radius: 8px;

padding:10px 0px 12px 0;

margin: 0 0 3px 0;

border: solid 1px #888;

text-align:center;

color: #000000;

text-decoration: none;

}

a.qabutton {

float:left;

font-family: Verdana, Geneva, sans-serif;

font-size: 14px;

line-height: 20px;

width:100%;

background: #eee;

border-radius: 8px;

padding:10px 0px 12px 0;

margin: 0 0 8px 0;

border: solid 1px #888;

text-align:left;

color: #000000;

text-decoration: none;

}

a.qabutton:hover, a.qabutton:active {

float:left;

font-family: Verdana, Geneva, sans-serif;

font-size: 14px;

line-height: 20px;

width:100%;

background: #ddd;

border-radius: 8px;

padding:10px 0px 12px 0;

margin: 0 0 8px 0;

border: solid 1px #888;

text-align:left;

color: #000000;

text-decoration: none;

}

div.xdiv {

float:left;

width:100%;

margin: 0 0 8px 0;

background: #eee;

border: solid 1px #888;

border-radius: 8px;

}

input.xinput {

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */

-moz-box-sizing: border-box;    /* Firefox, other Gecko */

box-sizing: border-box;         /* Opera/IE 8+ */

float:left;

width:100%;

font-family: Verdana, Geneva, sans-serif;

font-size: 14px;

line-height: 20px;

background: #fff;

border-top-left-radius: 8px;

border-top-right-radius: 8px;

padding:10px 10px 12px 10px;

border: solid 0px #888;

border-bottom: solid 1px #888;

text-align:left;

color: #000000;

text-decoration: none;

}

a.xbutton {

float:left;

width:100%;

text-align:left;

font-family: Verdana, Geneva, sans-serif;

font-size: 14px;

line-height: 20px;

background: #eee;

border-radius: 8px;

padding:10px 0px 12px 0px;

color: #000000;

text-decoration: none;

}

a.xbutton:hover, a.xbutton:active {

border-top-left-radius: 0px;

border-top-right-radius: 0px;

background: #ddd;

}

</style>
<FORM name="FORM" id="FORM"><div id="conversation" style="margin:15px auto 0 auto;padding:0 15px;max-width:500px"><div id='QandA' class='QandA'><div style='padding:15px;background:#ddffdd;text-align:center;'>Loading QnA...</div></div><div id='Choices' class='choices'></div><div id="rawmarkup" style="display:none;">DOC%281%29%3ASHOPPING+LIST%0A%0AQ%281%29%3A+What+would+you+like+to+cook%3F%0AA%3A+Garlic+Chicken%0A%09DOC%281.1%29%3AGarlic+Chicken%0A%094+boneless+skinless+chicken+breasts%0A%094+garlic+cloves%2C+minced%0A%094+tablespoons+brown+sugar%0A%091+tablespoon+olive+oil%0A%09additional+herbs+and+spices%2C+as+desired%0A%09Q%281.1%29%3AGOTO%3A2%0AA%3A+Mac+and+Cheese%0A%09DOC%281.2%29%3AMac+and+Cheese%09%0A%093%2F4+pound+dried+elbow+macaroni%0A%091+1%2F2+cups+grated++sharp+cheddar+cheese%0A%091%2F2+cup+grated+gruyere+cheese%0A%091%2F3+cup+panko+bread+crumbs%2C+toasted+until+golden%0A%09Q%281.2%29%3AGOTO%3A2%0AQ%282%29%3A+Okay.+I+have+the+shopping+list+ready.+How+would+you+like+it%3F%0AA%5Bjavascript%3Aalert%28doc%28%29%29%3B%5D%3A+In+an+alert+box.%0A%09Q%282.1%29%3AGOTO%3A3%0AA%5Bjavascript%3Asave2%28%27list.txt%27%2Cdoc%28%29%29%3B%5D%3A+As+a+file+I+can+save.%0A%09Q%282.2%29%3AGOTO%3A3%0AQ%283%29%3A+Enjoy+the+grub.%0A</div><div id="ondeck" name="ondeck"><div id='D-1' name='D-1' style='display:none;'>SHOPPING LIST
</div><div id='Q-1' name='Q-1' style='display:none;'> What would you like to cook?</div><div id='D-1.1' name='D-1.1' style='display:none;'>Garlic Chicken
	4 boneless skinless chicken breasts
	4 garlic cloves, minced
	4 tablespoons brown sugar
	1 tablespoon olive oil
	additional herbs and spices, as desired</div><div id='Q-1.1' name='Q-1.1' style='display:none;'>GOTO:2</div><div id='D-1.2' name='D-1.2' style='display:none;'>Mac and Cheese	
	3/4 pound dried elbow macaroni
	1 1/2 cups grated  sharp cheddar cheese
	1/2 cup grated gruyere cheese
	1/3 cup panko bread crumbs, toasted until golden</div><div id='Q-1.2' name='Q-1.2' style='display:none;'>GOTO:2</div><div id='Q-2' name='Q-2' style='display:none;'> Okay. I have the shopping list ready. How would you like it?</div><div id='Q-2.1' name='Q-2.1' style='display:none;'>GOTO:3</div><div id='Q-2.2' name='Q-2.2' style='display:none;'>GOTO:3</div><div id='Q-3' name='Q-3' style='display:none;'> Enjoy the grub.
</div><div id='A-1.1' name='A-1.1' style='display:none;'> Garlic Chicken</div><div id='A-href-1.1' name='A-href-1.1' style='display:none;'>javascript:void('');</div><div id='A-target-1.1' name='A-target-1.1' style='display:none;'></div><div id='X-1.1' name='X-1.1' style='display:none;'>Garlic Chicken</div><div id='A-1.2' name='A-1.2' style='display:none;'> Mac and Cheese</div><div id='A-href-1.2' name='A-href-1.2' style='display:none;'>javascript:void('');</div><div id='A-target-1.2' name='A-target-1.2' style='display:none;'></div><div id='X-1.2' name='X-1.2' style='display:none;'>Mac and Cheese</div><div id='A-2.1' name='A-2.1' style='display:none;'> In an alert box.</div><div id='A-href-2.1' name='A-href-2.1' style='display:none;'>javascript:alert(doc());</div><div id='A-target-2.1' name='A-target-2.1' style='display:none;'></div><div id='X-2.1' name='X-2.1' style='display:none;'>In an alert box.</div><div id='A-2.2' name='A-2.2' style='display:none;'> As a file I can save.</div><div id='A-href-2.2' name='A-href-2.2' style='display:none;'>javascript:save2('list.txt',doc());</div><div id='A-target-2.2' name='A-target-2.2' style='display:none;'></div><div id='X-2.2' name='X-2.2' style='display:none;'>As a file I can save.</div>
<script>
	var QVnames = [['1','1'],['1.1','1.1'],['1.2','1.2'],['2','2'],['2.1','2.1'],['2.2','2.2'],['3','3']];
</script>
</div><textarea id="original" name="original" style="display:none;" disabled="disabled"><div id='D-1' name='D-1' style='display:none;'>SHOPPING LIST
</div><div id='Q-1' name='Q-1' style='display:none;'> What would you like to cook?</div><div id='D-1.1' name='D-1.1' style='display:none;'>Garlic Chicken
	4 boneless skinless chicken breasts
	4 garlic cloves, minced
	4 tablespoons brown sugar
	1 tablespoon olive oil
	additional herbs and spices, as desired</div><div id='Q-1.1' name='Q-1.1' style='display:none;'>GOTO:2</div><div id='D-1.2' name='D-1.2' style='display:none;'>Mac and Cheese	
	3/4 pound dried elbow macaroni
	1 1/2 cups grated  sharp cheddar cheese
	1/2 cup grated gruyere cheese
	1/3 cup panko bread crumbs, toasted until golden</div><div id='Q-1.2' name='Q-1.2' style='display:none;'>GOTO:2</div><div id='Q-2' name='Q-2' style='display:none;'> Okay. I have the shopping list ready. How would you like it?</div><div id='Q-2.1' name='Q-2.1' style='display:none;'>GOTO:3</div><div id='Q-2.2' name='Q-2.2' style='display:none;'>GOTO:3</div><div id='Q-3' name='Q-3' style='display:none;'> Enjoy the grub.
</div><div id='A-1.1' name='A-1.1' style='display:none;'> Garlic Chicken</div><div id='A-href-1.1' name='A-href-1.1' style='display:none;'>javascript:void('');</div><div id='A-target-1.1' name='A-target-1.1' style='display:none;'></div><div id='X-1.1' name='X-1.1' style='display:none;'>Garlic Chicken</div><div id='A-1.2' name='A-1.2' style='display:none;'> Mac and Cheese</div><div id='A-href-1.2' name='A-href-1.2' style='display:none;'>javascript:void('');</div><div id='A-target-1.2' name='A-target-1.2' style='display:none;'></div><div id='X-1.2' name='X-1.2' style='display:none;'>Mac and Cheese</div><div id='A-2.1' name='A-2.1' style='display:none;'> In an alert box.</div><div id='A-href-2.1' name='A-href-2.1' style='display:none;'>javascript:alert(doc());</div><div id='A-target-2.1' name='A-target-2.1' style='display:none;'></div><div id='X-2.1' name='X-2.1' style='display:none;'>In an alert box.</div><div id='A-2.2' name='A-2.2' style='display:none;'> As a file I can save.</div><div id='A-href-2.2' name='A-href-2.2' style='display:none;'>javascript:save2('list.txt',doc());</div><div id='A-target-2.2' name='A-target-2.2' style='display:none;'></div><div id='X-2.2' name='X-2.2' style='display:none;'>As a file I can save.</div>
<script>
	var QVnames = [['1','1'],['1.1','1.1'],['1.2','1.2'],['2','2'],['2.1','2.1'],['2.2','2.2'],['3','3']];
</script>
</textarea><textarea id="transcript" name="transcript" style="display:none;" disabled="disabled"></textarea><div style="float:left;width:100%;margin:15px 0 0px 0;border-top: solid 1px #ddd;"><div id=credits class=credits style="display:none;"><div class=credit_text></div></div><p align=center> <a href="https://www.qnamarkup.org/?markup=DOC%281%29%3ASHOPPING+LIST%0A%0AQ%281%29%3A+What+would+you+like+to+cook%3F%0AA%3A+Garlic+Chicken%0A%09DOC%281.1%29%3AGarlic+Chicken%0A%094+boneless+skinless+chicken+breasts%0A%094+garlic+cloves%2C+minced%0A%094+tablespoons+brown+sugar%0A%091+tablespoon+olive+oil%0A%09additional+herbs+and+spices%2C+as+desired%0A%09Q%281.1%29%3AGOTO%3A2%0AA%3A+Mac+and+Cheese%0A%09DOC%281.2%29%3AMac+and+Cheese%09%0A%093%2F4+pound+dried+elbow+macaroni%0A%091+1%2F2+cups+grated++sharp+cheddar+cheese%0A%091%2F2+cup+grated+gruyere+cheese%0A%091%2F3+cup+panko+bread+crumbs%2C+toasted+until+golden%0A%09Q%281.2%29%3AGOTO%3A2%0AQ%282%29%3A+Okay.+I+have+the+shopping+list+ready.+How+would+you+like+it%3F%0AA%5Bjavascript%3Aalert%28doc%28%29%29%3B%5D%3A+In+an+alert+box.%0A%09Q%282.1%29%3AGOTO%3A3%0AA%5Bjavascript%3Asave2%28%27list.txt%27%2Cdoc%28%29%29%3B%5D%3A+As+a+file+I+can+save.%0A%09Q%282.2%29%3AGOTO%3A3%0AQ%283%29%3A+Enjoy+the+grub.%0A&font_family=Verdana%2C+Geneva%2C+sans-serif&font_size=14&line_height=20&col_width=500&frame_pad=15&radius=15&comp_bg=5489eb&comp_txt=ffffff&comp_link=e3fbfc&usr_bg=eeeeee&usr_txt=000000&usr_link=0000ff&sharing=2" onClick="javascript:alert('You are about to edit a copy of this QnA. Any edits will not change this instance.');" target=_top>edit</a> | <a href="https://www.qnamarkup.org/" target=_top>code your own</a></p></div></FORM></div></div>
<script type="text/javascript">
	var QNum = 0;
	var Qhtml = "";
	var Dhtml = "";
	var label = "";
	var GOTOfired = 0;
	var path = [];
	var doc_bin = [];
	var convo_bin = [];
	var freetext = 0;
	var goingback = 0;

$("#conversation input").on("keypress", 'form', function (e) {
    	var code = e.keyCode || e.which;
    	if (code == 13) {
        	e.preventDefault();
        	return false;
    	}
	});
	
	$('#FORM').on('keyup keypress', function(e) {
  		var keyCode = e.keyCode || e.which;
  		if (keyCode === 13) { 
    		e.preventDefault();
    		return false;
  		}
	});

}
		
	}

function renderQnA(Qht,Jht,Dht,restar) {
		Dhtml = Dht;
					
		GOTOfired = 0;
		path.push(label);

swapGOTO(Qht,Jht);

console.log("After swap: "+GOTOfired);

if (GOTOfired == 0) {
			document.getElementById('QandA').innerHTML += "<div id="+Jht+" style=\"float:left;width:100%;height:1px;\"> </div>";
		}
		document.getElementById('QandA').innerHTML += "<div class='frame'><div class='full'><div class='question_text'>"+swapvar(document.getElementById(Qhtml).innerHTML)+"</div></div><div class='question_arrow'></div></div>";

document.getElementById('QandA').innerHTML = document.getElementById('QandA').innerHTML.replace(/(\<br\>){2}/gi,"</div></div><div class='question_arrow'></div></div></div></div><div class='frame'><div class='full'><div class='question_text'>");
		document.getElementById('QandA').innerHTML = document.getElementById('QandA').innerHTML.replace(/(\<br\> \<br\>)/gi,"<br><br>");

// add question 
		//document.getElementById('transcript').value += swapvar("BOT: "+ document.getElementById(Qhtml).innerHTML);
		//document.getElementById('transcript').value = document.getElementById('transcript').value.replace(/(\<br\>){2}/gi,"\nBOT: ");
		this_text = swapvar("BOT: "+ document.getElementById(Qhtml).innerHTML);
		this_text = this_text.replace(/(\<br\>){2}/gi,"\nBOT: ");
		convo_bin.push(this_text);
				
		// make push doc into array in doc() cycle through array and put into output
		// maybe remove doc div
		if (document.getElementById(Dhtml)) {
			doc_bin.push([document.getElementById(Dhtml).innerHTML,currentQ]);
			console.log("Add to Doc ("+Dhtml+"): "+document.getElementById(Dhtml).innerHTML);
			//document.getElementById('doc').innerHTML += document.getElementById(Dhtml).innerHTML;
		}
						
		tmp = getElementsByIdRegExp("div", "A-"+label+"(\\.{1}\\d){1}$");
		a_href = getElementsByIdRegExp("div", "A-href-"+label+"(\\.{1}\\d){1}$");
		a_target = getElementsByIdRegExp("div", "A-target-"+label+"(\\.{1}\\d){1}$");
		tmp_x = getElementsByIdRegExp("div", "X-"+label+"(\\.{1}\\d){1}$");
		var Xishere = 0;
		for ( var i = 0; i < tmp.length; i++ ) {
			var nextlabel = tmp[i].id.substr(2);
			var Xihtml = 'Xi-'+nextlabel;
			var regexp = "\<variable\>";
			var regexp_js = "^javascript:";
			var regexp_load_js = "loadQnA";
			var script_call = "";
			if (tmp[i].innerHTML.match(regexp)) {
				if (a_href[i].innerHTML.match('^(_blank:)?javascript:')) {
					script_call = a_href[i].innerHTML.replace(/^(_blank:)?javascript:/gi,"");
				} else {
					if (a_href[i].innerHTML.match('^_blank:')) {
						script_call = "window.open('"+a_href[i].innerHTML.replace(/^_blank:/,"")+"','_blank');";			
					} else {
						script_call = "location.href = '"+a_href[i].innerHTML+"';";
					}
				}
				
				if(a_href[i].innerHTML.match(regexp_load_js)){
					//script_call = "xv = document.getElementById('"+Xihtml+"').value;" + script_call.replace(/this\.innerHTML/gi,"xv")
					script_call = script_call.replace(/this\.innerHTML/gi,"document.getElementById('"+Xihtml+"').value")
					document.getElementById('Choices').innerHTML += "<div class=\"xdiv\"><input type=\""+a_target[i].innerHTML+"\" id=\""+Xihtml+"\" name=\""+Xihtml+"\" class=\"xinput\" onkeypress=\"if (event.keyCode==13){"+script_call+"}\"/><a href=\"javascript:void('');\" class=\"xbutton\" onClick=\""+script_call+"\"><span class=\"qpad\">Send</span></a></div>";				
				} else {
					script_call = script_call.replace(/this\.innerHTML/gi,"document.getElementById('"+Xihtml+"').value")
					document.getElementById('Choices').innerHTML += "<div class=\"xdiv\"><input type=\""+a_target[i].innerHTML+"\" id=\""+Xihtml+"\" name=\""+Xihtml+"\" class=\"xinput\" onkeypress=\"if (event.keyCode==13){answerQ('"+nextlabel+"');"+script_call+"}\"/><a href=\"javascript:void('');\" class=\"xbutton\" onClick=\"answerQ('"+nextlabel+"');"+script_call+"\"><span class=\"qpad\">Send</span></a></div>";
				}
				Xishere = Xihtml;
				freetext = Xihtml;
			} else if (a_href[i].innerHTML.match(regexp_js) && a_href[i].innerHTML != "javascript:void('');") {
				tmp[i].innerHTML = tmp[i].innerHTML.replace(/(\<br\>){2}/gi,"<br> <br>");
				var script_call = a_href[i].innerHTML.replace(/^javascript:/gi,"");
				if(a_href[i].innerHTML.match(regexp_load_js)){
					document.getElementById('Choices').innerHTML += "<a href=\"javascript:void('');\" class=\"qabutton\" onClick=\""+script_call+"\" "+a_target[i].innerHTML+"><span class=\"qpad\">"+tmp[i].innerHTML+"</span></a>";							
				} else {
					document.getElementById('Choices').innerHTML += "<a href=\"javascript:void('');\" class=\"qabutton\" onClick=\"answerQ('"+nextlabel+"');"+script_call+"\" "+a_target[i].innerHTML+"><span class=\"qpad\">"+tmp[i].innerHTML+"</span></a>";							
				}	
				freetext = 0;
			} else {
				tmp[i].innerHTML = tmp[i].innerHTML.replace(/(\<br\>){2}/gi,"<br> <br>");
				document.getElementById('Choices').innerHTML += "<a href=\""+a_href[i].innerHTML+"\" class=\"qabutton\" onClick=\"answerQ('"+nextlabel+"');\" "+a_target[i].innerHTML+"><span class=\"qpad\">"+tmp[i].innerHTML+"</span></a>";				
				freetext = 0;
			}
		}

if (restar == undefined) {
			
			document.getElementById('Choices').innerHTML += "<div class=\"standard_buttons\">";
			if (QNum > 1) { 
				document.getElementById('Choices').innerHTML += "<a href=\"javascript:void('');\" class=\"sbutton\" onClick=\"goback(QNum);\">GO BACK ONE</a>";
				document.getElementById('Choices').innerHTML += "<a href=\"javascript:void('');\" class=\"sbutton\" style=\"float:right\" onClick=\"startAT('1');\">START OVER</a>";
			} else if (QNum == 1) {
				document.getElementById('Choices').innerHTML += "<a href=\"javascript:void('');\" class=\"sbutton\" onClick=\"startAT('1');\">GO BACK ONE</a>";
				document.getElementById('Choices').innerHTML += "<a href=\"javascript:void('');\" class=\"sbutton\" style=\"float:right\" onClick=\"startAT('1');\">START OVER</a>";				
			}
			document.getElementById('Choices').innerHTML += "</div>"
		}
				
		if (QNum != 0) { 
			if (goingback == 0) {
				scroll2Q(Jht,800);           	
			} else {
				window.scrollTo(0, document.getElementById(Jht).offsetTop);     		
			}
		} else if (restar != undefined) {
			window.scrollTo(0,0);
		}
		if (Xishere != 0 && window.self == window.top) {
			console.log("Set focus for: "+Xishere);
			document.getElementById(Xishere).focus();
		}
		console.log("Q#: "+QNum);
		console.log("New Path: "+path);
		QNum++;
		goingback = 0;
					
	}

function getElementsByIdIs(selectorTag, name) {
		var items = [];
		var myPosts = document.getElementsByTagName(selectorTag);
			//omitting undefined null check for brevity
			if (myPosts[0].id == name) {
				items.push(myPosts[0]);
			}
		
		return items;
	}

// startAT QnA
	function startAT(id) {
		document.getElementById('ondeck').innerHTML = document.getElementById('original').value;
		document.getElementById('QandA').innerHTML = "";
		//document.getElementById('transcript').value = "";
		doc_bin = [];
		convo_bin = [];
		QNum = 0;
		answerQ(id,'1');
	}
		
	//show funtion
	function show(id) { 
   		if (document.getElementById) { // DOM3 = IE5, NS6
        	document.getElementById(id).style.display = 'block';
    	} else { 
        	if (document.layers) {  
            	document.id.display = 'block';
        	} else {
                document.all.id.style.display = 'block';
        	}
    	}
	}

//hide funtion
	function hide(id) { 
    	if (document.getElementById) { // DOM3 = IE5, NS6
        	document.getElementById(id).style.display = 'none';         
    	} else { 
        	if (document.layers) {  
                document.id.display = 'none';
        	} else {
                document.all.id.style.display = 'none';
        	}
    	}
	}

//show OR hide funtion depends on if element is shown or hidden
	function shoh(id) { 
    	if (document.getElementById) { // DOM3 = IE5, NS6
        	if (document.getElementById(id).style.display == "none"){
            	document.getElementById(id).style.display = 'block';
        	} else {
            	document.getElementById(id).style.display = 'none';         
        	}   
    	} else { 
        	if (document.layers) {  
            	if (document.id.display == "none"){
                	document.id.display = 'block';
            	} else {
                	document.id.display = 'none';
            	}
        	} else {
            	if (document.all.id.style.visibility == "none"){
                	document.all.id.style.display = 'block';
            	} else {
                	document.all.id.style.display = 'none';
            	}
        	}
    	}
	}
	
	function swapvar(input) {
		var output; 
		for(var i = 0; i < QVnames.length; i++) {
			if (document.getElementById(QVnames[i][1])) {
				var item = QVnames[i][1].replace(/\./g,"\\.");
				var varegx = new RegExp("<x>"+item+"<\/x>","gi");
				//console.log(QVnames[i][1]);
				input = input.replace(varegx,document.getElementById(QVnames[i][1]).innerHTML);
			} 
		}
		output = input
		return output
	}
	
	function docforindex(indexID) {
		for(var i = 0; i < doc_bin.length; i++) {
			if(doc_bin[i][1] == indexID) {
				return true;
			}
		}
	}
	function indexis(variablename) {
		for(var i = 0; i < QVnames.length; i++) {
			if(QVnames[i][1] == variablename) {
				return QVnames[i][0];
			}
		}
	}
	function valueis(variablekey) {
		for(var i = 0; i < QVnames.length; i++) {
			if(QVnames[i][0] == variablekey) {
				return QVnames[i][1];
			}
		}
	}
	
	function look4goto(qn,id) {
		console.log("GOTO SEARCH: "+id);
		var qID = "Q-"+id;
		// If there's a doc in the XXXXXXXXXXXXXXXX, remove it.
		if (docforindex(path.indexOf(id))) {
			console.log("DOC FOUND "+id);
			doc_bin.splice(doc_bin.length-1,1);
		}
		convo_bin.splice(-2,2);
		var re = new RegExp("GOTO:(([a-z0-9\._-]*)\s*)$","gi");
		if (document.getElementById(qID).innerHTML.match(re)) {
			convo_bin.splice(-1,1);
			console.log("GOTO FOUND: "+id);
			textinput = re.exec(document.getElementById(qID).innerHTML)[2]+"";
			if (docforindex(indexis(textinput))) {
				document.getElementById("Xi-"+path[qn]).value = document.getElementById(valueis(textinput)).innerHTML;
				console.log("DOC FOUND "+textinput);
				doc_bin.splice(doc_bin.length-1,1);
			}
			look4goto(qn,textinput);
		}
	}
	
	function goback(qn) {
		Qlast = qn - 3
		qn = qn - 2;
		label = path[qn];
		goingback = 1;
		
		console.log("GO BACK TO:"+qn);
		var re = new RegExp('(((^|\\n).*)*)<div id="break-at-'+qn+'" class="frame">((.*)(\\W.*))*', 'g');
		document.getElementById("QandA").innerHTML = document.getElementById("QandA").innerHTML.replace(re, '$1');
		document.getElementById('Choices').innerHTML += "<input type=\"hidden\" id=\"Xi-"+path[qn]+"\" name=\"Xi-"+path[qn]+"\" value=\"\">";
			console.log("####################: "+path[path.length-1]);
		
		//look4goto(qn,path[path.length-1]);
		
		path.splice(-1,1);
		convo_bin.splice(-4,4);
		//convo_bin.splice(-2,2);

// If there's a doc in the last Q that you're removing, hold on to it.
		// And put it back after you've removed it. When you rerender the Q.
		if (document.getElementById("X-"+path[qn]) && document.getElementById(valueis(path[Qlast]))) {
			document.getElementById("Xi-"+path[qn]).value = document.getElementById(valueis(path[Qlast])).innerHTML;
			doc_bin.splice(doc_bin.length-1,1);
		}
		
		// If there's a doc in the current Q, remove it.
		if (docforindex(currentQ)) {
			console.log("DOC FOUND (current) "+currentQ);
			doc_bin.splice(doc_bin.length-1,1);
		}
		// If there's a doc in the queued up Q, remove it. 
		if (document.getElementById(Dhtml)) {
			console.log("DOC FOUND (ondeck)"+Dhtml);
			doc_bin.splice(doc_bin.length-1,1);
		}
		
		look4goto(qn,path[path.length-1]);
		
		if (freetext != 0) {
			document.getElementById(freetext).value = "";
		}
		QNum = qn;
		loadQ = path[path.length-1];
		path.splice(-1,1);
		
		console.log("Reload ans for: "+loadQ);
		answerQ(loadQ);
	}

return csv_list;
	}
	
	function getvar(val) {
		return document.getElementById(val).value;
	}

function goto(val) {
	   answerQ(indexis(val));
	}

// h/t http://runnable.com/U5HC9xtufQpsu5aj/use-javascript-to-save-textarea-as-a-txt-file
	function save2(filename,content)
	{

// I'm using file system support as a proxy for support for this feature. 
	// Check based on one found at: http://blog.teamtreehouse.com/building-an-html5-text-editor-with-the-filesystem-apis
	// Handle vendor prefixes.
	window.requestFileSystem = window.requestFileSystem || 
							   window.webkitRequestFileSystem;
	// Check for support.
	if (window.requestFileSystem) {
	// content = ID of textarea to save
	// name = name to save file as, including file extension     
	// grab the content of the form field and place it into a variable
	//    var textToWrite = document.getElementById(content).value;
	//  create a new Blob (html5 magic) that conatins the data from your form feild
		var textFileAsBlob = new Blob([content], {type:'text/plain'});
		
	// Specify the name of the file to be saved
		var fileNamecontentAs = filename;
		
	// Optionally allow the user to choose a file name by providing 
	// an imput field in the HTML and using the collected data here
	// var fileNamecontentAs = txtFileName.text;

// create a link for our script to 'click'
		var downloadLink = document.createElement("a");
	//  supply the name of the file (from the var above).
	// you could create the name here but using a var
	// allows more flexability later.
		downloadLink.download = fileNamecontentAs;
	// provide text for the link. This will be hidden so you
	// can actually use anything you want.
		downloadLink.innerHTML = "My Hidden Link";
		
	// allow our code to work in webkit & Gecko based browsers
	// without the need for a if / else block.
		window.URL = window.URL || window.webkitURL;
			  
	// Create the link Object.
		downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
	// when link is clicked call a function to remove it from
	// the DOM in case user wants to save a second file.
		downloadLink.onclick = destroyClickedElement;
	// make sure the link is hidden.
		downloadLink.style.display = "none";
	// add the link to the DOM
		document.body.appendChild(downloadLink);
		
	// click the new link
		downloadLink.click();
	} else {
		alert('This feature is not supported by your browser.');
	}
		
	}

function destroyClickedElement(event)
	{
	// remove the link from the DOM
		document.body.removeChild(event.target);
	}

// EOF

</script>

Note: in order to render correctly in Internet Explorer, the following needs to be added to the page's header <meta http-equiv="X-UA-Compatible" content="IE=edge" />

HTML, full-page text.

Or cut-and-paste the text below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="http://www.facebook.com/2008/fbml">
<HEAD>
	<title>Untitled QnA</title>
	<meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>
	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
	<meta name="apple-mobile-web-app-capable" content="no" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<meta property="og:type" content="website"/>
	<meta property="og:image" content=""/>
	<meta property="og:url" content="https://www.qnamarkup.org/markup=DOC%281%29%3ASHOPPING+LIST%0A%0AQ%281%29%3A+What+would+you+like+to+cook%3F%0AA%3A+Garlic+Chicken%0A%09DOC%281.1%29%3AGarlic+Chicken%0A%094+boneless+skinless+chicken+breasts%0A%094+garlic+cloves%2C+minced%0A%094+tablespoons+brown+sugar%0A%091+tablespoon+olive+oil%0A%09additional+herbs+and+spices%2C+as+desired%0A%09Q%281.1%29%3AGOTO%3A2%0AA%3A+Mac+and+Cheese%0A%09DOC%281.2%29%3AMac+and+Cheese%09%0A%093%2F4+pound+dried+elbow+macaroni%0A%091+1%2F2+cups+grated++sharp+cheddar+cheese%0A%091%2F2+cup+grated+gruyere+cheese%0A%091%2F3+cup+panko+bread+crumbs%2C+toasted+until+golden%0A%09Q%281.2%29%3AGOTO%3A2%0AQ%282%29%3A+Okay.+I+have+the+shopping+list+ready.+How+would+you+like+it%3F%0AA%5Bjavascript%3Aalert%28doc%28%29%29%3B%5D%3A+In+an+alert+box.%0A%09Q%282.1%29%3AGOTO%3A3%0AA%5Bjavascript%3Asave2%28%27list.txt%27%2Cdoc%28%29%29%3B%5D%3A+As+a+file+I+can+save.%0A%09Q%282.2%29%3AGOTO%3A3%0AQ%283%29%3A+Enjoy+the+grub.%0A&font_family=Verdana%2C+Geneva%2C+sans-serif&font_size=14&line_height=20&col_width=500&frame_pad=15&radius=15&comp_bg=5489eb&comp_txt=ffffff&comp_link=e3fbfc&usr_bg=eeeeee&usr_txt=000000&usr_link=0000ff&sharing=2"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<link rel="apple-touch-icon" href="https://www.qnamarkup.org/images/QnA_300.png"/>
	<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
  	<script src="//code.jquery.com/jquery-1.10.2.js"></script>
  	<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
</HEAD>
<BODY BGCOLOR="#ffffff" BACKGROUND="" MARGINWIDTH="0" MARGINHEIGHT="0" onLoad="startAT('1');"><style>