intro

3 years ago · 0f5eb13727
parent 5d143f6668
commit 0f5eb13727
23 changed files with 98 additions and 66 deletions
--- a/tree/final.html
+++ b/tree/final.html
@ -94,7 +94,7 @@ This might be a bit of a shock for you <span id="player_name"></span> (<span id=
    </div>
    <div class="mid_text">
        Maybe, despite everything that you had been through, you realised that you had to enter in a phase of a different kind. You made a step for yourself but what about the others? What can you do with your achievements if they cannot be translated for the outer world?
-        To survive the impact with it is not an easy task but you decided to come back home and share your journey. 
+        To survive the impact with it is not an easy task. 
    </div>
    <div class="quote">
--- a/tree/imgs/avatars/amanda.gif
+++ b/tree/imgs/avatars/amanda.gif
--- a/tree/imgs/avatars/ball.gif
+++ b/tree/imgs/avatars/ball.gif
--- a/tree/imgs/avatars/fantasy.gif
+++ b/tree/imgs/avatars/fantasy.gif
--- a/tree/imgs/avatars/fiction.gif
+++ b/tree/imgs/avatars/fiction.gif
--- a/tree/imgs/avatars/fighter1.gif
+++ b/tree/imgs/avatars/fighter1.gif
--- a/tree/imgs/avatars/fire.gif
+++ b/tree/imgs/avatars/fire.gif
--- a/tree/imgs/avatars/game.gif
+++ b/tree/imgs/avatars/game.gif
--- a/tree/imgs/avatars/glass.gif
+++ b/tree/imgs/avatars/glass.gif
--- a/tree/imgs/avatars/hero.gif
+++ b/tree/imgs/avatars/hero.gif
--- a/tree/imgs/avatars/hero2.gif
+++ b/tree/imgs/avatars/hero2.gif
--- a/tree/imgs/avatars/hero3.gif
+++ b/tree/imgs/avatars/hero3.gif
--- a/tree/imgs/avatars/horse.gif
+++ b/tree/imgs/avatars/horse.gif
--- a/tree/imgs/avatars/journey2.gif
+++ b/tree/imgs/avatars/journey2.gif
--- a/tree/imgs/avatars/oracle.gif
+++ b/tree/imgs/avatars/oracle.gif
--- a/tree/imgs/avatars/parrot.gif
+++ b/tree/imgs/avatars/parrot.gif
--- a/tree/imgs/avatars/rept.gif
+++ b/tree/imgs/avatars/rept.gif
--- a/tree/imgs/avatars/sad.gif
+++ b/tree/imgs/avatars/sad.gif
--- a/tree/imgs/avatars/sleep.gif
+++ b/tree/imgs/avatars/sleep.gif
--- a/tree/imgs/avatars/tree.gif
+++ b/tree/imgs/avatars/tree.gif
--- a/tree/imgs/avatars/walk.gif
+++ b/tree/imgs/avatars/walk.gif
--- a/tree/index.css
+++ b/tree/index.css
@ -43,50 +43,10 @@ body{
  }
 #info_text::-moz-selection { /* Code for Firefox */   
    background-color: white;
    color:black;
  }
 #info_text::selection {
    background-color: white;
    color:black;
  }
 #info_button{
    left:4%;
    position: fixed;
    font-size: 4vw;
    color:#c94dff ;
    z-index: 5;
    cursor: pointer;
 }
 .blur_background {
    filter: blur(2px);
 }
 #info_text{
    position: fixed;
    font-size: 1.5vw;
    line-height: initial;
    z-index: 10;
    color:#c94dff ;
    font-family: jolyregular;
    background-color: white;
    top:20%;
    right:20%;
    left:20%;
    padding: 20px;
    border:1px #c94dff solid;
    -webkit-box-shadow: 10px 10px 0px 0px #c94dff ;
    -moz-box-shadow: 10px 10px 0px 0px #c94dff ;
    box-shadow: 10px 10px 0px 0px #c94dff;
 }
 a {
    color:#c94dff ;  
 }
 .title{
    font-family: jolybolditalic; 
 }
