diff --git a/questions/fonts/EBGaramond12-Regular.ttf b/questions/fonts/EBGaramond12-Regular.ttf new file mode 100755 index 0000000..d00050e Binary files /dev/null and b/questions/fonts/EBGaramond12-Regular.ttf differ diff --git a/questions/fonts/Poppins-Regular.ttf b/questions/fonts/Poppins-Regular.ttf new file mode 100755 index 0000000..9f0c71b Binary files /dev/null and b/questions/fonts/Poppins-Regular.ttf differ diff --git a/questions/fonts/YoungSerif-Regular.otf b/questions/fonts/YoungSerif-Regular.otf new file mode 100755 index 0000000..521666a Binary files /dev/null and b/questions/fonts/YoungSerif-Regular.otf differ diff --git a/questions/fonts/whois-mono.ttf b/questions/fonts/whois-mono.ttf new file mode 100755 index 0000000..cd63c14 Binary files /dev/null and b/questions/fonts/whois-mono.ttf differ diff --git a/questions/index.html b/questions/index.html new file mode 100755 index 0000000..9b85b69 --- /dev/null +++ b/questions/index.html @@ -0,0 +1,189 @@ + + + + + + + + + + + + + +
+ +
+ +
+
+ + +
    +
  • > Bird sounds, description and information related to each bird, interviews of inhabitants.
    • +
  • > The research will mostly be produced in audio format.
    • +
+
+
+ +
+
+ + +
    +
  • > As an act of pedagogy on local fauna
    • +
  • > To promote awareness on the preservation of bird species.
    • +
  • > To create a first archive for the future of current sound maps of the city
    • +
  • > To motivate the construction of sound imaginaries beyond the visual
    • +
+
+
+ +
+ + + + +
+ +
+
+ Questions of Publishing +
+ +
+ +
+ +
+ +
+ +
+
+ + +

Does it have a title?

+
+
+ +
+
+ + +

A collective of biologists, artists and researchers, interested into how bird species are disappearing in the neighbour La candelaria in Bogota has the idea to make a sound archive of the species that are inhabiting the area. As a starting point, they have a general old sound archive from Bogotá made by an ornithologist scientist in early 2000's. Theirs plans so far are to do area recognition and record new material. First to record species that are not part of the archive and additionally to make interviews to the inhabitants who has memories of the missing species.

+
+
+ +
+
+ + +

They got a small grant from the municipality that let them produce a final product in a period of 3 months.

+
+
+ +
+
+ + +
    +
  • > Principally for neighbours' inhabitants: families that lives there and continuously may relate with those bird sounds.
    • +
+
+
+ +
+ + + + + +
+ + +
+

Why the preservation of a specie is connected with the local circumstances?+

+
+ +
+

How can audio formats be pedagogical?+

+
+ +
+

What is the content of a map?+

+
+ +
+

How a website could circulate in a little shop?+

+
+
+

What would be a local map?+

+
+
+

How can this research connect with other initiatives in the neighbourhood?+

+
+
+

What does preservation relate with audio recordings?+

