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;">%3C%21--+Note%3A+you+can+turn+on%2Foff+word+wrap+in+this+text+area+by+clicking+the+checkbox+below.+Also%2C+any+text+you+see+between+less+than+and+greater+than+marks%2C+that%27s+HTML.+You+don%27t+have+to+use%2Fknow+HTML+to+write+a+QnA%2C+but+it+can+be+useful.+For+example%2C+this+text+doesn%27t+show+up+in+the+word+bubbles+because+it%27s+an+HTML+comment.+--%3E%0A%0AQ%281%29%3A+Would+you+like+to+write+an+interactive+QnA%3F%0AA%3A+Yes.%0A%09Q%281.1%29%3A+Are+you+viewing+this+exchange+in+a+window+with+the+same+text+in+two+places%2C+a+text+area+on+the+left+and+blue+and+gray+word+bubbles+on+the+right%3F%0A%09A%3A+Yes.%0A%09%09Q%281.1.1%29%3A+Cool.+The+text+on+the+left%2C+coupled+with+user+interaction%2C+defines+how+the+bubbles+are+presented.+Do+you+want+to+learn+more%3F%0A%09%09A%3A+Yes.%0A%09%09%09Q%281.1.1.1%29%3A+The+text+on+the+left+is+just+a+set+of+nested+text+blocks.+The+blocks+start+with+either+a+%22Q%3A%22+or+an+%22A%3A%22.+I+know%2C+I+know...++you+see+parentheses+with+numbers+after+the+letters+and+before+the+colons%2C+but+you+can+leave+these+out.%2A+They%27re+added+automatically+by+the+editor+when+you+click+%22Update+Outputs%22+to+help+you+know+where+things+are.%0A%09%09%09A%3A+What%27s+the+asterisk+for%3F%0A%09%09%09%09Q%281.1.1.1.1%29%3A+Well%2C+sometimes+you+do+need+the+numbers%2C+like+when+you+want+to+use+a+GOTO+call.+%0A%09%09%09%09A%3A+What%27s+that%3F%0A%09%09%09%09%09Q%281.1.1.1.1.1%29%3A+You+can+place+a+GOTO+call+at+the+end+of+a+question+%28a+block+starting+with+Q%29+and+it+will+jump+to+where+you+point+it.+Want+to+give+it+a+try%3F%0A%09%09%09%09%09A%3A+Yes.+Again%2C+again%21+%0A%09%09%09%09%09%09Q%281.1.1.1.1.1.1%29%3AGOTO%3A1.1.1.1.1%0A%09%09%09%09%09A%3A+No.+Let%27s+move+on.%0A%09%09%09%09%09%09Q%28myname%29%3A+Instead+of+pre-defined+answers%2Fchoices%2C+you+can+also+ask+the+viewer+to+enter+text+of+their+own.+For+example%2C+what%27s+your+name%3F%0A%09%09%09%09%09%09X%3A%0A%09%09%09%09%09%09%09Q%281.1.1.1.1.1.2.1%29%3A+Pleased+to+meet+you+%3Cx%3Emyname%3C%2Fx%3E.+See+what+I+did+there%3F+You+can+do+more%2C+but+now+you+know+the+basics.+For+example%2C+you+can+split+a+bubble+in+two.+%3Cbr%3E%3Cbr%3E+You+can+do+a+lot+with+with+just%3A+Q+GOTO+A+and+X.+%3Cbr%3E%3Cbr%3E+Do+you+want+me+to+open+a+window+a+detailed+descriptions+of+what+you+can+do%3F%0A%09%09%09%09%09%09%09A%3A%5Bhttp%3A%2F%2Fwww.qnamarkup.org%2Fsyntax%2F%5D+Yes.%0A%09%09%09%09%09%09%09%09Q%281.1.1.1.1.1.2.1.1%29%3A+Feel+free+to+edit+what+you+see+in+the+text+field+or+start+from+scratch.+To+see+what+your+markup+come+to+life%2C+hit+the+%22Update+Outputs%22+button+below+the+text+area.+GOTO%3A2%0A%09%09%09%09%09%09%09A%3A+No.%0A%09%09%09%09%09%09%09%09Q%281.1.1.1.1.1.2.1.2%29%3AGOTO%3A1.1.1.1.1.1.2.1.1%0A%09%09A%3A+No.%0A%09%09%09Q%281.1.1.2%29%3AGOTO%3A2%0A%09A%3A+No.%0A%09%09Q%281.1.2%29%3A+Then+head+over+to+%3Ca+href%3D%22http%3A%2F%2Fwww.qnamarkup.org%22%3Ehttp%3A%2F%2Fwww.QnAMarkup.org%3C%2Fa%3E.%0AA%3A+No.+%0A%09Q%281.2%29%3A+Okay+then.+GOTO%3A2%0A%0AQ%282%29%3A+Have+a+nice+day.</div><div id="ondeck" name="ondeck"><div id='Q-1' name='Q-1' style='display:none;'> Would you like to write an interactive QnA?</div><div id='Q-1.1' name='Q-1.1' style='display:none;'> Are you viewing this exchange in a window with the same text in two places, a text area on the left and blue and gray word bubbles on the right?</div><div id='Q-1.1.1' name='Q-1.1.1' style='display:none;'> Cool. The text on the left, coupled with user interaction, defines how the bubbles are presented. Do you want to learn more?</div><div id='Q-1.1.1.1' name='Q-1.1.1.1' style='display:none;'> The text on the left is just a set of nested text blocks. The blocks start with either a "Q:" or an "A:". I know, I know...  you see parentheses with numbers after the letters and before the colons, but you can leave these out.* They're added automatically by the editor when you click "Update Outputs" to help you know where things are.</div><div id='Q-1.1.1.1.1' name='Q-1.1.1.1.1' style='display:none;'> Well, sometimes you do need the numbers, like when you want to use a GOTO call. </div><div id='Q-1.1.1.1.1.1' name='Q-1.1.1.1.1.1' style='display:none;'> You can place a GOTO call at the end of a question (a block starting with Q) and it will jump to where you point it. Want to give it a try?</div><div id='Q-1.1.1.1.1.1.1' name='Q-1.1.1.1.1.1.1' style='display:none;'>GOTO:1.1.1.1.1</div><div id='Q-1.1.1.1.1.1.2' name='Q-1.1.1.1.1.1.2' style='display:none;'> Instead of pre-defined answers/choices, you can also ask the viewer to enter text of their own. For example, what's your name?</div><div id='Q-1.1.1.1.1.1.2.1' name='Q-1.1.1.1.1.1.2.1' style='display:none;'> Pleased to meet you <x>myname</x>. See what I did there? You can do more, but now you know the basics. For example, you can split a bubble in two. <br><br> You can do a lot with with just: Q GOTO A and X. <br><br> Do you want me to open a window a detailed descriptions of what you can do?</div><div id='Q-1.1.1.1.1.1.2.1.1' name='Q-1.1.1.1.1.1.2.1.1' style='display:none;'> Feel free to edit what you see in the text field or start from scratch. To see what your markup come to life, hit the "Update Outputs" button below the text area. GOTO:2</div><div id='Q-1.1.1.1.1.1.2.1.2' name='Q-1.1.1.1.1.1.2.1.2' style='display:none;'>GOTO:1.1.1.1.1.1.2.1.1</div><div id='Q-1.1.1.2' name='Q-1.1.1.2' style='display:none;'>GOTO:2</div><div id='Q-1.1.2' name='Q-1.1.2' style='display:none;'> Then head over to <a href="http://www.qnamarkup.org">http://www.QnAMarkup.org</a>.</div><div id='Q-1.2' name='Q-1.2' style='display:none;'> Okay then. GOTO:2</div><div id='Q-2' name='Q-2' style='display:none;'> Have a nice day.</div><div id='A-1.1' name='A-1.1' style='display:none;'> Yes.</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;'>Yes.</div><div id='A-1.1.1' name='A-1.1.1' style='display:none;'> Yes.</div><div id='A-href-1.1.1' name='A-href-1.1.1' style='display:none;'>javascript:void('');</div><div id='A-target-1.1.1' name='A-target-1.1.1' style='display:none;'></div><div id='X-1.1.1' name='X-1.1.1' style='display:none;'>Yes.</div><div id='A-1.1.1.1' name='A-1.1.1.1' style='display:none;'> Yes.</div><div id='A-href-1.1.1.1' name='A-href-1.1.1.1' style='display:none;'>javascript:void('');</div><div id='A-target-1.1.1.1' name='A-target-1.1.1.1' style='display:none;'></div><div id='X-1.1.1.1' name='X-1.1.1.1' style='display:none;'>Yes.</div><div id='A-1.1.1.1.1' name='A-1.1.1.1.1' style='display:none;'> What's the asterisk for?</div><div id='A-href-1.1.1.1.1' name='A-href-1.1.1.1.1' style='display:none;'>javascript:void('');</div><div id='A-target-1.1.1.1.1' name='A-target-1.1.1.1.1' style='display:none;'></div><div id='X-1.1.1.1.1' name='X-1.1.1.1.1' style='display:none;'>What's the asterisk for?</div><div id='A-1.1.1.1.1.1' name='A-1.1.1.1.1.1' style='display:none;'> What's that?</div><div id='A-href-1.1.1.1.1.1' name='A-href-1.1.1.1.1.1' style='display:none;'>javascript:void('');</div><div id='A-target-1.1.1.1.1.1' name='A-target-1.1.1.1.1.1' style='display:none;'></div><div id='X-1.1.1.1.1.1' name='X-1.1.1.1.1.1' style='display:none;'>What's that?</div><div id='A-1.1.1.1.1.1.1' name='A-1.1.1.1.1.1.1' style='display:none;'> Yes. Again, again! </div><div id='A-href-1.1.1.1.1.1.1' name='A-href-1.1.1.1.1.1.1' style='display:none;'>javascript:void('');</div><div id='A-target-1.1.1.1.1.1.1' name='A-target-1.1.1.1.1.1.1' style='display:none;'></div><div id='X-1.1.1.1.1.1.1' name='X-1.1.1.1.1.1.1' style='display:none;'>Yes. Again, again!</div><div id='A-1.1.1.1.1.1.2' name='A-1.1.1.1.1.1.2' style='display:none;'> No. Let's move on.</div><div id='A-href-1.1.1.1.1.1.2' name='A-href-1.1.1.1.1.1.2' style='display:none;'>javascript:void('');</div><div id='A-target-1.1.1.1.1.1.2' name='A-target-1.1.1.1.1.1.2' style='display:none;'></div><div id='X-1.1.1.1.1.1.2' name='X-1.1.1.1.1.1.2' style='display:none;'>No. Let's move on.</div><div id='A-1.1.1.1.1.1.2.1' name='A-1.1.1.1.1.1.2.1' style='display:none;'><variable></div><div id='A-href-1.1.1.1.1.1.2.1' name='A-href-1.1.1.1.1.1.2.1' style='display:none;'>javascript:void('');</div><div id='A-target-1.1.1.1.1.1.2.1' name='A-target-1.1.1.1.1.1.2.1' style='display:none;'>text</div><div id='X-1.1.1.1.1.1.2.1' name='X-1.1.1.1.1.1.2.1' style='display:none;'>1.1.1.1.1.1.2.1</div><div id='A-1.1.1.1.1.1.2.1.1' name='A-1.1.1.1.1.1.2.1.1' style='display:none;'> Yes.</div><div id='A-href-1.1.1.1.1.1.2.1.1' name='A-href-1.1.1.1.1.1.2.1.1' style='display:none;'>http://www.qnamarkup.org/syntax/</div><div id='A-target-1.1.1.1.1.1.2.1.1' name='A-target-1.1.1.1.1.1.2.1.1' style='display:none;'>target="_blank" i="http://www.qnamarkup.org/syntax/"</div><div id='X-1.1.1.1.1.1.2.1.1' name='X-1.1.1.1.1.1.2.1.1' style='display:none;'>Yes.</div><div id='A-1.1.1.1.1.1.2.1.2' name='A-1.1.1.1.1.1.2.1.2' style='display:none;'> No.</div><div id='A-href-1.1.1.1.1.1.2.1.2' name='A-href-1.1.1.1.1.1.2.1.2' style='display:none;'>javascript:void('');</div><div id='A-target-1.1.1.1.1.1.2.1.2' name='A-target-1.1.1.1.1.1.2.1.2' style='display:none;'></div><div id='X-1.1.1.1.1.1.2.1.2' name='X-1.1.1.1.1.1.2.1.2' style='display:none;'>No.</div><div id='A-1.1.1.2' name='A-1.1.1.2' style='display:none;'> No.</div><div id='A-href-1.1.1.2' name='A-href-1.1.1.2' style='display:none;'>javascript:void('');</div><div id='A-target-1.1.1.2' name='A-target-1.1.1.2' style='display:none;'></div><div id='X-1.1.1.2' name='X-1.1.1.2' style='display:none;'>No.</div><div id='A-1.1.2' name='A-1.1.2' style='display:none;'> No.</div><div id='A-href-1.1.2' name='A-href-1.1.2' style='display:none;'>javascript:void('');</div><div id='A-target-1.1.2' name='A-target-1.1.2' style='display:none;'></div><div id='X-1.1.2' name='X-1.1.2' style='display:none;'>No.</div><div id='A-1.2' name='A-1.2' style='display:none;'> No. </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;'>No.</div>
<script>
	var QVnames = [['1','1'],['1.1','1.1'],['1.1.1','1.1.1'],['1.1.1.1','1.1.1.1'],['1.1.1.1.1','1.1.1.1.1'],['1.1.1.1.1.1','1.1.1.1.1.1'],['1.1.1.1.1.1.1','1.1.1.1.1.1.1'],['1.1.1.1.1.1.2','myname'],['1.1.1.1.1.1.2.1','1.1.1.1.1.1.2.1'],['1.1.1.1.1.1.2.1.1','1.1.1.1.1.1.2.1.1'],['1.1.1.1.1.1.2.1.2','1.1.1.1.1.1.2.1.2'],['1.1.1.2','1.1.1.2'],['1.1.2','1.1.2'],['1.2','1.2'],['2','2']];
