<img src="images/olympusAssetwhiteonly.svg" alt="A crescent shape over mountains" id="olympuslogo2" />
<div class="introtext">
<span class="topspan">Welcome $playerName. This is your home screen. We've connected to your social media accounts and are just finishing setting things up in the background. </span>
<<timed 2s t8n>>As your contacts get in touch, you will get notifications at the bottom of the screen.
<<next>>$appName has learned from your existing activity, and will offer response ideas so that your social interactions are as seamless and stress-free as possible. $appName learns and grows as you interact to improve your experience.
<<script>>
setup.aScriptImport.then((value) => {
//first gotta do the glitch for the first thing
adviceDisplay(State.variables).then((resolve)=>{
setup.updatestoryVars(resolve); //update the storyVars
//then showalerts
showalerts(1);
}).catch((err)=>{
console.log(err);
//OK so no data returned, but just move on
showalerts(1);
});
})
<</script>><</timed>>
</div><<nobr>><<set $startDate to Date.now()>>
<img src="images/olympusAssetwhiteonly.svg" alt="A crescent shape over mountains" id="olympuslogo" /><</nobr>><div class="introtext">
<span class="topspan">Welcome to $appName, your new social media lifeline!</span>
This app runs entirely in your browser, which allows us to make use of the latest AI technology at all times. After you set your preferences, we'll integrate our assistant technology throughout your social media and messaging accounts to serve you better.
<h2>Set Your Preferences</h2><form><label for="textbox-playername" class="forminfo">Screen Name:</label> <<textbox "$playerName" $playerName>>
<span class="forminfo">Light or Dark theme:</span> <<radiobutton "$lightordark" "dark" autocheck>><label for="radiobutton-lightordark">Dark</label> <<radiobutton "$lightordark" "light" autocheck>><label for="radiobutton-lightordark">Light</label>
<<button "Save Information" Welcome>><</button>></form>
</div>
<div class="ooc note">Note: This experience is part of an ongoing artistic and research project investigating how our societies use algorithmic decision-making. At the end of the game, you'll be asked if you'd like to participate in an associated research study. You can share information from your gameplay, and/or express interest in participating in an interview. No information from your game is automatically shared with the research team, and we do not connect to your social media accounts directly. This study is being conducted by Kathryn Blair, PhD Candidate at the University of Calgary (kathryn.blair@ucalgary.ca), supervised by Lora Oehlberg (lora.oehlberg@ucalgary.ca). [[More information is available here.|Research: More Info]]</div><<set $appName to "O.R.A.C.L.E.">>
<<set $clubName to "Stitch n' Brew">>
<<set $playerName to "Default Player Name">>
<<set $gameStage to 0>>
<<set $gameTitle to "Entanglements">>
<<set $company to "Olympus Software">>
<<set $lightordark to null>>You remember that Charles had been talking a lot about attending the protest //(for ..?)//, and there was a bit of news attention about it last week.
You text him to ask how it went:
//Hey! I remember you mentioned that protest on Saturday! How did it end up going? Did you make it?//
He texts back:
//It went pretty well! There were a lot of police around but nothing weird happened. Hey, I have a few minutes, want to grab a coffee and talk about it?//
**(and do this in like a style for the texts, or through actual texts)**You see Ali's office and remember you'd talked about grabbing coffee the last time you saw them. You have some time, so you decide to text them:
*Hey! I was walking by and remembered we said we'd catch up! Do you have a few?*<<script>>
var passagename = passage();
var passagedata = Story.get(passagename);
setup.aScriptImport.then(function(){
showScene(State.variables, passagedata, 2).then((message) => {
console.log("back from the JS file with message: "+message);
}).catch((message) => {
console.log("failed back from the JS file with message: "+message);
});
}).catch(function(err){
// There was an error loading the script, log it to the console.
console.log(err);
});
<</script>>
When complete, you can continue to [[the next scene ->Scene 6]].
<<script>>
var passagename = passage();
var passagedata = Story.get(passagename);
setup.aScriptImport.then(function(){
showScene(State.variables, passagedata, 3);
}).catch(function(err){
// There was an error loading the script, log it to the console.
console.log(err);
});
<</script>>
When complete, you can continue to [[the next scene ->Scene 7]].<<script>>
var passagename = passage();
var passagedata = Story.get(passagename);
setup.aScriptImport.then(function(){
showScene(State.variables, passagedata, 4);
}).catch(function(err){
// There was an error loading the script, log it to the console.
console.log(err);
});
<</script>>
When complete, you can continue to [[the next scene ->Scene 11]].<<script>>
var passagename = passage();
var passagedata = Story.get(passagename);
setup.aScriptImport.then(function(){
showScene(State.variables, passagedata, 5);
}).catch(function(err){
// There was an error loading the script, log it to the console.
console.log(err);
});
<</script>>
When complete, you can continue to [[the next scene ->Ali Scene 2]].
<<script>>
var passagename = passage();
var passagedata = Story.get(passagename);
setup.aScriptImport.then(function(){
showScene(State.variables, passagedata, 6);
}).catch(function(err){
// There was an error loading the script, log it to the console.
console.log(err);
});
<</script>>
When complete, you can continue to [[the next scene ->Scene 3]].<<script>>
var passagename = passage();
var passagedata = Story.get(passagename);
setup.aScriptImport.then(function(){
showScene(State.variables, passagedata, 7);
}).catch(function(err){
// There was an error loading the script, log it to the console.
console.log(err);
});
<</script>>
When complete, you can continue to [[the next scene ->Scene 8]].<<script>>
var passagename = passage();
var passagedata = Story.get(passagename);
setup.aScriptImport.then(function(){
showScene(State.variables, passagedata, 8);
}).catch(function(err){
// There was an error loading the script, log it to the console.
console.log(err);
});
<</script>>
When complete, you can continue to [[the next scene ->Scene 4]].<<script>>
var passagename = passage();
var passagedata = Story.get(passagename);
setup.aScriptImport.then(function(){
showScene(State.variables, passagedata, 9);
}).catch(function(err){
// There was an error loading the script, log it to the console.
console.log(err);
});
<</script>>
[[Scene 10]]<<script>>
var passagename = passage();
var passagedata = Story.get(passagename);
setup.aScriptImport.then(function(){
showScene(State.variables, passagedata, 10);
}).catch(function(err){
// There was an error loading the script, log it to the console.
console.log(err);
});
<</script>>
Complete for the time being!<<script>>
var passagename = passage();
var passagedata = Story.get(passagename);
setup.aScriptImport.then(function(){
showScene(State.variables, passagedata, 11);
}).catch(function(err){
// There was an error loading the script, log it to the console.
console.log(err);
});
<</script>>
When complete, you can continue to [[the next scene ->Scene 9]].Kathryn Blair & Zach Mckendrick[[Ali|Contact: Ali]]
[[Lili|Contact: Lili]]
[[Ali, Lili|Contact: AliLili]]
[[Charles|Contact: Charles]]
[[Ali, Charles|Contact: AliCharlesEmil]]
[[Oracle|Contact: Oracle]]
[[Calendar]]
Do I want to do this HERE or in some other way, or add via JS? Probably via JS because I dunno how I would add to it. Do I want the game UI and the ORACLE UI to be the same?
<<script>>
setup.doPassageConvos("Ali");
<</script>>
<<script>>
setup.doPassageConvos("AliCharlesEmil");
<</script>><<script>>
setup.doPassageConvos("Lili");
<</script>>
<<script>>
setup.doPassageConvos("AliLili");
<</script>>
<<script>>
setup.doPassageConvos("Charles");
<</script>>
<<script>>
setup.doPassageConvos("Oracle");
<</script>>
<<script>>
//maybe this isn't getting updated either?
setup.aScriptImport.then(function(){
var passagename = passage();
var passagedata = Story.get(passagename);
//console.log(passagedata);
if (passagedata.tags.includes('Contact')){
//console.log("This is a contact passage; let the showactions deal with the variables");
}else{
//console.log("This is a NOT contact passage; deal with the variables");
//console.log("just before call handlevars");
handleVars(State.variables).then((value)=>{
console.log("After Handlevars");
console.group("PassageHeader Return Success");
console.log(value);
setup.updatestoryVars(value); //I think this is happening?
console.groupEnd();
}).catch((value)=>{
console.group("PassageHeader Return Error");
console.log(value);
setup.updatestoryVars(value); //I think this is happening?
console.groupEnd();
});
}//end the if statement
}).catch(function(err){
// There was an error loading the script, log it to the console.
console.log(err);
});
<</script>>Thank you so much for playing $gameTitle.
<<include "Colophon">> You can return to your location in the game <<return "here">>.Entanglements<<script>>
$("#contact-bar").remove();
$("#header-bar").remove();
<</script>>
I know what to do now.
You can keep in touch with me on <a href="https://twitter.com/UnraveledOracle" target="_blank">Twitter</a> or <a href="https://mastodon.social/@UnraveledOracle" target="_blank">Mastodon</a>. I would love to hear from you.
Goodbye, $playerName.
And thank you.
[[Closing Thoughts|Exit Game]]
<<timed 10s t8n>>
\<<goto "Exit Game">>
\<</timed>><<script>>
setup.doCalendar();
<</script>>
<<nobr>>
<h1>Your Calendar</h1>
<div id="unravelled-calendar">
<ul id="daysofweek">
<li>Sunday</li>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
<li>Thursday</li>
<li>Friday</li>
<li>Saturday</li>
</ul>
<ul id="daysul">
</ul>
</div>
<<endnobr>>
<ul><li>[[Ali|Contact: Ali]]</li>
<li>[[Lili|Contact: Lili]]</li>
<li>[[Ali, Lili|Contact: AliLili]]</li>
<li>[[Charles|Contact: Charles]]</li>
<li>[[Ali, Charles|Contact: AliCharlesEmil]]</li>
<li>[[Oracle|Contact: Oracle]]</li>
<li>[[Calendar]]</li></ul>$gameTitle is an interactive narrative game. As you start using a new social media app, you find it to be unusually helpful as your friends have issues with various algorithmic decision-making systems they encounter.
$gameTitle is written by Kathryn Blair and Zach McKendrick. With special thanks to Lora Oehlberg, Pil Hansen, Bruce Barton, the Curio Lab, and the iLab at the University of Calgary. It is part of Kathryn Blair's PhD research.
If you have any thoughts or feedback, please contact Kathryn Blair via <a href="mailto:kathryn.blair@ucalgary.ca">email</a>.
This game is hosted on UCalgary servers. It uses <a href="https://cyclic.sh/" target="_blank">Cyclic</a> for app and data hosting (which use AWS infrastructure). We use the OpenAI API, graphics <a href="http://www.freepik.com" target="_blank">designed by Vectortwins / Freepik</a>, and images generated on <a href="https://huggingface.co/stephanebhiri/lora-trained-xl-colab-stp27" target="_blank">stephanebhiri/lora-trained-xl-colab-stp27</a>. It was partially inspired by <a href="https://delphi.allenai.org/" target="_blank">AskDelphi</a>.
The game does not collect IP address or location data from players. During the game, any time your data may be shared with others (for example, if you choose to give advice to other players), you can choose if you would actually like to do so. Your progress as you complete the game is stored on your computer.
$gameTitle is part of an ongoing artistic and research project investigating how our societies use algorithmic decision-making. At the end of the game, you'll be asked if you'd like to participate in an associated research study. You can share information from your gameplay, and/or express interest in participating in an interview. No information from your game is automatically shared with the research team, and we do not connect to your social media accounts directly. This study is being conducted by Kathryn Blair, PhD Candidate at the University of Calgary, supervised by Lora Oehlberg. More information is available.