You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
143 lines
6.6 KiB
HTML
143 lines
6.6 KiB
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> |