</script>
</div><textarea id="original" name="original" style="display:none;" disabled="disabled"><div id='Q-1' name='Q-1' style='display:none;'> Would you like to write an interactive QnA?</div><div id='Q-1.1' name='Q-1.1' style='display:none;'> Are you viewing this exchange in a window with the same text in two places, a text area on the left and blue and gray word bubbles on the right?</div><div id='Q-1.1.1' name='Q-1.1.1' style='display:none;'> Cool. The text on the left, coupled with user interaction, defines how the bubbles are presented. Do you want to learn more?</div><div id='Q-1.1.1.1' name='Q-1.1.1.1' style='display:none;'> The text on the left is just a set of nested text blocks. The blocks start with either a "Q:" or an "A:". I know, I know...  you see parentheses with numbers after the letters and before the colons, but you can leave these out.* They're added automatically by the editor when you click "Update Outputs" to help you know where things are.</div><div id='Q-1.1.1.1.1' name='Q-1.1.1.1.1' style='display:none;'> Well, sometimes you do need the numbers, like when you want to use a GOTO call. </div><div id='Q-1.1.1.1.1.1' name='Q-1.1.1.1.1.1' style='display:none;'> You can place a GOTO call at the end of a question (a block starting with Q) and it will jump to where you point it. Want to give it a try?</div><div id='Q-1.1.1.1.1.1.1' name='Q-1.1.1.1.1.1.1' style='display:none;'>GOTO:1.1.1.1.1</div><div id='Q-1.1.1.1.1.1.2' name='Q-1.1.1.1.1.1.2' style='display:none;'> Instead of pre-defined answers/choices, you can also ask the viewer to enter text of their own. For example, what's your name?</div><div id='Q-1.1.1.1.1.1.2.1' name='Q-1.1.1.1.1.1.2.1' style='display:none;'> Pleased to meet you <x>myname</x>. See what I did there? You can do more, but now you know the basics. For example, you can split a bubble in two. <br><br> You can do a lot with with just: Q GOTO A and X. <br><br> Do you want me to open a window a detailed descriptions of what you can do?</div><div id='Q-1.1.1.1.1.1.2.1.1' name='Q-1.1.1.1.1.1.2.1.1' style='display:none;'> Feel free to edit what you see in the text field or start from scratch. To see what your markup come to life, hit the "Update Outputs" button below the text area. GOTO:2</div><div id='Q-1.1.1.1.1.1.2.1.2' name='Q-1.1.1.1.1.1.2.1.2' style='display:none;'>GOTO:1.1.1.1.1.1.2.1.1</div><div id='Q-1.1.1.2' name='Q-1.1.1.2' style='display:none;'>GOTO:2</div><div id='Q-1.1.2' name='Q-1.1.2' style='display:none;'> Then head over to <a href="http://www.qnamarkup.org">http://www.QnAMarkup.org</a>.</div><div id='Q-1.2' name='Q-1.2' style='display:none;'> Okay then. GOTO:2</div><div id='Q-2' name='Q-2' style='display:none;'> Have a nice day.</div><div id='A-1.1' name='A-1.1' style='display:none;'> Yes.</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;'>Yes.</div><div id='A-1.1.1' name='A-1.1.1' style='display:none;'> Yes.</div><div id='A-href-1.1.1' name='A-href-1.1.1' style='display:none;'>javascript:void('');</div><div id='A-target-1.1.1' name='A-target-1.1.1' style='display:none;'></div><div id='X-1.1.1' name='X-1.1.1' style='display:none;'>Yes.</div><div id='A-1.1.1.1' name='A-1.1.1.1' style='display:none;'> Yes.</div><div id='A-href-1.1.1.1' name='A-href-1.1.1.1' style='display:none;'>javascript:void('');</div><div id='A-target-1.1.1.1' name='A-target-1.1.1.1' style='display:none;'></div><div id='X-1.1.1.1' name='X-1.1.1.1' style='display:none;'>Yes.</div><div id='A-1.1.1.1.1' name='A-1.1.1.1.1' style='display:none;'> What's the asterisk for?</div><div id='A-href-1.1.1.1.1' name='A-href-1.1.1.1.1' style='display:none;'>javascript:void('');</div><div id='A-target-1.1.1.1.1' name='A-target-1.1.1.1.1' style='display:none;'></div><div id='X-1.1.1.1.1' name='X-1.1.1.1.1' style='display:none;'>What's the asterisk for?</div><div id='A-1.1.1.1.1.1' name='A-1.1.1.1.1.1' style='display:none;'> What's that?</div><div id='A-href-1.1.1.1.1.1' name='A-href-1.1.1.1.1.1' style='display:none;'>javascript:void('');</div><div id='A-target-1.1.1.1.1.1' name='A-target-1.1.1.1.1.1' style='display:none;'></div><div id='X-1.1.1.1.1.1' name='X-1.1.1.1.1.1' style='display:none;'>What's that?</div><div id='A-1.1.1.1.1.1.1' name='A-1.1.1.1.1.1.1' style='display:none;'> Yes. Again, again! </div><div id='A-href-1.1.1.1.1.1.1' name='A-href-1.1.1.1.1.1.1' style='display:none;'>javascript:void('');</div><div id='A-target-1.1.1.1.1.1.1' name='A-target-1.1.1.1.1.1.1' style='display:none;'></div><div id='X-1.1.1.1.1.1.1' name='X-1.1.1.1.1.1.1' style='display:none;'>Yes. Again, again!</div><div id='A-1.1.1.1.1.1.2' name='A-1.1.1.1.1.1.2' style='display:none;'> No. Let's move on.</div><div id='A-href-1.1.1.1.1.1.2' name='A-href-1.1.1.1.1.1.2' style='display:none;'>javascript:void('');</div><div id='A-target-1.1.1.1.1.1.2' name='A-target-1.1.1.1.1.1.2' style='display:none;'></div><div id='X-1.1.1.1.1.1.2' name='X-1.1.1.1.1.1.2' style='display:none;'>No. Let's move on.</div><div id='A-1.1.1.1.1.1.2.1' name='A-1.1.1.1.1.1.2.1' style='display:none;'><variable></div><div id='A-href-1.1.1.1.1.1.2.1' name='A-href-1.1.1.1.1.1.2.1' style='display:none;'>javascript:void('');</div><div id='A-target-1.1.1.1.1.1.2.1' name='A-target-1.1.1.1.1.1.2.1' style='display:none;'>text</div><div id='X-1.1.1.1.1.1.2.1' name='X-1.1.1.1.1.1.2.1' style='display:none;'>1.1.1.1.1.1.2.1</div><div id='A-1.1.1.1.1.1.2.1.1' name='A-1.1.1.1.1.1.2.1.1' style='display:none;'> Yes.</div><div id='A-href-1.1.1.1.1.1.2.1.1' name='A-href-1.1.1.1.1.1.2.1.1' style='display:none;'>http://www.qnamarkup.org/syntax/</div><div id='A-target-1.1.1.1.1.1.2.1.1' name='A-target-1.1.1.1.1.1.2.1.1' style='display:none;'>target="_blank" i="http://www.qnamarkup.org/syntax/"</div><div id='X-1.1.1.1.1.1.2.1.1' name='X-1.1.1.1.1.1.2.1.1' style='display:none;'>Yes.</div><div id='A-1.1.1.1.1.1.2.1.2' name='A-1.1.1.1.1.1.2.1.2' style='display:none;'> No.</div><div id='A-href-1.1.1.1.1.1.2.1.2' name='A-href-1.1.1.1.1.1.2.1.2' style='display:none;'>javascript:void('');</div><div id='A-target-1.1.1.1.1.1.2.1.2' name='A-target-1.1.1.1.1.1.2.1.2' style='display:none;'></div><div id='X-1.1.1.1.1.1.2.1.2' name='X-1.1.1.1.1.1.2.1.2' style='display:none;'>No.</div><div id='A-1.1.1.2' name='A-1.1.1.2' style='display:none;'> No.</div><div id='A-href-1.1.1.2' name='A-href-1.1.1.2' style='display:none;'>javascript:void('');</div><div id='A-target-1.1.1.2' name='A-target-1.1.1.2' style='display:none;'></div><div id='X-1.1.1.2' name='X-1.1.1.2' style='display:none;'>No.</div><div id='A-1.1.2' name='A-1.1.2' style='display:none;'> No.</div><div id='A-href-1.1.2' name='A-href-1.1.2' style='display:none;'>javascript:void('');</div><div id='A-target-1.1.2' name='A-target-1.1.2' style='display:none;'></div><div id='X-1.1.2' name='X-1.1.2' style='display:none;'>No.</div><div id='A-1.2' name='A-1.2' style='display:none;'> No. </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;'>No.</div>
<script>
	var QVnames = [['1','1'],['1.1','1.1'],['1.1.1','1.1.1'],['1.1.1.1','1.1.1.1'],['1.1.1.1.1','1.1.1.1.1'],['1.1.1.1.1.1','1.1.1.1.1.1'],['1.1.1.1.1.1.1','1.1.1.1.1.1.1'],['1.1.1.1.1.1.2','myname'],['1.1.1.1.1.1.2.1','1.1.1.1.1.1.2.1'],['1.1.1.1.1.1.2.1.1','1.1.1.1.1.1.2.1.1'],['1.1.1.1.1.1.2.1.2','1.1.1.1.1.1.2.1.2'],['1.1.1.2','1.1.1.2'],['1.1.2','1.1.2'],['1.2','1.2'],['2','2']];
