grgr
/
the-parliament
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Compare commits

base: grgr:f67bbbf8576740ae6c007dc20c15e8a43784204d
Branches Tags
grgr:master
...
compare: grgr:ce838c2ce308798c638cc9a850ba3eb178cf459f
Branches Tags
grgr:master

2 Commits
f67bbbf857 ... ce838c2ce3

Author SHA1 Message Date
grgr ce838c2ce3 serif 2 years ago
grgr 302ff7b1f8 info overlay 2 years ago
3 changed files with 36 additions and 16 deletions
Show Stats

3
index.html
Unescape Escape View File

@ -10,7 +10,7 @@
</head> </head>
<body> <body>
<h1>The Jingle Board Parliament</h1> <h1>The Jingle Board Parliament</h1>
<div class="btn" id="info-btn" value="hiding">?</div> <div class="btn" id="info-btn" >?</div>
<div class="info" id="info"> <div class="info" id="info">
<h2>SI18 - Weekly Release #4</h2> <h2>SI18 - Weekly Release #4</h2>
<p>The format of this week's release is a jingle board arranged in the layout of a parliament! Each seat is a button that plays an audio snippet when pressed. There is no linear or predefined outcome but the listener can create a unique parliament conference themselves. Therefore, the meaning of the audio contributions can be changed and recontextualised. The contributions include a range from self-made recordings, movie quotes, excerpts and re-enactments of political speeches, sound effects, audio snippets from well-known videos on the internet and covers of European anthems.</p> <p>The format of this week's release is a jingle board arranged in the layout of a parliament! Each seat is a button that plays an audio snippet when pressed. There is no linear or predefined outcome but the listener can create a unique parliament conference themselves. Therefore, the meaning of the audio contributions can be changed and recontextualised. The contributions include a range from self-made recordings, movie quotes, excerpts and re-enactments of political speeches, sound effects, audio snippets from well-known videos on the internet and covers of European anthems.</p>
@ -18,6 +18,7 @@
<dl> <dl>
<dt>Contribution by:</dt> <dt>Contribution by:</dt>
<dd>Supisara Burapachaisri, Kimberley Cosmilla, Francesco Luzzana, Miriam Schöb, Mitsa Chaida-Michelakou, Ål Nik (Alexandra Nikolova), Gersande Schellinx, Jian Haake, Emma Prato, Carmen, Erica Gargaglione</dd> <dd>Supisara Burapachaisri, Kimberley Cosmilla, Francesco Luzzana, Miriam Schöb, Mitsa Chaida-Michelakou, Ål Nik (Alexandra Nikolova), Gersande Schellinx, Jian Haake, Emma Prato, Carmen, Erica Gargaglione</dd>
<br>
<dt>Caretakers:</dt> <dt>Caretakers:</dt>
<dd>Erica Gargaglione, Miriam Schöb, Mitsa Chaida-Michelakou</dd> <dd>Erica Gargaglione, Miriam Schöb, Mitsa Chaida-Michelakou</dd>
</dl> </dl>

30
script.js
Unescape Escape View File

@ -36,16 +36,19 @@ function populateSeats(parliament) {
if (audio.paused) { if (audio.paused) {
audio.play(); audio.play();
mic.innerHTML="Pause"; mic.innerHTML="Pause";
mic.style.color ="red"; mic.style.color ="white";
mic.style.background = "red"
} else { } else {
audio.pause(); audio.pause();
mic.innerHTML="Talk" mic.innerHTML="Talk"
} }
}); });
audio.addEventListener("ended", () => { audio.addEventListener("ended", () => {
audio.pause(); audio.pause();
audio.currentTime = 0; audio.currentTime = 0;
mic.innerHTML = "Talk Again" mic.style.background = "white"
mic.style.color ="red";
}); });
}); });
party.appendChild(seat); party.appendChild(seat);
@ -57,17 +60,20 @@ function populateSeats(parliament) {
} }
// info // info
// btn.addEventListener("onclick", showInfo()) btn.addEventListener("click", showInfo)
// function showInfo(){
// if (btn.value == "hiding"){ function showInfo(){
// btn.innerHTML = "X"
// btn.value = "showing" if (info.style.display === "none"){
// } else { btn.innerHTML = "X";
// btn.innerHTML = "?" console.log("click");
// btn.value = "hiding" info.style.display = "block";
// } } else {
// } btn.innerHTML = "?";
info.style.display = "none";
}
}
/* /*
TODO TODO

19
style.css
Unescape Escape View File

@ -11,36 +11,48 @@ body, html{
margin: 0; margin: 0;
padding: 0; padding: 0;
color: var(--color1); color: var(--color1);
font-family: sans-serif;
} }
.btn{ .btn{
position: fixed; position: fixed;
z-index: 99; z-index: 99;
top: 16px; top: 16px;
left: 16px; left: 16px;
font-size: 36px; font-size: 36px;
font-family: sans-serif;
text-align: center; text-align: center;
border: solid 2px var(--color1); border: solid 2px var(--color1);
width: 48px; width: 48px;
height: 48px; height: 48px;
border-radius: 50%; border-radius: 50%;
background-color: white; background-color: white;
padding: 2px 0;
}
.btn:hover{
cursor: pointer;
} }
.info{ .info{
display: none; display: none;
font-size: 3ch; font-size: 2.5ch;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
z-index: 1; z-index: 1;
width: 40vw; width: 50vw;
height: 100vh; height: 100vh;
background-color: white; background-color: white;
border: solid 2px var(--color1); border: solid 2px var(--color1);
overflow: auto; overflow: auto;
padding-left: 16px;
} }
h2{ h2{
margin: 0; margin: 0;
margin-top: 96px; margin-top: 96px;
font-weight: normal;
}
dt {
font-style: italic;
} }
.hemicycle{ .hemicycle{
@ -93,4 +105,5 @@ h4{
.label{ .label{
width: 90px; width: 90px;
overflow-wrap: break-word; overflow-wrap: break-word;
font-size: 1.5ch;
} }

Write Preview
Loading…
Cancel
Save