-
Notifications
You must be signed in to change notification settings - Fork 0
/
learn.htm
148 lines (122 loc) · 5.49 KB
/
learn.htm
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
<!DOCTYPE HTML>
<html>
<head>
<title>Learn Paprika</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/icon/touch-icon.png">
<link rel="stylesheet" type="text/css" href="paprika_style.css" />
<style type="text/css">
input {
height: 24px;
width: 70%;
}
input, button {
font-size: 18px;
padding: 4px;
}
main, aside{
display: block;
}
aside{
position: fixed;
right: 1em;
width: 40%;
}
main{
width: 58%;
}
p{
line-height: 1.5em;
margin: 0.2em;
}
form{
margin-bottom: 4em;
}
.lead{
font-weight: bold;
}
.spaced, .lead{
margin-top: 2em;
margin-bottom: 2em;
}
</style>
</head>
<body>
<aside>
<p><small>Output shows up here <a id="clear">[Clear]</a></small></p>
<div id="results"></div>
</aside>
<main>
<h1>Learn Paprika</h1>
<p class="lead">Paprika lets you write text that varies itself.</p>
<p>Type or copy <code>Hello [animal]</code> into this box and press enter (a few times if you want):</p>
<form action="api.php" method="GET"><input type="text" name="q" class="query"><button class="go">Try it</button></form>
<p>If you use identical tags more than once, they will be replaced with the same thing (like find+replace).</p>
<p>Try <code>My [animal] is [good trait]. I love my [animal].</code></p>
<form action="api.php" method="GET"><input type="text" name="q" class="query"><button class="go">Try it</button></form>
<p>If you want to randomise tags more than once, you can label them separately with a hash. Even then, they might randomise the same result!</p>
<p>Try <code>I like [sport#1] and [sport#another]</code> in the box:</p>
<form action="api.php" method="GET"><input type="text" name="q" class="query"><button class="go">Try it</button></form>
<div class="spaced">
<h2>Where do the options come from?</h2>
<p>I program them in, in so-called "grammar" files. You can <a href="/navigator.php">explore the whole grammar</a> but it might be a bit confusing at this point. Also, it's not finished.</p>
</div>
<h2>Slightly more complicated examples</h2>
<p>In the grammar, there is <code>[category]</code>. You can try it in the box below.
For each category, there is also a list of those things (like "<code>[country]</code>", and "<code>[colour]</code>").</p>
<p>This lets us do something like <code>My favourite [category] is [[category]]</code></p>
<p><small>(The first find+replace changes the formula to e.g. <code>My favourite country is [country]</code></small></p>
<form action="api.php" method="GET"><input type="text" name="q" class="query"><button class="go">Try it</button></form>
<p>But notice that <code>[[category]] is a [category]</code> doesn't work!
That's because the internal [category] tag hasn't been replaced by the time it gets to the nested brackets.
To fix this, you can render it early using an 'early' or 'hidden' tag.</p>
<p><code>[!category][[category]] is a [category]</code></p>
<form action="api.php" method="GET"><input type="text" name="q" class="query"><button class="go">Try it</button></form>
<p class="spaced">
<strong>N.b. [a] and [an] are magic. They look at the next letter in the finished sentence and change appropriately,
so you can write <code>[a] [category]</code> to get "a country" or "an animal".</strong>
</p>
<p>I call '!' a command. Commands are a special character at the start of a tag.</p>
<p>There are 2 commands; '!' and '?'. The ? tag gives a 50% chance of that tag being rendered empty</p>
<p><code>He drove a [?colour] car</code></p>
<form action="api.php" method="GET"><input type="text" name="q" class="query"><button class="go">Try it</button></form>
<p>Forward slashes make the tag pick between literal phrases: <code>Let's go [north/south/east/west/up the hill/down the well]</code></p>
<form action="api.php" method="GET"><input type="text" name="q" class="query" value="Let's go [north/south/east/west/up the hill/down the well]">
<button class="go">Try it</button></form>
<p>This can be used like '?' except that where '?' makes a word taken from the grammar optional, slash does it for literals. So <code>[/cat]</code>
can come back as either 'cat' or nothing. <code>[?cat]</code> would fail, because there is no grammar key for 'cat'.</p>
<p>You can use early calls to make slash-tags more powerful: <code>[!beast][[beast]/bananas]</code></p>
<form action="api.php" method="GET"><input type="text" name="q" class="query" value="[cat/dog][s/] and [rat/hog][s/]">
<button class="go">Try it</button></form>
<p class="spaced">
<strong>Paprika is a rapid prototype, and I'm still working on a better way to do some of this stuff!</strong>
</p>
<div class="spaced">
<p>OK, that's the bones of it. Now you could experiment on the main page, and from there you can navigate the grammar.
<a href="/use.htm">Use Paprika</a></p>
<p>Please email me comments and feedback: <code>ste at paprika me uk</code>. Have fun!</p>
</div>
<div class="spaced"></div>
</main>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$r = null;
$(function(){
$r = $('#results');
$('button').click(function(e){
e.preventDefault();
q = $(e.currentTarget).parent().serialize();
$.post("api.php", q, function(d) {
console.log(d);
$r.prepend("<p>" + d + "</p>");
});
});
$('#clear').click(function(){
$r.html("");
});
});
</script>
</body>
</html>