+
+ + + + + + + \ No newline at end of file diff --git a/questions/index.js b/questions/index.js new file mode 100755 index 0000000..da6817b --- /dev/null +++ b/questions/index.js @@ -0,0 +1,150 @@ +//project tiltle-->project description +const element = document.querySelector("#project_title"); +element.addEventListener("click", show_title, false); + +function next_delay(){ + document.getElementById("project_des").style.display = "block"; + document.querySelector("#project_des p").style.display = "none"; +} + +function show_title() { + document.getElementById("proj_title_input").style.display = "block"; + setTimeout(next_delay, 2000); + localStorage.clear(); +} + +//project description-->project budget +const element2 = document.querySelector("#project_des"); +element2.addEventListener("click", show_des, false); + +function next_delay2(){ + document.getElementById("project_budg").style.display = "block"; + document.querySelector("#project_budg p").style.display = "none"; +} + +function show_des() { + document.getElementById("proj_des_input").style.display = "block"; + setTimeout(next_delay2, 2000); +} + +//project budget-->what +const element3 = document.querySelector("#project_budg"); +element3.addEventListener("click", show_budg, false); + +function next_delay3(){ + document.getElementById("project_what").style.display = "block"; + document.querySelector("#project_what ul").style.display = "none"; +} + +function show_budg() { + document.getElementById("proj_budg_input").style.display = "block"; + setTimeout(next_delay3, 2000); +} + +//project what-->why +const element4 = document.querySelector("#project_what"); +element4.addEventListener("click", show_what, false); + +function next_delay4(){ + document.getElementById("project_why").style.display = "block"; + document.querySelector("#project_why ul").style.display = "none"; +} + +function show_what() { + document.getElementById("proj_what_input").style.display = "block"; + setTimeout(next_delay4, 2000); +} + +//project why-->how +const element5 = document.querySelector("#project_why"); +element5.addEventListener("click", show_why, false); + +function next_delay5(){ + document.getElementById("project_how").style.display = "block"; + document.querySelector("#project_how ul").style.display = "none"; +} + +function show_why() { + document.getElementById("proj_why_input").style.display = "block"; + setTimeout(next_delay5, 2000); +} + +//project how-->where +const element6 = document.querySelector("#project_how"); +element6.addEventListener("click", show_how, false); + +function next_delay6(){ + document.getElementById("project_where").style.display = "block"; + document.querySelector("#project_where ul").style.display = "none"; +} + +function show_how() { + document.getElementById("proj_how_input").style.display = "block"; + setTimeout(next_delay6, 2000); +} + +//project where-->whom +const element7 = document.querySelector("#project_where"); +element7.addEventListener("click", show_where, false); + +function next_delay7(){ + document.getElementById("project_whom").style.display = "block"; + document.querySelector("#project_whom ul").style.display = "none"; +} + +function show_where() { + document.getElementById("proj_where_input").style.display = "block"; + setTimeout(next_delay7, 2000); +} + +//project whom + diff btn +const element8 = document.querySelector("#project_whom"); +element8.addEventListener("click", show_whom, false); + +function next_delay8(){ + document.getElementById("diff").style.display = "block"; +} + +function show_whom() { + document.getElementById("proj_whom_input").style.display = "block"; + setTimeout(next_delay8, 2000); +} + + +//Pop Up +function popup(){ + document.getElementById("popup").style.visibility = "visible"; +} + +function popup_close(){ + document.getElementById("popup").style.visibility = "hidden"; +} + +//Diffraction pop_ups +function next_no_1(){ + document.getElementById("no_1").style.visibility = "visible"; +} + +function next_no_2(){ + document.getElementById("no_2").style.visibility = "visible"; +} + +function next_no_3(){ + document.getElementById("no_3").style.visibility = "visible"; +} + +function next_no_4(){ + document.getElementById("no_4").style.visibility = "visible"; +} + +function next_no_5(){ + document.getElementById("no_5").style.visibility = "visible"; +} + +function next_no_6(){ + document.getElementById("no_6").style.visibility = "visible"; +} + +function next_no_7(){ + document.getElementById("no_7").style.visibility = "visible"; +} diff --git a/questions/style.css b/questions/style.css new file mode 100755 index 0000000..c014010 --- /dev/null +++ b/questions/style.css @@ -0,0 +1,288 @@ +@font-face { + font-family:"whois-mono"; + src: url("fonts/whois-mono.ttf"); +} + +body{ + max-height: 100vh; +} + +.questions{ + position: absolute; + display: flex; + flex-direction: row; + margin: 0; +} + +#popup { + position: absolute; + display: inline-block; + cursor: pointer; + z-index: 4; + visibility: hidden; + width: 50vw; + background-color: white; + font-family: whois-mono; + margin-left: 25%; + margin-top: 10%; + padding: 2.5% 3% 2.5% 3%; + border: solid 1px black; +} + +#popup b{ + color: blue; +} + +#popup p{ + text-decoration: underline; +} + +/*diffraction popups*/ +.diff{ + position:absolute; + z-index: 3; + font-family: whois-mono; + background-color: #F7FFC7; + border: solid 1px black; + padding: 5px 15px 10px 15px; + visibility: hidden; +} + +.diff p{ + margin: 0; +} + +#no_1{ + margin-left: 38%; + margin-top: 40%; +} + +#no_2{ + margin-left: 18%; + margin-top: 28%; +} + +#no_3{ + margin-left: 80%; + margin-top: 50%; +} + +#no_4{ + margin-left: 12%; + margin-top: 3%; +} + +#no_5{ + margin-left: 70%; + margin-top: 10%; +} + +#no_6{ + margin-left: 27%; + margin-top: 20%; +} + +#no_7{ + margin-left: 17%; + margin-top: 50%; +} + +.plus{ + font-size: 1.5em; + padding: 0 0 0 10px; + cursor: pointer; + color:blue; +} + + +.cell{ + border-bottom: 1px solid black; + padding: 5%; + max-width: 100%; + font-family: whois-mono; + font-size: 1em; + +} + +#middle{ + min-width: 40vw; + border-left: 1px solid black; + border-right: 1px solid black; +} + +#left{ + min-width: 30vw; + display: flex; + flex-direction: column; +} + +#right{ + min-width: 30vw; + display: flex; + flex-direction: column; +} + +.container{ + min-height: 100vh; +} + +/* start_middle*/ +#title{ + text-align: center; + max-width: 100%; + margin: auto; + /* padding-top: 3vh; + padding-bottom: 3vh; */ + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + position: relative; + +} + +#title_text{ + width: 100%; + text-align: center; + justify-content: center; +} + +#info_icon{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 10px; + gap: 10px; + position: relative; + width: 15px; + height: 15px; + /* background: grey; */ + border-radius: 100px; + cursor: pointer; +} + +#info_icon:hover{ + background-color: #F7FFC7; +} + + + +/*ref_diff_buttons*/ + +#ref_diff{ + width: 100%; + display: flex; + padding: 0; +} + +#ref_diff button{ + width: 50%; + margin: 0; + /* background-color: transparent; */ + border: none; + font-family: whois-mono; + padding: 5%; + flex-direction: row; + /* text-align: left; */ + font-size: 1em; +} + +#diff{ + display: none; + box-shadow: 0px 0px 10px rgb(151, 11, 238); + background-color: #F7FFC7; + cursor: pointer; +} + +#diff:hover{ + background-color: #F0FE98; +} + +#ref{ + background-color: transparent; +} + +.separator{ + background-color: black; + width: 1px; + min-height: 100%; +} + +#project_title form{ + display: flex; + flex-direction: row; +} + +#proj_title_input{ + margin: 0; + padding-left: 3%; +} + +li{ + list-style-type: none; + padding-bottom: 5%; +} + +.half{ + height: 50%; +} + +#project_title{ + cursor: pointer; +} + +label{ + cursor: pointer; +} + +label:hover{ + color: blue; +} + +/* Javascript */ +#proj_title_input{ + display: none; +} + +#project_des_input{ + display: none; +} + +#project_des{ + display: none; +} + +#project_budg{ + display: none; +} + +#project_budg{ + display: none; +} + +#project_whom{ + display: none; + border-bottom: none; +} + +#project_what{ + display: none; +} + +#project_why{ + display: none; +} + +#project_how{ + display: none; +} + +#project_where{ + display: none; +} + + + + +