|
|
<!--
|
|
|
//////////////////////////////////////////////////////////////////
|
|
|
W h e n y o u m i g h t g o a s t r a y
|
|
|
---- ----
|
|
|
by Anna Sandri
|
|
|
//////////////////////////////////////////////////////////////////
|
|
|
* C R E D I T S *
|
|
|
---f o n t s---
|
|
|
Joly | Designed by Léon Hugues | Blaze Type
|
|
|
Sinistre | Designed by Jules Durand | Collletttivo
|
|
|
|
|
|
---s o u n d---
|
|
|
* S: Final_Boss_Battle.wav by MATRIXXX_ | License: Attribution
|
|
|
* S: battle-march action loop by haydensayshi123 | License: Creative Commons 0
|
|
|
* S: water_flows_over_rock.wav by volivieri | License: Attribution
|
|
|
* S: Alien x.wav by Jace | License: Attribution
|
|
|
* S: Magic disappearing/appearing by Tetoszka | License: Creative Commons 0
|
|
|
* S: Laser Shot Silenced by bubaproducer | License: Attribution
|
|
|
* S: Scary & Suspense by tyops | License: Attribution
|
|
|
* S: Danger is Near (01) by NightWolfCFM | License: Attribution
|
|
|
* S: smoke.wav by ilame | License: Attribution
|
|
|
* S: Chicken Single Alarm Call by Rudmer_Rotteveel | License: Creative Commons 0
|
|
|
* S: RAAAAAAAAAW!!!.wav by Reitanna | License: Creative Commons 0
|
|
|
* S: Building Tension by AlmightyPsyche | License: Attribution
|
|
|
* S: single dog bark 1 by crazymonke9 | License: Attribution
|
|
|
* S: strained gibberish.wav by Reitanna | License: Creative Commons 0
|
|
|
* S: GIBBERISH.wav by xtrgamr | License: Attribution
|
|
|
* S: evening in the forest.wav by reinsamba | License: Attribution
|
|
|
* S: Turning page by supersnd | License: Creative Commons 0
|
|
|
* S: Game music Time of joy by BloodPixelHero | License: Attribution
|
|
|
* P: beeps by thisusernameis
|
|
|
* S: beep3.wav by thisusernameis | License: Creative Commons 0
|
|
|
* S: Click.ogg by Pachoba | License: Creative Commons 0
|
|
|
* S: UI Confirmation Alert, A1.wav by InspectorJ | License: Attribution
|
|
|
* S: Park Ambiance by philipecp | License: Creative Commons 0
|
|
|
* S: evening in the forest.wav by reinsamba | License: Attribution
|
|
|
* S: Spring Birds Raw (New Jersey) by hargissssound | License: Creative Commons 0
|
|
|
* S: Cricket in the desert (close recording) by felix.blume | License: Creative Commons 0
|
|
|
* S: tongue click by fleurescence | License: Creative Commons 0
|
|
|
* S: UI Confirmation Alert, A2.wav by InspectorJ | License: Attribution
|
|
|
|
|
|
//////////////////////////////////////////////////////////////////
|
|
|
-->
|
|
|
|
|
|
|
|
|
|
|
|
<!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>whenyoumightgoastray</title>
|
|
|
<link rel="icon" href="imgs/avatars/ball2.gif">
|
|
|
<link rel="stylesheet" href="index.css">
|
|
|
|
|
|
</head>
|
|
|
<body>
|
|
|
<audio id="click"><source src="sound/click.wav" type="audio/wav"></audio>
|
|
|
<audio loop="loop" id="theme_amanda" preload="auto"><source src="sound/amanda_theme.wav" type="audio/wav"></audio>
|
|
|
|
|
|
<div class="small_screen" style="display: none;">
|
|
|
whoops ☃!
|
|
|
It seems like you are reading this message from a phone or a tablet. Sadly, <span class="small_title">When you might go astray</span> is not available for these formats. Try again with a bigger device ツ
|
|
|
</div>
|
|
|
|
|
|
<div id="info_box" style="display: none;">
|
|
|
This project has been developed by <a href="https://www.annasandri.com/" target="_blank">Anna Sandri</a> in the context of the <a href="https://www.pzwart.nl/experimental-publishing/" target="_blank">Experimental Publishing</a> master course, Piet Zwart Institute (NL).
|
|
|
</div>
|
|
|
<div class="step1">
|
|
|
<span class=" info_button special_button">ⓘ</span> <span class="special1"style="-webkit-padding-start: 11vw;">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 <span class="special1">( <img src="imgs/avatars/fiction.gif" height="65vw">)</span> project exploring <span class="special1">( <img src="imgs/avatars/glass.gif" height="65vw">) conspiracy fantasies ( <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
|
|
|
<span class="special1">fictional narratives ( <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 <span class="special2">( <img src="imgs/avatars/believer.gif" height="65vw">)</span> into
|
|
|
heroes <span class="special1">( <img src="imgs/avatars/hero2.gif" height="65vw"> , <img src="imgs/avatars/parrot.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;">
|
|
|
<span class="backto1 special_button">←</span><span style="-webkit-padding-start: 11vw;">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>
|
|
|
<div class="line"></div>Do 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;">
|
|
|
<span class="backto1 special_button">←</span><span class="special1"style="-webkit-padding-start: 11vw;">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;">
|
|
|
<span class="backto2 special_button">←</span><span class="special1"style="-webkit-padding-start: 11vw;">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;">
|
|
|
<span class="backto2 special_button">←</span><span style="-webkit-padding-start: 11vw;">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 <span class="special1">( <img src="imgs/avatars/walk.gif" height="65vw"> )</span>. 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;">
|
|
|
<span class="backto3 special_button">←</span><span style="-webkit-padding-start: 11vw;">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 your adventure: 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>
|
|
|
|
|
|
//audio
|
|
|
var click = document.querySelector("#click");
|
|
|
var theme= document.querySelector("#theme_amanda");
|
|
|
theme.volume = 0.4;
|
|
|
click.volume = 0.5;
|
|
|
|
|
|
$("body").hover( function() {
|
|
|
theme.play();
|
|
|
theme.addEventListener('paused',function() {
|
|
|
theme.play();
|
|
|
},false);
|
|
|
})
|
|
|
|
|
|
window.onload = function(){
|
|
|
theme.play();
|
|
|
//blocks the user if they are using mobile/tablet
|
|
|
if (screen.width < 769) {
|
|
|
$(".step1").hide();
|
|
|
$(".small_screen").show();
|
|
|
$("body").css("background-color", "#c94dff");
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
$(".info_button").click( function () {
|
|
|
$("#info_box").toggle();
|
|
|
click.play();
|
|
|
});
|
|
|
|
|
|
$("#step1_yes").click( function () {
|
|
|
$(".step1").hide();
|
|
|
$(".step2").show();
|
|
|
click.play();
|
|
|
});
|
|
|
$("#step1_no").click( function () {
|
|
|
$(".step1").hide();
|
|
|
$(".step1_2").show();
|
|
|
click.play();
|
|
|
});
|
|
|
|
|
|
$("#step1_2_yes").click( function () {
|
|
|
$(".step1_2").hide();
|
|
|
$(".step3").show();
|
|
|
click.play();
|
|
|
});
|
|
|
$("#step1_2_no").click( function () {
|
|
|
$(".step1_2").hide();
|
|
|
$(".step1").show();
|
|
|
click.play();
|
|
|
});
|
|
|
|
|
|
$("#step2_yes").click( function () {
|
|
|
$(".step2").hide();
|
|
|
$(".step3").show();
|
|
|
click.play();
|
|
|
});
|
|
|
$("#step2_no").click( function () {
|
|
|
$(".step2").hide();
|
|
|
$(".step2_1").show();
|
|
|
click.play();
|
|
|
});
|
|
|
|
|
|
$("#step2_1_yes").click( function () {
|
|
|
$(".step2_1").hide();
|
|
|
click.play();
|
|
|
window.location.href = "thesis.html";
|
|
|
});
|
|
|
$("#step2_1_no").click( function () {
|
|
|
$(".step2_1").hide();
|
|
|
$(".step1").show();
|
|
|
click.play();
|
|
|
});
|
|
|
|
|
|
$("#step3_yes").click( function () {
|
|
|
$(".step3").hide();
|
|
|
$(".step4").show();
|
|
|
click.play();
|
|
|
});
|
|
|
$("#step3_no").click( function () {
|
|
|
$(".step3").hide();
|
|
|
$(".step1").show();
|
|
|
click.play();
|
|
|
});
|
|
|
|
|
|
$(".backto1").click( function () {
|
|
|
$(".step1_2, .step2").hide();
|
|
|
$(".step1").show();
|
|
|
click.play();
|
|
|
});
|
|
|
$(".backto2").click( function () {
|
|
|
$(".step3, .step2_1").hide();
|
|
|
$(".step2").show();
|
|
|
click.play();
|
|
|
});
|
|
|
$(".backto3").click( function () {
|
|
|
$(".step4").hide();
|
|
|
$(".step3").show();
|
|
|
click.play();
|
|
|
});
|
|
|
|
|
|
/*
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
|
window.localStorage.clear();
|
|
|
console.log("loaded");
|
|
|
updateAvatar();
|
|
|
|
|
|
});
|
|
|
*/
|
|
|
|
|
|
</script>
|
|
|
<script type="text/javascript" src="index.js" ></script>
|
|
|
|
|
|
</body> |