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>

   <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="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>
  
     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="line"></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>
    
$("#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();
 });

/*
   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>`
intro 4 years ago
			`<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>`
fin 4 years ago			`</div>`
intro 4 years ago			`<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`
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>`

intro 4 years ago			`</form> <div class="line"></div>`
news 4 years ago
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
intro 4 years ago			`$("#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();`
fin 4 years ago			`});`

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>`