-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathprompts.html
144 lines (124 loc) · 5.85 KB
/
prompts.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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
<style type="text/css">
#dice{
background:#222222;border-radius:8px;padding:4px 8px;
letter-spacing: 0.25px;
cursor: pointer;
transition: 0.2s all;
color:white;
margin-top: 8px;
}
#dice:hover{
background: lime;
color:black;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div class="header">
<h2>Random Journaling Prompts <button id="dice" onclick ="newPrompt()">Another one? 🎲</button></h2>
<div class="row white">
<div id="prompt" class ="item"></div>
</div>
<br>
<ul>More prompts →
<a class="button" target="_blank" href="https://docs.google.com/document/d/177zcRNJh6uIRBZpZ-HFpvI0S6m38TACm7k6i5Eg7GoU/edit?usp=sharing">
Google Docs</a>
</div>
<script type="text/javascript">
let prompts = [
`<ul>In
<a href="https://www.google.com/url?q=https://web.archive.org/web/20180312224420/http://www.marilynnance.com/titanic/baraka.html&sa=D&source=docs&ust=1636946816474000&usg=AOvVaw3JVOnY_O9pi51C9_aJVKuk" target="_blank">Technology & Ethos</a>,
Amiri Baraka rants about how typewriters are corny. He asks, What is the morality of our machines?
<ul>How have different tools constrained or freed your work? Is there a tool you wish existed that doesn’t? To use Baraka’s language, what would that tool's morality be?
<br><br>
<ul>From American Artist’s Dark Matters class:
<ul>Think of your friends and family, if they were the designers of computer technology what would it do/look like?
`,
`<img class = "p-image" src="imgs/lyb.png">
<span class = "imageCaption"><a href="https://www.moonslake.com/" target="_blank">I dream of creating an intelligent machine</a>, Lillian Yvonne-Bertram</span>
<br><br>
<ul>Have you ever had a fortune read?
<ul>Have you ever outsourced an answer to someone—or something—else?
<ul>How do you know that you know something?
<ul>Think about a question that you – or others in the world – would like to know the answer to.
<ul>Determine 5+ answers to the question.
`,
`<img class = "p-image" src="imgs/kjr.png">
<span class = "imageCaption">How To Suffer Politely, Kameelah Janan Rasheed</span>
<br><br>
<ul>Write a set of 6+ instructions for someone to perform.
<ul>Title it either “Instructions for ________” or “How to ________.” `,
`<img class ="p-image" src="imgs/iml.png">
<br><span class = "imageCaption"><a href="https://ianmaclarty.itch.io/if-we-were-allowed-to-visit" target="_blank">If We Were Allowed To Visit</a>, Ian MacLarty</span>
<br><br>
<ul>Imagine a place. Maybe it’s a familiar place like your home or your school or your desk. Maybe it’s an imagined place that doesn’t exist, or a real place that no one can actually go to.
<br><br>
<ul>Using ONLY TEXT on a letter size piece of paper (digital or physical), create a picture of that place.
<br><br>
<ul>→ What materials is it made of? Is it bright, dull, hard, soft, quiet, loud?
<ul>→ Is there text in that place? How does it interact with space?
<ul>→ Is your text a border, a texture, or something else entirely?`,
`<img class = "p-image" src="imgs/agb.png">
<ul><span class = "imageCaption">Art of Google Books</span>
<br><br>
<ul>Find a conversation between you and another person from a while ago. Save it as an image or doc in Figma or Google Docs.
<br><br>
<ul>Annotate the conversation. Add a second layer of text and imagery to it. Circle, underline, add pointers, etc.
<br><br>
<ul>What words or phrases become a portal to new information? What is your relationship to your own voice — has the way you think changed, even slightly, since you wrote it?
<br>
<ul>Where are the invisible footnotes?
`,
`<ul>Find a pen and piece of paper.
<ul>Alternatively, you can use your computer.
<br>
<ul>Close your eyes and write or type for 10 minutes, or
<ul>until you fill the whole piece of paper.
<br>
<ul>Respond to the prompt:
<ul>What is the bodily experience of creating language and text?
`,
`<ul>Press play on some spoken word audio. The content of the audio doesn’t matter, but choose one that is enough to listen to but also mild enough to ignore.
<ul>Write alongside it on any topic whatsoever. Notice when you try to resist versus when you try to write alongside it.
`,
`<ul>“Whether in the time of Moses, Malcolm X, or Missy Elliot, names have never grown on trees. They are concocted in cultural laboratories and encoded and infused with meaning, and experience – particular histories, longings, and anxieties… Names are an expressive tool that helps us think about the social and political dimensions of all sorts of technologies…”
<ul>– <a href="https://twitter.com/ruha9/status/1140002672441024518" target="_blank">Ruha Benjamin</a>, Race After Technology
<br><br>
<ul>What does your name say about you?
<ul>How do you think your name encodes you to the rest of the world? What assumptions do you think people make about you? How does it help or hinder you in navigating different spaces?
<br><br>
<ul>How is a name empowering, or not?
<ul>Do you have other names (or do you wish you did)?
<ul>How do names tie us to histories and futures and networks?`
]
let promptBox = document.getElementById("prompt");
let newNum;
let oldNum;
function randomNum(){
//give me a new number, roll the dice again
newNum = Math.floor(Math.random() * prompts.length);
//if the last roll and this new roll are the same, re-roll
if(newNum == oldNum){
//roll it again
randomNum();
}
//if they're different, then update the text
else if(newNum != oldNum){
return newNum;
}
//remember the number that was just rolled one round before
oldNum = newNum;
}
newPrompt();
function newPrompt(){
promptBox.innerHTML = prompts[randomNum()];
}
</script>
</body>
</html>