pizzagate/tree/index.html

<!DOCTYPE html>
<html lang="en-US">
<head>
      <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <title>welcome</title>
    <link rel="icon" href="imgs/avatars/ball2.gif">
    <link rel="stylesheet" href="index.css">
    
</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>
    <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 
    <form name="nameForm">
        <input id="player_name" type="text" >
    </form>
  
     you can decide whether you are going to look like   
   <form id="avatar_form">
    
    <label class="radio" for="player1" >
        <span class="radio__input">  
            <input class="avatar"type="radio" id="player1" name="player_avatar" value="imgs/avatars/avatar1.gif" checked="checked" >
        <span class="radio__control"></span><img id="player_img_1" src="imgs/avatars/avatar1.gif" height="60vw">
        </span> 
    </label>
       ,
  <label class="radio" for="player2" >
    <span class="radio__input">
        <input class="avatar"type="radio" id="player2" name="player_avatar" value="imgs/avatars/avatar2.gif">
        <span class="radio__control"></span><img id="player_img_2" src="imgs/avatars/avatar2.gif" height="60vw">
    </span>
</label>
        ,
 <label class="radio" for="player3">
    <span class="radio__input">
     <input class="avatar"type="radio" id="player3" name="player_avatar" value="imgs/avatars/avatar3.gif">
     <span class="radio__control"></span><img id="player_img_3" src="imgs/avatars/avatar3.gif" height="60vw">
    </span> 
</label>
    ,
 <label class="radio" for="player4">
    <span class="radio__input">
     <input class="avatar"type="radio" id="player4" name="player_avatar" value="imgs/avatars/avatar4.gif">
     <span class="radio__control"></span><img id="player_img_4" src="imgs/avatars/avatar4.gif" height="60vw">
     </span>
</label>
 ,
 <label class="radio" for="player5">
    <span class="radio__input">
     <input class="avatar"type="radio" id="player5" name="player_avatar" value="imgs/avatars/avatar5.gif">
     <span class="radio__control"></span><img id="player_img_5" src="imgs/avatars/avatar5.gif" height="70vh">
        </span>
    </label>
 ,
 <label class="radio" for="player6">
    <span class="radio__input"> 
     <input class="avatar"type="radio" id="player6" name="player_avatar" value="imgs/avatars/avatar6.gif">
     <span class="radio__control"></span><img id="player_img_6" src="imgs/avatars/avatar6.gif" height="70vh">
        </span>
    </label>
 ,
 <label class="radio" for="player7"> 
    <span class="radio__input">
     <input class="avatar"type="radio" id="player7" name="player_avatar" value="imgs/avatars/avatar7.gif">
     <span class="radio__control"></span><img id="player_img_7" src="imgs/avatars/avatar7.gif" height="70vh">
        </span>
    </label>
 ,
 <label class="radio" for="player8"> 
    <span class="radio__input">
     <input class="avatar"type="radio" id="player8" name="player_avatar" value="imgs/avatars/avatar8.gif">
     <span class="radio__control"></span><img id="player_img_8" src="imgs/avatars/avatar8.gif" height="70vh">
        </span>
    </label>
 ,
 <label class="radio" for="player9"> 
    <span class="radio__input">
     <input class="avatar"type="radio" id="player9" name="player_avatar" value="imgs/avatars/avatar9.gif">
     <span class="radio__control"></span><img id="player_img_9" src="imgs/avatars/avatar9.gif" height="70vh">
    </span>
    </label>
 ,
 <label class="radio" for="player10"> 
    <span class="radio__input">
     <input class="avatar"type="radio" id="player10" name="player_avatar" value="imgs/avatars/avatar10.gif">
     <span class="radio__control"></span><img id="player_img_10" src="imgs/avatars/avatar10.gif" height="70vh">
        </span>
    </label>
 ,
 <label class="radio" for="player11"> 
    <span class="radio__input">
     <input class="avatar"type="radio" id="player11" name="player_avatar" value="imgs/avatars/avatar11.gif">
     <span class="radio__control"></span><img id="player_img_11" src="imgs/avatars/avatar11.gif" height="70vh">
        </span>
    </label>
 or like 
 <label class="radio"for="player12"> 
    <span class="radio__input">
     <input class="avatar"type="radio" id="player12" name="player_avatar" value="imgs/avatars/avatar12.gif">
     <span class="radio__control"></span><img id="player_img_12" src="imgs/avatars/avatar12.gif" height="70vh">
     </span>
    </label>

