dropdown sketch added

master
mb 1 year ago
parent 64b37057dc
commit 2ec807c8ea

@ -6,67 +6,558 @@
</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"><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"></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>
<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>
<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>Media?</legend>
<label><input type="checkbox" name="checkbox" value="yes" />radio</label>
<label><input type="checkbox" name="checkbox" value="no" />print</label>
<label><input type="checkbox" name="checkbox" value="no" />protocol</label>
<label><input type="checkbox" name="checkbox" value="no" />code</label>
<label><input type="checkbox" name="checkbox" value="no" />web</label>
<label><input type="checkbox" name="checkbox" value="no" />digital garden</label>
<label><input type="checkbox" name="checkbox" value="no" />gemini blog</label>
<label><input type="checkbox" name="checkbox" value="no" />archive</label>
<label><input type="checkbox" name="checkbox" value="no" />non-linear narratives</label>
<label><input type="checkbox" name="checkbox" value="no" />hypertext</label>
<label><input type="checkbox" name="checkbox" value="no" />software</label>
<label><input type="checkbox" name="checkbox" value="no" />documentation</label>
<label><input type="checkbox" name="checkbox" value="no" />zine</label>
<label><input type="checkbox" name="checkbox" value="no" />manual</label>
<label><input type="checkbox" name="checkbox" value="no" />guide</label>
<label><input type="checkbox" name="checkbox" value="no" />text adventure</label>
<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>
</form>
<form method="post">
<fieldset>
<legend>Tools?</legend>
<label><input type="checkbox" name="checkbox" value="yes" />pen plotter</label>
<label><input type="checkbox" name="checkbox" value="no" />dot matrix printer</label>
<label><input type="checkbox" name="checkbox" value="no" />typewriter</label>
<label><input type="checkbox" name="checkbox" value="no" />collective server</label>
<label><input type="checkbox" name="checkbox" value="no" />SSH</label>
<label><input type="checkbox" name="checkbox" value="no" />Python</label>
<label><input type="checkbox" name="checkbox" value="no" />HTML</label>
<label><input type="checkbox" name="checkbox" value="no" />CSS</label>
<label><input type="checkbox" name="checkbox" value="no" />Weasyprint</label>
<label><input type="checkbox" name="checkbox" value="no" />Paged.js</label>
<label><input type="checkbox" name="checkbox" value="no" />browser</label>
<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>
</form>
<form method="post">
<fieldset>
<legend>Context?</legend>
<label><input type="checkbox" name="checkbox" value="yes" />zine camp</label>
<label><input type="checkbox" name="checkbox" value="no" />experimental music night</label>
<label><input type="checkbox" name="checkbox" value="no" />collective learning gathering</label>
<label><input type="checkbox" name="checkbox" value="no" />F/LOSS graphic design</label>
<label><input type="checkbox" name="checkbox" value="no" />AMRO festival</label>
<label><input type="checkbox" name="checkbox" value="no" />community art venue</label>
<label><input type="checkbox" name="checkbox" value="no" />squat</label>
<label><input type="checkbox" name="checkbox" value="no" />Leeszaal West</label>
<label><input type="checkbox" name="checkbox" value="no" />algorave</label>
<label><input type="checkbox" name="checkbox" value="no" />booksprint</label>
<label><input type="checkbox" name="checkbox" value="no" /></label>
<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");
var checkboxes = document.querySelectorAll("input[name=checkbox]");
console.log(checkboxes.length);
var random = Math.floor(Math.random() * checkboxes.length)
console.log(random);

Loading…
Cancel
Save