TiddlyWiki Math - course pages with embedded mathematics

<html><br />!Example 1: <br />Solving the quadratic equation.<div style="text-align: center; font-weight: bold;"><div style="text-align: center;"><div style="text-align: left;"><pre style="font-weight: normal;"><br />Suppose <span class="AM">`ax^2+bx+c=0`</span> and <span class="AM">`a!=0`</span>. We first divide by <span class="AM">`a`</span> to get <span class="AM">`x^2+b/ax+c/a=0`</span>. <br />Then we complete the square and obtain <span class="AM">`x^2+b/ax+(b/(2a))^2-(b/(2a))^2+c/a=0`</span>. <br />The first three terms factor to give <span class="AM">`(x+b/(2a))^2=(b^2)/(4a^2)-c/a`</span>.<br />Now we take square roots on both sides and get <span class="AM">`x+b/(2a)=+-sqrt((b^2)/(4a^2)-c/a)`</span>.<br /></pre></div><div style="font-weight: normal; text-align: left;">Finally we move the <span class="AM">`b/(2a)`</span> to the right and simplify to get <br /></div><div style="text-align: left;"><pre style="font-weight: normal;">the two solutions: <span class="AMedit">`x_(1,2)=(-b+-sqrt(b^2-4ac))/(2a)`.</span></pre></div></div></div></html>

! Russell Herman and Gabriel Lugo\nUniversity of North Carolina, Wilmington\n\n\nMathematics can be embedded easily into professional looking wiki's using either ~LaTeX or ~MathML generated mathematics. We demonstrate how this has been done using ~TiddlyWikis to produce online course materials in mathematics displaying typeset mathematical expressions and graphics.\n\n!Reading these notes\nThis was a talk given at ICTCM 2007 in Boston, MA. Click on the [[TiddlyWiki Math]] link to bring up talk. Then click on the slide show button. It is best viewed full screen (F11). Some links are local to the author's machine in case the Internet connection was not working at the conference. \n\nAny questions can be directed to Dr. Russ Herman vis hermanr@uncw.edu.

<<slideShow style:"MySlideStyle">>\n-s-\nThis macro allows you to define custom environments with a title that are auto-numbered along a tiddler. Each environment can be styled \nby defining two classes in your CSS, one for the all environment and another for the title. For this example check the BoxesStyleSheet.\n\n<<box Theorem 'Given the integer //n//>2, the equation //x//^^n^^+//y//^^n^^=//z//^^n^^ has no positive integer solutions.'>>\n<<box Example 'Let //X// and //Y// be random variables that . . .'>>\n<<box Exercise 'Show that, if //X// and //Y// are independent random variables, then:\n# ...\n## ...\n## ...\n# ...'>>\n<<box Theorem 'P(A or B)=P(A)+P(B)-P(A and B)'>>\nThe auto-numbering can be replaced by a label.\n\n<<box Example 'Sorry, I have no space here for the demonstration...' '1 (//cont.//)'>>\nOr you can simply skip the auto-numbering.\n\n<<box Question 'Do you like these colorful boxes?' ' '>>\nAt last, the title can also be removed in the stylesheet.\n\n<<box Frame 'Hey, where is my title? And why did you put me in this dark corner?'>>\n\n-s-

/***\n|''Name:''|BoxesPlugin|\n|''Description:''|Creates custom numbered environments|\n|''Version:''|1.1.0|\n|''Date:''|Sep 18, 2006|\n|''Source:''|http://www.math.ist.utl.pt/~psoares/addons.html|\n|''Author:''|Paulo Soares (psoares (at) math (dot) ist (dot) utl (dot) pt)|\n|''License:''|[[BSD open source license]]|\n|''~CoreVersion:''|2.1.0|\n|''Browser:''|Firefox 1.0.4+; Firefox 1.5; InternetExplorer 6.0|\n***/\n//{{{\nconfig.macros.box = {counter: {}};\n\nconfig.macros.box.handler= function(place,macroName,params) {\n if(params.length<2){return;}\n var number;\n if(!place.getAttribute('counting')) config.macros.box.counter={};\n place.setAttribute('counting',true);\n var env=params[0];\n var text=params[1];\n if(params.length==3) number=params[2];\n var p = createTiddlyElement(place,"div",null,env);\n var header = createTiddlyElement(p,"div",null,env+" envHeader");\n if(!number){\n if(!config.macros.box.counter[env]){\n config.macros.box.counter[env]=0;\n }\n number=++config.macros.box.counter[env];\n }\n wikify( env+" "+number, header);\n wikify( text, p);\n}\n//}}}