@ -94,6 +54,9 @@ a {
 span.special1{
    font-family: jolybolditalic;
 }
 span.special2{
    font-family: jolyregularitalic;
 }
 form {
    display: inline;
@ -106,7 +69,7 @@ input#player_name {
 -webkit-appearance: none;
 border: 0px transparent solid;
 border-radius: 25vw;
-font-size: 4vw; 
+font-size: 3.5vw; 
 color: black;
 font-family: jolybolditalic;
 text-align: center;
@ -117,24 +80,24 @@ box-shadow: 0px 0px 8px 8px   	 #d166ff;
 }
 button {
    -webkit-appearance: none;
    background-color: white;
-    border: 0.25vw black solid;
+    border: 0.2vw black solid;
-    border-radius: 25vw;
+    border-radius: 20vw;
    font-family: jolybolditalic;
    color:black;
    cursor:pointer;
    font-size: 4vw;
    padding-bottom:0.5vw;
 }
 button:hover {
-    border: 0.25vw   	 #d166ff solid;
+    border: 0.2vw #d166ff solid;
-    color: 	 #d166ff;
+    color: #d166ff;
 }
 span.button_text{
-    padding:1.2vw;
+    padding:1vw;
    font-size: 4.5vw;
 }
@ -142,7 +105,7 @@ div.line {
    display: inline-block;
    border-top: 0.3vw solid black;
    padding-bottom: 20px;
-    width: 20vw;
+    width: 15vw;
    transform: rotate(4deg);
 }
--- a/tree/index.html
+++ b/tree/index.html
@ -9,19 +9,35 @@
 </head>
 <body>
-   <span id="info_button" >ⓘ</span>
+
-   <div id="info_text" style="display: none;">
+   <div class="step1">
-       <span class="title">When you might go astray</span> is a research project dealing with conspiracy theories, fictional narratives, and how the mutuality between the two shapes the stories of their believers. 
+     <span class="special1"style="-webkit-padding-start: 15vw;">When you might go astray</span> <span class="special1">( <img src="imgs/avatars/tree.gif" height="65vw">, <img src="imgs/avatars/amanda.gif" height="65vw">, <img src="imgs/avatars/fire.gif" height="65vw"> )</span> 
-       The research starts from the following questions: how much of the pervasiveness of conspiracy theories is generated by their compliance to certain narrative schemes? What happens when the legitimate need to generate counter-narratives gets trapped in other kinds of templates?
+     is a research project exploring conspiracy fantasies <span class="special1">( <img src="imgs/avatars/ball2.gif" height="65vw"> , <img src="imgs/avatars/rept.gif" height="65vw"> , <img src="imgs/avatars/ball1.png" height="65vw"> )</span> and their entanglement with 
-       <br>
+     fictional narratives <span class="special2">( <img src="imgs/avatars/oracle.gif" height="65vw"> , <img src="imgs/avatars/fiction.gif" height="65vw"> , <img src="imgs/avatars/fantasy.gif" height="65vw"> )</span> transforming their believers into 
-       <span class="title">When you might go astray</span> deals with these questions by exploring the dangers of conspiracy theories and their entanglement with narrative schemes transforming their believers into heroes on a quest. <br>
+     heroes <span class="special2">( <img src="imgs/avatars/hero2.gif" height="65vw"> , <img src="imgs/avatars/fighter1.gif" height="65vw"> , <img src="imgs/avatars/hero3.gif" height="65vw"> )</span> on a quest.
-       The project is divided into two parts: a game, where the player is asked to undertake a journey, and an essay, examining conspiratorial narratives through the lenses of the mono-myth. 
+<br>
-       <br><br>
+   <div class="line"></div> Do you want to hear more about it? <button id="step1_yes"><span class="button_text"> yes </span></button><span class="special1"> / </span><button id="step1_no"><span class="button_text"> no </span></button>       
-       <span class="title">When you might go astray</span> has been developed by <a href="https://www.annasandri.com/" target="_blank">Anna Sandri</a> during her studies at the <a href="https://www.pzwart.nl/experimental-publishing/" target="_blank">Experimental Publishing</a> master course, Piet Zwart Institute (NL).
+</div>
   <div class="step1_2" style="display: none;">
      <button class="backto1">←</button><span style="-webkit-padding-start: 10vw;">I'm</span> afraid <span class="special1">( <img src="imgs/avatars/sad.gif" height="65vw"> )</span> I don't have much to make you stay here in this case.<br>
      <span style="-webkit-padding-start: 15vw;">Do</span> you maybe want to play a game <span class="special1">( <img src="imgs/avatars/game.gif" height="65vw"> )</span> ?  <button id="step1_2_yes"><span class="button_text"> yes </span></button><span class="special1"> / </span><button id="step1_2_no"><span class="button_text"> no </span></button>      
   </div>
   <div class="step2" style="display: none;">
      <button class="backto1">←</button><span class="special1"style="-webkit-padding-start: 10vw;">When you might go astray</span><span class="special1"> ( <img src="imgs/avatars/tree.gif" height="65vw">, <img src="imgs/avatars/amanda.gif" height="65vw">, <img src="imgs/avatars/fire.gif" height="65vw"> )</span> is divided into two parts: a <span class="special1">game ( <img src="imgs/avatars/game.gif" height="65vw"> )</span> where the <span class="special1"> player ( <img src="imgs/avatars/walk.gif" height="65vw"> )</span>, is asked to undertake a <span class="special1">journey ( <img src="imgs/avatars/horse.gif" height="65vw"> )</span>, and an <span class="special1"> essay ( <img src="imgs/avatars/fiction.gif" height="65vw">) </span>, examining conspiratorial narratives through the <span class="special1">lenses ( <img src="imgs/avatars/glass.gif" height="65vw"> )</span> of the mono-myth.<br> 
      <div class="line"></div> Do you want to play the game? <button id="step2_yes"><span class="button_text"> yes </span></button><span class="special1"> / </span><button id="step2_no"><span class="button_text"> no </span></button>
   </div>
   <div class="step2_1" style="display: none;">
      <button class="backto2">←</button><span class="special1"style="-webkit-padding-start: 10vw;">When you might go astray</span><span class="special1"> ( <img src="imgs/avatars/tree.gif" height="65vw">, <img src="imgs/avatars/amanda.gif" height="65vw">, <img src="imgs/avatars/fire.gif" height="65vw"> )</span> is divided into two parts: a <span class="special1">game ( <img src="imgs/avatars/game.gif" height="65vw"> )</span> where the <span class="special1"> player ( <img src="imgs/avatars/walk.gif" height="65vw"> )</span>, is asked to undertake a <span class="special1">journey ( <img src="imgs/avatars/horse.gif" height="65vw"> )</span>, and an <span class="special1"> essay ( <img src="imgs/avatars/fiction.gif" height="65vw">) </span>, examining conspiratorial narratives through the <span class="special1">lenses ( <img src="imgs/avatars/glass.gif" height="65vw"> )</span> of the mono-myth.<br> 
      <div class="line"></div> Do you want to read the essay? <button id="step2_1_yes"><span class="button_text"> yes </span></button><span class="special1"> / </span><button id="step2_1_no"><span class="button_text"> no </span></button>
   </div>
-    <div class="introtext">
+   <div class="step3" style="display: none;">
-        <span style="-webkit-padding-start: 15vw;">It</span> looks like you have been summoned by the  <span class="special1">oracle (<img src="imgs/avatars/ball1.png" height="60vw">,<img src="imgs/avatars/ball2.gif" height="60vw">,<img src="imgs/avatars/ball4.gif" height="60vw">)</span> 
+      <button class="backto2">←</button><span style="-webkit-padding-start: 10vw;">You</span> will be there soon, but before you need to know something. Along this <span class="special1"> journey ( <img src="imgs/avatars/horse.gif" height="65vw"> )</span> , someone who we will call the <span class="special1">oracle (<img src="imgs/avatars/ball1.png" height="60vw">,<img src="imgs/avatars/ball2.gif" height="60vw">,<img src="imgs/avatars/ball4.gif" height="60vw">)</span> will follow your steps. They won't bother you. You just have to wake them up <span class="special1">( <img src="imgs/avatars/sleep.gif" height="65vw"> )</span>.<br>
-        <div class="line"></div> you will be asked to start a journey: throughout it you will be called 
+      <div class="line"></div> Do you want to summon the game's oracle?<button id="step3_yes"><span class="button_text"> yes </span></button ><span class="special1"> / </span><button id="step3_no"><span class="button_text"> no </span></button>
   </div>
    <div class="step4" style="display: none;">
      <button class="backto3">←</button><span style="-webkit-padding-start: 10vw;">You</span> summoned the  <span class="special1">oracle (<img src="imgs/avatars/ball1.png" height="60vw">,<img src="imgs/avatars/ball2.gif" height="60vw">,<img src="imgs/avatars/ball4.gif" height="60vw">)</span> 
         . You are now ready to start a journey: throughout it you will be called 
    <form name="nameForm">
        <input id="player_name" type="text" >
    </form>
@ -113,7 +129,7 @@
     </span>
    </label>
-</form>   <div class="line3"></div> 
+</form>   <div class="line"></div> 
 you can press 
            <button id="gotostart" onclick="storeName()"><span class="button_text"> start </span></button>
@ -123,9 +139,62 @@ you can press
    <script src="jquery.min.js"></script>
 <script>
-$("#info_button").click( function () {
+$("#step1_yes").click( function () {
-   $("#info_text").toggle();
+   $(".step1").hide();
-   $("#info_button").toggleClass("blur_background");
+   $(".step2").show();
 });
 $("#step1_no").click( function () {
   $(".step1").hide();
   $(".step1_2").show();
 });
 $("#step1_2_yes").click( function () {
   $(".step1_2").hide();
   $(".step3").show();
 });
 $("#step1_2_no").click( function () {
   $(".step1_2").hide();
   $(".step1").show();
 });
 $("#step2_yes").click( function () {
   $(".step2").hide();
   $(".step3").show();
 });
 $("#step2_no").click( function () {
   $(".step2").hide();
   $(".step2_1").show();
 });
 $("#step2_1_yes").click( function () {
   $(".step2_1").hide();
   window.location.href = "thesis.html";
 });
 $("#step2_1_no").click( function () {
   $(".step2_1").hide();
   $(".step1").show();
 });
 $("#step3_yes").click( function () {
   $(".step3").hide();
   $(".step4").show();
 });
 $("#step3_no").click( function () {
   $(".step3").hide();
   $(".step1").show();
 });
 $(".backto1").click( function () {
   $(".step1_2, .step2").hide();
   $(".step1").show();
 });
 $(".backto2").click( function () {
   $(".step3, .step2_1").hide();
   $(".step2").show();
 });
 $(".backto3").click( function () {
   $(".step4").hide();
   $(".step3").show();
 });
 /*