XPUB
/
xpub.nl
6
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

adding colors, javascript

Browse Source
master
mb 5 months ago
parent 342df4fec4
commit 86372a7549
3 changed files with 790 additions and 562 deletions
Show Stats Download Patch File Download Diff File

571
2024/call/call-sketch.html
Unescape Escape View File

@ -0,0 +1,571 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<title>Apply?</title>
</head>
<body>
<form method="post">
<table border="0">
<tbody>
<tr valign="middle" align="center">
<td>
<!-- C -->
<table border="0">
<tbody>
<tr>
<td colspan="1"></td>
<td colspan="1" data-index="2"><input type="radio" /></td>
<td colspan="1" data-index="1"><input type="radio" /></td>
<td colspan="1" data-index="0"><input type="radio" /></td>
<td colspan="1"></td>
</tr>
<tr>
<td colspan="1" data-index="3"><input type="radio" /></td>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"></td>
</tr>
<tr>
<td colspan="1" data-index="4"><input type="radio" /></td>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"></td>
</tr>
<tr>
<td colspan="1" data-index="5"><input type="radio" /></td>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"></td>
</tr>
<tr>
<td colspan="1"></td>
<td colspan="1" data-index="6"><input type="radio" /></td>
<td colspan="1" data-index="7"><input type="radio" /></td>
<td colspan="1" data-index="8"><input type="radio" /></td>
<td colspan="1"></td>
</tr>
</tbody>
</table>
</td>
<td>
<table border="0">
<tbody>
<tr>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"></td>
<td colspan="1"></td>
</tr>
<tr>
<td colspan="1"></td>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"></td>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"></td>
</tr>
<tr>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"><input type="radio" /></td>
</tr>
<tr>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"><input type="radio" /></td>
</tr>
<tr>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"><input type="radio" /></td>
</tr>
</tbody>
</table>
</td>
<td>
<!-- L -->
<table border="0">
<tbody>
<tr>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"></td>
</tr>
<tr>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"></td>
</tr>
<tr>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"></td>
</tr>
<tr>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"></td>
</tr>
<tr>
<td colspan="1"></td>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"><input type="radio" /></td>
</tr>
</tbody>
</table>
</td>
<td>
<!-- L -->
<table border="0">
<tbody>
<tr>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"></td>
</tr>
<tr>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"></td>
</tr>
<tr>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"></td>
</tr>
<tr>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"></td>
</tr>
<tr>
<td colspan="1"></td>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"><input type="radio" /></td>
</tr>
</tbody>
</table>
</td>
<td>
<!-- I -->
<table border="0">
<tbody>
<tr>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"></td>
<td colspan="1"></td>
</tr>
<tr>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"></td>
<td colspan="1"></td>
</tr>
<tr>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"></td>
<td colspan="1"></td>
</tr>
<tr>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"></td>
<td colspan="1"></td>
</tr>
<tr>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"></td>
<td colspan="1"></td>
</tr>
</tbody>
</table>
</td>
<td>
<!-- N -->
<table border="0">
<tbody>
<tr>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"><input type="radio" /></td>
</tr>
<tr>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"><input type="radio" /></td>
</tr>
<tr>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"></td>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"></td>
<td colspan="1"><input type="radio" /></td>
</tr>
<tr>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"><input type="radio" /></td>
</tr>
<tr>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"><input type="radio" /></td>
</tr>
</tbody>
</table>
</td>
<td>
<!-- G -->
<table border="0">
<tbody>
<tr>
<td colspan="1"></td>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"></td>
</tr>
<tr>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"></td>
</tr>
<tr>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"></td>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"><input type="radio" /></td>
</tr>
<tr>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"><input type="radio" /></td>
</tr>
<tr>
<td colspan="1"></td>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<br>
<fieldset>
<legend>all</legend>
<label><input type="checkbox" name="checkbox" value="no" />feminist technologies</label>
<label><input type="checkbox" name="checkbox" value="no" />DIY practices</label>
<label><input type="checkbox" name="checkbox" value="no" />post-free cultures</label>
<label><input type="checkbox" name="checkbox" value="no" />homebrew servers</label>
<label><input type="checkbox" name="checkbox" value="no" />bootleg librians</label>
<label><input type="checkbox" name="checkbox" value="no" />art collectives</label>
</fieldset>
<fieldset>
<legend>exploring</legend>
<label><input type="checkbox" name="checkbox" value="yes" />pen plotters</label>
<label><input type="checkbox" name="checkbox" value="no" />dot matrix printers</label>
<label><input type="checkbox" name="checkbox" value="no" />scanners</label>
<label><input type="checkbox" name="checkbox" value="no" />typewriters</label>
<label><input type="checkbox" name="checkbox" value="no" />collective servers</label>
<label><input type="checkbox" name="checkbox" value="no" />video games</label>
<label><input type="checkbox" name="checkbox" value="no" />python scripts</label>
<label><input type="checkbox" name="checkbox" value="no" />HTML pages</label>
<label><input type="checkbox" name="checkbox" value="no" />CSS stylesheets</label>
<label><input type="checkbox" name="checkbox" value="no" />browsers</label>
<label><input type="checkbox" name="checkbox" value="no" />post-free culture licenses</label>
<label><input type="checkbox" name="checkbox" value="yes" />radio shows</label>
<label><input type="checkbox" name="checkbox" value="no" />scripts</label>
<label><input type="checkbox" name="checkbox" value="no" />wiki's</label>
<label><input type="checkbox" name="checkbox" value="no" />digital gardens</label>
<label><input type="checkbox" name="checkbox" value="no" />gemini blogs</label>
<label><input type="checkbox" name="checkbox" value="no" />archives</label>
<label><input type="checkbox" name="checkbox" value="no" />protocols</label>
<label><input type="checkbox" name="checkbox" value="no" />non-linear narratives</label>
<label><input type="checkbox" name="checkbox" value="no" />hypertext adventures</label>
<label><input type="checkbox" name="checkbox" value="no" />software studies</label>
<label><input type="checkbox" name="checkbox" value="no" />manuals</label>
<label><input type="checkbox" name="checkbox" value="no" />zines</label>
<label><input type="checkbox" name="checkbox" value="no" />guides</label>
<label><input type="checkbox" name="checkbox" value="no" />text adventures</label>
<label><input type="checkbox" name="checkbox" value="no" />servers</label>
</fieldset>
<fieldset>
<legend>at</legend>
<label><input type="checkbox" name="checkbox" value="no" />experimental music nights</label>
<label><input type="checkbox" name="checkbox" value="no" />collective learning gatherings</label>
<label><input type="checkbox" name="checkbox" value="no" />print parties</label>
<label><input type="checkbox" name="checkbox" value="no" />zine festivals</label>
<label><input type="checkbox" name="checkbox" value="no" />printshops</label>
<label><input type="checkbox" name="checkbox" value="no" />community art venues</label>
<label><input type="checkbox" name="checkbox" value="no" />squats</label>
<label><input type="checkbox" name="checkbox" value="no" />hacker spaces</label>
<label><input type="checkbox" name="checkbox" value="no" />libraries</label>
<label><input type="checkbox" name="checkbox" value="no" />game nights</label>
<label><input type="checkbox" name="checkbox" value="no" />algoraves</label>
<label><input type="checkbox" name="checkbox" value="no" />booksprints</label>
<label><input type="checkbox" name="checkbox" value="no" />edit-a-thons</label>
</fieldset>
<fieldset>
<legend>?</legend>
</fieldset>
<br>
<br>
<div>
How can
<select id="simple" name="simple">
<option>feminist technologies</option>
<option>art collectives</option>
<option>DIY practitioners</option>
</select>
<select id="simple" name="simple">
<option>explore</option>
<option>study</option>
<option>critique</option>
</select>
<select id="simple" name="simple">
<option>pen plotters</option>
<option>zines</option>
<option>python scripts</option>
</select>
at
<select id="simple" name="simple">
<option>zine festivals</option>
<option>squats</option>
<option>game nights</option>
</select>
?
<br>
<br>
</div>
<div class="question">
When do
<select id="simple" name="simple">
<option>feminist technologies</option>
<option>art collectives</option>
<option>DIY practitioners</option>
</select>
<select id="simple" name="simple">
<option>explore</option>
<option>study</option>
<option>critique</option>
</select>
<select id="simple" name="simple">
<option>pen plotters</option>
<option>zines</option>
<option>python scripts</option>
</select>
at
<select id="simple" name="simple">
<option>zine festivals</option>
<option>squats</option>
<option>game nights</option>
</select>
?
<br>
<br>
</div>
<div class="question">
Since when did
<select id="simple" name="simple">
<option>feminist technologies</option>
<option>art collectives</option>
<option>DIY practitioners</option>
</select>
<select id="simple" name="simple">
<option>explore</option>
<option>study</option>
<option>critique</option>
</select>
<select id="simple" name="simple">
<option>pen plotters</option>
<option>zines</option>
<option>python scripts</option>
</select>
at
<select id="simple" name="simple">
<option>zine festivals</option>
<option>squats</option>
<option>game nights</option>
</select>
?
<br>
<br>
</div>
<div class="question">
For whom do
<select id="simple" name="simple">
<option>feminist technologies</option>
<option>art collectives</option>
<option>DIY practitioners</option>
</select>
<select id="simple" name="simple">
<option>explore</option>
<option>study</option>
<option>critique</option>
</select>
<select id="simple" name="simple">
<option>pen plotters</option>
<option>zines</option>
<option>python scripts</option>
</select>
at
<select id="simple" name="simple">
<option>zine festivals</option>
<option>squats</option>
<option>game nights</option>
</select>
?
<br>
<br>
</div>
<div class="question">
Why did
<select id="simple" name="simple">
<option>feminist technologies</option>
<option>art collectives</option>
<option>DIY practitioners</option>
</select>
<select id="simple" name="simple">
<option>explore</option>
<option>study</option>
<option>critique</option>
</select>
<select id="simple" name="simple">
<option>pen plotters</option>
<option>zines</option>
<option>python scripts</option>
</select>
at
<select id="simple" name="simple">
<option>zine festivals</option>
<option>squats</option>
<option>game nights</option>
</select>
?
<br>
<br>
</div>
<div class="question">
Can
<select id="simple" name="simple">
<option>feminist technologies</option>
<option>art collectives</option>
<option>DIY practitioners</option>
</select>
<select id="simple" name="simple">
<option>explore</option>
<option>study</option>
<option>critique</option>
</select>
<select id="simple" name="simple">
<option>pen plotters</option>
<option>zines</option>
<option>python scripts</option>
</select>
at
<select id="simple" name="simple">
<option>zine festivals</option>
<option>squats</option>
<option>game nights</option>
</select>
?
<br>
<br>
</div>
<br>
<div align="center">
<marquee>
<button>Apply!</button>
</marquee>
</div>
</form>
<script>
setInterval(dropping, 100);
function dropping(){
var dropdowns = document.querySelectorAll("select");
var random = Math.floor(Math.random() * dropdowns.length);
var dropdown = dropdowns[random]
var random_option = Math.floor(Math.random() * dropdown.options.length);
console.log("random_option", random_option);
dropdown.selectedIndex = random_option;
}
setInterval(checking, 100);
function checking(){
var checkboxes = document.querySelectorAll("input[name=checkbox]");
console.log(checkboxes.length);
var random = Math.floor(Math.random() * checkboxes.length)
console.log(random);
checkboxes[random].checked = true;
var random = Math.floor(Math.random() * checkboxes.length)
checkboxes[random].checked = false;
}
</script>
</body>
</html>

