-
Notifications
You must be signed in to change notification settings - Fork 2
/
_index.html
150 lines (83 loc) · 4.05 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
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
<html>
<head>
<script type="module" src="./dist/paper-polymer.js"></script>
<!-- <script type="module" src="./dist/aaCustomElements.js"></script> -->
<script type="module" src="./src/index.js"></script>
<style>
zero-md{
padding:20px;
}
</style>
</head>
<body>
<div id="container">
</div>
<aa-session>
<template>
<aa-checkboxes>
<aa-choice-item value="1">one</aa-choice-item>
<aa-choice-item value="2">two</aa-choice-item>
<aa-choice-item value="3">three</aa-choice-item>
</aa-checkboxes>
<aa-multiple-choice horizontal value="1" id="123">
<aa-choice-item value="1">one</aa-choice-item>
<aa-choice-item>two</aa-choice-item>
<aa-choice-item value="3">three</aa-choice-item>
</aa-multiple-choice>
yo
<generic-editor for="123"></generic-editor>
hey
<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>
<script>
const container = document.getElementById('container');
container.innerHTML = ``;
mChoice = document.querySelector('aa-multiple-choice');
</script>
</html>