info overlay

master
grgr 3 years ago
parent f67bbbf857
commit 302ff7b1f8

@ -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>

@ -57,17 +57,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

@ -18,6 +18,7 @@ body, html{
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;
@ -25,6 +26,9 @@ body, html{
border-radius: 50%; border-radius: 50%;
background-color: white; background-color: white;
} }
.btn:hover{
cursor: pointer;
}
.info{ .info{
display: none; display: none;
font-size: 3ch; font-size: 3ch;

Loading…
Cancel
Save