-
Notifications
You must be signed in to change notification settings - Fork 26
/
Copy pathturing.html
223 lines (213 loc) · 13.4 KB
/
turing.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="turing.css" rel="stylesheet" type="text/css">
<link href="textarea.css" rel="stylesheet" type="text/css">
<title>
Turing machine simulator
</title>
<script type="text/javascript" defer="defer" src="jquery-1.11.1.min.js"></script>
<!--[if lte IE 9]>
<script type="text/javascript" src="polyfills.js"></script>
<script type="text/javascript" src="json2.js"></script>
<![endif]-->
<!--[if lt IE 8]>
<link href="ie-fixes.css" rel="stylesheet" type="text/css">
<![endif]--> <!-- Conditional comments for old IE versions. Adjust or disable line highlighting and load Javscript polyfills if needed for old IE versions. !-->
<script type="text/javascript" defer="defer" src="jsturing.js"></script>
</head>
<body onload="OnLoad();">
<div id="Header">
<h1>Turing machine simulator</h1>
<div class="backlinks">
[<a href="http://morphett.info/">Back to home page</a>]
</div>
<div id="IntroText">
This is a <a href="http://en.wikipedia.org/wiki/Turing_machine">Turing machine</a> simulator.
To use it:<br>
<ol>
<li>
<a href="#LoadMenu" onclick="$('#LoadMenu').slideDown();">Load one of the example programs</a>, or write your own in the Turing machine program area. See <a href="#SyntaxInfo">below for syntax</a>.
</li>
<li>
Enter something in the 'Input' area - this will be written on the tape initially as input to the machine. Click 'Reset' to initialise the machine.
</li>
<li>
Click on 'Run' to start the Turing machine and run it until it halts (if ever).
Click on 'Pause' to interrupt the Turing machine while it is running.
Alternately, click 'Step' to run a single step of the Turing machine.
</li>
<li>
Click 'Reset' to restore the Turing machine to its initial state so it can be run again.
</li>
</ol>
</div>
</div>
<div id="Machine">
<div id="MachineTapeContainer">
<div class="BoxTitle">Tape</div>
<div id="MachineTape" class="MachineStatusBox" title="This is the Turing machine's tape. The head position is indicated by the highlighted cell and arrow.">
<!-- the following pre elements must be on a single line with no whitespace between them !-->
<div id="RunningTapeDisplay" aria-live="polite"><div id="TapeValues"><pre id="LeftTape" class="tape"></pre><div id="ActiveTapeArea"><pre id="ActiveTape" class="tape"> </pre><div id="MachineHead"><div class="HeadTop"></div><div class="HeadBody">Head</div></div></div><pre id="RightTape" class="tape"></pre></div></div>
</div> <!-- div MachineTape !-->
</div>
<div id="MachineMiddleSection">
<div id="MachineStatusMsgWrapper" aria-live="polite">
<pre id="MachineStatusMsgText">
</pre> <!-- div MachineStatusMsgText !-->
<div id="MachineStatusMsgBg"></div>
</div>
<div id="MachineStateContainer" class="MachineStatusContainer" title="This is the Turing machine's current state" aria-live="polite">
<div class="BoxTitle">Current state</div>
<div id="MachineState" class="MachineStatusBox">
-
</div> <!-- div MachineState !-->
</div> <!-- div MachineStateContainer !-->
<div id="MachineStepsContainer" class="MachineStatusContainer" title="This is the number of steps executed by the machine since starting" aria-live="polite">
<div class="BoxTitle">Steps</div>
<div id="MachineSteps" class="MachineStatusBox">
-
</div> <!-- div MachineSteps !-->
</div> <!-- div MachineStepsContainer !-->
</div> <!-- div MachineMiddleSection !-->
<div class="cleardiv"></div>
<div id="MachineLowerSection">
<div id="MachineLowerSection2">
<div id="MachineProgramContainer">
<div class="BoxTitle">Turing machine program</div>
<div id="MachineProgramBlock">
<div id="MachineProgramBlock2">
<div id="SourceContainer">
<div id="SourceBackground">
</div>
<div id="tabackground">
<!-- no indenting, because text inside textarea is verbatim !-->
<textarea id="Source" wrap="off" oninput="TextareaChanged();" onscroll="UpdateTextareaScroll();" onblur="Compile();" title="This is the Turing machine's program. See documentation below for syntax.">
; Load a program from the menu or write your own!
</textarea>
</div>
</div>
<div id="SyntaxMsg"></div>
</div> <!-- div MachineProgramBlock2 !-->
</div> <!-- div MachineProgramBlock !-->
</div> <!-- div MachineProgramContainer !-->
<div id="MachineControlBlock">
<div class="BoxTitle">Controls</div>
<div id="MachineButtonsBlock">
<button id="RunButton" onclick="RunButton();" title="Start the machine running">Run</button> <!-- ▸ !--> <!-- Unicode 'play' symbol !-->
<span title="If enabled, runs as fast as your browser & computer allow">
<input type="checkbox" id="SpeedCheckbox" onclick="SpeedCheckbox();">Run at full speed
</span>
<br>
<button id="StopButton" onclick="StopButton();" disabled="disabled" title="Pause the machine when running">Pause</button><br> <!-- ◾ !-->
<button id="UndoButton" onclick="Undo();" title="Undo one machine step" style="float: right;">Undo</button>
<button id="StepButton" onclick="StepButton();" title="Run the machine for a single step and the pause">Step</button><br> <!-- ▸❙ !-->
<button id="ResetButton" onclick="ResetButton();" title="Reset the machine and tape to the initial state">Reset</button> <!-- ❙⏪ !-->
<div id="InitialTapeDisplay" title="This initial data will be loaded on the tape when the machine starts">
Initial input:<input type="text" id="InitialInput" value="" onchange="ShowResetMsg(true);">
</div>
<div style="font-size: small;">
<a href="javascript:" onclick="$('#AdvancedOptions').slideToggle();" title="Show advanced machine options">Advanced options</a>
</div>
<div id="AdvancedOptions" style="display: none; margin-top: 0.25em;">
<div id="InitialStateDisplay" title="This is the state that the machine will start in" style="margin-bottom: 0.5em;">
Initial state:<input type="text" id="InitialState" value="0" onchange="ShowResetMsg(true);">
</div>
<div title="Choose between different Turing machine variants">
Machine variant:
<select onchange="VariantChanged(true);" id="MachineVariant">
<option value="0" selected="selected">Standard</option>
<option value="1">Semi-infinite tape</option>
<option value="2">Non-deterministic</option>
</select>
<div id="MachineVariantDescription" style="font-size: small; font-style: italic;"></div>
<span style="font-size: x-small;"><a href="javascript:" onclick="$('#AdvancedOptions').hide();">[Close]</a></span>
</div>
</div>
<div id="ResetMessage">Changes will take effect when the machine is reset.</div>
<br>
<br>
<div id="LoadBlock">
<a href="javascript:" onclick="$('#LoadMenu').slideToggle();" title="Load a pre-prepared example program">Load an example program</a>
<div id="LoadMenu">
<ul>
<li><a href="javascript:" onclick="LoadSampleProgram('palindrome', 'Palindrome detector');">Palindrome detector</a></li>
<li><a href="javascript:" onclick="LoadSampleProgram('binaryadd', 'Binary addition machine');">Binary addition</a></li>
<li><a href="javascript:" onclick="LoadSampleProgram('binarymult', 'Binary multiplication machine');">Binary multiplication</a></li>
<li><a href="javascript:" onclick="LoadSampleProgram('bin2dec', 'Binary to decimal conversion machine');">Binary to decimal conversion</a></li>
<li><a href="javascript:" onclick="LoadSampleProgram('turingsequence', 'Turing\'s sequence machine');">Turing's sequence machine</a></li>
<li><a href="javascript:" onclick="LoadSampleProgram('parentheses', 'Parentheses checker machine');">Parentheses checker</a></li>
<li><a href="javascript:" onclick="LoadSampleProgram('reversepolishboolean', 'Reverse Polish Boolean calculator');">Reverse Polish Boolean calculator</a></li>
<li><a href="javascript:" onclick="LoadSampleProgram('primetest', 'Primality test machine');">Primality test</a></li>
<li><a href="javascript:" onclick="LoadSampleProgram('4statebeaver', '4-state busy beaver');">4-state busy beaver</a></li>
<li><a href="javascript:" onclick="LoadSampleProgram('universal', 'Universal Turing machine');">Universal Turing machine</a></li>
<!--<li><a href="javascript:" onclick="LoadSampleProgram('error', 'Error machine');">Error</a></li>!--> <!-- for testing !-->
</ul>
<span style="font-size: x-small;"><a href="javascript:" onclick="$('#LoadMenu').hide();">[Close]</a></span>
</div>
</div> <!-- div inputProg !-->
<br>
<a href="javascript:" onclick="SaveToCloud();" title="Save your machine to the cloud for sharing or bookmarking">Save to the cloud</a>
<!--...<a href="javascript:" onclick="testsave(true);">test ok</a>...<a href="javascript:" onclick="testsave(false);">test error</a>!--> <!-- for testing !-->
<div id="SaveStatus">
<div id="SaveStatusFg">
<div id="SaveStatusMsg"></div>
<span style="font-size: x-small;"><a href="javascript:" onclick="ClearSaveMessage();">[Close]</a></span>
</div>
<div id="SaveStatusBg"></div>
</div>
<!--<br><button id="DebugButton" onclick="x();">Debug</button><br>!-->
</div> <!-- div MachineButtonsBlock !-->
</div> <!-- div MachineControlBlock !-->
</div> <!-- div MachineLowerSection2 !-->
</div> <!-- div MachineLowerSection !-->
</div> <!-- div Machine !-->
<div id="SyntaxInfo">Syntax:
<ul>
<li>Each line should contain one tuple of the form '<code><current state> <current symbol> <new symbol> <direction> <new state></code>'.</li>
<li>You can use any number or word for <code><current state></code> and <code><new state></code>, eg. <code>10, a, state1</code>. State labels are case-sensitive.</li>
<li>You can use almost any character for <code><current symbol></code> and <code><new symbol></code>, or '<code>_</code>' to represent blank (space). Symbols are case-sensitive.
<br>
You can't use '<code>;</code>', '<code>*</code>', '<code>_</code>' or whitespace as symbols.
</li>
<li><code><direction></code> should be '<code>l</code>', '<code>r</code>' or '<code>*</code>', denoting 'move left', 'move right' or 'do not move', respectively.</li>
<li>Anything after a '<code>;</code>' is a comment and is ignored.</li>
<li>The machine halts when it reaches any state starting with '<code>halt</code>', eg. <code>halt, halt-accept</code>.</li>
</ul>
Also:
<ul>
<li>'<code>*</code>' can be used as a wildcard in <code><current symbol></code> or <code><current state></code> to match any character or state.</li>
<li>'<code>*</code>' can be used in <code><new symbol></code> or <code><new state></code> to mean 'no change'.</li>
<li>'<code>!</code>' can be used at the end of a line to set a breakpoint, eg '<code>1 a b r 2 !</code>'. The machine will automatically pause after executing this line.</li>
<li>You can specify the starting position for the head using '<code>*</code>' in the initial input.</li>
</ul>
</div>
<div id="AboutMenu">
<div id="AboutItemTech" class="AboutItem"><a href="javascript:" onclick="AboutMenuClicked('Tech');">Technical details</a></div>
-
<div id="AboutItemCopying" class="AboutItem"><a href="javascript:" onclick="AboutMenuClicked('Copying');">Copying</a></div>
-
<div id="AboutItemContact" class="AboutItem"><a href="javascript:" onclick="AboutMenuClicked('Contact');">Feedback</a></div>
<div id="AboutContentContainer">
<div id="AboutContentTech" class="AboutContent">
The Turing machine simulator is written in Javascript/HTML, and uses <a href="http://jquery.com">jQuery</a>. Saved machines are stored as Gists on <a href="https://gist.github.com/">GitHub</a>. You can browse the code <a href="https://github.com/awmorp/jsturing">here on GitHub</a>.
</div>
<div id="AboutContentCopying" class="AboutContent">
Source code for this simulator is <a href="https://github.com/awmorp/jsturing">available on GitHub</a>. You are welcome to download, copy, or adapt the code to your own needs. If you are doing something interesting with it, I'd be happy to hear from you about it.
</div>
<div id="AboutContentContact" class="AboutContent">
Please send any bug reports, feedback, suggestions, etc. to <a href="http://morphett.info/">Anthony Morphett</a>, awmorp @ gmail.com
</div>
</div>
</div>
<div class="Signature">
-- <a href="http://morphett.info/">Anthony Morphett</a> - awmorp @ gmail.com
</div>
<div id="debugOuter" class="DebugClass">
Debug: <button id="ClearDebugButton" onclick="ClearDebug();">clear</button>
<pre id="debug">
</pre> <!-- div debug !-->
</div> <!-- div debugOuter !-->
</body>
</html>