master
*anna* 3 years ago
parent 5d143f6668
commit 0f5eb13727

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 486 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 104 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 99 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

@ -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;
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);
}

@ -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();
});
/*

Loading…
Cancel
Save