.hilite {\n font-weight: bold;\n background: #ffffcc;\n padding: 0.2em;\n}\n\n.Definição {\nbackground: #fafafa;\nborder: 3px #999999 dashed;\npadding: 0.5em;\nwidth: 80%;\nmargin-left: auto;\nmargin-right: auto;\n}\n\n.Definição .envHeader{\nborder: none;\ncolor: blue;\nmargin: 0 0 0.25em 0;\npadding: 0;\nfont-family: arial;\nfont-size: 1.2em;\nfont-weight: bold;\nwidth: 99%;\n}\n\n.Teorema {\nborder: 1px #666 dashed;\npadding: 0.5em;\nwidth: 55%;\nmargin-left: auto;\nmargin-right: auto;\n}\n\n.Teorema .envHeader{\nbackground: none;\nborder: none;\ncolor: blue;\nmargin: 0 0 0.25em 0;\npadding: 0;\nfont-family: arial;\nfont-size: 1.5em;\nfont-weight: bold;\nwidth: 100%;\n}\n\n.Theorem {\nborder: 1px #666 dashed;\npadding: 0.5em;\nwidth: 55%;\nmargin-left: auto;\nmargin-right: auto;\n}\n\n.Theorem .envHeader{\nbackground: none;\nborder: none;\ncolor: blue;\nmargin: 0 0 0.25em 0;\npadding: 0;\nfont-family: arial;\nfont-size: 1.5em;\nfont-weight: bold;\nwidth: 100%;\n}\n\n.Example {\nbackground: #ffffcc;\npadding: 0.5em;\n}\n\n.Example .envHeader{\nbackground: none;\ncolor: orange;\nmargin: 0 0 0.25em 0;\npadding: 0;\nfont-family: arial;\nfont-size: 1.5em;\nfont-weight: bold;\n}\n\n.Exercise {\nbackground: #e8ffd2;\npadding: 0.5em 0.5em 0.5em 0.6em;\n border-top:solid #e8ffd2 1px;\n border-left:solid #e8ffd2 1px;\n border-bottom:solid green 2px;\n border-right:solid green 2px;\n -moz-border-radius: 1.0em;\nwidth: 20em;\n}\n\n.Exercise .envHeader{\nbackground: none;\nborder: none;\ncolor: green;\nmargin: 0 0 0.25em 0;\npadding: 0;\nfont-family: arial;\nfont-size: 1.5em;\nfont-weight: bold;\nwidth: 100%;\n}\n\n.Frame {\nbackground: #000000;\ncolor: #ffffff;\npadding: 0.5em 0.5em 0.5em 0.6em;\nwidth: 20em;\nmargin-left: auto;\nmargin-right: 0;\n}\n\n.Frame .envHeader{\ndisplay: none;\n}\n\n.Question {\npadding: 0.5em 0.5em 0.5em 0.5em;\nbackground: #ffffcc;\nfont-size: 1.5em;\n}\n\n.Question .envHeader{\nmargin-bottom: 0.25em;\ncolor: red;\nfont-family: arial;\nfont-size: 1.5em;\nfont-weight: bold;\nborder: 2px red solid;\ntext-align: right;\n}

<<tabs tabsClass\nLayout "Layout Templates" SystemLayout\nSystem "System Tiddlers" SystemTiddlers\nStyle "StyleSheets" StyleSheets\n"Side Bar" "Side Bar Elements" SystemSideBars\nShadows "Hidden System Pages" ShadowPages\n>>\n\nThis page is a slightly modied version of [[Jack Parke's configuration|http://jackparke.googlepages.com/jtw.html#Config]]. Another one is at [[Julian Knight's site|http://knighjm.googlepages.com/knightnet-default-tw.html#Configuration]]. You can view the code. You will need to create several new tiddlers and add the corresponding code: SystemLayout, SystemTiddlers, StyleSheets, SystemSideBars,

[[Abstract]]

<html><div style="text-align: left; color: rgb(0, 51, 255);"><span style="font-weight: bold;"><span style="background-color: rgb(255, 255, 255);"><br />Information:<br /><br /></span><table border="1" style="width: 100%;"><tbody><tr><td><span style="font-weight: bold;">Name:</span></td><td><span style="font-weight: bold;">HTMLAreaPlugin</span></td></tr><tr><td><span style="font-weight: bold;">Version</span></td><td><span style="font-weight: bold;">2.1.2(Oct 5</span><span style="font-weight: bold;"><span style="font-weight: bold;">, 2006</span></span><span style="font-weight: bold;">)</span></td></tr><tr><td><span style="font-weight: bold;">Source</span></td><td><span style="font-weight: bold;">http://sourceforge.net/project/showfiles.php?group_id=150646</span></td></tr><tr><td><span style="font-weight: bold;">Author</span></td><td><span style="font-weight: bold;">BramChen<br /></span></td></tr><tr><td style="vertical-align: top;"><span style="font-weight: bold;">Original</span><br /></td><td style="vertical-align: top;"><span style="font-weight: bold;">Asciencepad, hijacked by PeterJipsen</span><br /></td></tr><tr><td style="vertical-align: top; font-weight: bold;">License<br /></td><td style="vertical-align: top; font-weight: bold;">Creative Commons Attribution-ShareAlike 2.5 License<br /></td></tr><tr><td><span style="font-weight: bold;">Type</span></td><td><span style="font-weight: bold;">Plugin</span></td></tr></tbody></table><br />Required:<br /></span><ul><li>TiddlyWiki 2.1.0<br /></li><li>HtmlArea eitor modified by PeterJipsen</li></ul><span style="font-weight: bold;">Reference:</span> <br /><div style="margin-left: 40px;">http://math.chapman.edu/~jipsen/asciencepad/asciencepad.html<br /><br /></div><span style="font-weight: bold;">Installation: </span><br /><ul><li>Add below statement to <span style="font-weight: bold;">MarkupPostHead</span></li></ul><span style="background-color: rgb(153, 255, 255);"><script type="text/javascript" src="HTMLArea/htmlareaPlugin.js"></script></span><br /><ul><li>Add below statements to <span style="font-weight: bold;">MarkupPreHead</span></li></ul><span style="background-color: rgb(153, 255, 255);"></span><br /><span style="background-color: rgb(153, 255, 255);"><script type="text/javascript" src="HTMLArea/plugins/AsciiMath/ASCIIMathML.js"></script></span><br style="background-color: rgb(153, 255, 255);" /><span style="background-color: rgb(153, 255, 255);"><script type="text/javascript" src="HTMLArea/plugins/AsciiSvg/ASCIIsvg.js"></script></span><br style="background-color: rgb(153, 255, 255);" /><span style="background-color: rgb(153, 255, 255);"><script type="text/javascript" src="HTMLArea/plugins/AsciiSvg/ASCIIsvgAddon.js"></script></span><br style="background-color: rgb(153, 255, 255);" /><span style="background-color: rgb(153, 255, 255);"></span><br style="background-color: rgb(153, 255, 255);" /><span style="background-color: rgb(153, 255, 255);"><script type="text/javascript"></span><br style="background-color: rgb(153, 255, 255);" /><span style="background-color: rgb(153, 255, 255);"> _editor_url = "HTMLArea/";</span><br style="background-color: rgb(153, 255, 255);" /><span style="background-color: rgb(153, 255, 255);"> _editor_lang = "en"; </span><span style="background-color: rgb(153, 255, 255);">// or zh-tw, zh-cn ....</span><br style="background-color: rgb(153, 255, 255);" /><span style="background-color: rgb(153, 255, 255);"></script></span><br style="background-color: rgb(153, 255, 255);" /><span style="background-color: rgb(153, 255, 255);"><script type="text/javascript" src="HTMLArea/htmlarea.js"></script></span><br style="background-color: rgb(153, 255, 255);" /><span style="background-color: rgb(153, 255, 255);"></span><br /><ul><li>Save changes and reload page.</li></ul><span style="font-weight: bold;">Uninstall:<br /></span><ul><li>Remove all lines of Markup* added from installation step, save changes and reload page.. <br /></li></ul><ul><li>or Open TW document in your edtior, and remove all lines added from installation step.<br /></li></ul><br /><span style="font-weight: bold;">Note: </span><br /><div style="margin-left: 40px;"><ul><li>Do not install this plugin as "systemConfig".</li><li>The content of tiddler is no more with wiki texts but a big <span style="font-weight: bold;"></span><br /><span style="font-weight: bold;">&lt;html&gt;blahblah&lt;/html&gt; </span>block.</li></ul></div><br /></div></html>

/***\n''InlineJavascriptPlugin for ~TiddlyWiki version 1.2.x and 2.0''\n^^author: Eric Shulman - ELS Design Studios\nsource: http://www.TiddlyTools.com/#InlineJavascriptPlugin\nlicense: [[Creative Commons Attribution-ShareAlike 2.5 License|http://creativecommons.org/licenses/by-sa/2.5/]]^^\n\nInsert Javascript executable code directly into your tiddler content. Lets you ''call directly into TW core utility routines, define new functions, calculate values, add dynamically-generated TiddlyWiki-formatted output'' into tiddler content, or perform any other programmatic actions each time the tiddler is rendered.\n!!!!!Usage\n<<<\nWhen installed, this plugin adds new wiki syntax for surrounding tiddler content with {{{<script>}}} and {{{</script>}}} markers, so that it can be treated as embedded javascript and executed each time the tiddler is rendered.\n\n''Deferred execution from an 'onClick' link''\nBy including a label="..." parameter in the initial {{{<script>}}} marker, the plugin will create a link to an 'onclick' script that will only be executed when that specific link is clicked, rather than running the script each time the tiddler is rendered.\n\n''External script source files:''\nYou can also load javascript from an external source URL, by including a src="..." parameter in the initial {{{<script>}}} marker (e.g., {{{<script src="demo.js"></script>}}}). This is particularly useful when incorporating third-party javascript libraries for use in custom extensions and plugins. The 'foreign' javascript code remains isolated in a separate file that can be easily replaced whenever an updated library file becomes available.\n\n''Display script source in tiddler output''\nBy including the keyword parameter "show", in the initial {{{<script>}}} marker, the plugin will include the script source code in the output that it displays in the tiddler.\n\n''Defining javascript functions and libraries:''\nAlthough the external javascript file is loaded while the tiddler content is being rendered, any functions it defines will not be available for use until //after// the rendering has been completed. Thus, you cannot load a library and //immediately// use it's functions within the same tiddler. However, once that tiddler has been loaded, the library functions can be freely used in any tiddler (even the one in which it was initially loaded).\n\nTo ensure that your javascript functions are always available when needed, you should load the libraries from a tiddler that will be rendered as soon as your TiddlyWiki document is opened. For example, you could put your {{{<script src="..."></script>}}} syntax into a tiddler called LoadScripts, and then add {{{<<tiddler LoadScripts>>}}} in your MainMenu tiddler.\n\nSince the MainMenu is always rendered immediately upon opening your document, the library will always be loaded before any other tiddlers that rely upon the functions it defines. Loading an external javascript library does not produce any direct output in the tiddler, so these definitions should have no impact on the appearance of your MainMenu.\n\n''Creating dynamic tiddler content''\nAn important difference between this implementation of embedded scripting and conventional embedded javascript techniques for web pages is the method used to produce output that is dynamically inserted into the document:\n* In a typical web document, you use the document.write() function to output text sequences (often containing HTML tags) that are then rendered when the entire document is first loaded into the browser window.\n* However, in a ~TiddlyWiki document, tiddlers (and other DOM elements) are created, deleted, and rendered "on-the-fly", so writing directly to the global 'document' object does not produce the results you want (i.e., replacing the embedded script within the tiddler content), and completely replaces the entire ~TiddlyWiki document in your browser window.\n* To allow these scripts to work unmodified, the plugin automatically converts all occurences of document.write() so that the output is inserted into the tiddler content instead of replacing the entire ~TiddlyWiki document.\n\nIf your script does not use document.write() to create dynamically embedded content within a tiddler, your javascript can, as an alternative, explicitly return a text value that the plugin can then pass through the wikify() rendering engine to insert into the tiddler display. For example, using {{{return "thistext"}}} will produce the same output as {{{document.write("thistext")}}}.\n\n//Note: your script code is automatically 'wrapped' inside a function, {{{_out()}}}, so that any return value you provide can be correctly handled by the plugin and inserted into the tiddler. To avoid unpredictable results (and possibly fatal execution errors), this function should never be redefined or called from ''within'' your script code.//\n\n''Accessing the ~TiddlyWiki DOM''\nThe plugin provides one pre-defined variable, 'place', that is passed in to your javascript code so that it can have direct access to the containing DOM element into which the tiddler output is currently being rendered.\n\nAccess to this DOM element allows you to create scripts that can:\n* vary their actions based upon the specific location in which they are embedded\n* access 'tiddler-relative' information (use findContainingTiddler(place))\n* perform direct DOM manipulations (when returning wikified text is not enough)\n<<<\n!!!!!Examples\n<<<\nan "alert" message box:\n><script show>\n alert('InlineJavascriptPlugin: this is a demonstration message');\n</script>\ndynamic output:\n><script show>\n return (new Date()).toString();\n</script>\nwikified dynamic output:\n><script show>\n return "link to current user: [["+config.options.txtUserName+"]]";\n</script>\ndynamic output using 'place' to get size information for current tiddler:\n><script show>\n if (!window.story) window.story=window;\n var title=story.findContainingTiddler(place).id.substr(7);\n return title+" is using "+store.getTiddlerText(title).length+" bytes";\n</script>\ncreating an 'onclick' button/link that runs a script:\n><script label="click here" show>\n if (!window.story) window.story=window;\n alert("Hello World!\snlinktext='"+place.firstChild.data+"'\sntiddler='"+story.findContainingTiddler(place).id.substr(7)+"'");\n</script>\nloading a script from a source url:\n>http://www.TiddlyTools.com/demo.js contains:\n>>{{{function demo() { alert('this output is from demo(), defined in demo.js') } }}}\n>>{{{alert('InlineJavascriptPlugin: demo.js has been loaded'); }}}\n><script src="demo.js" show>\n return "loading demo.js..."\n</script>\n><script label="click to execute demo() function" show>\n demo()\n</script>\n<<<\n!!!!!Installation\n<<<\nimport (or copy/paste) the following tiddlers into your document:\n''InlineJavascriptPlugin'' (tagged with <<tag systemConfig>>)\n<<<\n!!!!!Revision History\n<<<\n''2006.06.01 [1.5.1]'' when calling wikify() on script return value, pass hightlightRegExp and tiddler params so macros that rely on these values can render properly\n''2006.04.19 [1.5.0]'' added 'show' parameter to force display of javascript source code in tiddler output\n''2006.01.05 [1.4.0]'' added support 'onclick' scripts. When label="..." param is present, a button/link is created using the indicated label text, and the script is only executed when the button/link is clicked. 'place' value is set to match the clicked button/link element.\n''2005.12.13 [1.3.1]'' when catching eval error in IE, e.description contains the error text, instead of e.toString(). Fixed error reporting so IE shows the correct response text. Based on a suggestion by UdoBorkowski\n''2005.11.09 [1.3.0]'' for 'inline' scripts (i.e., not scripts loaded with src="..."), automatically replace calls to 'document.write()' with 'place.innerHTML+=' so script output is directed into tiddler content. Based on a suggestion by BradleyMeck\n''2005.11.08 [1.2.0]'' handle loading of javascript from an external URL via src="..." syntax\n''2005.11.08 [1.1.0]'' pass 'place' param into scripts to provide direct DOM access \n''2005.11.08 [1.0.0]'' initial release\n<<<\n!!!!!Credits\n<<<\nThis feature was developed by EricShulman from [[ELS Design Studios|http:/www.elsdesign.com]]\n<<<\n!!!!!Code\n***/\n//{{{\nversion.extensions.inlineJavascript= {major: 1, minor: 5, revision: 1, date: new Date(2006,6,1)};\n\nconfig.formatters.push( {\n name: "inlineJavascript",\n match: "\s\s<script",\n lookahead: "\s\s<script(?: src=\s\s\s"((?:.|\s\sn)*?)\s\s\s")?(?: label=\s\s\s"((?:.|\s\sn)*?)\s\s\s")?( show)?\s\s>((?:.|\s\sn)*?)\s\s</script\s\s>",\n\n handler: function(w) {\n var lookaheadRegExp = new RegExp(this.lookahead,"mg");\n lookaheadRegExp.lastIndex = w.matchStart;\n var lookaheadMatch = lookaheadRegExp.exec(w.source)\n if(lookaheadMatch && lookaheadMatch.index == w.matchStart) {\n if (lookaheadMatch[1]) { // load a script library\n // make script tag, set src, add to body to execute, then remove for cleanup\n var script = document.createElement("script"); script.src = lookaheadMatch[1];\n document.body.appendChild(script); document.body.removeChild(script);\n }\n if (lookaheadMatch[4]) { // there is script code\n if (lookaheadMatch[3]) // show inline script code in tiddler output\n wikify("{{{\sn"+lookaheadMatch[0]+"\sn}}}\sn",w.output);\n if (lookaheadMatch[2]) { // create a link to an 'onclick' script\n // add a link, define click handler, save code in link (pass 'place'), set link attributes\n var link=createTiddlyElement(w.output,"a",null,"tiddlyLinkExisting",lookaheadMatch[2]);\n link.onclick=function(){try{return(eval(this.code))}catch(e){alert(e.description?e.description:e.toString())}}\n link.code="function _out(place){"+lookaheadMatch[4]+"};_out(this);"\n link.setAttribute("href","javascript:;"); link.setAttribute("title",""); link.style.cursor="pointer";\n }\n else { // run inline script code\n var code="function _out(place){"+lookaheadMatch[4]+"};_out(w.output);"\n code=code.replace(/document.write\s(/gi,'place.innerHTML+=(');\n try { var out = eval(code); } catch(e) { out = e.description?e.description:e.toString(); }\n if (out && out.length) wikify(out,w.output,w.highlightRegExp,w.tiddler);\n }\n }\n w.nextMatch = lookaheadMatch.index + lookaheadMatch[0].length;\n }\n }\n} )\n//}}}\n

-s-\n!New Page 1\n\n-s-\n!New Page 2

[[TiddlyWiki Math]]\n/%MainMenu%/\n/%[[Links]]%/\n/%[[Abstract]]%/\n-----------------------\n/%PlayArea%/\n-----------------------\n{{small{\n<<search>>\n<<closeAll>>\n<<permaview>>\n<<newTiddler>>\n<<saveChanges>>\n[[ImportTiddlers]]}}}\n-----------------------\n{{smaller{[[by Dr. R. Herman.|http://people.uncw.edu/herman]]}}}

<!script src="HTMLArea/htmlareaPlugin.js" type="text/javascript"></script>

\n<script src="HTMLArea/plugins/AsciiMath/ASCIIMathML.js" type="text/javascript"></script>\n<script src="HTMLArea/plugins/AsciiSvg/ASCIIsvg.js" type="text/javascript"></script>\n<script src="HTMLArea/plugins/AsciiSvg/ASCIIsvgAddon.js" type="text/javascript"></script>\n\n<script type="text/javascript">\n//<![CDATA[\n _editor_url = "HTMLArea/";\n _editor_lang = "en";\n//]]>\n</script>\n<script src="HTMLArea/htmlarea.js" type="text/javascript"></script>\n

/***\n!Generic rules /% ============================================================= %/\n***/\n/*{{{*/\nbody {\nbackground-color: #ffffff;\nfont-size: .8em\n}\n\nimg{\n display: block;\n margin: 0 auto;\n}\n\n#toc{\n background: #000;\n}\n/*}}}*/\n/***\n!Link styles /% ============================================================= %/\n***/\n/*{{{*/\na,\na.button,\n#mainMenu a.button,\n#sidebarOptions .sliderPanel a{\n color: #00f;\n border: 0;\n}\n\na:hover,\na.button:hover,\n#mainMenu a.button:hover,\n#sidebarOptions .sliderPanel a:hover\n#sidebarOptions .sliderPanel a:active{\n color: #006;\n border: 0;\n border-bottom: #006 1px dashed;\n background: transparent;\n text-decoration: none;\n}\n\n#displayArea .button.highlight{\n color: #ffbf00;\n background: #4c4c4c;\n}\n/*}}}*/\n/***\n!Tiddler Display styles /% ============================================================= %/\n***/\n/*{{{*/\n.slide{\n margin: .5em 4em;\n}\n\n.title{display: none;}\nh2, h3, h4, h5 {\n color: #000;\n background-color: transparent;\n border-bottom: 1px solid #333;\n}\n\nh1 {\n color: #fff;\n background-color: #c00;\n border-bottom: 1px solid #333;\n}\n\n.subtitle{\n color: #666;\n}\n\n.viewer {color: #000;}\n\n.viewer table{background: #666; color: #000;}\n\n.viewer th {background-color: #996; color: #000;}\n\n.viewer pre, .viewer code {color: #ddd; background-color: #4c4c4c; border: 1px solid #ffbf00; font-size: .8em}\n\n.viewer hr {color: #666;}\n\n.tiddler .button {color: #4c4c4c;}\n.tiddler .button:hover { color: #ffbf00; background-color: #4c4c4c;}\n.tiddler .button:active {color: #ffbf00; background-color: #4c4c4c;}\n\n.toolbar {\n color: #4c4c4c;\n}\n\n.toolbar a.button,\n.editorFooter a{\n border: 0;\n}\n\nul,ol{\n margin: 0;\n padding: 0;\n}\n\n\n.hilite {\n font-weight: bold;\n background: #ffffcc;\n padding: 0.2em;\n}\n\n.Definição {\nbackground: #fafafa;\nborder: 3px #999999 dashed;\npadding: 0.5em;\nwidth: 80%;\nmargin-left: auto;\nmargin-right: auto;\n}\n\n.Definição .envHeader{\nborder: none;\ncolor: blue;\nmargin: 0 0 0.25em 0;\npadding: 0;\nfont-family: arial;\nfont-size: 1.2em;\nfont-weight: bold;\nwidth: 99%;\n}\n\n.Teorema {\nborder: 1px #666 dashed;\npadding: 0.5em;\nwidth: 55%;\nmargin-left: auto;\nmargin-right: auto;\n}\n\n.Teorema .envHeader{\nbackground: none;\nborder: none;\ncolor: blue;\nmargin: 0 0 0.25em 0;\npadding: 0;\nfont-family: arial;\nfont-size: 1.5em;\nfont-weight: bold;\nwidth: 100%;\n}\n\n.Theorem {\nborder: 1px #666 dashed;\npadding: 0.5em;\nwidth: 55%;\nmargin-left: auto;\nmargin-right: auto;\n}\n\n.Theorem .envHeader{\nbackground: none;\nborder: none;\ncolor: blue;\nmargin: 0 0 0.25em 0;\npadding: 0;\nfont-family: arial;\nfont-size: 1.5em;\nfont-weight: bold;\nwidth: 100%;\n}\n\n.Example {\nbackground: #ffffcc;\npadding: 0.5em;\n}\n\n.Example .envHeader{\nbackground: none;\ncolor: orange;\nmargin: 0 0 0.25em 0;\npadding: 0;\nfont-family: arial;\nfont-size: 1.5em;\nfont-weight: bold;\n}\n\n.Exercise {\nbackground: #e8ffd2;\npadding: 0.5em 0.5em 0.5em 0.6em;\n border-top:solid #e8ffd2 1px;\n border-left:solid #e8ffd2 1px;\n border-bottom:solid green 2px;\n border-right:solid green 2px;\n -moz-border-radius: 1.0em;\nwidth: 20em;\n}\n\n.Exercise .envHeader{\nbackground: none;\nborder: none;\ncolor: green;\nmargin: 0 0 0.25em 0;\npadding: 0;\nfont-family: arial;\nfont-size: 1.5em;\nfont-weight: bold;\nwidth: 100%;\n}\n\n.Frame {\nbackground: #000000;\ncolor: #ffffff;\npadding: 0.5em 0.5em 0.5em 0.6em;\nwidth: 20em;\nmargin-left: auto;\nmargin-right: 0;\n}\n\n.Frame .envHeader{\ndisplay: none;\n}\n\n.Question {\npadding: 0.5em 0.5em 0.5em 0.5em;\nbackground: #ffffcc;\nfont-size: 1.5em;\n}\n\n.Question .envHeader{\nmargin-bottom: 0.25em;\ncolor: red;\nfont-family: arial;\nfont-size: 1.5em;\nfont-weight: bold;\nborder: 2px red solid;\ntext-align: right;\n}\n\n.Tbox {\nbackground: #ffc;\ncolor: #000;\npadding: 0.5em 0.5em 0.5em 0.6em;\n/% width: 20em; %/\nmargin-left: 0;\nmargin-right: 0;\n}\n\n.Tbox .envHeader{\ndisplay: none;\n}\n\n.Tboxs {\nbackground: #e8ffd2;\npadding: 0.5em 0.5em 0.5em 0.6em;\n border-top:solid #e8ffd2 1px;\n border-left:solid #e8ffd2 1px;\n border-bottom:solid green 2px;\n border-right:solid green 2px;\n -moz-border-radius: 1.0em;\n}\n\n.Tboxs .envHeader{\ndisplay: none;\n}\n\n.Tboxs2 {\nbackground: #cff;\npadding: 0.5em 0.5em 0.5em 0.6em;\n border-top:solid #cff 1px;\n border-left:solid #cff 1px;\n border-bottom:solid blue 2px;\n border-right:solid blue 2px;\n -moz-border-radius: 1.0em;\n}\n\n.Tboxs2 .envHeader{\ndisplay: none;\n}\n\n/*}}}*/

!!Start the <<slideShow style:"MySlideStyle">>\n-s-\n!ABSTRACT\nMathematics can be embedded easily into professional looking wiki's using either LaTeX or MathML generated mathematics. We demonstrate how this has been done using TiddlyWikis to produce online course materials in mathematics displaying typeset mathematical expressions and graphics.\n!!Russell Herman and Gabriel Lugo\nUniversity of North Carolina Wilmington\n-s-\n!First\n<<box Example 'Let //X// and //Y// be random variables that . . .'>>\n<<box Exercise 'Show that, if //X// and //Y// are independent random variables, then:\n# ...\n## ...\n## ...\n# ...'>>\n-s-\n!More Boxes\n<<box Question 'Do you like these colorful boxes?' ' '>>\nAt last, the title can also be removed in the stylesheet.\n\n<<box Frame 'Hey, where is my title? And why did you put me in this dark corner?'>>\n\n-s-\n!Second\nTo see how incremental display works use the left and right mouse buttons.\n{{Overlay1{You can}}} {{Overlay2{present things}}} {{Overlay1{in an arbitrary order!!!}}}\n{{Overlay3{Its a bit harder with lists but it works:}}}\n<html>\n<ol>\n<li class="Overlay4">First item</li>\n<li class="Overlay5">Second item</li>\n<li class="Overlay4">Last item</li>\n</ol>\n</html>\n-s-\n!jsMath Example\n<<box Tboxs 'testing'>>\n<<box Tboxs2 'testing $$\sint_0^1 f(x)\s, dx$$'>>\n\n[[Home page|http://people.uncw.edu/hermanr]]\n\n\n[[Links]]

/***\n|Name|Plugin: jsMath|\n|Created by|BobMcElrath|\n|Email|my first name at my last name dot org|\n|Location|http://bob.mcelrath.org/tiddlyjsmath-2.0.3.html|\n|Version|1.4|\n|Requires|[[TiddlyWiki|http://www.tiddlywiki.com]] ≥ 2.0.3, [[jsMath|http://www.math.union.edu/~dpvc/jsMath/]] ≥ 3.0|\n!Description\nLaTeX is the world standard for specifying, typesetting, and communicating mathematics among scientists, engineers, and mathematicians. For more information about LaTeX itself, visit the [[LaTeX Project|http://www.latex-project.org/]]. This plugin typesets math using [[jsMath|http://www.math.union.edu/~dpvc/jsMath/]], which is an implementation of the TeX math rules and typesetting in javascript, for your browser. Notice the small button in the lower right corner which opens its control panel.\n!Installation\nIn addition to this plugin, you must also [[install jsMath|http://www.math.union.edu/~dpvc/jsMath/download/jsMath.html]] on the same server as your TiddlyWiki html file. If you're using TiddlyWiki without a web server, then the jsMath directory must be placed in the same location as the TiddlyWiki html file.\n\nI also recommend modifying your StyleSheet use serif fonts that are slightly larger than normal, so that the math matches surrounding text, and \s\ssmall fonts are not unreadable (as in exponents and subscripts).\n{{{\n.viewer {\n line-height: 125%;\n font-family: serif;\n font-size: 10pt;\n}\n}}}\n\nIf you had used a previous version of [[Plugin: jsMath]], it is no longer necessary to edit the main tiddlywiki.html file to add the jsMath <script> tag. [[Plugin: jsMath]] now uses ajax to load jsMath.\n!History\n* 11-Nov-05, version 1.0, Initial release\n* 22-Jan-06, version 1.1, updated for ~TW2.0, tested with jsMath 3.1, editing tiddlywiki.html by hand is no longer necessary.\n* 24-Jan-06, version 1.2, fixes for Safari, Konqueror\n* 27-Jan-06, version 1.3, improved error handling, detect if ajax was already defined (used by ZiddlyWiki)\n* 12-Jul-06, version 1.4, fixed problem with not finding image fonts\n!Examples\n|!Source|!Output|h\n|{{{The variable $x$ is real.}}}|The variable $x$ is real.|\n|{{{The variable \s(y\s) is complex.}}}|The variable \s(y\s) is complex.|\n|{{{This \s[\sint_a^b x = \sfrac{1}{2}(b^2-a^2)\s] is an easy integral.}}}|This \s[\sint_a^b x = \sfrac{1}{2}(b^2-a^2)\s] is an easy integral.|\n|{{{This $$\sint_a^b \ssin x = -(\scos b - \scos a)$$ is another easy integral.}}}|This $$\sint_a^b \ssin x = -(\scos b - \scos a)$$ is another easy integral.|\n|{{{Block formatted equations may also use the 'equation' environment \sbegin{equation} \sint \stan x = -\sln \scos x \send{equation} }}}|Block formatted equations may also use the 'equation' environment \sbegin{equation} \sint \stan x = -\sln \scos x \send{equation}|\n|{{{Equation arrays are also supported \sbegin{eqnarray} a &=& b \s\s c &=& d \send{eqnarray} }}}|Equation arrays are also supported \sbegin{eqnarray} a &=& b \s\s c &=& d \send{eqnarray} |\n|{{{I spent \s$7.38 on lunch.}}}|I spent \s$7.38 on lunch.|\n|{{{I had to insert a backslash (\s\s) into my document}}}|I had to insert a backslash (\s\s) into my document|\n!Code\n***/\n//{{{\n\n// AJAX code adapted from http://timmorgan.org/mini\n// This is already loaded by ziddlywiki...\nif(typeof(window["ajax"]) == "undefined") {\n ajax = {\n x: function(){try{return new ActiveXObject('Msxml2.XMLHTTP')}catch(e){try{return new ActiveXObject('Microsoft.XMLHTTP')}catch(e){return new XMLHttpRequest()}}},\n gets: function(url){var x=ajax.x();x.open('GET',url,false);x.send(null);return x.responseText}\n }\n}\n\n// Load jsMath\njsMath = {\n Setup: {inited: 1}, // don't run jsMath.Setup.Body() yet\n Autoload: {root: new String('../../jsMath/')} // URL to jsMath directory, change if necessary\n};\nvar jsMathstr;\ntry {\n jsMathstr = ajax.gets(jsMath.Autoload.root+"jsMath.js");\n} catch(e) {\n alert("jsMath was not found: you must place the 'jsMath' directory in the same place as this file. "\n +"The error was:\sn"+e.name+": "+e.message);\n throw(e); // abort eval\n}\ntry {\n window.eval(jsMathstr);\n} catch(e) {\n alert("jsMath failed to load. The error was:\sn"+e.name + ": " + e.message + " on line " + e.lineNumber);\n}\njsMath.Setup.inited=0; // allow jsMath.Setup.Body() to run again\n\n// Define wikifers for latex\nconfig.formatterHelpers.mathFormatHelper = function(w) {\n var e = document.createElement(this.element);\n e.className = this.className;\n var endRegExp = new RegExp(this.terminator, "mg");\n endRegExp.lastIndex = w.matchStart+w.matchLength;\n var matched = endRegExp.exec(w.source);\n if(matched) {\n var txt = w.source.substr(w.matchStart+w.matchLength, \n matched.index-w.matchStart-w.matchLength);\n if(this.keepdelim) {\n txt = w.source.substr(w.matchStart, matched.index+matched[0].length-w.matchStart);\n }\n e.appendChild(document.createTextNode(txt));\n w.output.appendChild(e);\n w.nextMatch = endRegExp.lastIndex;\n }\n}\n\nconfig.formatters.push({\n name: "displayMath1",\n match: "\s\s\s$\s\s\s$",\n terminator: "\s\s\s$\s\s\s$\s\sn?",\n element: "div",\n className: "math",\n handler: config.formatterHelpers.mathFormatHelper\n});\n\nconfig.formatters.push({\n name: "inlineMath1",\n match: "\s\s\s$", \n terminator: "\s\s\s$",\n element: "span",\n className: "math",\n handler: config.formatterHelpers.mathFormatHelper\n});\n\nvar backslashformatters = new Array(0);\n\nbackslashformatters.push({\n name: "inlineMath2",\n match: "\s\s\s\s\s\s\s(",\n terminator: "\s\s\s\s\s\s\s)",\n element: "span",\n className: "math",\n handler: config.formatterHelpers.mathFormatHelper\n});\n\nbackslashformatters.push({\n name: "displayMath2",\n match: "\s\s\s\s\s\s\s[",\n terminator: "\s\s\s\s\s\s\s]\s\sn?",\n element: "div",\n className: "math",\n handler: config.formatterHelpers.mathFormatHelper\n});\n\nbackslashformatters.push({\n name: "displayMath3",\n match: "\s\s\s\sbegin\s\s{equation\s\s}",\n terminator: "\s\s\s\send\s\s{equation\s\s}\s\sn?",\n element: "div",\n className: "math",\n handler: config.formatterHelpers.mathFormatHelper\n});\n\n// These can be nested. e.g. \sbegin{equation} \sbegin{array}{ccc} \sbegin{array}{ccc} ...\nbackslashformatters.push({\n name: "displayMath4",\n match: "\s\s\s\sbegin\s\s{eqnarray\s\s}",\n terminator: "\s\s\s\send\s\s{eqnarray\s\s}\s\sn?",\n element: "div",\n className: "math",\n keepdelim: true,\n handler: config.formatterHelpers.mathFormatHelper\n});\n\n// The escape must come between backslash formatters and regular ones.\n// So any latex-like \scommands must be added to the beginning of\n// backslashformatters here.\nbackslashformatters.push({\n name: "escape",\n match: "\s\s\s\s.",\n handler: function(w) {\n w.output.appendChild(document.createTextNode(w.source.substr(w.matchStart+1,1)));\n w.nextMatch = w.matchStart+2;\n }\n});\n\nconfig.formatters=backslashformatters.concat(config.formatters);\n\nwindow.wikify = function(source,output,highlightRegExp,tiddler)\n{\n if(source && source != "") {\n var wikifier = new\n Wikifier(source,formatter,highlightRegExp,tiddler);\n wikifier.subWikify(output,null);\n jsMath.ProcessBeforeShowing();\n }\n}\n//}}}

<html><span><span>The mathematics display on this site (due to <a href="http://www.chapman.edu/~jipsen">Peter Jipsen</a> and <a href="http://www.pierce.ctc.edu/dlippman/">David Lippman</a>) requires either of the following two setups, available free on the internet: <br /></span></span><ol><li><span><span><span style="font-weight: bold;">Firefox 1.5+</span> with <span style="font-weight: bold;">MathML</span> <span style="font-weight: bold;">fonts</span> (<span style="color: rgb(153, 0, 0); background-color: rgb(255, 255, 0);">Firefox 2.0+ recommended</span>) or<br /></span></span></li><li><span><span><span style="font-weight: bold;">Internet Explorer </span>with <span style="font-weight: bold;">MathML</span> <span style="font-weight: bold;">fonts</span> and two free plugins, <span style="font-weight: bold;">~MathPlayer</span> and <span style="font-weight: bold;">Adobe SVG Viewer</span>. <br /></span></span></li></ol><span><span>Here's where to get the browsers and Internet Explorer plugins:</span></span><ul><li><span style="font-weight: bold;"><a href="http://www.mozilla.org/products/firefox/">Firefox for Windows and Mac OS X</a></span> <br /></li><li><span style="font-weight: bold;"><a href="http://www.microsoft.com/windows/ie/downloads/default.mspx">Internet Explorer 7 for Windows</a></span><br /></li><ul><li><a href="http://dessci.com/"><span style="font-weight: bold;">~MathPlayer</span></a></li><li><a href="http://www.adobe.com/svg"><span style="font-weight: bold;">Adobe SVG Viewer</span></a><br /></li></ul></ul><span><span>Here's where to get the several special MathML fonts:<br /></span></span><ul><li><span><span>On Windows, download the <a href="http://web.mit.edu/atticus/www/mathml/mit-mathml-fonts-1.0-fc1.msi">font installer</a> and follow the <a href="http://web.mit.edu/is/topics/webpublishing/mathml/fonts-win.html">instructions</a>.</span></span></li><li><span><span>On Mac OS X, download the <a href="http://web.mit.edu/atticus/www/mathml/mit-mathml-fonts-1.0-fc2a.hqx">font installer</a> and follow the <a href="http://web.mit.edu/is/topics/webpublishing/mathml/fonts-mac.html">instructions</a>.</span></span></li></ul><span><span></span></span>To check the readiness of your browser, this equation should render in proper form:<br /><br /><div style="text-align: center;"><span class="AM">`x = (-b +- sqrt(b^2 - 4ac))/(2a)`</span> <br /></div></html>

<<search>><<closeAll>><<permaview>><<newTiddler>><<newJournal 'DD MMM YYYY'>><<saveChanges>><<slider chkSliderOptionsPanel OptionsPanel 'options »' 'Change TiddlyWiki advanced options'>><< ImportTiddlers >>

course pages with embedded mathematics

~TiddlyWiki Math

<<slideShow>> - A simple slide show that keeps the TW style \n<<slideShow style:'MySSStyleSheet' clock:'+'>> - A themed slide show with a clock showing the presentation elapsed time\n<<slideShow repeat clock:'-20'>> - A looping slide show with a 20 minutes countdown clock\n<<slideShow slidePause:1000>> - A timed slideshow that runs once\n<<slideShow slidePause:1000 repeat>> - A timed looping slideshow\n-s-\n!The [[SlideShowPlugin]]\nPress F11 to go fullscreen and adjust the font sizes with Ctrl++ Ctrl+- (or Ctrl+mousewheel).\n\nThis plugin was developed by Paulo Soares and Clint Checketts.\n{{Comment{This block is not shown in the slide show.\n@@Don't show me!!!@@}}}\n-s-\n!How slides are separated\nIn a tiddler, you start each slide with the markup {{{-s-}}}\n-s-\nSlides don't have to have titles like this poor one\n-s-\n!A slide with subsections and a long title\nCheck to TOC below to see how this slide title is abbreviated.\n!!Section 1\nThis is a section\n!!!Subsection 1.1\nThis is a subsection\n!!!Subsection 1.2\nThis is another subsection\n!!!!Subsubsection 1.2.1\nThis is a subsubsection\n-s-\n!Using the keyboard\nThe following keys are defined:\n*Left arrow - previous overlay\n*Down arrow - previous slide\n*Right arrow - next overlay\n*Up arrow - next slide\n*Home - first slide\n*End - last slide\n*Escape - exit slide show\n*Spacebar - pause/resume slide show in auto advance mode\n-s-\n!Slide show parameters\n*The slide show can be themed by providing a ~StyleSheet ({{{<<slideShow style:'MyStyleSheet'>>}}})\n*By default, there is a clock at bottom of the browser window that displays the current time. This clock can also show the presentation elapsed time with {{{<<slideShow clock:'+'>>}}} or a countdown clock with {{{<<slideShow clock:'-20'>>}}} (for 20 minutes). In these two cases, if you click on the clock display it will be restarted\n*The slide show can be set to loop ({{{<<slideShow repeat>>}}})\n*You can set it so each slide changes after X milliseconds ({{{<<slideShow slidePause:X>>}}}) (auto advance mode)\n*Use auto start mode to begin the slideshow the moment the tiddler is opened ({{{<<slideShow autostart>>>}}})\n*You can disable overlays with {{{<<slideShow noOverlays>>}}}\n*These parameters can be mixed and matched in any order: {{{<<slideShow slidePause:1000 repeat>>}}} is the same as {{{<<slideShow repeat slidePause:1000>>}}}\n-s-\n!Overlays\nTo see how incremental display works use the left and right mouse buttons.\n{{Overlay1{You can}}} {{Overlay2{present things}}} {{Overlay1{in an arbitrary order!!!}}}\n{{Overlay3{Its a bit harder with lists but it works:}}}\n<html>\n<ol>\n<li class="Overlay4">First item</li>\n<li class="Overlay5">Second item</li>\n<li class="Overlay4">Last item</li>\n</ol>\n</html>\n{{Comment{You can hide comments on a slide that won't display in the slide show}}}

\n<div id='displayArea'>\n<div id='tiddlerDisplay'></div>\n</div>\n

/***\n|''Name:''|SlideShowPlugin|\n|''Description:''|Creates a simple slide show type display|\n|''Version:''|1.5.1|\n|''Date:''|Nov 10, 2006|\n|''Source:''|http://www.math.ist.utl.pt/~psoares/addons.html|\n|''Author:''|Paulo Soares (psoares (at) math (dot) ist (dot) utl (dot) pt) and [[Clint Checketts|http://www.checkettsweb.com]]|\n|''License:''|[[BSD open source license]]|\n|''~CoreVersion:''|2.1.0|\n|''Browser:''|Firefox 1.0.4+; Firefox 1.5; InternetExplorer 6.0|\n<<tiddler SlideShowPluginDoc>>\n!Code\n***/\n//{{{\nconfig.macros.slideShow = {label: "slide show", maxTOCLength: 30};\nconfig.macros.slideShow.messages = {gotoLabel: "Go to slide:"};\nconfig.views.wikified.slideShow = {text: "slide show", tooltip: "Start slide show"};\nconfig.views.wikified.slideShow.quit = {text: "end", tooltip: "Quit the slide show"};\nconfig.views.wikified.slideShow.firstSlide = {text: "<<", tooltip: "first slide"};\nconfig.views.wikified.slideShow.previousSlide = {text: "<", tooltip: "previous slide"};\nconfig.views.wikified.slideShow.nextSlide = {text: ">", tooltip: "next slide"};\nconfig.views.wikified.slideShow.lastSlide = {text: ">>", tooltip: "last slide"};\nconfig.views.wikified.slideShow.resetClock = {text: " ", tooltip: "reset"};\n\nconfig.formatters.push( {\n name: "SlideSeparator",\n match: "^-s-+$\s\sn?",\n handler: function(w)\n {\n createTiddlyElement(w.output,"hr",null,'slideSeparator');\n }\n}\n)\n\nfunction changeStyleSheet(tiddlerName) {\n if (tiddlerName == null) tiddlerName = "StyleSheet";\n setStylesheet(store.getRecursiveTiddlerText("StyleSheetColors"),"StyleSheetColors");\n setStylesheet(store.getRecursiveTiddlerText("StyleSheetLayout"),"StyleSheetLayout");\n var theCSS = store.getRecursiveTiddlerText(tiddlerName,"");\n setStylesheet(theCSS,"StyleSheet");\n}\n\n//Excellent (and versatile) reparser created by Paul Petterson for parsing the paramString in a macro\nfunction reparse( params ) {\n var re = /([^:\ss]+)(?:\s:((?:\sd+)|(?:["'](?:[^"']+)["']))|\ss|$)/g;\n var ret = new Array() ;\n var m ;\n while( (m = re.exec( params )) != null ) ret[ m[1] ] = m[2]?m[2]:true ;\n return ret ;\n}\n\nfunction getElementsByClass(searchClass,node,tag) {\n var classElements = new Array();\n if ( node == null ) node = document;\n if ( tag == null ) tag = '*';\n var els = node.getElementsByTagName(tag);\n var elsLen = els.length;\n var pattern = new RegExp("(^|\s\ss)"+searchClass+"(\s\ss|$)");\n var j=0;\n for (var i = 0; i < elsLen; i++) {\n if ( pattern.test(els[i].className) ) {\n classElements[j] = els[i];\n j++;\n }\n }\n return classElements;\n}\n\n// 'keys' code adapted from S5 which in turn was adapted from MozPoint (http://mozpoint.mozdev.org/)\nfunction keys(key) {\n if (document.getElementById('contentWrapper').className == "slideShowMode"){\n if (!key) {\n key = event;\n key.which = key.keyCode;\n }\n switch (key.which) {\n case 32: // spacebar\n if(time>0){\n if(autoAdvance){\n clearInterval(autoAdvance);\n autoAdvance = null;\n } else {\n autoAdvance=setInterval("GoToSlide(1)", time);\n }\n }\n break;\n case 34: // page down\n case 39: // rightkey\n GoToSlide("n");\n break;\n case 40: // downkey\n GoToSlide(-1);\n break;\n case 33: // page up\n case 37: // leftkey\n GoToSlide("p");\n break;\n case 38: // upkey\n GoToSlide(1);\n break;\n case 36: // home\n GoToSlide("f");\n break;\n case 35: // end\n GoToSlide("l");\n break;\n case 27: // escape\n endSlideShow();\n break;\n }\n\n }\n return false;\n}\n\nfunction clicker(e) {\n if (!e) var e = window.event;\n var target = resolveTarget(e);\n //Whenever something is clicked that won't advance the slide make sure that the table of contents gets hidden\n if (target.getAttribute('href') != null || isParentOrSelf(target, 'toc') || isParentOrSelf(target,'embed') || isParentOrSelf(target,'object') || isParentOrSelf(target, 'pageFooter') || isParentOrSelf(target, 'navigator')){\n //Don't hide the TOC if the indexNumbers (which trigger the index) is clicked\n if(isParentOrSelf(target,'indexNumbers') || isParentOrSelf(target,'jumpInput')){\n return true;\n }\n showHideTOC('none');\n return true;\n }\n \n //Advance a slide if the TOC is visible otherwise make sure that the TOC gets hidden\n if ((!e.which && e.button == 1) || e.which == 1) {\n if (document.getElementById('toc').style.display != 'block'){\n GoToSlide("n");\n } else {\n showHideTOC('none');\n }\n }\n \n if ((!e.which && e.button == 2) || e.which == 3) {\n if (document.getElementById('toc').style.display != 'block'){\n GoToSlide("p");\n } else {\n showHideTOC('none');\n }\n return false;\n }\n}\n\nfunction isParentOrSelf(element, id) {\n if (element == null || element.nodeName=='BODY') return false;\n else if (element.id == id) return true;\n else return isParentOrSelf(element.parentNode, id);\n}\n\nGoToSlide=function(step) {\n var new_pos;\n var slideHolder = document.getElementById('slideContainer');\n //The parse float ensures that the attribute is returned as a number and not a string.\n var cur_pos = parseFloat(slideHolder.getAttribute('currentslide'));\n var numberSlides = parseFloat(slideHolder.getAttribute('numberSlides'));\n switch (step) {\n case "f":\n new_pos=0;\n break;\n case "l":\n new_pos=numberSlides-1;\n break;\n case "n":\n var numberOverlays = parseFloat(slideHolder.childNodes[cur_pos].getAttribute('numberOverlays'));\n var currentOverlay = parseFloat(slideHolder.getAttribute('currentOverlay'));\n if(numberOverlays==0 || currentOverlay==numberOverlays){\n new_pos=cur_pos+1;\n } else {\n var className="Overlay"+currentOverlay;\n var overlay=getElementsByClass(className,slideHolder.childNodes[cur_pos]);\n for(var i=0; i<overlay.length; i++) {overlay[i].className=className+' previousOverlay';}\n currentOverlay++;\n slideHolder.setAttribute('currentOverlay',currentOverlay);\n className="Overlay"+currentOverlay;\n overlay=getElementsByClass(className,slideHolder.childNodes[cur_pos]);\n for(i=0; i<overlay.length; i++) {overlay[i].className=className+' currentOverlay';}\n return false;\n }\n break;\n case "p":\n var numberOverlays = parseFloat(slideHolder.childNodes[cur_pos].getAttribute('numberOverlays'));\n var currentOverlay = parseFloat(slideHolder.getAttribute('currentOverlay'));\n if(numberOverlays==0 || currentOverlay==0){\n new_pos=cur_pos-1;\n } else {\n var className="Overlay"+currentOverlay;\n var overlays=getElementsByClass(className,slideHolder.childNodes[cur_pos]);\n for(var i=0; i<overlays.length; i++) {overlays[i].className=className+' nextOverlay';}\n currentOverlay--;\n className="Overlay"+currentOverlay;\n overlays=getElementsByClass(className,slideHolder.childNodes[cur_pos]);\n for(i=0; i<overlays.length; i++) {overlays[i].className=className+' currentOverlay';}\n slideHolder.setAttribute('currentOverlay',currentOverlay);\n return false;\n }\n break;\n default:\n new_pos=cur_pos+step;\n }\n\n if(slideShowCircularMode && new_pos == numberSlides) new_pos=0;\n if(slideShowCircularMode && new_pos<0) new_pos=(numberSlides - 1);\n if(step!=0 && new_pos>=0 && new_pos<numberSlides) {\n slideHolder.childNodes[cur_pos].style.display='none';\n slideHolder.childNodes[new_pos].style.display='block';\n slideHolder.setAttribute('currentslide',new_pos);\n var numberOverlays = parseFloat(slideHolder.childNodes[new_pos].getAttribute('numberOverlays'));\n if(step=="p"){\n var currentOverlay=numberOverlays;\n var state=' previousOverlay';\n } else {\n var currentOverlay=0;\n var state=' nextOverlay';\n }\n slideHolder.setAttribute('currentOverlay',currentOverlay);\n if(numberOverlays>0) {\n for(var i=1; i<=numberOverlays; i++){\n var className="Overlay"+i;\n var overlays=getElementsByClass(className,slideHolder.childNodes[new_pos]);\n for(var j=0; j<overlays.length; j++) {overlays[j].className=className+state;}\n }\n if(step=="p"){\n var className="Overlay"+numberOverlays;\n var overlays=getElementsByClass(className,slideHolder.childNodes[new_pos]);\n for(var j=0; j<overlays.length; j++) {overlays[j].className=className+' currentOverlay';}\n }\n }\n new_pos++;\n var indexNumbers = document.getElementById('indexNumbers');\n indexNumbers.firstChild.data = new_pos+'/'+numberSlides;\n if((new_pos==numberSlides) && !slideShowCircularMode && autoAdvance) clearInterval(autoAdvance);\n return true;\n }\n return false;\n}\n\nfunction tocShowSlide(e) {\n if (!e) var e = window.event;\n var target = resolveTarget(e);\n var slide = target.getAttribute('slideNumber');\n var cur_pos = document.getElementById('slideContainer').getAttribute('currentslide');\n var step = slide-cur_pos;\n if(step!=0) GoToSlide(step);\n showHideTOC('none');\n return;\n}\n\n//Toggle the display of the table of contents\nfunction showHideTOC(display){\n var toc = document.getElementById('toc');\n //Reset the input box\n document.getElementById('jumpInput').value = "";\n\n if (display == null || display.length == null){\n if (toc.style.display == 'none' || toc.style.display == ''){\n toc.style.display = 'block';\n document.getElementById('jumpInput').focus();\n } else {\n toc.style.display = 'none';\n }\n } else {\n toc.style.display = display;\n if (display == 'block')\n document.getElementById('jumpInput').focus();\n }\n}\n\nfunction makeSignature(title,params){\n var signature = title+store.getTiddler(title).modified;\n if(params['style']) signature += params['style'];\n if(params['repeat']) signature += "repeat";\n if(params['slidePause'] > 0) signature += params['slidePause'];\n if(params['autostart']) signature += "autostart";\n if(params['clock']) signature += params['clock'];\n if(params['noOverlays']) signature += "noOverlays";\n return signature;\n}\n\nfunction padZero(x){\n return (x>=10 || x<0 ? "" : "0")+x;\n}\n\nsetClock=function(){\n var actualTime = new Date();\n var newTime = actualTime.getTime() - clockStartTime;\n newTime = clockMultiplier*newTime+clockInterval+clockCorrection;\n actualTime.setTime(newTime);\n newTime = padZero(actualTime.getHours()) + ":" + padZero(actualTime.getMinutes())+ ":" + padZero(actualTime.getSeconds());\n var clock = document.getElementById('slideClock');\n clock.firstChild.nodeValue = newTime;\n}\n\nresetClock=function(){\n var time = new Date(0);\n if(clockStartTime>time){\n var startTime = new Date();\n clockStartTime=startTime.getTime();\n }\n}\n\nvar title;\nvar place;\nvar autoAdvance=null;\nvar autoStart=null;\nvar slideClock=null;\nvar noOverlays=false;\nvar time = 0;\nvar slideShowCircularMode;\nvar slideShowStyleSheet;\nvar slideShowParams;\nvar clockMultiplier;\nvar clockInterval;\nvar clockCorrection=0;\nvar clockStartTime;\nvar openTiddlers;\n\nconfig.macros.slideShow.handler = function(aPlace,macroName,params,wikifier,paramString,tiddler){\n if(tiddler instanceof Tiddler){\n var lingo = config.views.wikified.slideShow;\n var autostart = false;\n if (!e) var e = window.event;\n \n place = aPlace;\n title = tiddler.title;\n params = reparse(paramString);\n var onclick = function(){config.macros.slideShow.onClickSlideShow(params);};\n createTiddlyButton(aPlace,lingo.text,lingo.tooltip,onclick);\n \n var slideShowHolder = document.getElementById('slideShowWrapper');\n //If no show exist previously, create it\n if(params['autostart']){\n if(slideShowHolder != null){\n var signature = slideShowHolder.getAttribute('showSignature');\n if(signature.indexOf("autostart")==-1) autostart = true;\n } else {autostart = true;}\n if(autostart){\n slideShowParams = params;\n setTimeout(config.macros.slideShow.onClickSlideShow,100);\n }\n }\n }\n}\n\nvar disableFunction = function(e){return false;}\nvar enableFunction = function(e){}\n\nconfig.macros.slideShow.onClickSlideShow = function(newParams) {\n if(typeof(newParams)=="number") newParams=slideShowParams;\n openTiddlers = new Array;\n var viewer=document.getElementById('tiddlerDisplay');\n for(var i=0; i<viewer.childNodes.length; i++){\n var name = viewer.childNodes[i].getAttribute('tiddler');\n openTiddlers.push(name);\n }\n document.oncontextmenu = disableFunction;\n clockMultiplier = 1;\n clockInterval = 0;\n var startTime = new Date(0);\n slideShowCircularMode = false;\n time = 0;\n slideShowStyleSheet = null;\n if(newParams['style']){\n slideShowStyleSheet = eval(newParams['style']);\n } \n if(newParams['repeat']){\n slideShowCircularMode = true;\n }\n if(newParams['slidePause'] > 0){\n time = newParams['slidePause'];\n }\n if(newParams['clock']){\n clockCorrection=startTime.getTimezoneOffset()*60000;\n startTime = new Date();\n var clockType= eval(newParams['clock']);\n if(clockType != '+') {\n clockMultiplier = -1;\n clockInterval = -clockType*60000;\n }\n }\n clockStartTime=startTime.getTime();\n if(newParams['noOverlays']){\n noOverlays = true;\n }\n var contentWrapper = document.getElementById('contentWrapper');\n if (contentWrapper.className != "slideShowMode"){\n clearMessage();\n //Attach the key and mouse listeners\n document.onkeyup = keys;\n document.onmouseup = clicker;\n \n var slideShowHolder = document.getElementById('slideShowWrapper');\n story.refreshTiddler(title,"SlideShowViewTemplate",true);\n //If no show exist previously, create it\n if(slideShowHolder == null){\n createSlides(newParams);\n //If there was once waiting in the background and it matches the one we just started, resume it\n } else if (slideShowHolder.getAttribute('showSignature') == makeSignature(title,newParams)){\n \n //Remove dblClick on edit function\n var theTiddler = document.getElementById("tiddler"+title);\n theTiddler.ondblclick = function() {};\n\n // Grab the 'viewer' element and give it a signature so the show can be resumed if stopped\n var tiddlerElements = theTiddler.childNodes;\n var viewer;\n for (var i = 0; i < tiddlerElements.length; i++){\n if (tiddlerElements[i].className == "viewer") viewer = tiddlerElements[i];\n }\n theTiddler.insertBefore(slideShowHolder,viewer);\n theTiddler.removeChild(viewer);\n slideShowHolder.style.display = 'block';\n document.getElementById("pageFooter").className = "pageFooterOff";\n \n //If the show we started it totally new than the resumable one, create the new one and kill the resumable one\n } else {\n slideShowHolder.parentNode.removeChild(slideShowHolder);\n createSlides(newParams);\n }\n slideClock=setInterval("setClock()", 1000); \n if(time>0) autoAdvance=setInterval("GoToSlide(1)", time); \n story.closeAllTiddlers(title);\n toggleSlideStyles();\n } else {\n endSlideShow();\n }\n return ;\n \n}\n\nfunction endSlideShow(){\n //Set aside show so it can be resumed later\n var showHolder = document.getElementById('slideShowWrapper');\n showHolder.style.display = 'none';\n document.getElementById('contentWrapper').parentNode.appendChild(showHolder);\n document.oncontextmenu = enableFunction;\n if(autoAdvance) clearInterval(autoAdvance);\n if(slideClock) clearInterval(slideClock);\n story.refreshTiddler(title,null,true);\n story.closeAllTiddlers();\n toggleSlideStyles();\n story.displayTiddlers(null,openTiddlers,DEFAULT_VIEW_TEMPLATE);\n document.onmouseup = function(){};\n}\n\nfunction isInteger(s){\n var i;\n for (i = 0; i < s.length; i++){\n // Check that current character is number.\n var c = s.charAt(i);\n if (((c < "0") || (c > "9"))) return false;\n }\n // All characters are numbers.\n return true;\n}\n\nfunction jumpInputToSlide(e){\n if (!e) {\n e = window.event;\n e.which = e.keyCode;\n }\n if(e.which==13){\n var jumpInput= document.getElementById("jumpInput").value;\n if(isInteger(jumpInput)){\n var step=jumpInput-document.getElementById('slideContainer').getAttribute('currentslide')-1;\n if (GoToSlide(step)){\n showHideTOC('none'); \n }\n }\n }\n return;\n}\n\n//Used to shorten the TOC fields\nfunction abbreviateLabel(label){\n var maxTOCLength = config.macros.slideShow.maxTOCLength;\n if(label.length>maxTOCLength) {\n var temp = new Array();\n temp = label.split(' ');\n label = temp[0];\n for(var j=1; j<temp.length; j++){\n if((label.length+temp[j].length)<=maxTOCLength){\n label += " " + temp[j];\n } else {\n label += " ...";\n break;\n }\n }\n }\n return label;\n}\n\ncreateSlides = function(newParams){\n var lingo = config.views.wikified.slideShow;\n\n //Remove dblClick on edit function\n var theTiddler = document.getElementById("tiddler"+title);\n theTiddler.ondblclick = function() {};\n\n // Grab the 'viewer' element and give it a signature so the show can be resumed if stopped\n var tiddlerElements = theTiddler.childNodes;\n var viewer;\n for (var i = 0; i < tiddlerElements.length; i++){\n if (tiddlerElements[i].className == "viewer") viewer = tiddlerElements[i];\n }\n viewer.id = 'slideShowWrapper';\n viewer.setAttribute("showSignature",makeSignature(title,newParams));\n\n //Hide the text that comes before the first H1 element (I think I may put this into a cover page type thing)\n while(viewer.childNodes.length > 0 && viewer.firstChild.nodeName.toUpperCase() != "HR" && viewer.firstChild.className!="slideSeparator") {\n viewer.removeChild(viewer.firstChild);\n }\n \n //Cycle through the content and each time you hit an H1 begin a new slide div\n var slideNumber = 0;\n var slideHolder = document.createElement('DIV');\n slideHolder.id = "slideContainer";\n \n while(viewer.childNodes.length > 0){\n //Create a new slide a append it to the slide holder\n if (viewer.firstChild.nodeName.toUpperCase() == "HR" && viewer.firstChild.className=="slideSeparator"){\n slideNumber++;\n var slide = document.createElement('DIV');\n slide.id = "slideNumber"+slideNumber;\n slide.className = "slide";\n if (slideNumber > 1) {\n slideHolder.setAttribute('currentslide',0);\n slide.style.display='none';\n } else {\n slide.style.display='block';\n }\n slideHolder.appendChild(slide); \n viewer.removeChild(viewer.firstChild);\n } else {\n if(viewer.firstChild.nodeName=="SPAN" && viewer.firstChild.className=="" && viewer.firstChild.hasChildNodes()) {\n var anchor=viewer.firstChild.nextSibling;\n for (var ii=0;ii<viewer.firstChild.childNodes.length;ii++) {\n var clone=viewer.firstChild.childNodes[ii].cloneNode(true);\n viewer.insertBefore(clone,anchor);\n }\n viewer.removeChild(viewer.firstChild);\n } else {\n slide.appendChild(viewer.firstChild);\n }\n }\n }\n \n //Stick the slides back into the viewer\n viewer.appendChild(slideHolder);\n slideHolder.setAttribute('numberSlides',slideNumber);\n \n //Create the navigation bar\n var pagefooter = createTiddlyElement(viewer,"DIV","pageFooter","pageFooterOff");\n var navigator = createTiddlyElement(pagefooter,"SPAN","navigator");\n\n //Make it so that when the footer is hovered over the class will change to make it visible\n pagefooter.onmouseover = function () {pagefooter.className = "pageFooterOn"};\n pagefooter.onmouseout = function () {pagefooter.className = "pageFooterOff"};\n\n //Create the control button for the navigation \n var onClickQuit = function(){endSlideShow();};\n createTiddlyButton(navigator,lingo.quit.text,lingo.quit.tooltip,onClickQuit);\n createTiddlyButton(navigator,lingo.firstSlide.text,lingo.firstSlide.tooltip,first_slide);\n createTiddlyButton(navigator,lingo.previousSlide.text,lingo.previousSlide.tooltip,previous_slide);\n createTiddlyButton(navigator,lingo.nextSlide.text,lingo.nextSlide.tooltip,next_slide);\n createTiddlyButton(navigator,lingo.lastSlide.text,lingo.lastSlide.tooltip,last_slide); \n createTiddlyButton(navigator,lingo.resetClock.text,lingo.resetClock.tooltip,resetClock,"button","slideClock"); \n\n var indexNumbers = createTiddlyElement(pagefooter,"SPAN","indexNumbers","indexNumbers","1/"+slideNumber)\n indexNumbers.onclick = showHideTOC;\n var toc = createTiddlyElement(pagefooter,"UL","toc");\n var ovl=1;\n for (var i=0;i<slideHolder.childNodes.length;i++) {\n if(!noOverlays) {\n var ovl=1;\n while(1){\n var className="Overlay"+ovl;\n var overlays=getElementsByClass(className,slideHolder.childNodes[i]);\n if(overlays.length>0){\n for(var j=0; j<overlays.length; j++) {overlays[j].className+=' nextOverlay';}\n ovl++;\n } else {break;}\n }\n }\n slideHolder.childNodes[i].setAttribute("numberOverlays",ovl-1);\n slideHolder.setAttribute("currentOverlay",0);\n\n //Loop through each slide and check the header's content\n var tocLabel = null; \n for (var j=0;j<slideHolder.childNodes[i].childNodes.length;j++) {\n var node = slideHolder.childNodes[i].childNodes[j];\n if(node.nodeName=="H1" || node.nodeName=="H2" || node.nodeName=="H3" || node.nodeName=="H4") {\n var htstring = node.innerHTML;\n var stripped = htstring.replace(/(<([^>]+)>)/ig,"");\n tocLabel = abbreviateLabel(stripped);\n var tocLevel="tocLevel"+node.nodeName.charAt(1);\n var tocItem = createTiddlyElement(toc,"LI",null,tocLevel);\n var tocLink = createTiddlyElement(tocItem,"A",null,"tocItem",tocLabel);\n tocLink.setAttribute("slideNumber",i);\n tocLink.onclick=tocShowSlide;\n }\n }\n }\n \n\n //Input box to jump to s specific slide\n var tocItem = createTiddlyElement(toc,"LI",null,"tocJumpItem",config.macros.slideShow.messages.gotoLabel);\n var tocJumpInput = createTiddlyElement(tocItem,"INPUT","jumpInput");\n tocJumpInput.type="text";\n tocJumpInput.onkeyup=jumpInputToSlide;\n}\n\nvar next_slide= function(e){GoToSlide(1);}\nvar first_slide= function(e){GoToSlide("f");}\nvar previous_slide= function(e){GoToSlide(-1);}\nvar last_slide= function(e){GoToSlide("l");}\n\nfunction toggleSlideStyles(){\n var contentWrapper = document.getElementById('contentWrapper');\n if (contentWrapper.className == "slideShowMode"){\n contentWrapper.className = "";\n window.applyPageTemplate();\n if(slideShowStyleSheet) changeStyleSheet();\n } else{\n contentWrapper.className = "slideShowMode";\n window.applyPageTemplate("SlideShowPageTemplate");\n if(slideShowStyleSheet) changeStyleSheet(slideShowStyleSheet);\n }\n}\n\nsetStylesheet("/***\sn!Slide Mode Styles\sn***/\sn/*{{{*/\sn#contentWrapper.slideShowMode #slideContainer{\sn display: block;\sn}\sn\sn#contentWrapper.slideShowMode .Comment{\sn display: none;\sn}\sn\sn#contentWrapper.slideShowMode .nextOverlay{\sn visibility: hidden;\sn}\sn\sn#contentWrapper.slideShowMode .currentOverlay{\sn visibility: visible;\sn}\sn\sn#contentWrapper.slideShowMode .previousOverlay{\sn visibility: visible;\sn}\sn\sn#jump{\sn text-align: right;\sn}\sn\sn.pageFooterOff #navigator{\sn visibility: hidden;\sn}\sn\sn.pageFooterOn #navigator{\sn visibility: visible;\sn}\sn\sn#contentWrapper.slideShowMode #slideClock{\sn cursor: pointer; margin: 0 5px 0 5px; border: 1px solid #db4\sn}\sn\sn#contentWrapper.slideShowMode,\sn #contentWrapper.slideShowMode #displayArea{\sn width: 100%;\sn font-size: 1.5em;\sn margin: 0 !important;\sn padding: 0;\sn}\sn\sn#slideContainer{\sn display: none;\sn}\sn\sn.indexNumbers{\sn cursor: pointer;\sn}\sn\sn#navigator{\sn visibility: hidden;\sn bottom: 0;\sn}\sn\sn#toc{\sn display: none;\sn position: absolute;\sn font-size: .75em;\sn bottom: 2em;\sn right: 0;\sn background: #fff;\sn border: 1px solid #000;\sn text-align: left;\sn}\sn\snul#toc, #toc li{\sn margin: 0;\sn padding: 0;\sn list-style: none;\sn line-height: 1em;\sn}\sn\sn.tocJumpItem{\sn margin-right: 2em;\sn}\sn\sn.tocJumpItem input{\snmargin-right: 1em;\sn border: 0;\sn}\sn\sn#toc a,\sn#toc a.button{\sn display: block;\sn padding: .1em;\sn}\sn\sn#toc .tocLevel1{\snfont-size: .8em;\sn}\sn\sn#toc .tocLevel2{\sn margin-left: 1em;\sn font-size: .75em;\sn}\sn\sn#toc .tocLevel3{\sn margin-left: 2em;\snfont-size: .75em;\sn}\sn\sn#toc .tocLevel4{\sn margin-left: 3em;\snfont-size: .65em;\sn}\sn\sn#toc a{\sn cursor: pointer;\sn}\sn\snh1{\sn min-height: 1em;\sn}\sn\sn.slide h1{\sn min-height: 0;\sn}\sn\sn/* The '>' selector is ignored by IE6 and earlier so the proper rules are given */\sn#pageFooter{\sn position: fixed;\sn bottom: 2px;\sn right: 2px;\sn width: 100%;\sn text-align: right;\sn}\sn\sn/* This is a hack to trick IE6 and earlier to put the navbar on the bottom of the page */\sn* html #pageFooter {\sn position: absolute;\sn width: 100%;\sn text-align: right;\sn right: auto; bottom: auto;\sn left: expression( ( -20 - pageFooter.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );\sn top: expression( ( -10 - pageFooter.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );\sn}\sn\sn\sn\sn/*}}}*/","slideShowStyles");\n//}}}

!Description\nThis plugin turns a TiddlyWiki tiddler into a simple slide show type display. Most features that are usually found in presentation software are available. It should work in a way that does not interfere with TiddlyWiki. When you close the slide show you get back to your good old TW. \n\nThis plugin has been tested in Firefox and Internet Explorer. Let me know if something seems broken.\n!Usage\nTo use this plugin you //must// be using TiddlyWiki 2.0. Some optional features (as the incremental display) require version 2.0.8 or higher. To install the plugin copy the tiddlers SlideShowPlugin, SlideShowPageTemplate and SlideShowViewTemplate to your TW, label the first one with the //systemConfig// tag, save the TW and refresh the browser.\n\nTo make a slide show simply drop {{{<<slideShow>>}}} at the beginning of a tiddler and use {{{--s--}}} to start each slide. \n\nIf you move your mouse over the bottom of the browser window you will see a few navigation buttons, a clock and a table of contents that shows up when you click the slide number.\n\nAny block of text marked as {{{{{Comment{For my eyes only!}}}}}} will not be displayed in the slide show.\n\nSee these and other features in this [[SlideShowExample]].\n!Incremental display\nA succession of overlays (or layers) can be defined in each slide by marking blocks of text with {{{{{Overlay1{...some text...}}}}}}, {{{{{Overlay2{...some text...}}}}}}, {{{{{Overlay3{...some text...}}}}}}, ...\n\nTo costumize the way overlays are shown you can redefine the following CSS classes\n*contentWrapper.slideShowMode .previousOverlay \n*contentWrapper.slideShowMode .currentOverlay \n*contentWrapper.slideShowMode .nextOverlay \nin a ~StyleSheet. The default style simply hides the next overlays and shows the current and the previous ones as normal text.\n!Slide show parameters\n*The slide show can be themed by providing a ~StyleSheet ({{{<<slideShow style:'MyStyleSheet'>>}}})\n*By default, there is a clock at bottom of the browser window that displays the current time. This clock can also show the presentation elapsed time with {{{<<slideShow clock:'+'>>}}} or a countdown clock with {{{<<slideShow clock:'-20'>>}}} (for 20 minutes). In these two cases, if you click on the clock display it will be restarted\n*The slide show can be set to loop ({{{<<slideShow repeat>>}}})\n*You can set it so each slide changes after X milliseconds ({{{<<slideShow slidePause:X>>}}}) (auto advance mode)\n*Use auto start mode to begin the slideshow the moment the tiddler is opened ({{{<<slideShow autostart>>>}}})\n*You can disable overlays with {{{<<slideShow noOverlays>>}}}\n*These parameters can be mixed and matched in any order: {{{<<slideShow slidePause:1000 repeat>>}}} is the same as {{{<<slideShow repeat slidePause:1000>>}}}\n!Slide show navigation\nYou can navigate through a slide show using the keyboard or the mouse. To quickly move to titled sections you can use the table of contents. \n!!Mouse navigation\nLeft (right) clicking on a slide jumps to the next (previous) overlay. To move to the beginning of the next or previous slide you must use the navigation bar at the bottom of the browser's window. If there are no overlays defined both operations are equivalent.\n!!Keyboard navigation\nThe following keys are defined:\n*Left arrow - previous overlay\n*Down arrow - previous slide\n*Right arrow - next overlay\n*Up arrow - next slide\n*Home - first slide\n*End - last slide\n*Escape - exit slide show\n*Spacebar - pause/resume slide show in auto advance mode\n!Revision history\n*1.5.1 10/11/2006\n**added SlideShowPageTemplate and SlideShowViewTemplate. This way, the plugin no longer requires a standard TW layout. Thanks to Andrew Lister for the idea.\n*1.5.0 18/09/2006\n**fixed restoring stylesheet on exit\n**changed (again!) the way how slides are separated (slide shows prepared for previous versions must be fixed)\n*1.4.0 20/04/2006\n**changed the way how slides are separated (slide shows prepared for previous versions must be fixed)\n**now works with content included with the {{{<<tiddler>>}}} macro\n**added incremental display (overlays)\n**improved documentation\n**assorted small fixes\n*1.3.1 10/03/2006\n**removed empty slide titles\n**fixed wrong numberSlides when slides have div's\n**fixed wrong time in Windows\n*1.3.0 26/02/2006\n**restore open tiddlers on exit\n**fixed problem with markup in headers (should work with NestedSlidersPlugin)\n**added slide comments (blocks of text in the tiddler that don't show up in the presentation)\n*1.2.1 28/01/2006\n**pause timed slideshow with spacebar\n**added clock with 3 different modes\n**fixed bugs with style and abbreviation options\n**general cleanup\n*1.2.0 07/01/2006\n**added a resume feature\n**added themes support\n*1.1.5 14/12/2005\n**added mouse support\n**cleaned up navbar generation\n*1.1.0 12/12/2005\n**added support for IE\n**added key listeners\n*1.0.0 11/12/2005\n**initial release\n!Todo\n*Time code is still very hackerish and unreliable.

\n<div class='title' macro='view title'></div>\n<div class='viewer' macro='view text wikified'></div>\n

/*{{{*/\n/* Modied Style from Julian Knight JK Version: 2006-04-20 (Simplified) */\n\nbody {position:static;}\n.tagClear {margin-top:1em;clear:both;}\n\nhr {height:0px;border:0;border-top:1px solid silver;}\nh1,h2,h3,h4,h5 {color:#014;background:transparent;border-bottom:1px solid #ddd;padding-left:0;}\n\n.headerShadow {padding:.5em 0em .5em 1em;}\n.headerForeground {padding:.5em 0em .5em 1em;}\n\n#displayArea { /* The bit that contains all tiddlers */\n padding-top:.1em;padding-bottom:.1em;\n margin-top:0;margin-right:15.5em;margin-bottom:0;margin-left:12.5em;-moz-border-radius:1em;}\n\n.tiddler {-moz-border-radius:1em;border-top:1px solid #ccc;border-left:1px solid #ccc;\n border-bottom:3px solid #ccc;border-right:3px solid #ccc;margin:0.5em;background:#fff;padding:0.5em;}\n\n.subtitle { /* Tiddler subtitle */\n font-size:0.9em;text-align:right;}\n\n.viewer pre {padding: 0;margin-left: 0;}\n.viewer hr {border: solid 1px silver;}\n\n.toolbar {visibility:visible;}\n\n.selected .toolbar {visibility:visible;color:#00f;}\n\n.toolbar .button { color:#dee; }\n.selected .toolbar .button { color:#014;}\n\n.tagging, .tagged, .selected .tagging, .selected .tagged {\n font-size:75%; padding:0.3em; background-color:#eee;border-top:1px solid #ccc; border-left:1px solid #ccc;\n border-bottom:3px solid #ccc; border-right:3px solid #ccc;max-width:45%;-moz-border-radius:1em;}\n\n.noBorder,.noBorder td,.noBorder th,.noBorder tr{border:0 !important}\n.evenRow{} .oddRow{}\n\n.headerShadow { visibility: hidden; } \n#sidebar{display:none;}\n#displayArea {margin: 1em 1em 0em 14em;}\n.smaller { font-size:80%; } \n.small { font-size:90%; }\n\n/* Added Color Style*/\n.header {background: #990000;}\n.header {foreground: #000000;}\n.title {color: #990000;}\n.subtitle {color: #990000;}\n.toolbar {color: #990000;}\n/*}}}*/\n\n.viewer {\n line-height: 125%;\n font-family: serif;\n font-size: 10pt;\n}\n\n.hilite {\nfont-weight: bold;\nbackground: #ffffcc;\npadding: 0.2em;\n}\n\n.Definição {\nbackground: #fafafa;\nborder: 3px #999999 dashed;\npadding: 0.5em;\nwidth: 80%;\nmargin-left: auto;\nmargin-right: auto;\n}\n\n.Definição .envHeader{\nborder: none;\ncolor: blue;\nmargin: 0 0 0.25em 0;\npadding: 0;\nfont-family: arial;\nfont-size: 1.2em;\nfont-weight: bold;\nwidth: 99%;\n}\n\n.Teorema {\nborder: 1px #666 dashed;\npadding: 0.5em;\nwidth: 55%;\nmargin-left: auto;\nmargin-right: auto;\n}\n\n.Teorema .envHeader{\nbackground: none;\nborder: none;\ncolor: blue;\nmargin: 0 0 0.25em 0;\npadding: 0;\nfont-family: arial;\nfont-size: 1.5em;\nfont-weight: bold;\nwidth: 100%;\n}\n\n.Theorem {\nborder: 1px #666 dashed;\npadding: 0.5em;\nwidth: 55%;\nmargin-left: auto;\nmargin-right: auto;\n}\n\n.Theorem .envHeader{\nbackground: none;\nborder: none;\ncolor: blue;\nmargin: 0 0 0.25em 0;\npadding: 0;\nfont-family: arial;\nfont-size: 1.5em;\nfont-weight: bold;\nwidth: 100%;\n}\n\n.Example {\nbackground: #ffffcc;\npadding: 0.5em;\n}\n\n.Example .envHeader{\nbackground: none;\ncolor: orange;\nmargin: 0 0 0.25em 0;\npadding: 0;\nfont-family: arial;\nfont-size: 1.5em;\nfont-weight: bold;\n}\n\n.Exercise {\nbackground: #e8ffd2;\npadding: 0.5em 0.5em 0.5em 0.6em;\nborder-top:solid #e8ffd2 1px;\nborder-left:solid #e8ffd2 1px;\nborder-bottom:solid green 2px;\nborder-right:solid green 2px;\n-moz-border-radius: 1.0em;\nwidth: 20em;\n}\n\n.Exercise .envHeader{\nbackground: none;\nborder: none;\ncolor: green;\nmargin: 0 0 0.25em 0;\npadding: 0;\nfont-family: arial;\nfont-size: 1.5em;\nfont-weight: bold;\nwidth: 100%;\n}\n\n.Frame {\nbackground: #000000;\ncolor: #ffffff;\npadding: 0.5em 0.5em 0.5em 0.6em;\nwidth: 20em;\nmargin-left: auto;\nmargin-right: 0;\n}\n\n.Frame .envHeader{\ndisplay: none;\n}\n\n.Question {\npadding: 0.5em 0.5em 0.5em 0.5em;\nbackground: #ffffcc;\nfont-size: 1.5em;\n}\n\n.Question .envHeader{\nmargin-bottom: 0.25em;\ncolor: red;\nfont-family: arial;\nfont-size: 1.5em;\nfont-weight: bold;\nborder: 2px red solid;\ntext-align: right;\n}

* StyleSheet\n* StyleSheetColors\n* StyleSheetLayout\n* StyleSheetPrint

|>|>|!PageTemplate|\n|>|>|[[SiteTitle]] - [[SiteSubtitle]]|\n|>|>|TopMenu|\n|[[MainMenu]]|[[DefaultTiddlers]]<<br>><<br>>[[ViewTemplate]]<<br>><<br>>[[EditTemplate]]|[[SideBarOptions]]|\n|~|~|[[OptionsPanel]]<<br>>AdvancedOptions|\n|~|~|SideBarTabs|\n|>|>|[[SiteUrl]]|

* SideBarOptions\n* SideBarTabs\n* TabAll\n* TabMore\n* TabMoreMissing\n* TabMoreOrphans\n* TabTags\n* TabTimeline

* DefaultTiddlers\n* MainMenu\n* SiteSubtitle\n* SiteTitle\n* SiteUrl

vs `int x^2 dx`

This is a test of jsMath. \n\n$$\sint x^2\s, dx$$ \n\n!Pasting A ~LaTeX document to see what results.\n\n{\sbf I. Reproduce the following text:}\n\nThe Pythagorean identity for trigonometric functions is\n$\ssin^2x+\scos^2x =1$.\n\nThe double angle formula for sines is $\ssin 2x=2\ssin x\scos x$.\n\n\sbegin{theorem}\nIf $f$ is continuous on $[a,b],$ then,\n\sbegin{equation}\n\sint_a^b f(x)\s, dx = F(b)-F(a)\n\send{equation}\nwhere $F$ is any antiderivative of $f$; i.e.,\n$\sfrac{dF}{dx}=f(x)$.\n\send{theorem}\n\nHere are the DeMorgan laws:\n\n\sbegin{align}\n \sneg[p\swedge q]&\sequiv\sneg p\svee\sneg q\s\s\n \sneg[p\svee q]&\sequiv\sneg p\swedge\sneg q.\n\send{align}\n\n\snoindent Let's look at an important result.\n\n\sbegin{proposition}\nIf event $A=\sbigcup_{i=1}^n A_i$ such that $A_i\ssubset X$ and\n$A_i\scap A_j=\semptyset$ for all $i$, then:\n$$\n \sPr(A)=\ssum_{i=1}^n \sPr(A_i).\n$$\n\send{proposition}\n\n\sbegin{proof}\nLeft as an exercise.\n\send{proof}\n\n\snewpage\n\n{\sbf II. Now try the following expressions:}\n\n\sbegin{enumerate}\n\n\sitem \s[ f(x) = \sfrac{2 x}{(1+x^2)^2} \s]\n\n\sitem $$\ssqrt[3]{3x+7}$$\n\n\sitem $$x_1+x_2+x_3+\scdots+x_n$$\n\n\sitem $$f(x) = \sleft(1+\sfrac{2x}{x^{21}+1}\sright) - \ssin x $$\n\n \sitem \s[\sint_0^\spi \ssin x\s, dx =2.\s]\n\n\sitem \sbegin{eqnarray} 2x+y &=& 6 \snonumber \s\s x-y &=& 3\n\send{eqnarray}\n\n\sitem $$\sleft(%\n\sbegin{array}{ccc}\n 1 & 2 & 3 \s\s\n 6 & 5 & 4 \s\s\n\send{array}%\n\sright)$$\n\n\sitem $$\sleft| 4 x^3 + \sleft(x+\sfrac{42}{1+x^4}\sright)^2\sright|$$\n\n\sitem $$\sleft. \sfrac{du}{dx} \sright|_{x=0}$$\n\n\sitem \s[ |x| = \sleft\s{ \sbegin{array}{ll} x & \smbox{if $x \sgeq 0$};\n\s\s -x & \smbox{if $x<0.$} \send{array} \sright. \s]\n\n\sitem $$x_0^2, \squad 2^{x^x}, \squad\n\slim_{n\srightarrow\sinfty}\sfrac{n!}{n^n} \squad \smbox{ and }\n\ssqrt{\sfrac{1-x}{1+x}}$$\n\n\sitem \sbegin{eqnarray}\n(a+b)^n &=& a^n\sleft(1+\sfrac ba\sright)^n \snonumber \s\s\n&=& a^n\sleft(1 + n\sfrac ba + O\sleft(\sleft(\sfrac ba\sright)^2\sright)\sright) \snonumber \s\s\n&=& a^n + n a^n \sfrac ba + a^n O\sleft(\sleft(\sfrac\nba\sright)^2\sright).\n\send{eqnarray}\n\n\sitem \s[\sfrac{1}{(6 + \sfrac{1}{(6 + \sfrac{1}{(...)})})}=?\s]\n\n\sitem \sbegin{equation}\n x = a_0 + \sfrac{1}{\sdisplaystyle a_1\n + \sfrac{1}{\sdisplaystyle a_2\n + \sfrac{1}{\sdisplaystyle a_3 + a_4}}}\n\send{equation}\n\n\sitem \sbegin{eqnarray*}\n \sleft(1+x\sright)^n & = & 1 + nx + \sfrac{n\sleft(n-1\sright)}{2!}\s, x^2 \s\s\n & & + \sfrac{n\sleft(n-1\sright)\sleft(n-2\sright)}{3!}\s, x^3 \s\s\n & & + \sfrac{n\sleft(n-1\sright)\sleft(n-2\sright)\sleft(n-3\sright)}{4!}\s, x^4 \s\s\n & & + \sldots\n\send{eqnarray*}\n\n\send{enumerate}

!!Start the <<slideShow style:"MySlideStyle">>\n-s-\n!~TiddlyWiki Math: Course Pages with Embedded Mathematics\n<<box Tboxs\n'Mathematics can be embedded easily into professional looking wikis using either ~LaTeX or ~MathML generated mathematics. We demonstrate how this has been done using ~TiddlyWikis to produce online course materials in mathematics displaying typeset mathematical expressions and graphics.'\n>>\n!!Russell Herman and Gabriel Lugo\nUniversity of North Carolina Wilmington\nWilmington, NC\n-s-\n!Outline\n<<box Tboxs\n'*What is a ~TiddlyWiki?\n** Wikis\n** Blogging\n** ~TiddlyWiki\n*Embedding Mathematics\n** ~LaTeX\n** jsMath\n** ~ASCIIMath and ~ASciencePad\n** Other Methods\n*Examples\n'\n>>\n-s-\n!Wikis\na collaborative web application which allows users to edit content. \n\n<<box Tboxs\n'*Cunningham and Bo Leuf designed [[WikiWikiWeb|http://en.wikipedia.org/wiki/WikiWikiWeb]] \n*the first wiki in 1995, \n**open, \n**collaborative community Website \n**where anyone can contribute.'\n>> \n-s-\n!Using Wikis\n<<box Tboxs\n'Tasks\n*personal note-taking \n*collaborating online, \n*creating an internal knowledge base, \n*assembling an online community, \n*and managing a traditional website.'\n>>\n\n<<box Tbox\n'//So the feeling for a reader is one of foraging in a wilderness for tidbits of information.//\nWard Cummingham Interview http://www.artima.com/intv/wiki.html' \n>>\n-s-\n!Blogging\nhttp://www.blogger.com/ says:\n<<box Tbox '//A blog is a personal diary. A daily pulpit. A collaborative space. A political soapbox. A breaking-news outlet. A collection of links. Your own private thoughts. Memos to the world//' >>\n\n[[When did Math-phobes take over the Blogosphere?|http://fliptomato.wordpress.com/2006/06/27/when-did-math-phobes-take-over-the-blogosphere/]]\n-s-\n!Blog Examples With Math\n*[[The String Coffee Table|http://golem.ph.utexas.edu/string/]]\n*[[The n-Category Cafe|http://golem.ph.utexas.edu/category/]]\n*[[Musings|http://golem.ph.utexas.edu/~distler/blog/ ]]\n*[[Jeff McNeill Blog on MathML, etc| http://jeffmcneill.com/2007/01/24/mathml-tex-latex-texvc-mimetex-oh-my/ ]]\n*[[Mathematics Weblog|http://www.sixthform.info/maths/index.php]] - uses LatexRender \n*[[The Physics Spot|http://www.russherman.com/physicsblog/]]\n\n!Blogging Software\n*~MoveableType\n*Wordpress\n*~TypePad\n*[[Other|http://en.wikipedia.org/wiki/Blog_hosting_service]]\n-s-\n!~TiddlyWiki\nBy Jeremy Ruston\n<<box Tbox\n'//A ~TiddlyWiki is like a blog because it is divided up into neat little chunks, but it encourages you to read it by hyperlinking rather than sequentially: if you like, a non-linear blog analogue that binds the individual microcontent items into a cohesive whole.//\n\nMain Site: http://www.tiddlywiki.com/'\n>>\n-s-\n!Embedding Mathematics\n<<box Tboxs2 \n'Some Tools\n* ~LaTeX\n* jsMath\n* ~ASCIIMath\n* ~ASciencePad\n*~MathML'\n>>\n-s-\n!~LaTeX\n<<box Tboxs2\n'LaTeX is a document preparation system for high-quality typesetting.\n*[[LaTeX Project|http://www.latex-project.org/]]\n*[[LaTeX Wiki|file:///C:/WorkFiles/LaTeX/index.htm]] - local link to [[Test LaTeX|file:///C:/WorkFiles/LaTeX/index.htm#%5B%5BTest%20LaTeX%5D%5D]]\n{{{\n$$\sint \sfrac{dx}{\ssqrt{a^2-x^2}}$$\n}}}\n$$\sint \sfrac{dx}{\ssqrt{a^2-x^2}}$$'>>\n-s-\n!jsMath\n<<box Tboxs\n'*[[jsMath Site|http://www.math.union.edu/~dpvc/jsMath/]] - David P. Cervone\n*[[Plugin for TiddlyWiki|http://bob.mcelrath.org/tiddlyjsmath-2.0.3.html]] - McElrath et al.'\n>>\n!!jsMath Example\n $$\sint_0^1 f(x)\s, dx$$\n-s-\n!jsMath - Javascript\n{{{\n <HTML>\n <HEAD><TITLE>jsMath tex2math Example</TITLE></HEAD>\n <BODY>\n <SCRIPT SRC="jsMath/jsMath.js"></SCRIPT>\n <SCRIPT>jsMath.Setup.Script("plugins/tex2math.js")</SCRIPT>\n There are two solutions to {{{$ax^2 + bx + c = 0$}}} and they are\n {{{$$x = {-b \spm \ssqrt{b^2-4ac} \sover 2a}.$$}}}\n <SCRIPT>\n jsMath.ConvertTeX();\n jsMath.Process();\n </SCRIPT>\n </BODY>\n}}}\n\n!Testing jsMath \n[[Test LaTeX|file:///C:/WorkFiles/ICTCM2007/TiddlyWiki/ICTCM.2007.html#TestLaTeX]]\n-s-\n!~ASCIIMath andSVGMath\n<<box Tboxs\n'Links\n*[[TiddlyWiki Plugin|http://math.chapman.edu/~jipsen/tiddly/tiddlymath.html#]]\n*[[ ASCIIMath Site|http://www1.chapman.edu/~jipsen/mathml/asciimath.html]]\n*[[ASCIIMath Information|http://www.wjagray.co.uk/maths/ASCIIMathMLinfo.html]]\n*[[Demo - local file|file:///C:/WorkFiles/asciencepad/HTMLArea/examples/demo.html]]\n*[[ASCIIMath Tutorial|http://www.wjagray.co.uk/maths/ASCIIMathTutorial.html]]\n*[[Integration with Moodle Talk|http://math.chapman.edu/~jipsen/talks/MathFest2005/JipsenMathFestSlides2005.html]]'\n>>\n-s-\n!~ASciencePad\n<<box Tboxs\n'Developed by [[Peter Jipsen|http://www.chapman.edu/~jipsen]] and [[David Lippman|http://www.pierce.ctc.edu/dlippman/]]\n*a modification of TiddlyWiki \n*An editor, modified version of HTMLArea 3.0 with AsciiMath and AsciiSvg plugins\n*Results\n**Easily create mathematical and scientific webpages with formulas and graphs\n**Pages are saved locally and can be uploaded to a webserver. \n**Lightweight scientific wordprocessor \n**TiddlyWiki plugins can be used to extend the features\n'\n>>\n-s-\n!More ~ASicencePad\n<<box Tboxs2\n'Links\n*[[ASciencePad|http://math.chapman.edu/~jipsen/asciencepad/asciencepad.html]]\n*[[Complex TiddlyWiki Example|file:///C:/WorkFiles/complex/ComplexB.htm]]\n*[[PHP Port|http://www.oldschool.com.sg/index.php/module/Shared/action/Static/tmpl/ASCIIMathPHP]]\n*[[Upgrade site|http://sourceforge.net/project/showfiles.php?group_id=150646%3E.]]\n'\nor click TypeLaTeX for examples using ~ASCIIMath\n>>\n-s-\n!Other Methods\n<<box Tboxs\n'Links\n*[[MimeTeX|http://www.forkosh.com/mimetex.html]]\n*[[Use in jsMath|http://www.math.union.edu/~dpvc/jsmath/authors/mimeTeX.html]]\n*[[Wiky|http://goessner.net/articles/wiky/]]\n*[[LaTeXRender|http://www.mayer.dial.pipex.com/tex.htm]]\n*[[TeXConverter|http://www.mayer.dial.pipex.com/tex.htm#TexConverter]]\n*[[MathML|http://en.wikipedia.org/wiki/MathML]]\n*[[OpenMath|http://en.wikipedia.org/wiki/OpenMath]]\n*[[More Examples|http://swik.net/HTML+math]]'\n>>\n-s-\n!~TiddlyWiki Examples \n<<box Tboxs\n'Others\n*[[Dr. Freeze - Calc II|http://people.uncw.edu/freezem/math162summer06/mat162summer06.html]]\n*[[MCAS|http://luceatlux.net/mcasmath10/#Welcome]]'\n>>\n<<box Tboxs2\n'Dr. Herman\n*[[Senior Seminar|http://people.uncw.edu/hermanr/mat495/index.htm]] or [[local|file:///C:/WorkFiles/Fall2006/index.htm]]\n*[[Dynamical Systems and Chaos|http://people.uncw.edu/hermanr/Chaos/ChaosWiki.htm]] or [[local|file:///C:/WorkFiles/Fall2006/Wiki/ChaosWiki.htm]]\n*[[MATLAB Tutorial|http://people.uncw.edu/hermanr/Wiki/MatlabWiki.html]] or [[local|file:///C:/WorkFiles/Fall2006/MatlabWiki/MatlabWiki.html]]\n*[[LaTeX|http://people.uncw.edu/hermanr/Chaos/LaTeX.html]] or [[local|file:///C:/WorkFiles/LaTeX/index.htm]]\n*[[JET Teaching Journal|http://www.uncw.edu/cte/et/]] or [[local|file:///C:/WorkFiles/ET_New/index.htm]]\n*[[Wiki Notes|file:///C:/WorkFiles/Fall2006/WikiNotes/WikiNotes.html]] - local file'\n>>\n-s-\n!Summary\n<<box Tboxs\n'*What is a ~TiddlyWiki?\n** Wikis\n** Blogging\n** ~TiddlyWiki\n*Embedding Mathematics\n** ~LaTeX\n** jsMath\n** ~ASCIIMath\n** ~ASciencePad\n** Other Methods\n*Examples'>>

$\sint \ssin 3x \s, dx$

<div>\n <span class='title' style='float:left;' macro='view title'></span>\n <span style='float:right;' class='subtitle'>\n <span macro='view modifier link'></span>, \n <span macro='view modified date [[DD MMM YYYY]]'></span> \n (created <span macro='view created date [[DD MMM YYYY]]'></span>)\n </span>\n <span class='toolbar' style='clear:right;margin-top:1px;float:right;'\n macro='toolbar -closeTiddler +editTiddler deleteTiddler closeOthers permalink references jump'>\n </span>\n <div class='tagClear'></div>\n</div>\n<hr>\n<div class='tagClear viewer' macro='view text wikified'></div>

<html><iframe src="http://www.tiddlywiki.com" style="width:100%;height:400px"></iframe></html>\n{{{http://www.tiddlywiki.com}}}