</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=%3C%21--+Note%3A+you+can+turn+on%2Foff+word+wrap+in+this+text+area+by+clicking+the+checkbox+below.+Also%2C+any+text+you+see+between+less+than+and+greater+than+marks%2C+that%27s+HTML.+You+don%27t+have+to+use%2Fknow+HTML+to+write+a+QnA%2C+but+it+can+be+useful.+For+example%2C+this+text+doesn%27t+show+up+in+the+word+bubbles+because+it%27s+an+HTML+comment.+--%3E%0A%0AQ%281%29%3A+Would+you+like+to+write+an+interactive+QnA%3F%0AA%3A+Yes.%0A%09Q%281.1%29%3A+Are+you+viewing+this+exchange+in+a+window+with+the+same+text+in+two+places%2C+a+text+area+on+the+left+and+blue+and+gray+word+bubbles+on+the+right%3F%0A%09A%3A+Yes.%0A%09%09Q%281.1.1%29%3A+Cool.+The+text+on+the+left%2C+coupled+with+user+interaction%2C+defines+how+the+bubbles+are+presented.+Do+you+want+to+learn+more%3F%0A%09%09A%3A+Yes.%0A%09%09%09Q%281.1.1.1%29%3A+The+text+on+the+left+is+just+a+set+of+nested+text+blocks.+The+blocks+start+with+either+a+%22Q%3A%22+or+an+%22A%3A%22.+I+know%2C+I+know...++you+see+parentheses+with+numbers+after+the+letters+and+before+the+colons%2C+but+you+can+leave+these+out.%2A+They%27re+added+automatically+by+the+editor+when+you+click+%22Update+Outputs%22+to+help+you+know+where+things+are.%0A%09%09%09A%3A+What%27s+the+asterisk+for%3F%0A%09%09%09%09Q%281.1.1.1.1%29%3A+Well%2C+sometimes+you+do+need+the+numbers%2C+like+when+you+want+to+use+a+GOTO+call.+%0A%09%09%09%09A%3A+What%27s+that%3F%0A%09%09%09%09%09Q%281.1.1.1.1.1%29%3A+You+can+place+a+GOTO+call+at+the+end+of+a+question+%28a+block+starting+with+Q%29+and+it+will+jump+to+where+you+point+it.+Want+to+give+it+a+try%3F%0A%09%09%09%09%09A%3A+Yes.+Again%2C+again%21+%0A%09%09%09%09%09%09Q%281.1.1.1.1.1.1%29%3AGOTO%3A1.1.1.1.1%0A%09%09%09%09%09A%3A+No.+Let%27s+move+on.%0A%09%09%09%09%09%09Q%28myname%29%3A+Instead+of+pre-defined+answers%2Fchoices%2C+you+can+also+ask+the+viewer+to+enter+text+of+their+own.+For+example%2C+what%27s+your+name%3F%0A%09%09%09%09%09%09X%3A%0A%09%09%09%09%09%09%09Q%281.1.1.1.1.1.2.1%29%3A+Pleased+to+meet+you+%3Cx%3Emyname%3C%2Fx%3E.+See+what+I+did+there%3F+You+can+do+more%2C+but+now+you+know+the+basics.+For+example%2C+you+can+split+a+bubble+in+two.+%3Cbr%3E%3Cbr%3E+You+can+do+a+lot+with+with+just%3A+Q+GOTO+A+and+X.+%3Cbr%3E%3Cbr%3E+Do+you+want+me+to+open+a+window+a+detailed+descriptions+of+what+you+can+do%3F%0A%09%09%09%09%09%09%09A%3A%5Bhttp%3A%2F%2Fwww.qnamarkup.org%2Fsyntax%2F%5D+Yes.%0A%09%09%09%09%09%09%09%09Q%281.1.1.1.1.1.2.1.1%29%3A+Feel+free+to+edit+what+you+see+in+the+text+field+or+start+from+scratch.+To+see+what+your+markup+come+to+life%2C+hit+the+%22Update+Outputs%22+button+below+the+text+area.+GOTO%3A2%0A%09%09%09%09%09%09%09A%3A+No.%0A%09%09%09%09%09%09%09%09Q%281.1.1.1.1.1.2.1.2%29%3AGOTO%3A1.1.1.1.1.1.2.1.1%0A%09%09A%3A+No.%0A%09%09%09Q%281.1.1.2%29%3AGOTO%3A2%0A%09A%3A+No.%0A%09%09Q%281.1.2%29%3A+Then+head+over+to+%3Ca+href%3D%22http%3A%2F%2Fwww.qnamarkup.org%22%3Ehttp%3A%2F%2Fwww.QnAMarkup.org%3C%2Fa%3E.%0AA%3A+No.+%0A%09Q%281.2%29%3A+Okay+then.+GOTO%3A2%0A%0AQ%282%29%3A+Have+a+nice+day.&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=1" 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=%3C%21--+Note%3A+you+can+turn+on%2Foff+word+wrap+in+this+text+area+by+clicking+the+checkbox+below.+Also%2C+any+text+you+see+between+less+than+and+greater+than+marks%2C+that%27s+HTML.+You+don%27t+have+to+use%2Fknow+HTML+to+write+a+QnA%2C+but+it+can+be+useful.+For+example%2C+this+text+doesn%27t+show+up+in+the+word+bubbles+because+it%27s+an+HTML+comment.+--%3E%0A%0AQ%281%29%3A+Would+you+like+to+write+an+interactive+QnA%3F%0AA%3A+Yes.%0A%09Q%281.1%29%3A+Are+you+viewing+this+exchange+in+a+window+with+the+same+text+in+two+places%2C+a+text+area+on+the+left+and+blue+and+gray+word+bubbles+on+the+right%3F%0A%09A%3A+Yes.%0A%09%09Q%281.1.1%29%3A+Cool.+The+text+on+the+left%2C+coupled+with+user+interaction%2C+defines+how+the+bubbles+are+presented.+Do+you+want+to+learn+more%3F%0A%09%09A%3A+Yes.%0A%09%09%09Q%281.1.1.1%29%3A+The+text+on+the+left+is+just+a+set+of+nested+text+blocks.+The+blocks+start+with+either+a+%22Q%3A%22+or+an+%22A%3A%22.+I+know%2C+I+know...++you+see+parentheses+with+numbers+after+the+letters+and+before+the+colons%2C+but+you+can+leave+these+out.%2A+They%27re+added+automatically+by+the+editor+when+you+click+%22Update+Outputs%22+to+help+you+know+where+things+are.%0A%09%09%09A%3A+What%27s+the+asterisk+for%3F%0A%09%09%09%09Q%281.1.1.1.1%29%3A+Well%2C+sometimes+you+do+need+the+numbers%2C+like+when+you+want+to+use+a+GOTO+call.+%0A%09%09%09%09A%3A+What%27s+that%3F%0A%09%09%09%09%09Q%281.1.1.1.1.1%29%3A+You+can+place+a+GOTO+call+at+the+end+of+a+question+%28a+block+starting+with+Q%29+and+it+will+jump+to+where+you+point+it.+Want+to+give+it+a+try%3F%0A%09%09%09%09%09A%3A+Yes.+Again%2C+again%21+%0A%09%09%09%09%09%09Q%281.1.1.1.1.1.1%29%3AGOTO%3A1.1.1.1.1%0A%09%09%09%09%09A%3A+No.+Let%27s+move+on.%0A%09%09%09%09%09%09Q%28myname%29%3A+Instead+of+pre-defined+answers%2Fchoices%2C+you+can+also+ask+the+viewer+to+enter+text+of+their+own.+For+example%2C+what%27s+your+name%3F%0A%09%09%09%09%09%09X%3A%0A%09%09%09%09%09%09%09Q%281.1.1.1.1.1.2.1%29%3A+Pleased+to+meet+you+%3Cx%3Emyname%3C%2Fx%3E.+See+what+I+did+there%3F+You+can+do+more%2C+but+now+you+know+the+basics.+For+example%2C+you+can+split+a+bubble+in+two.+%3Cbr%3E%3Cbr%3E+You+can+do+a+lot+with+with+just%3A+Q+GOTO+A+and+X.+%3Cbr%3E%3Cbr%3E+Do+you+want+me+to+open+a+window+a+detailed+descriptions+of+what+you+can+do%3F%0A%09%09%09%09%09%09%09A%3A%5Bhttp%3A%2F%2Fwww.qnamarkup.org%2Fsyntax%2F%5D+Yes.%0A%09%09%09%09%09%09%09%09Q%281.1.1.1.1.1.2.1.1%29%3A+Feel+free+to+edit+what+you+see+in+the+text+field+or+start+from+scratch.+To+see+what+your+markup+come+to+life%2C+hit+the+%22Update+Outputs%22+button+below+the+text+area.+GOTO%3A2%0A%09%09%09%09%09%09%09A%3A+No.%0A%09%09%09%09%09%09%09%09Q%281.1.1.1.1.1.2.1.2%29%3AGOTO%3A1.1.1.1.1.1.2.1.1%0A%09%09A%3A+No.%0A%09%09%09Q%281.1.1.2%29%3AGOTO%3A2%0A%09A%3A+No.%0A%09%09Q%281.1.2%29%3A+Then+head+over+to+%3Ca+href%3D%22http%3A%2F%2Fwww.qnamarkup.org%22%3Ehttp%3A%2F%2Fwww.QnAMarkup.org%3C%2Fa%3E.%0AA%3A+No.+%0A%09Q%281.2%29%3A+Okay+then.+GOTO%3A2%0A%0AQ%282%29%3A+Have+a+nice+day.&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=1"/>
	<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>