34
2024/call/call.css
Unescape Escape View File

@ -0,0 +1,34 @@
body{
/* background-color: pink; */
}
form{
max-width: 1300px;
/* border: 1px solid blue; */
margin: 1em auto;
padding: 1em;
text-align: center;
}
form *{
font-size: 24px;
}
form h1{
font-size: 100%;
}
/* form select {
padding: 0.5em 1em;
border: 0;
border-radius: 20%;
} */
form div#dropdowns {
text-align: right;
line-height: 1;
}
form div#dropdown-options.hide{
display: none;
}
form div#dropdowns div.row{
margin: 0.5em 0;
}
form div#info{
/* display: none; */
}

747
2024/call/call.html
Unescape Escape View File

@ -3,569 +3,192 @@
<head> <head>
<meta charset="utf-8"></meta> <meta charset="utf-8"></meta>
<title>Apply?</title> <title>Apply?</title>
<link href="call.css" rel="stylesheet" type="text/css" />
</head> </head>
<body> <body>
<form method="post"> <form>
<fieldset>
<table border="0"> <legend>XPUB</legend>
<tbody> <div id="dropdowns">
<tr valign="middle" align="center"> <div id="dropdown-options" class="hide">
<td> <div class="row">
<!-- C --> <span id="question-div"></span>
<table border="0"> <select>
<tbody> <!-- who -->
<tr> <option></option>
<td colspan="1"></td> <option>(cross) makers</option>
<td colspan="1" data-index="2"><input type="radio" /></td> <option>collectives</option>
<td colspan="1" data-index="1"><input type="radio" /></td> <option>administrators</option>
<td colspan="1" data-index="0"><input type="radio" /></td> <option>notebooks</option>
<td colspan="1"></td> <option>bodies</option>
</tr> <option>social justice warriors</option>
<tr> <option>teletype machines</option>
<td colspan="1" data-index="3"><input type="radio" /></td> <option>gardeners</option>
<td colspan="1"></td> <option>oracles</option>
<td colspan="1"></td> <option>archives</option>
<td colspan="1"></td> </select>
<td colspan="1"></td> <select class="verb">
</tr> <!-- what -->
<tr> <option></option>
<td colspan="1" data-index="4"><input type="radio" /></td> <option>explore</option>
<td colspan="1"></td> <option>address</option>
<td colspan="1"></td> <option>hack</option>
<td colspan="1"></td> <option>whisper</option>
<td colspan="1"></td> <option>perform</option>
</tr> <option>jam with</option>
<tr> <option>research</option>
<td colspan="1" data-index="5"><input type="radio" /></td> <option>gender</option>
<td colspan="1"></td> <option>build</option>
<td colspan="1"></td> <option>explore</option>
<td colspan="1"></td> <option>read</option>
<td colspan="1"></td> <option>write</option>
</tr> <option>transmit</option>
<tr> <option>receive</option>
<td colspan="1"></td> <option>improvise</option>
<td colspan="1" data-index="6"><input type="radio" /></td> <option>create</option>
<td colspan="1" data-index="7"><input type="radio" /></td> <option>print</option>
<td colspan="1" data-index="8"><input type="radio" /></td> <option>make</option>
<td colspan="1"></td> <option>queer</option>
</tr> </select>
</tbody> <select>
</table> <!-- how -->
</td> <option></option>
<td> <option>interactive stories</option>
<table border="0"> <option>tools</option>
<tbody> <option>stories</option>
<tr> <option>forms</option>
<td colspan="1"></td> <option>DIY electronics kits</option>
<td colspan="1"></td> <option>training programs</option>
<td colspan="1"><input type="radio" /></td> <option>letters</option>
<td colspan="1"></td> <option>spreadsheets</option>
<td colspan="1"></td> <option>conflicts</option>
</tr> <option>conversations</option>
<tr> <option>social shelves</option>
<td colspan="1"></td> <option>minor stories</option>
<td colspan="1"><input type="radio" /></td> <option>code documentation</option>
<td colspan="1"></td> <option>memes</option>
<td colspan="1"><input type="radio" /></td> <option>counter-action strategies</option>
<td colspan="1"></td> <option>first-aid kits</option>
</tr> <option>magical answers</option>
<tr> <option>books</option>
<td colspan="1"><input type="radio" /></td> <option>interviews</option>
<td colspan="1"><input type="radio" /></td> <option>protocols</option>
<td colspan="1"><input type="radio" /></td> <option>video games</option>
<td colspan="1"><input type="radio" /></td> <option>API's</option>
<td colspan="1"><input type="radio" /></td> <option>vernacular tools</option>
</tr> <option>backdoors</option>
<tr> <option>wikidata</option>
<td colspan="1"><input type="radio" /></td> <option>zines</option>
<td colspan="1"></td> <option>terminals</option>
<td colspan="1"></td> <option>printers</option>
<td colspan="1"></td> <option>pen plotters</option>
<td colspan="1"><input type="radio" /></td> </select>
</tr> at
<tr> <select>
<td colspan="1"><input type="radio" /></td> <!-- where -->
<td colspan="1"></td> <option></option>
<td colspan="1"></td> <option>publishing houses</option>
<td colspan="1"></td> <option>art collectives</option>
<td colspan="1"><input type="radio" /></td> <option>programming festivals</option>
</tr> <option>bookshops</option>
</tbody> <option>squats</option>
</table> <option>print workshops</option>
</td> <option>public benches</option>
<td> <option>libraries</option>
<!-- L --> <option>media labs</option>
<table border="0"> <option>telecom musea</option>
<tbody> <option>community radio stations</option>
<tr> <option>zine festivals</option>
<td colspan="1"><input type="radio" /></td> <option>workshops</option>
<td colspan="1"></td> <option>free software organisations</option>
<td colspan="1"></td> <option>experimental music nights</option>
<td colspan="1"></td> <option>plotter parties</option>
</tr> <option>breakfast clubs</option>
<tr> </select>
<td colspan="1"><input type="radio" /></td> ?
<td colspan="1"></td> </div>
<td colspan="1"></td> </div> <!-- #options -->
<td colspan="1"></td> </div> <!-- #dropdowns -->
</tr> <div id="info">
<tr> <p>
<td colspan="1"><input type="radio" /></td> A two-year master focused on the acts of making things public
<td colspan="1"></td> <br>
<td colspan="1"></td> and creating publics in the age of post-digital networks.
<td colspan="1"></td> </p>
</tr> <p>Application deadlines:</p>
<tr> <p>
<td colspan="1"><input type="radio" /></td> March 4, 2023 (non-EU + EU)<br>
<td colspan="1"></td> May 8, 2023 (EU)<br>
<td colspan="1"></td> <br>
<td colspan="1"></td> <a href="https://www.pzwart.nl/experimental-publishing/apply/"><button>Apply here!</button></a>
</tr> <br>
<tr> <br>
<td colspan="1"></td> </div> <!-- #info -->
<td colspan="1"><input type="radio" /></td> </fieldset>
<td colspan="1"><input type="radio" /></td> </form>
<td colspan="1"><input type="radio" /></td> <!-- <div align="center">
</tr> <marquee>
</tbody> <button>Apply!</button>
</table> </marquee>
</td> </div> -->
<td> <script>
<!-- L --> var options = document.getElementById("options");
<table border="0"> var questions = [
<tbody> "How can",
<tr> "When do",
<td colspan="1"><input type="radio" /></td> "Where can",
<td colspan="1"></td> "Why do",
<td colspan="1"></td> "How can",
<td colspan="1"></td> "When do",
</tr> "Where can",
<tr> "Why do",
<td colspan="1"><input type="radio" /></td> ];
<td colspan="1"></td> console.log(options);
<td colspan="1"></td> questions.forEach(function(question, i){
<td colspan="1"></td> var question_div = document.getElementById("question-div");
</tr> question_div.innerHTML = question;
<tr> console.log(question_div);
<td colspan="1"><input type="radio" /></td> var dropdown_options = document.getElementById("dropdown-options");
<td colspan="1"></td> console.log(dropdown_options);
<td colspan="1"></td> var dropdowns_div = document.getElementById("dropdowns");
<td colspan="1"></td> dropdowns_div.innerHTML += dropdown_options.innerHTML;
</tr> });
<tr>
<td colspan="1"><input type="radio" /></td> setInterval(dropping, 200);
<td colspan="1"></td> function dropping(){
<td colspan="1"></td> var dropdowns = document.querySelectorAll("select");
<td colspan="1"></td> var random = Math.floor(Math.random() * dropdowns.length);
</tr> var dropdown = dropdowns[random]
<tr> var random_option = Math.floor(Math.random() * dropdown.options.length);
<td colspan="1"></td> dropdown.selectedIndex = random_option;
<td colspan="1"><input type="radio" /></td> var color = pickcolor();
<td colspan="1"><input type="radio" /></td> var backgroundcolor = pickcolor();
<td colspan="1"><input type="radio" /></td> var font = pickfont();
</tr> dropdown.style.width = "auto";
</tbody> dropdown.style.color = color;
</table> // dropdown.style.backgroundColor = backgroundcolor;
</td> // dropdown.style.fontFamily = font;
<td> }
<!-- I --> function pickfont(){
<table border="0"> fonts = [
<tbody> // "https://project.xpub.nl/to-whom-it-may-affect/BBBBaskervvol-Base.woff",
<tr> "monospace",
<td colspan="1"></td> "sans-serif",
<td colspan="1"></td> "serif",
<td colspan="1"><input type="radio" /></td> "script",
<td colspan="1"></td> ];
<td colspan="1"></td> var random = Math.floor(Math.random() * fonts.length)
</tr> var font = fonts[random];
<tr> return font;
<td colspan="1"></td> }
<td colspan="1"></td> function pickcolor(){
<td colspan="1"><input type="radio" /></td> var colors = ["AliceBlue","AntiqueWhite","Aqua","Aquamarine","Azure","Beige","Bisque","Black","BlanchedAlmond","Blue","BlueViolet","Brown","BurlyWood","CadetBlue","Chartreuse","Chocolate","Coral","CornflowerBlue","Cornsilk","Crimson","Cyan","DarkBlue","DarkCyan","DarkGoldenRod","DarkGray","DarkGrey","DarkGreen","DarkKhaki","DarkMagenta","DarkOliveGreen","DarkOrange","DarkOrchid","DarkRed","DarkSalmon","DarkSeaGreen","DarkSlateBlue","DarkSlateGray","DarkSlateGrey","DarkTurquoise","DarkViolet","DeepPink","DeepSkyBlue","DimGray","DimGrey","DodgerBlue","FireBrick","FloralWhite","ForestGreen","Fuchsia","Gainsboro","GhostWhite","Gold","GoldenRod","Gray","Grey","Green","GreenYellow","HoneyDew","HotPink","IndianRed","Indigo","Ivory","Khaki","Lavender","LavenderBlush","LawnGreen","LemonChiffon","LightBlue","LightCoral","LightCyan","LightGoldenRodYellow","LightGray","LightGrey","LightGreen","LightPink","LightSalmon","LightSeaGreen","LightSkyBlue","LightSlateGray","LightSlateGrey","LightSteelBlue","LightYellow","Lime","LimeGreen","Linen","Magenta","Maroon","MediumAquaMarine","MediumBlue","MediumOrchid","MediumPurple","MediumSeaGreen","MediumSlateBlue","MediumSpringGreen","MediumTurquoise","MediumVioletRed","MidnightBlue","MintCream","MistyRose","Moccasin","NavajoWhite","Navy","OldLace","Olive","OliveDrab","Orange","OrangeRed","Orchid","PaleGoldenRod","PaleGreen","PaleTurquoise","PaleVioletRed","PapayaWhip","PeachPuff","Peru","Pink","Plum","PowderBlue","Purple","RebeccaPurple","Red","RosyBrown","RoyalBlue","SaddleBrown","Salmon","SandyBrown","SeaGreen","SeaShell","Sienna","Silver","SkyBlue","SlateBlue","SlateGray","SlateGrey","Snow","SpringGreen","SteelBlue","Tan","Teal","Thistle","Tomato","Turquoise","Violet","Wheat","White","WhiteSmoke","Yellow","YellowGreen"];
<td colspan="1"></td> // From: https://www.w3schools.com/colors/colors_names.asp
<td colspan="1"></td> var random = Math.floor(Math.random() * colors.length)
</tr> var color = colors[random];
<tr> return color;
<td colspan="1"></td> }
<td colspan="1"></td> pickcolor()
<td colspan="1"><input type="radio" /></td> </script>
<td colspan="1"></td>
<td colspan="1"></td>
</tr>
<tr>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"></td>
<td colspan="1"></td>
</tr>
<tr>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"></td>
<td colspan="1"></td>
</tr>
</tbody>
</table>
</td>
<td>
<!-- N -->
<table border="0">
<tbody>
<tr>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"><input type="radio" /></td>
</tr>
<tr>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"><input type="radio" /></td>
</tr>
<tr>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"></td>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"></td>
<td colspan="1"><input type="radio" /></td>
</tr>
<tr>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"><input type="radio" /></td>
</tr>
<tr>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"><input type="radio" /></td>
</tr>
</tbody>
</table>
</td>
<td>
<!-- G -->
<table border="0">
<tbody>
<tr>
<td colspan="1"></td>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"></td>
</tr>
<tr>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"></td>
</tr>
<tr>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"></td>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"><input type="radio" /></td>
</tr>
<tr>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"><input type="radio" /></td>
</tr>
<tr>
<td colspan="1"></td>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"><input type="radio" /></td>
<td colspan="1"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<br>
<fieldset>
<legend>all</legend>
<label><input type="checkbox" name="checkbox" value="no" />feminist technologies</label>
<label><input type="checkbox" name="checkbox" value="no" />DIY practices</label>
<label><input type="checkbox" name="checkbox" value="no" />post-free cultures</label>
<label><input type="checkbox" name="checkbox" value="no" />homebrew servers</label>
<label><input type="checkbox" name="checkbox" value="no" />bootleg librians</label>
<label><input type="checkbox" name="checkbox" value="no" />art collectives</label>
</fieldset>
<fieldset>
<legend>exploring</legend>
<label><input type="checkbox" name="checkbox" value="yes" />pen plotters</label>
<label><input type="checkbox" name="checkbox" value="no" />dot matrix printers</label>
<label><input type="checkbox" name="checkbox" value="no" />scanners</label>
<label><input type="checkbox" name="checkbox" value="no" />typewriters</label>
<label><input type="checkbox" name="checkbox" value="no" />collective servers</label>
<label><input type="checkbox" name="checkbox" value="no" />video games</label>
<label><input type="checkbox" name="checkbox" value="no" />python scripts</label>
<label><input type="checkbox" name="checkbox" value="no" />HTML pages</label>
<label><input type="checkbox" name="checkbox" value="no" />CSS stylesheets</label>
<label><input type="checkbox" name="checkbox" value="no" />browsers</label>
<label><input type="checkbox" name="checkbox" value="no" />post-free culture licenses</label>
<label><input type="checkbox" name="checkbox" value="yes" />radio shows</label>
<label><input type="checkbox" name="checkbox" value="no" />scripts</label>
<label><input type="checkbox" name="checkbox" value="no" />wiki's</label>
<label><input type="checkbox" name="checkbox" value="no" />digital gardens</label>
<label><input type="checkbox" name="checkbox" value="no" />gemini blogs</label>
<label><input type="checkbox" name="checkbox" value="no" />archives</label>
<label><input type="checkbox" name="checkbox" value="no" />protocols</label>
<label><input type="checkbox" name="checkbox" value="no" />non-linear narratives</label>
<label><input type="checkbox" name="checkbox" value="no" />hypertext adventures</label>
<label><input type="checkbox" name="checkbox" value="no" />software studies</label>
<label><input type="checkbox" name="checkbox" value="no" />manuals</label>
<label><input type="checkbox" name="checkbox" value="no" />zines</label>
<label><input type="checkbox" name="checkbox" value="no" />guides</label>
<label><input type="checkbox" name="checkbox" value="no" />text adventures</label>
<label><input type="checkbox" name="checkbox" value="no" />servers</label>
</fieldset>
<fieldset>
<legend>at</legend>
<label><input type="checkbox" name="checkbox" value="no" />experimental music nights</label>
<label><input type="checkbox" name="checkbox" value="no" />collective learning gatherings</label>
<label><input type="checkbox" name="checkbox" value="no" />print parties</label>
<label><input type="checkbox" name="checkbox" value="no" />zine festivals</label>
<label><input type="checkbox" name="checkbox" value="no" />printshops</label>
<label><input type="checkbox" name="checkbox" value="no" />community art venues</label>
<label><input type="checkbox" name="checkbox" value="no" />squats</label>
<label><input type="checkbox" name="checkbox" value="no" />hacker spaces</label>
<label><input type="checkbox" name="checkbox" value="no" />libraries</label>
<label><input type="checkbox" name="checkbox" value="no" />game nights</label>
<label><input type="checkbox" name="checkbox" value="no" />algoraves</label>
<label><input type="checkbox" name="checkbox" value="no" />booksprints</label>
<label><input type="checkbox" name="checkbox" value="no" />edit-a-thons</label>
</fieldset>
<fieldset>
<legend>?</legend>
</fieldset>
<br>
<br>
<div>
How can
<select id="simple" name="simple">
<option>feminist technologies</option>
<option>art collectives</option>
<option>DIY practitioners</option>
</select>
<select id="simple" name="simple">
<option>explore</option>
<option>study</option>
<option>critique</option>
</select>
<select id="simple" name="simple">
<option>pen plotters</option>
<option>zines</option>
<option>python scripts</option>
</select>
at
<select id="simple" name="simple">
<option>zine festivals</option>
<option>squats</option>
<option>game nights</option>
</select>
?
<br>
<br>
</div>
<div class="question">
When do
<select id="simple" name="simple">
<option>feminist technologies</option>
<option>art collectives</option>
<option>DIY practitioners</option>
</select>
<select id="simple" name="simple">
<option>explore</option>
<option>study</option>
<option>critique</option>
</select>
<select id="simple" name="simple">
<option>pen plotters</option>
<option>zines</option>
<option>python scripts</option>
</select>
at
<select id="simple" name="simple">
<option>zine festivals</option>
<option>squats</option>
<option>game nights</option>
</select>
?
<br>
<br>
</div>
<div class="question">
Since when did
<select id="simple" name="simple">
<option>feminist technologies</option>
<option>art collectives</option>
<option>DIY practitioners</option>
</select>
<select id="simple" name="simple">
<option>explore</option>
<option>study</option>
<option>critique</option>
</select>
<select id="simple" name="simple">
<option>pen plotters</option>
<option>zines</option>
<option>python scripts</option>
</select>
at
<select id="simple" name="simple">
<option>zine festivals</option>
<option>squats</option>
<option>game nights</option>
</select>
?
<br>
<br>
</div>
<div class="question">
For whom do
<select id="simple" name="simple">
<option>feminist technologies</option>
<option>art collectives</option>
<option>DIY practitioners</option>
</select>
<select id="simple" name="simple">
<option>explore</option>
<option>study</option>
<option>critique</option>
</select>
<select id="simple" name="simple">
<option>pen plotters</option>
<option>zines</option>
<option>python scripts</option>
</select>
at
<select id="simple" name="simple">
<option>zine festivals</option>
<option>squats</option>
<option>game nights</option>
</select>
?
<br>
<br>
</div>
<div class="question">
Why did
<select id="simple" name="simple">
<option>feminist technologies</option>
<option>art collectives</option>
<option>DIY practitioners</option>
</select>
<select id="simple" name="simple">
<option>explore</option>
<option>study</option>
<option>critique</option>
</select>
<select id="simple" name="simple">
<option>pen plotters</option>
<option>zines</option>
<option>python scripts</option>
</select>
at
<select id="simple" name="simple">
<option>zine festivals</option>
<option>squats</option>
<option>game nights</option>
</select>
?
<br>
<br>
</div>
<div class="question">
Can
<select id="simple" name="simple">
<option>feminist technologies</option>
<option>art collectives</option>
<option>DIY practitioners</option>
</select>
<select id="simple" name="simple">
<option>explore</option>
<option>study</option>
<option>critique</option>
</select>
<select id="simple" name="simple">
<option>pen plotters</option>
<option>zines</option>
<option>python scripts</option>
</select>
at
<select id="simple" name="simple">
<option>zine festivals</option>
<option>squats</option>
<option>game nights</option>
</select>
?
<br>
<br>
</div>
<br>
<div align="center">
<marquee>
<button>Apply!</button>
</marquee>
</div>
</form>
<script>
setInterval(dropping, 100);
function dropping(){
var dropdowns = document.querySelectorAll("select");
var random = Math.floor(Math.random() * dropdowns.length);
var dropdown = dropdowns[random]
var random_option = Math.floor(Math.random() * dropdown.options.length);
console.log("random_option", random_option);
dropdown.selectedIndex = random_option;
}
setInterval(checking, 100);
function checking(){
var checkboxes = document.querySelectorAll("input[name=checkbox]");
console.log(checkboxes.length);
var random = Math.floor(Math.random() * checkboxes.length)
console.log(random);
checkboxes[random].checked = true;
var random = Math.floor(Math.random() * checkboxes.length)
checkboxes[random].checked = false;
}
</script>
</body> </body>
</html> </html>

Write Preview
Loading…
Cancel
Save