</form>   <div class="line3"></div> 

you can press 
            <button id="gotostart" onclick="storeName()"><span class="button_text"> start </span></button>
            when you are ready 
    </div>

    <script src="jquery.min.js"></script>
 <script>
    
$("#info_button").click( function () {
   $("#info_text").toggle();
   $("#info_button").toggleClass("blur_background");
 });

/*
   document.addEventListener("DOMContentLoaded", function () {
   window.localStorage.clear();
   console.log("loaded");
   updateAvatar(); 
   
});
*/

 </script>   
<script type="text/javascript" src="index.js" ></script>
    
</body>
tree 4 years ago			`<!DOCTYPE html>`
			`<html lang="en-US">`
			`<head>`
			`<meta charset="utf-8" />`
			`<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />`
scenario 4 years ago			`<title>welcome</title>`
news 4 years ago			`<link rel="icon" href="imgs/avatars/ball2.gif">`
tree 4 years ago			`<link rel="stylesheet" href="index.css">`

			`</head>`
			`<body>`
fin 4 years ago			`<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>`
entry 4 years ago			`<div class="introtext">`
ok 4 years ago			`<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`
input 4 years ago			`<form name="nameForm">`
news 4 years ago			`<input id="player_name" type="text" >`
			`</form>`
input 4 years ago
ok 4 years ago			`you can decide whether you are going to look like`
news 4 years ago			`<form id="avatar_form">`

			`<label class="radio" for="player1" >`
			`<span class="radio__input">`
			`<input class="avatar"type="radio" id="player1" name="player_avatar" value="imgs/avatars/avatar1.gif" checked="checked" >`
			`<span class="radio__control"></span><img id="player_img_1" src="imgs/avatars/avatar1.gif" height="60vw">`
			`</span>`
			`</label>`
new 4 years ago			`,`
news 4 years ago			`<label class="radio" for="player2" >`
			`<span class="radio__input">`
			`<input class="avatar"type="radio" id="player2" name="player_avatar" value="imgs/avatars/avatar2.gif">`
			`<span class="radio__control"></span><img id="player_img_2" src="imgs/avatars/avatar2.gif" height="60vw">`
			`</span>`
			`</label>`
new 4 years ago			`,`
news 4 years ago			`<label class="radio" for="player3">`
			`<span class="radio__input">`
			`<input class="avatar"type="radio" id="player3" name="player_avatar" value="imgs/avatars/avatar3.gif">`
			`<span class="radio__control"></span><img id="player_img_3" src="imgs/avatars/avatar3.gif" height="60vw">`
			`</span>`
			`</label>`
new 4 years ago			`,`
news 4 years ago			`<label class="radio" for="player4">`
			`<span class="radio__input">`
			`<input class="avatar"type="radio" id="player4" name="player_avatar" value="imgs/avatars/avatar4.gif">`
			`<span class="radio__control"></span><img id="player_img_4" src="imgs/avatars/avatar4.gif" height="60vw">`
			`</span>`
			`</label>`
new 4 years ago			`,`
news 4 years ago			`<label class="radio" for="player5">`
			`<span class="radio__input">`
			`<input class="avatar"type="radio" id="player5" name="player_avatar" value="imgs/avatars/avatar5.gif">`
huff 4 years ago			`<span class="radio__control"></span><img id="player_img_5" src="imgs/avatars/avatar5.gif" height="70vh">`
news 4 years ago			`</span>`
			`</label>`
