forked from b3008/executable_HTML
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
112 lines (62 loc) · 3.22 KB
/
index.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
<html>
<head>
<script type="module" src="./dist/paper-polymer.js"></script>
<script type="module" src="./dist/aaCustomElements.js"></script>
<style>
zero-md{
padding:20px;
}
</style>
</head>
<body>
<aa-session>
<template>
<aa-sequence>
<aa-screen submit-button-text="see an example">
<p>
Executable HTML is a set of custom elements,
which help an author of HTML content prescribe
the way pieces of HTML are inserted into the document,
without necessitating the use of JavaScript by the author.
</p>
<p>
One main element is <aa-sequence>, which will insert its children into the document,
one after the other, in sequence, when notified to do so.
</p>
<p>
Another set of elements, <aa-choose>, <aa-when>, and <aa-otherwise> help
define an if-then-else kind of structure, where their children will be inserted into
the document depending on whether a certain condition is true or false
</p>
</aa-screen>
<aa-screen>
<p style="margin-top:20px">
This example uses <a href="https://link.springer.com/article/10.3758/s13428-018-1148-y">executable HTML</a> to replicate the famous Commodore 64 BASIC oneliner: <pre>10 PRINT CHR$(205.5+RND(1)); : GOTO 10</pre>
An example of the running c64 program can be found <a href="https://www.youtube.com/watch?v=m9joBLOZVEo">at this youtube video</a>.
</p>
Done in executable HTML, this could be written as:
<pre>
<aa-sequence>
<aa-function-random min="1" max="2" name="rnd"><aa-function-random>
<aa-choose>
<aa-when test="rnd==1">m<aa-when>
<aa-otherwise>n<aa-otherwise>
<aa-choose>
<aa-jump goto="rnd"><aa-jump>
<aa-sequence>
</pre>
The following CodePen demonstrates it running:
<p class="codepen" data-height="554" data-theme-id="default" data-default-tab="result" data-user="b3008" data-slug-hash="abzRPjp" style="height: 554px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="10 PRINT CHR$(205.5+RND(1)); : GOTO 10">
<span>See the Pen <a href="https://codepen.io/b3008/pen/abzRPjp">
10 PRINT CHR$(205.5+RND(1)); : GOTO 10</a> by b3008 (<a href="https://codepen.io/b3008">@b3008</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
</aa-screen>
</aa-sequence>
</template>
</aa-session>
<p>The repository for executable HTML can be found at <a href="https://github.com/b3008/executable_HTML">https://github.com/b3008/executable_HTML</a></p>
<zero-md src="./Readme.md"></zero-md>
</body>
</html>