intro

4 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-radius: 25vw;
+    border: 0.2vw black solid;
+    border-radius: 20vw;
    font-family: jolybolditalic;
    color:black;
    cursor:pointer;
+    font-size: 4vw;
+    padding-bottom:0.5vw;
 }
 button:hover {
-    border: 0.25vw   	 #d166ff solid;
-    color: 	 #d166ff;
+    border: 0.2vw #d166ff solid;
+    color: #d166ff;
 }

 span.button_text{
-    padding:1.2vw;
-    font-size: 4.5vw;
+    padding:1vw;
 }


@ -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;">
-       <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. 
-       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?
-       <br>
-       <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>
-       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>
-       <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 class="step1">
+     <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> 
+     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 
+     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 
+     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.
+<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>       
+</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">
-        <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> 
-        <div class="line"></div> you will be asked to start a journey: throughout it you will be called 
+   <div class="step3" style="display: none;">
+      <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> 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 () {
-   $("#info_text").toggle();
-   $("#info_button").toggleClass("blur_background");
+$("#step1_yes").click( function () {
+   $(".step1").hide();
+   $(".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();
 });

 /*