new 4 years ago			`,`
news 4 years ago			`<label class="radio" for="player6">`
			`<span class="radio__input">`
			`<input class="avatar"type="radio" id="player6" name="player_avatar" value="imgs/avatars/avatar6.gif">`
huff 4 years ago			`<span class="radio__control"></span><img id="player_img_6" src="imgs/avatars/avatar6.gif" height="70vh">`
news 4 years ago			`</span>`
			`</label>`
new 4 years ago			`,`
news 4 years ago			`<label class="radio" for="player7">`
			`<span class="radio__input">`
			`<input class="avatar"type="radio" id="player7" name="player_avatar" value="imgs/avatars/avatar7.gif">`
huff 4 years ago			`<span class="radio__control"></span><img id="player_img_7" src="imgs/avatars/avatar7.gif" height="70vh">`
news 4 years ago			`</span>`
			`</label>`
new 4 years ago			`,`
news 4 years ago			`<label class="radio" for="player8">`
			`<span class="radio__input">`
			`<input class="avatar"type="radio" id="player8" name="player_avatar" value="imgs/avatars/avatar8.gif">`
huff 4 years ago			`<span class="radio__control"></span><img id="player_img_8" src="imgs/avatars/avatar8.gif" height="70vh">`
news 4 years ago			`</span>`
			`</label>`
new 4 years ago			`,`
news 4 years ago			`<label class="radio" for="player9">`
			`<span class="radio__input">`
			`<input class="avatar"type="radio" id="player9" name="player_avatar" value="imgs/avatars/avatar9.gif">`
huff 4 years ago			`<span class="radio__control"></span><img id="player_img_9" src="imgs/avatars/avatar9.gif" height="70vh">`
news 4 years ago			`</span>`
			`</label>`
new 4 years ago			`,`
news 4 years ago			`<label class="radio" for="player10">`
			`<span class="radio__input">`
			`<input class="avatar"type="radio" id="player10" name="player_avatar" value="imgs/avatars/avatar10.gif">`
huff 4 years ago			`<span class="radio__control"></span><img id="player_img_10" src="imgs/avatars/avatar10.gif" height="70vh">`
news 4 years ago			`</span>`
			`</label>`
new 4 years ago			`,`
news 4 years ago			`<label class="radio" for="player11">`
			`<span class="radio__input">`
			`<input class="avatar"type="radio" id="player11" name="player_avatar" value="imgs/avatars/avatar11.gif">`
huff 4 years ago			`<span class="radio__control"></span><img id="player_img_11" src="imgs/avatars/avatar11.gif" height="70vh">`
news 4 years ago			`</span>`
			`</label>`
new 4 years ago			`or like`
news 4 years ago			`<label class="radio"for="player12">`
			`<span class="radio__input">`
			`<input class="avatar"type="radio" id="player12" name="player_avatar" value="imgs/avatars/avatar12.gif">`
huff 4 years ago			`<span class="radio__control"></span><img id="player_img_12" src="imgs/avatars/avatar12.gif" height="70vh">`
news 4 years ago			`</span>`
			`</label>`

			`</form> <div class="line3"></div>`

ok 4 years ago			`you can press`
			`<button id="gotostart" onclick="storeName()"><span class="button_text"> start </span></button>`
			`when you are ready`
entry 4 years ago			`</div>`
input 4 years ago
fin 4 years ago			`<script src="jquery.min.js"></script>`
cancel 4 years ago			`<script>`
entry 4 years ago
fin 4 years ago			`$("#info_button").click( function () {`
			`$("#info_text").toggle();`
			`$("#info_button").toggleClass("blur_background");`
			`});`

local 4 years ago			`/*`
			`document.addEventListener("DOMContentLoaded", function () {`
			`window.localStorage.clear();`
			`console.log("loaded");`
			`updateAvatar();`

			`});`
fin 4 years ago			`*/`
cancel 4 years ago
			`</script>`
tree 4 years ago			`<script type="text/javascript" src="index.js" ></script>`

			`</body>`