Unboxing: a Critical Making game

Browser lacks capabilities required to play.

Upgrade or switch to another browser.

Loading…

<<goto [[Story 1]]>> [[Door 1|Story 1]] [[Door 2-inactive|Story 2]] [[Door 3-inactive|Story 3]]

<<audio "bgm" volume 0.3 loop play>> <<set $doorOption to 1>> <<fadein 1s>><<speech "Marble">> Hi there! I'm a teacher at the water guardians community, we're next door. <</speech>><</fadein>> <<timed 4s t8n>><<speech "You">> Cool, nice to meet you :) How can I [[help|Story 1b]]?<</speech>><</timed>>

<<set $doorOption to 2>> $doorOption

<<set $doorOption to 3>> $doorOption

/*Game start */ <<set $start to false>> <<set $starsCount to 0>> <<set $doorOption to 0>> /* Laptop */ <<set $stickers to 0>> <<set $stickerOne to false>> <<set $stickerTwo to false>> <<set $stickerThree to false>> <<set $stickerFour to false>> <<set $stickerFive to false>> <<set $stickerSix to false>> <<set $stickerSeven to false>> <<set $stickerEight to false>> <<set $stickerNine to false>> <<set $stickerTen to false>> <<set $stickerEleven to false>> <<set $stickerTwelve to false>> <<set $stickerThirteen to false>> /* Survey data storage */ <<set $questionsCount to []>> <<set $qOneLikert to 0>> <<set $qTwoLikert to 0>> <<set $qThreeLikert to 0>> <<set $qFourLikert to 0>> <<set $qFiveLikert to 0>> <<set $qSixLikert to 0>> <<set $qSevenLikert to 0>> <<set $qEightLikert to 0>> <<set $qNineLikert to 0>> <<set $qTenLikert to 0>> <<set $qElevenLikert to 0>> <<set $qTwelveLikert to 0>> <<set $qThirteenLikert to 0>> /* Download data */ <<set $downloadLikert to []>> <<set $downloadText to []>> /* Audio */ <<cacheaudio "bgm" "aud/bgm.mp3">> <<cacheaudio "coin2" "aud/coin2.mp3">> <<cacheaudio "coin" "aud/coin.mp3">> <<cacheaudio "key" "aud/key.mp3">> <<cacheaudio "knock" "aud/knock.mp3">> <<cacheaudio "fail" "aud/fail.mp3">> <<cacheaudio "win" "aud/win.mp3">> <<cacheaudio "type" "aud/typing.mp3">> <<cacheaudio "mistery" "aud/mistery.mp3">> <<cacheaudio "start" "aud/start.mp3">> <<cacheaudio "voices" "aud/voices.mp3">> <<cacheaudio "nop" "aud/nop.mp3">> /* Challenges */ <<set $BoxPinMaster to "crtclmkng">> <<set $J1Master to "iot">> <<set $J2Master to "backend">> <<set $J3Master to "api">> <<set $J4Master to "vpn">> <<set $JMaster to [$J1Master, $J2Master, $J3Master, $J4Master]>> <<set $J1check to false>> <<set $J2check to false>> <<set $J3check to false>> <<set $J4check to false>> <<set $beansChecker to false>> <<set $pressChecker to false>> <<set $grinderChecker to false>> <<set $support1 to 0>> /* Final scores */ <<newmeter 'impactfulBar'>> <<animation 300ms>> <<sizing '200px' '30px'>> <<colors #977fd7 #977fd7 #ffffc2>> <</newmeter>> <<newmeter 'joyfulBar'>> <<animation 300ms>> <<sizing '200px' '30px'>> <<colors #f5a9cb #f5a9cb #ffffc2>> <</newmeter>> <<newmeter 'localBar'>> <<animation 300ms>> <<sizing '200px' '30px'>> <<colors #AFF0C3 #AFF0C3 #ffffc2>> <</newmeter>> <<newmeter 'reflexiveBar'>> <<animation 300ms>> <<sizing '200px' '30px'>> <<colors #fed766 #fed766 #ffffc2>> <</newmeter>> <<newmeter 'socialBar'>> <<animation 300ms>> <<sizing '200px' '30px'>> <<colors #fe4a49 #fe4a49 #ffffc2>> <</newmeter>> <<newmeter 'openBar'>> <<animation 300ms>> <<sizing '200px' '30px'>> <<colors #9ccfe7 #9ccfe7 #ffffc2>> <</newmeter>>

<<if $qOneLikert is 0>> <div class="challenges">Please make sure you choose one of the options before moving on! [[Go back|Q1d]]</div> <<elseif $stickerOne is true>>\ <<goto "Story 1.2">> <<else>>\ <<audio "type" stop>>\ <<audio "key" play>>\ <<set $stickerOne to true>>\ <<set $questionsCount.pushUnique("answer1")>>\ <div class="challenges" style="text-align:center">Hey, you got a [[new sticker|Passport]] for your laptop! You will get new ones every time you answer complete questions.</div> <<cont>><<goto 'Story 1.2'>><</cont>> <</if>>

<<if $start is true>>\ Volume: <<volume>> <div class="challenges">\ <span style="font-size: 50px;">🌟</span> $starsCount / 13 </div>\ <</if>>\

<<if $doorOption is 1>>\ <span class="challenges">You fixed it!</span> <<cont>><<goto "coin1b">><</cont>> <</if>>

<span class="start-button"><<button "Start game">>\ <<script>>makeitbig.myEventHandler();<</script>>\ <<goto [[Story 0]]>>\ <</button>>\ </span> <<audio "start" play>>\

<img style="margin: " class="rainbow-border" src="img\unboxing_logo.png" width="50%">\

<img style="margin-top: 20px;" src="img\logo.png" width="50%"> A Critical Making Game

<<if $stickerOne>>\ [[LAPTOP|Passport]] <</if>>\

<<audio "type" play>>\ <span class="terminal-rojo">panda@nautilus:~$</span> <<type 40ms keep class "terminal">>Hello, anyone out there?<</type>> <span class="terminal-azul">you@makerspace:~$</span> <<typesim "Hmm yeah? It's just another Saturday here at the makerspace...">> <<include [[Q1b]]>> <</typesim>>

<h2>Your answers</h2>\ <div class="challenges">\ <<if $questionsCount.length is not 0>>\ <<link 'Download your answers'>>\ <<set $totalDownload to $downloadLikert + ", " + $downloadText + ",">> <<export $totalDownload 'playerdata' 'csv'>>\ <</link>>\ <</if>>\ <<return>></div>\ <div class="challenges">\ <<if $qOneLikert is not 0>>\ <b>- Question 1: Do you have experience working on maker projects for social change? If so, which ones? </b> Your answer: $qOne Your rating in text: $qOneLikert. <<set $downloadLikert.push("Rating1: "+$qOneLikert)>> <<set $downloadText.pushUnique("Answer1: "+$qOne)>>\ <</if>>\ \ <<if $qTwoLikert is not 0>>\ <b>- Question 2: When presenting your space, are you choosing narratives / stories that are inclusive? </b> Your answer: $qTwo Your rating: $qTwoLikert. <<set $downloadLikert.push("Rating2: "+$qTwoLikert)>> <<set $downloadText.pushUnique("Answer2: "+$qTwo)>>\ <</if>>\ \ <<if $qThreeLikert is not 0>>\ <b>- Question 3: Who is giving workshops or teaching in your space? Is it managed so that everyone can feel comfortable in the space? </b> Your answer: $qThree Your rating: $qThreeLikert. <<set $downloadLikert.push("Rating3: "+$qThreeLikert)>> <<set $downloadText.pushUnique("Answer3: "+$qThree)>>\ <</if>>\ <<if $qFourLikert is not 0>>\ <b>- Question 4: What actions / steps can you take to better understand societal needs? How does this shape the actions you intend to take? </b> Your answer: $qFour Your rating: $qFourLikert. <<set $downloadLikert.push("Rating4: "+$qFourLikert)>> <<set $downloadText.pushUnique("Answer4: "+$qFour)>>\ <</if>>\ <<if $qFiveLikert is not 0>>\ <b>- Question 5: How can you work to overcome material scarcities and/or lack of skills in your project?</b> Your answer: $qFive Your rating: $qFiveLikert. <<set $downloadLikert.push("Rating5: "+$qFiveLikert)>> <<set $downloadText.pushUnique("Answer5: "+$qFive)>>\ <</if>>\ <<if $qSixLikert is not 0>>\ <b>- Question 6: How can you create and support alternatives to prominent ways of doing things?</b> Your answer: $qSix Your rating: $qSixLikert. <<set $downloadLikert.push("Rating6: "+$qSixLikert)>> <<set $downloadText.pushUnique("Answer6: "+$qSix)>>\ <</if>>\ <<if $qSevenLikert is not 0>>\ <b>- Question 7: Have you considered social and ecological sustainability when planning your actions?</b> Your answer: $qSeven Your rating: $qSevenLikert. <<set $downloadLikert.push("Rating7: "+$qSevenLikert)>> <<set $downloadText.pushUnique("Answer7: "+$qSeven)>>\ <</if>>\ <<if $qEightLikert is not 0>>\ <b>- Question 8: What might be particular barriers (also physical ones) for any societal groups to participate? How could these be overcome? </b> Your answer: $qEight Your rating: $qEightLikert. <<set $downloadLikert.push("Rating8: "+$qEightLikert)>> <<set $downloadText.pushUnique("Answer8: "+$qEight)>>\ <</if>>\ <<if $qNineLikert is not 0>>\ <b>- Question 9: Are your actions contributing to the kind of future you want to see (even if in a small way)? </b> Your answer: $qNine Your rating: $qNineLikert. <<set $downloadLikert.push("Rating9: "+$qNineLikert)>> <<set $downloadText.pushUnique("Answer9: "+$qNine)>>\ <</if>>\ <<if $qTenLikert is not 0>>\ <b>- Question 10: From which public or private societal actors (e.g. companies, politicians, schools) would you need support to realise the future you hope to see? </b> Your answer: $qTen Your rating: $qTenLikert. <<set $downloadLikert.push("Rating10: "+$qTenLikert)>> <<set $downloadText.pushUnique("Answer10: "+$qTen)>>\ <</if>>\ <<if $qElevenLikert is not 0>>\ <b>- Question 11: How do you "future proof" your practice? </b> Your answer: $qEleven Your rating: $qElevenLikert. <<set $downloadLikert.push("Rating11: "+$qElevenLikert)>> <<set $downloadText.pushUnique("Answer11: "+$qEleven)>>\ <</if>>\ <<if $qTwelveLikert is not 0>>\ <b>- Question 12: Who do you take money and/or resources from and how does that affect your making practices?</b> Your answer: $qTwelve Your rating: $qTwelveLikert. <<set $downloadLikert.push("Rating12: "+$qTwelveLikert)>> <<set $downloadText.pushUnique("Answer12: "+$qTwelve)>>\ <</if>>\ <<if $qThirteenLikert is not 0>>\ <b>- Question 13: How does the way you speak about your making practice affect the decisions you take?</b> Your answer: $qThirteen Your rating: $qThirteenLikert. <<set $downloadLikert.push("Rating13: "+$qThirteenLikert)>>\ <<set $downloadText.pushUnique("Answer13: "+$qThirteen)>>\ <</if>>\ </div>\

<<audio "voices" stop>>\ <<audio "type" stop>>\ <div class="laptop">\ <<if $stickerOne and $stickerSeven and $stickerNine>>\ <img src="img/value-Impactful-9.png" width=20%> <<elseif $stickerOne and $stickerSeven>>\ <img src="img/value-Impactful-7.png" width=20%> <<elseif $stickerOne>>\ <img src="img/value-Impactful-1.png" width=20%> <<else>>\ <</if>>\ \ <<if $stickerSix and $stickerEleven and $stickerThirteen>>\ <img src="img/value-joyful.png" width=20%> <<elseif $stickerSix and $stickerEleven>>\ <img src="img/value-joyful-11.png" width=20%> <<elseif $stickerSix>>\ <img src="img/value-joyful-6.png" width=20%> <<else>>\ <</if>>\ \ <<if $stickerFive and $stickerSeven and $stickerTen>>\ <img src="img/value-local.png" width=20%> <<elseif $stickerFive and $stickerSeven>>\ <img src="img/value-local-10.png" width=20%> <<elseif $stickerFive>>\ <img src="img/value-local-5.png" width=20%> <<else>>\ <</if>>\ \ <<if $stickerFour and $stickerSix and $stickerTwelve>>\ <img src="img/value-reflexive.png" width=20%> <<elseif $stickerFour and $stickerSix>>\ <img src="img/value-reflexive-6.png" width=20%> <<elseif $stickerFour>>\ <img src="img/value-reflexive-4.png" width=20%> <<else>>\ <</if>>\ \ <<if $stickerTwo and $stickerThree and $stickerEight>>\ <img src="img/value-social.png" width=20%> <<elseif $stickerTwo and $stickerThree>>\ <img src="img/value-social-2.png" width=20%> <<elseif $stickerTwo>>\ <img src="img/value-social-3.png" width=20%> <<else>>\ <</if>>\ \ <<if $stickerFour and $stickerTen and $stickerTwelve>>\ <img src="img/values-open.png" width=20%> <<elseif $stickerFour and $stickerTen>>\ <img src="img/values-open-2.png" width=20%> <<elseif $stickerFour>>\ <img src="img/values-open3.png" width=20%> <<else>>\ <</if>>\ </div> \ <span class="challenges"><<return>></span>

<<audio "type" stop>>\ <div><<speech "Marble">> "Were you just talking to the computer?!"<</speech>></div> <<timed 1s>><div class="challenges"> She looks a little concerned. </div><</timed>> <<timed 2s t8n>><<speech "You">> "Maybe ¯\_(ツ)_/¯¯"<</speech>><</timed>> <<timed 3s>><div class="challenges"> You start looking for some [[zines|prechallenge2]] for Marble, that a friend made some time ago.</div><</timed>>

<<audio "fail" volume 0.3 play>>\ <div class="challenges">\ Oh no, the coffee machine is broken! </div> <<cont>><<goto 'challenge1b'>><</cont>>

<<if $beansChecker and $pressChecker and $grinderChecker>> <span class="challenges">You found the missing piece! [[Let's try it|Coin1]]</span> <<else>>\ <span class="challenges">But you can't make coffee yet :( [[Keep looking!|challenge1b]]</span>\<</if>>\

<span class="challenges">Can you guess the code to open the box?</span> <img src="img/Clave2.png" width="70%"> <<textboxPlus "Enter code:" "$BoxPin" `{ maxlength: 8}`>>\ <span class="challenges">[[Open the box|challenge2 check]]</span> <span class="skip">[[Skip this challenge|Q2]]</span>

/* <<textboxPlus>> widget v1.3 - Start */ /* Usage: <<textboxPlus "Label: " "$variableName" `{ default: "Default value", passage: "Passage name", placeholder: "Placeholder text", maxlength: 10, spellcheck: false, autofocus: true, autocomplete: "off", password: true, readonly: true, disabled: true, onchange: "<<run alert('Text was changed.')>>", oninput: "<<run alert('Input event triggered.')>>", onreturn: "<<run alert('User hit RETURN.')>>" }`>> NOTE: If you put a space as the last character for the label then, instead of the textbox appearing to the right of the label, the textbox will appear on the line BELOW the label. Also, all of the options shown within the third parameter above (after "$variableName") are optional. For a list of all "autocomplete" options see: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete */ <<widget "textboxPlus">> <<if ($args[1][0] !== "$") && ($args[1][0] !== "_")>> /* Show error message for bad variable name. */ <span class="errmsg" data-msg="<<textboxPlus>> - Invalid variable name." @data-src="$args[1]"></span> <<run $(document).one(":passagerender", function (ev) { $(ev.content).find(".errmsg").each(function (idx) { throwError($(this), $(this).data("msg"), $(this).data("src")); }); } )>> <<else>> /* Create textboxPlus input box. */ <<if $args[1][0] === "$">> <<set _textboxPlusName = "textbox-" + $args[1].substr(1).toLowerCase()>> <<else>> <<set _textboxPlusName = "textbox--" + $args[1].substr(1).toLowerCase()>> <</if>> <<if ndef $args[2]>> <<set _textboxPlusOptions = {}>> <<else>> <<set _textboxPlusOptions = $args[2]>> <</if>> <<if ndef _textboxPlusOptions.placeholder>> <<set _textboxPlusOptions.placeholder = "">> <</if>> <<if ndef _textboxPlusOptions.maxlength>> <<set _textboxPlusOptions.maxlength = "">> <</if>> <<if ndef _textboxPlusOptions.spellcheck>> <<set _textboxPlusOptions.spellcheck = true>> <</if>> <<if ndef _textboxPlusOptions.autocomplete>> <<set _textboxPlusOptions.autocomplete = "">> <</if>> <<if ndef _textboxPlusOptions.password>> <<set _textboxPlusOptions.password = "">> <</if>> <<if ndef _textboxPlusOptions.readonly>> <<set _textboxPlusOptions.readonly = "">> <</if>> <<if ndef _textboxPlusOptions.disabled>> <<set _textboxPlusOptions.disabled = "">> <</if>> <<if ndef _textboxPlusOptions.onchange>> <<set _textboxPlusOptions.onchange = "">> <</if>> <<if ndef _textboxPlusOptions.oninput>> <<set _textboxPlusOptions.oninput = "">> <</if>> <<if ndef _textboxPlusOptions.onreturn>> <<set _textboxPlusOptions.onreturn = "">> <</if>> <span class="textboxplus" @data-variable="$args[1]" @data-placeholder="_textboxPlusOptions.placeholder" @data-maxlength="_textboxPlusOptions.maxlength" @data-spellcheck="_textboxPlusOptions.spellcheck" @data-autocomplete="_textboxPlusOptions.autocomplete" @data-password="_textboxPlusOptions.password" @data-readonly="_textboxPlusOptions.readonly" @data-disabled="_textboxPlusOptions.disabled" @data-onchange="_textboxPlusOptions.onchange" @data-oninput="_textboxPlusOptions.oninput" @data-onreturn="_textboxPlusOptions.onreturn"> <label @for="_textboxPlusName">$args[0]</label> <<if $args[0][$args[0].length - 1] === " ">> <br> <</if>> <<if ndef _textboxPlusOptions.default>> <<set _textboxPlusOptions.default = "">> <</if>> <<if ndef _textboxPlusOptions.passage>> <<if _textboxPlusOptions.autofocus>> <<textbox $args[1] _textboxPlusOptions.default autofocus>> <<else>> <<textbox $args[1] _textboxPlusOptions.default>> <</if>> <<else>> <<if _textboxPlusOptions.autofocus>> <<textbox $args[1] _textboxPlusOptions.default _textboxPlusOptions.passage autofocus>> <<else>> <<textbox $args[1] _textboxPlusOptions.default _textboxPlusOptions.passage>> <</if>> <</if>> </span> <</if>> <</widget>> <<script>> $(document).on(":passagerender", function (event) { /* Update textboxPlus input boxes. */ $(event.content).find(".textboxplus").each(function () { var options = {}, props = {}; var data = $(this).data("placeholder"); if (data) { options.placeholder = data; } data = $(this).data("maxlength"); if (data) { options.maxlength = data; } data = $(this).data("spellcheck"); if (data.toString().toLowerCase() === "false") { options.spellcheck = "false"; } data = $(this).data("autocomplete"); if (data) { options.autocomplete = data; } data = $(this).data("password"); if (data) { props.type = "password"; } data = $(this).data("readonly"); if (data) { props.readonly = data; } data = $(this).data("disabled"); if (data) { props.disabled = data; } $(this).find("input").each(function () { if (props.type) { $(this).removeProp("type").attr(options).prop(props); } else { $(this).attr(options).prop(props); } }); var changeCode = $(this).data("onchange"); if (changeCode) { $(this).find("input").on("change", function (event) { $.wiki(changeCode); }); } var inputCode = $(this).data("oninput"), parent = this; if (inputCode) { $(this).find("input").on("input", function (event) { State.setVar($(parent).data("variable"), $(this).val()); $.wiki(inputCode); }); } var returnCode = $(this).data("onreturn"); if (returnCode) { $(this).on("keyup", function (event) { if (event.key === "Enter") { $.wiki(returnCode); } }); } }); }); <</script>> /* <<textboxPlus>> widget - End */

<<set $BoxPin to $BoxPin.toLowerCase()>> <<if $BoxPin is "critical">> <<include [[Coin2]]>> <<else>> <<audio "nop" play>>\ <span class="challenges">Nop, that was not the key. [[Try again!|challenge2]]</span> <</if>>

<<audio "type" play>>\ <span class="terminal-rojo">panda@nautilus:~$</span><<type 40ms keep class "terminal">>Still here?<</type>> <<cont append keypress>>\ <span class="terminal-azul">you@makerspace:~$</span> <<typesim "Yeah, annoyed. This zine project should have been finished by now if we want to welcome anyone to the space.">> <<cont>><<goto "Q2final">><</cont>> <</typesim>> <</cont>>

<<audio "type" stop>>\ <<speech "Marble">>Who was that? You were again talking to the computer...<</speech>> <<timed 2s t8n>><<speech "You">>No clue who this person is. I think someone who worked here ages ago...<</speech>><</timed>> <<timed 3s>><span class="challenges">You try to explain but you get [[suddenly interrupted|1.3beta]]</span><</timed>>

<<set $starsCount += 1>>\ <<notify>>🌟 You earned a star!<</notify>>\ <<audio "coin2" play>>\ <<if $doorOption is 1>>\ <<include [[zine]]>>\ <</if>>\

<<if $qTwoLikert is 0>>\ <div class="challenges">Please make sure you choose one of the options before moving on! [[Go back|Q2final]]</div> <<elseif $stickerTwo is true>>\ <<goto 'Story 1.3'>> <<else>>\ <<audio "type" stop>>\ <<audio "key" play>>\ <<set $stickerTwo to true>>\ <<set $questionsCount.pushUnique("answer2")>>\ <div class="challenges">Hey! You got a new [[sticker|Passport]] for your laptop :) </div> <<cont>><<goto 'Story 1.3'>><</cont>> <</if>>\

<span class="challenges">Can you spot the most annoying jargon in the project description?</span> <section class="paper">\ <div class="papertext"> The Smart Home System is a hardware project designed to provide a monitoring solution for homeowners. It utilizes IoT technology to connect various smart devices to a central hub that runs a backend software application. This software application provides an API that allows users to remotely access and control their smart devices. To ensure the security of data transmissions between the hub and the user's devices, the system employs a VPN connection. <br> </div>\ </section>\ <span class="challenge-questions">Word 1</span><<textboxPlus "Jargon 1:" "$Jargon1" `{ maxlength: 3}`>> <span class="challenge-questions">Word 2</span><<textboxPlus "Jargon 2:" "$Jargon2" `{ maxlength: 7}`>> <span class="challenge-questions">Word 3</span><<textboxPlus "Jargon 3:" "$Jargon3" `{ maxlength: 3}`>> <span class="challenge-questions">Word 4</span><<textboxPlus "Jargon 4:" "$Jargon4" `{ maxlength: 3}`>> <span class="challenge-questions"><<linkreplace "Check your answers">><<include [[challenge3 check]]>><</linkreplace>></span> <span class="challenges"><<linkreplace "I need a hint!">>\ <img src="img/jargon2.png" width=80%><</linkreplace>></span> <span class="skip">[[Skip this challenge|Q3]]</span>

<<set $Jargon1 to $Jargon1.toLowerCase()>>\ <<set $Jargon2 to $Jargon2.toLowerCase()>>\ <<set $Jargon3 to $Jargon3.toLowerCase()>>\ <<set $Jargon4 to $Jargon4.toLowerCase()>>\ \ <<if $JMaster.includesAll($Jargon1, $Jargon2, $Jargon3, $Jargon4)>>\ <<goto "Coin3">>\ <<else>>\ <<audio "nop" play>>\ <<if $Jargon1 == $J1Master>>\ <<set $J1check to true>> You got $Jargon1 right! <<else>>\ Sorry, Jargon 1 is not "<i>$Jargon1</i>"\ <</if>>\ <<if $Jargon2 == $J2Master>>\ <<set $J2check to true>> You got $Jargon2 right! <<else>>\ Sorry, Jargon 2 is not "<i>$Jargon2</i>"\ <</if>>\ <<if $Jargon3 == $J3Master>>\ <<set $J3check to true>> You got $Jargon3 right! <<else>>\ Sorry, Jargon 3 is not "<i>$Jargon3</i>"\ <</if>>\ <<if $Jargon4 == $J4Master>>\ <<set $J4check to true>> You got $Jargon4 right! <<else>>\ Sorry, Jargon 4 is not "<i>$Jargon4</i>"\ <</if>>\ <</if>>\ [[Try again|challenge3]]

<<if visited() is 1>> <<set $starsCount += 1>> <<notify>>🌟 You earned a star!<</notify>>\ <<audio "coin2" play>>\ <</if>> <<if $doorOption is 1>>\ <<include [[Q3]]>> <</if>>\

<<audio "type" play>>\ <<if visited() is 1>> <span class="terminal-rojo">panda@nautilus:~$</span><<type 40ms keep class "terminal">>That reads much better now.<</type>> <<cont append keypress>>\ <span class="terminal-azul">you@makerspace:~$</span> <<typesim "Absolutely! Granite can be a little hard to follow sometimes...">> <<include [[Q3b]]>> <</typesim>> <</cont>> <<else>> <span class="terminal-rojo">panda@nautilus:~$</span> <span class="macro-type">What about your experience? Who is giving workshops or teaching in your space, does everyone feel comfortable?</span> <span class="terminal-azul">you@makerspace:~$</span> <span class="macro-type">\ <<radiobutton "$qThreeLikert" "1">> Not really... I never had the chance <<radiobutton "$qThreeLikert" "2 - Somehow familiar">> I had some experience but I wouldn't say a lot <<radiobutton "$qThreeLikert" "3">> Absolutely, the projects I work on are usually oriented towards social change </span> <span class="terminal-rojo">panda@nautilus:~$</span> <span class="macro-type">Tell me more about that if you feel like it. </span> <span class="terminal-azul"><<textbox '$qThree' ' '>></span> <span class="challenges">[[Got it!|Q3 check]]</span> <</if>>

<<if $qThreeLikert is 0>>\ <span class="challenges">Please make sure you choose one of the options before moving on! <<return>></span> <<elseif $stickerThree is true>>\ <<goto 'preStory 1.4'>> <<else>> <<audio "type" stop>>\ <<audio "key" play>>\ <<set $stickerThree to true>>\ <<set $questionsCount.pushUnique("answer3")>>\ <span class="challenges">Hey! You got a nice [[sticker|Passport]] for your laptop :)</span> <<cont>><<goto 'preStory 1.4'>><</cont>> <</if>>\

<<audio "bgm"stop>> <<audio "win" play>>\ <span class="end-screen">⋆ ✢ ✣ ✦ ✧ ✤ ✥ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✩ ✪ ✫ ✬ ✭ </span> <span class="end-screen" style="text=align:center">⋆ ⋆ ⋆ ⋆ ⋆ ⋆ ⋆ ⋆ CONGRATULATIONS!!! ⋆ ⋆ ⋆ ⋆ ⋆ ⋆ </span> <span class="end-screen">⋆ ✢ ✣ ✤ ✥ ✦ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✧ ✩ ✪ ✫ ✧ ✦ ✬ ✭ </span> <div class="end-screen-sub">You finished the critical making game! ❤️ We hope you enjoyed it ❤️</div>\ <div class="flex-buttons"><a class="twitter-share-button" href="https://twitter.com/intent/tweet" data-size="large" data-text="I just finished the @critical_making game! It's fun and makes you think about your own journey as a #criticalmaker. How many stickers can *you* get in your laptop 💻? Give it a try! 👇 " data-url="https://play.criticalmaking.eu" > Share on Twitter! </a></div>\ <<include "results">>\ <div class="flex-buttons-end"> <span class="challenges">[[✣ Download your results ✣|Your answers]]</span> <span class="challenges"> <a href="https://survey3.zsi.at/index.php/718517?lang=en" target=_blank>✥ Donate data to research </a></span> <span class="challenges"><<link "✣ Credits ✣">> <<script>> Dialog.setup("Credits & Licenses", "dialog-box"); Dialog.wiki("<u>CONTENT</u><br>The <a href='https://criticalmaking.eu'>Critical Making Consortium</a> in collaboration with global makers<br><br><u>GAME DESIGN & DEVELOPMENT</u><br><a href='https://julieta.aranc.io'>Julieta Arancio</a> using <a href='https://twinery.org'>Twine - Sugarcube 2.0</a><br><br><u>ART</u><br>Backgrounds: <a href='https://commons.wikimedia.org/wiki/User:Stadtbibliothek_Neuss'>Makerspace Stadtbibliothek Neuss</a>, <a href='https://commons.wikimedia.org/wiki/File:Kitchen_(364514277).jpg'>MindMatrix</a>, <a href='https://www.flickr.com/people/39415781@N06'>Ell Brown</a>, <a href='https://www.peakpx.com'>PeakPx</a>, <a href='https://pixabay.com/users/mih83-464187'>M. H.</a>. <br>Characters by <a href='https://opengameart.org/content/green-cap-character-16x18'>isaiah658</a> and <a href='https://commons.wikimedia.org/wiki/File:Pixel_art_portrait_of_a_cat.png'>ReffPixels</a>.<br>Laptop 'stickers' by Nidhi Mittal, flyer and logo by <a href='https://julieta.aranc.io'>Julieta Arancio</a>.<br><br><u>MUSIC</u><br>Sound effects by <a href='https://pixabay.com'>Pixabay</a>; music by <a href='https://pixabay.com/users/lofi_hour-28600719'>LoFi Hour</a>.<br><br><a rel='license' href='http://creativecommons.org/licenses/by-sa/4.0/'><img style='border-width:0' src='https://i.creativecommons.org/l/by-sa/4.0/88x31.png'/></a><br>This work is licensed under a <a href='http://creativecommons.org/licenses/by-sa/4.0/'>Creative Commons Attribution-ShareAlike 4.0 International License</a><br><br><img src=img/eulogo.png width=60% align=right>"); Dialog.open(); <</script>> <</link>></span> </div> <<script>> !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs'); <</script>>

<<set $qOneLikertINT to parseFloat($qOneLikert)>>\ <<set $qTwoLikertINT to parseFloat($qTwoLikert)>>\ <<set $qThreeLikertINT to parseFloat($qThreeLikert)>>\ <<set $qFourLikertINT to parseFloat($qFourLikert)>>\ <<set $qFiveLikertINT to parseFloat($qFiveLikert)>>\ <<set $qSixLikertINT to parseFloat($qSixLikert)>>\ <<set $qSevenLikertINT to parseFloat($qSevenLikert)>>\ <<set $qEightLikertINT to parseFloat($qEightLikert)>>\ <<set $qNineLikertINT to parseFloat($qNineLikert)>>\ <<set $qTenLikertINT to parseFloat($qTenLikert)>>\ <<set $qElevenLikertINT to parseFloat($qElevenLikert)>>\ <<set $qTwelveLikertINT to parseFloat($qTwelveLikert)>>\ <<set $qThirteenLikertINT to parseFloat($qThirteenLikert)>>\ <<set $spiderImpactful to $qOneLikertINT + $qSevenLikertINT + $qNineLikertINT >>\ <<set $spiderJoyful to $qSixLikertINT + $qElevenLikertINT + $qThirteenLikertINT>>\ <<set $spiderLocal to $qFiveLikertINT + $qSevenLikertINT + $qTenLikertINT>>\ <<set $spiderReflexive to $qFourLikertINT + $qSixLikertINT + $qTwelveLikertINT>>\ <<set $spiderSocial to $qTwoLikertINT + $qThreeLikertINT +$qEightLikertINT>>\ <<set $spiderOpen to $qThreeLikertINT + $qFiveLikertINT +$qEightLikertINT>>\ <div class="results">\ Based on the Critical Making project’s 6 Core Values, your scores are: $spiderImpactful / 9 on how <b>impactful</b> your practice is! <<showmeter 'impactfulBar' `$spiderImpactful / 9`>>\ $spiderJoyful / 9 on how <b>joyful and meaningful</b> your practice is! <<showmeter 'joyfulBar' `$spiderJoyful / 9`>>\ $spiderLocal / 9 on how <b>local and connected</b> your practice is! <<showmeter 'localBar' `$spiderLocal / 9`>>\ $spiderReflexive / 9 on how <b>reflexive</b> your practice is! <<showmeter 'reflexiveBar' `$spiderReflexive / 9`>>\ $spiderSocial / 9 on how <b>social and diverse</b> your practice is! <<showmeter 'socialBar' `$spiderSocial / 9`>>\ $spiderOpen / 9 on how <b>open</b> your practice is! <<showmeter 'openBar' `$spiderOpen / 9`>> Learn more about what these mean <a href="https://criticalmaking.eu/">here</a>.</div>\

<<set $start to true>>\ <<audio "knock" play>>\ <div class="challenges">\ <<say 'Hey there'>>It's another typical Saturday at the makerspace. You arrived early: today you are committed to finishing *that side project*. You're about to turn on the coffee machine when [[someone knocks at the door|Door]].<</say>> </div>

<span class="terminal-rojo">panda@nautilus:~$</span><<type 40ms keep class "terminal">>Makerspace! Of course... I remember my time at the local makerspace. Cool stuff. <</type>> <<timed 3s t8n>>\ <span class="terminal-azul">you@makerspace:~$</span> <<typesim "Really?? Tell me more about your projects!">> <<cont append>><<goto 'Q1c'>><</cont>> <</typesim>> <</timed>>

<span class="terminal-rojo">panda@nautilus:~$</span><<type 40ms keep class "terminal">>Well, lots of cool tech experiments for sure. But also many collabs with local communities. It felt like we could actually change something<</type>> <<timed 9s t8n>>\ <span class="terminal-azul">you@makerspace:~$</span> <<typesim "That's interesting. Someone just came in today...">> <<cont append>><<goto 'Q1d'>><</cont>> <</typesim>> <</timed>>

<span class="terminal-rojo">panda@nautilus:~$</span> <<type 40ms keep class "terminal">>What about you? Have you ever worked on maker projects where you felt something could actually change in the world? <</type>> <<timed 6s t8n>>\ <<include [[Q1 final]]>>\ <</timed>>\

<div id="storyTerminal"><span class="terminal-azul">you@makerspace:~$</span> <<type 40ms keep class "terminal">><<radiobutton "$qOneLikert" "1 - Not familiar">> Not really... I never had the chance <<radiobutton "$qOneLikert" "2 - Somehow familiar">> I had some experience but I wouldn't say a lot <<radiobutton "$qOneLikert" "3 - Very familiar">> Absolutely, the projects I work on are usually oriented towards social change<</type>> \ <<timed 8s t8n>>\ <span class="terminal-rojo">panda@nautilus:~$</span><<type 40ms keep class "terminal">>If you have, which kind of projects? <span class="terminal-azul"><<textbox '$qOne' ' '>></span> [[Let's keep moving|Q1 check]]<</type>> <</timed>></div>

<span class="challenges">Oh no...</span> <img src="img/Zine2.png" width="70%">\ <<speech "You">> Well, this is embarrasing. We'll have to [[check the website|Q2]].<</speech>>

<span class="terminal-rojo">panda@nautilus:~$</span> <<type 40ms keep class "terminal">>What about you? Have you tried talking about your space with other people, in a way that everyone feels included? <span class="terminal-azul">you@makerspace:~$</span> <span class="macro-type">\ <<radiobutton "$qTwoLikert" "1">> Not really... I never had the chance <<radiobutton "$qTwoLikert" "2">> I had some experience with inclusive language but I wouldn't say a lot <<radiobutton "$qTwoLikert" "3">> I have quite a lot of experience in explaining our work so it’s inclusive to all </span> <span class="terminal-rojo">panda@nautilus:~$</span> <span class="macro-type">Which ways have you tried?</span> <span class="terminal-azul"><<textbox '$qTwo' ' '>></span> [[Got it!|Q2 check]] <</type>>

<<speech "Granite">>"Welcome to the space! Here is a very good summary of my project. Let me know if you want to join!"<</speech>>\ <section class="paper">\ <article class="paperheader"></article>\ <div class="papertext">Project: Smart Home Security System <img src="img/cad.png" width=20%> The Smart Home System is a hardware project designed to provide a monitoring solution for homeowners. It utilizes IoT technology to connect various smart devices to a central hub that runs a back-end software application. This software application provides an API that allows users to remotely access and control their smart devices. To ensure the security of data transmissions between the hub and the user's devices, the system employs a VPN connection. <br> </div>\ </section> <<cont>><<goto 'prechallenge3'>><</cont>>

<span class="terminal-rojo">panda@nautilus:~$</span><<type 40ms keep class "terminal">>I get it. It's hard to explain complicated stuff in a simple way, but it's worth trying<</type>> <<timed 5s t8n>>\ <span class="terminal-azul">you@makerspace:~$</span> <<typesim "Maybe I'll do it next time">> <<include [[Q3final]]>> <</typesim>> <</timed>>

<span class="terminal-rojo">panda@nautilus:~$</span> <<type 40ms keep class "terminal">><span class="macro-type">What about you? Have you considered who is giving workshops or teaching in your space, and to find people who can make everyone feel welcome and included?</span> <span class="terminal-azul">you@makerspace:~$</span> <span class="macro-type">\ <<radiobutton "$qThreeLikert" "1">> Not really... I never had the chance <<radiobutton "$qThreeLikert" "2">> I had some experience but I wouldn't say a lot <<radiobutton "$qThreeLikert" "3">> Absolutely, we always consider who is leading workshops and try to make it accessible </span> <span class="terminal-rojo">panda@nautilus:~$</span> <span class="macro-type">How have you addressed this issue? </span> <span class="terminal-azul"><<textbox '$qThree' ' '>></span> [[Got it!|Q3 check]] <</type>>

<<audio "voices" stop>>\ <<speech "Marble">>So, we want to be able to test quickly if tap water is safe for consumption<</speech>> <<timed 2s t8n>><<speech "Granite">>We could make [[an app|Story 1.4b]] that checks official measurements and reports them back in a big screen!<</speech>><</timed>>

<<audio "voices" stop>>\ <<speech "You">>...So we can design a workshop where we all learn how to measure water quality with open source tools<</speech>> <<timed 2s t8n>><<speech "Marble">>"Yes! This idea is great, let's see [[what we need|prechallenge5]] to build the sensors" <</speech>><</timed>>\

<<audio "type" stop>>\ <<speech "You">>Hear me out. If there is no support for this kind of activities... Maybe we can "disguise" it as a tech project...?<</speech>> <<timed 2s t8n>><<speech "Marble">>What do you mean, [[how|Story 1.6b]] would that work?<</speech>><</timed>>

<<audio "type" stop>>\ <<speech "You">>So, we actually have [[a big problem|story1.77]] with this design...<</speech>>

<<audio "type" stop>>\ <<speech "Granite">>This project is getting tough...<</speech>> <<timed 2s t8n>><<speech "Marble">>I just called [[my friend Sam|story1.8b]], they work in design. I'm sure they can help.<</speech>><</timed>>

<<audio "type" stop>>\ <<audio "voices" play>>\ <span class="challenges">Today's special: everyone is at the school testing the devices!</span> <<cont>><<goto "story1.9b">><</cont>>

<<audio "type" stop>>\ <<speech "Marble">>Well, time to get serious! Another node from our community requested 150 devices for next month<</speech>> <<timed 2s t8n>><<speech "You">>No way we can do that without [[funding|story1.10b]]!<</speech>><</timed>>

<<audio "type" stop>>\ <<speech "You">>Good news! This is Kat from Makers Unite. She is visiting us today because this organization may support our project :)<</speech>> <<timed 2s t8n>><<speech "Marble">>That's awesome! Let us tell you more about the project, and [[try the devices|story1.11b]] together<</speech>><</timed>>

<<audio "type" stop>>\ <<speech "You">>Heeeeeeeeeeey! It's official! WaterTech wants to sponsor our project!<</speech>> <<timed 2s t8n>><<speech "Marble">>They said they can provide [[500 sensors|story1.12b]], isn't it great!?<</speech>><</timed>>

<<audio "type" stop>>\ <<audio "voices" play>>\ <span class="challenges">A few weeks after successfully working with the community, we are back in the makerspace!</span> <<cont>><<goto "story1.13b">><</cont>>

<span class="challenges">Can you find the key to get out of this maze?</span> <div id="labyrinth">\ <input type="radio" name="s" id="s_w_7" hidden>\  <div class="w l1 wf"></div>\ <div class="w l2 c2 w1"></div>\ <div class="w l2 c4 w4"></div>\ <div class="w l3 c1 w1"></div>\ <div class="w l3 c5 w5"></div>\ <div class="w l4 c2 w3"></div>\ <div class="w l4 c6 w2"></div>\ <div class="w l5 c2 w5"></div>\ <div class="w l6 c1 w1"></div>\ <div class="w l7 c3 w5"></div>\ <div class="w l8 c1 w1"></div>\ <div class="w l9 c3 w4"></div>\ <div class="w l9 c8 w1"></div>\ <div class="w l10 c3 w3"></div>\ <div class="w l11 c2 w4"></div>\ <div class="w l12 c3 w4"></div>\ <div class="w l13 wf"></div>\ \ <div class="w l1 h6"></div>\ <div class="w l8 h5"></div>\ <div class="w c2 l4 h1"></div>\ <div class="w c2 l8 h1"></div>\ <div class="w c2 l11 h2"></div>\ <div class="w c3 l2 h2"></div>\ <div class="w c3 l9 h1"></div>\ <div class="w c4 l2 h1"></div>\ <div class="w c5 l3 h1"></div>\ <div class="w c6 l4 h1"></div>\ <div class="w c7 l7 h4"></div>\ <div class="w c8 l2 h1"></div>\ <div class="w c8 l4 h3"></div>\ <div class="w c8 l9 h4"></div>\ <div class="w c9 l1 h1"></div>\ <div class="w c9 l3 h5"></div>\ <div class="w c9 l10 h3"></div>\ <div class="w c10 l2 h9"></div>\ <div class="w c11 l1 hf"></div>\ \ <input type="radio" name="s" id="s_1_1" hidden>\ <input type="radio" name="s" id="s_1_2" hidden>\ <input type="radio" name="s" id="s_1_3" hidden>\ <input type="radio" name="s" id="s_1_4" hidden>\ <input type="radio" name="s" id="s_1_5" hidden>\ <input type="radio" name="s" id="s_1_6" hidden>\ <input type="radio" name="s" id="s_1_7" hidden>\ <input type="radio" name="s" id="s_1_8" hidden>\ <input type="radio" name="s" id="s_1_9" hidden>\ <input type="radio" name="s" id="s_1_10" hidden>\ <input type="radio" name="s" id="s_1_11" hidden>\ <input type="radio" name="s" id="s_1_12" hidden>\ <input type="radio" name="s" id="s_2_1" hidden>\ <input type="radio" name="s" id="s_2_2" hidden>\ <input type="radio" name="s" id="s_2_3" hidden>\ <input type="radio" name="s" id="s_2_4" hidden>\ <input type="radio" name="s" id="s_2_5" hidden>\ <input type="radio" name="s" id="s_2_6" hidden>\ <input type="radio" name="s" id="s_2_7" hidden>\ <input type="radio" name="s" id="s_2_8" hidden>\ <input type="radio" name="s" id="s_2_9" hidden>\ <input type="radio" name="s" id="s_2_10" hidden>\ <input type="radio" name="s" id="s_2_11" hidden>\ <input type="radio" name="s" id="s_2_12" hidden>\ <input type="radio" name="s" id="s_3_1" hidden>\ <input type="radio" name="s" id="s_3_2" hidden>\ <input type="radio" name="s" id="s_3_3" hidden>\ <input type="radio" name="s" id="s_3_4" hidden>\ <input type="radio" name="s" id="s_3_5" hidden>\ <input type="radio" name="s" id="s_3_6" hidden>\ <input type="radio" name="s" id="s_3_7" hidden>\ <input type="radio" name="s" id="s_3_8" hidden>\ <input type="radio" name="s" id="s_3_9" hidden>\ <input type="radio" name="s" id="s_3_10" hidden>\ <input type="radio" name="s" id="s_3_11" hidden>\ <input type="radio" name="s" id="s_3_12" hidden>\ <input type="radio" name="s" id="s_4_1" hidden>\ <input type="radio" name="s" id="s_4_2" hidden>\ <input type="radio" name="s" id="s_4_3" hidden>\ <input type="radio" name="s" id="s_4_4" hidden>\ <input type="radio" name="s" id="s_4_5" hidden>\ <input type="radio" name="s" id="s_4_6" hidden>\ <input type="radio" name="s" id="s_4_7" hidden>\ <input type="radio" name="s" id="s_4_8" hidden>\ <input type="radio" name="s" id="s_4_9" hidden>\ <input type="radio" name="s" id="s_4_10" hidden>\ <input type="radio" name="s" id="s_4_11" hidden>\ <input type="radio" name="s" id="s_4_12" hidden>\ <input type="radio" name="s" id="s_5_1" hidden>\ <input type="radio" name="s" id="s_5_2" hidden>\ <input type="radio" name="s" id="s_5_3" hidden>\ <input type="radio" name="s" id="s_5_4" hidden>\ <input type="radio" name="s" id="s_5_5" hidden>\ <input type="radio" name="s" id="s_5_6" hidden>\ <input type="radio" name="s" id="s_5_7" hidden>\ <input type="radio" name="s" id="s_5_8" hidden>\ <input type="radio" name="s" id="s_5_9" hidden>\ <input type="radio" name="s" id="s_5_10" hidden>\ <input type="radio" name="s" id="s_5_11" hidden>\ <input type="radio" name="s" id="s_5_12" hidden>\ <input type="radio" name="s" id="s_6_1" hidden>\ <input type="radio" name="s" id="s_6_2" hidden>\ <input type="radio" name="s" id="s_6_3" hidden>\ <input type="radio" name="s" id="s_6_4" hidden>\ <input type="radio" name="s" id="s_6_5" hidden>\ <input type="radio" name="s" id="s_6_6" hidden>\ <input type="radio" name="s" id="s_6_7" hidden>\ <input type="radio" name="s" id="s_6_8" hidden>\ <input type="radio" name="s" id="s_6_9" hidden>\ <input type="radio" name="s" id="s_6_10" hidden>\ <input type="radio" name="s" id="s_6_11" hidden>\ <input type="radio" name="s" id="s_6_12" hidden>\ <input type="radio" name="s" id="s_7_1" hidden>\ <input type="radio" name="s" id="s_7_2" hidden>\ <input type="radio" name="s" id="s_7_3" hidden>\ <input type="radio" name="s" id="s_7_4" hidden>\ <input type="radio" name="s" id="s_7_5" hidden>\ <input type="radio" name="s" id="s_7_6" hidden>\ <input type="radio" name="s" id="s_7_7" hidden>\ <input type="radio" name="s" id="s_7_8" hidden>\ <input type="radio" name="s" id="s_7_9" hidden>\ <input type="radio" name="s" id="s_7_10" hidden>\ <input type="radio" name="s" id="s_7_11" hidden>\ <input type="radio" name="s" id="s_7_12" hidden>\ <input type="radio" name="s" id="s_8_1" hidden>\ <input type="radio" name="s" id="s_8_2" hidden>\ <input type="radio" name="s" id="s_8_3" hidden>\ <input type="radio" name="s" id="s_8_4" hidden>\ <input type="radio" name="s" id="s_8_5" hidden>\ <input type="radio" name="s" id="s_8_6" hidden>\ <input type="radio" name="s" id="s_8_7" hidden>\ <input type="radio" name="s" id="s_8_8" hidden>\ <input type="radio" name="s" id="s_8_9" hidden>\ <input type="radio" name="s" id="s_8_10" hidden>\ <input type="radio" name="s" id="s_8_11" hidden>\ <input type="radio" name="s" id="s_8_12" hidden>\ <input type="radio" name="s" id="s_9_1" hidden>\ <input type="radio" name="s" id="s_9_2" hidden>\ <input type="radio" name="s" id="s_9_3" checked hidden>\ <input type="radio" name="s" id="s_9_4" hidden>\ <input type="radio" name="s" id="s_9_5" hidden>\ <input type="radio" name="s" id="s_9_6" hidden>\ <input type="radio" name="s" id="s_9_7" hidden>\ <input type="radio" name="s" id="s_9_8" hidden>\ <input type="radio" name="s" id="s_9_9" hidden>\ <input type="radio" name="s" id="s_9_10" hidden>\ <input type="radio" name="s" id="s_9_11" hidden>\ <input type="radio" name="s" id="s_9_12" hidden>\ <input type="radio" name="s" id="s_10_1" hidden>\ <input type="radio" name="s" id="s_10_2" hidden>\ <input type="radio" name="s" id="s_10_3" hidden>\ <input type="radio" name="s" id="s_10_4" hidden>\ <input type="radio" name="s" id="s_10_5" hidden>\ <input type="radio" name="s" id="s_10_6" hidden>\ <input type="radio" name="s" id="s_10_7" hidden>\ <input type="radio" name="s" id="s_10_8" hidden>\ <input type="radio" name="s" id="s_10_9" hidden>\ <input type="radio" name="s" id="s_10_10" hidden>\ <input type="radio" name="s" id="s_10_11" hidden>\ <input type="radio" name="s" id="s_10_12" hidden>\ \ \ <label rel="p-1-1" class="t" for="s_f"></label>\ <label rel="p-1-1" class="l" for="s_f"></label>\ <label rel="p-1-1" class="r" for="s_2_1"></label>\ <label rel="p-1-1" class="b" for="s_1_2"></label>\ <label rel="p-2-1" class="t" for="s_f"></label>\ <label rel="p-2-1" class="l" for="s_1_1"></label>\ <label rel="p-2-1" class="r" for="s_3_1"></label>\ <label rel="p-2-1" class="b" for="s_f"></label>\ <label rel="p-3-1" class="t" for="s_f"></label>\ <label rel="p-3-1" class="l" for="s_2_1"></label>\ <label rel="p-3-1" class="r" for="s_4_1"></label>\ <label rel="p-3-1" class="b" for="s_3_2"></label>\ <label rel="p-4-1" class="t" for="s_f"></label>\ <label rel="p-4-1" class="l" for="s_3_1"></label>\ <label rel="p-4-1" class="r" for="s_5_1"></label>\ <label rel="p-4-1" class="b" for="s_f"></label>\ <label rel="p-5-1" class="t" for="s_f"></label>\ <label rel="p-5-1" class="l" for="s_4_1"></label>\ <label rel="p-5-1" class="r" for="s_6_1"></label>\ <label rel="p-5-1" class="b" for="s_f"></label>\ <label rel="p-6-1" class="t" for="s_f"></label>\ <label rel="p-6-1" class="l" for="s_5_1"></label>\ <label rel="p-6-1" class="r" for="s_7_1"></label>\ <label rel="p-6-1" class="b" for="s_f"></label>\ <label rel="p-7-1" class="t" for="s_f"></label>\ <label rel="p-7-1" class="l" for="s_6_1"></label>\ <label rel="p-7-1" class="r" for="s_8_1"></label>\ <label rel="p-7-1" class="b" for="s_f"></label>\ <label rel="p-8-1" class="t" for="s_f"></label>\ <label rel="p-8-1" class="l" for="s_7_1"></label>\ <label rel="p-8-1" class="r" for="s_f"></label>\ <label rel="p-8-1" class="b" for="s_8_2"></label>\ <label rel="p-9-1" class="t" for="s_f"></label>\ <label rel="p-9-1" class="l" for="s_f"></label>\ <label rel="p-9-1" class="r" for="s_10_1"></label>\ <label rel="p-9-1" class="b" for="s_9_2"></label>\ <label rel="p-10-1" class="t" for="s_f"></label>\ <label rel="p-10-1" class="l" for="s_9_1"></label>\ <label rel="p-10-1" class="r" for="s_f"></label>\ <label rel="p-10-1" class="b" for="s_10_2"></label>\ \ <label rel="p-1-2" class="t" for="s_1_1"></label>\ <label rel="p-1-2" class="l" for="s_f"></label>\ <label rel="p-1-2" class="r" for="s_2_2"></label>\ <label rel="p-1-2" class="b" for="s_f"></label>\ <label rel="p-2-2" class="t" for="s_f"></label>\ <label rel="p-2-2" class="l" for="s_1_2"></label>\ <label rel="p-2-2" class="r" for="s_f"></label>\ <label rel="p-2-2" class="b" for="s_2_3"></label>\ <label rel="p-3-2" class="t" for="s_3_1"></label>\ <label rel="p-3-2" class="l" for="s_f"></label>\ <label rel="p-3-2" class="r" for="s_f"></label>\ <label rel="p-3-2" class="b" for="s_3_3"></label>\ <label rel="p-4-2" class="t" for="s_f"></label>\ <label rel="p-4-2" class="l" for="s_f"></label>\ <label rel="p-4-2" class="r" for="s_5_2"></label>\ <label rel="p-4-2" class="b" for="s_4_3"></label>\ <label rel="p-5-2" class="t" for="s_f"></label>\ <label rel="p-5-2" class="l" for="s_4_2"></label>\ <label rel="p-5-2" class="r" for="s_6_2"></label>\ <label rel="p-5-2" class="b" for="s_f"></label>\ <label rel="p-6-2" class="t" for="s_f"></label> <label rel="p-6-2" class="l" for="s_5_2"></label> <label rel="p-6-2" class="r" for="s_7_2"></label> <label rel="p-6-2" class="b" for="s_f"></label> <label rel="p-7-2" class="t" for="s_f"></label> <label rel="p-7-2" class="l" for="s_6_2"></label> <label rel="p-7-2" class="r" for="s_f"></label> <label rel="p-7-2" class="b" for="s_f"></label> <label rel="p-8-2" class="t" for="s_8_1"></label> <label rel="p-8-2" class="l" for="s_f"></label> <label rel="p-8-2" class="r" for="s_9_2"></label> <label rel="p-8-2" class="b" for="s_f"></label> <label rel="p-9-2" class="t" for="s_9_1"></label> <label rel="p-9-2" class="l" for="s_8_2"></label> <label rel="p-9-2" class="r" for="s_f"></label> <label rel="p-9-2" class="b" for="s_f"></label> <label rel="p-10-2" class="t" for="s_10_1"></label> <label rel="p-10-2" class="l" for="s_f"></label> <label rel="p-10-2" class="r" for="s_f"></label> <label rel="p-10-2" class="b" for="s_10_3"></label>  <label rel="p-1-3" class="t" for="s_f"></label> <label rel="p-1-3" class="l" for="s_f"></label> <label rel="p-1-3" class="r" for="s_2_3"></label> <label rel="p-1-3" class="b" for="s_1_4"></label> <label rel="p-2-3" class="t" for="s_2_2"></label> <label rel="p-2-3" class="l" for="s_1_3"></label> <label rel="p-2-3" class="r" for="s_f"></label> <label rel="p-2-3" class="b" for="s_f"></label> <label rel="p-3-3" class="t" for="s_3_2"></label> <label rel="p-3-3" class="l" for="s_f"></label> <label rel="p-3-3" class="r" for="s_4_3"></label> <label rel="p-3-3" class="b" for="s_f"></label> <label rel="p-4-3" class="t" for="s_4_2"></label> <label rel="p-4-3" class="l" for="s_3_3"></label> <label rel="p-4-3" class="r" for="s_f"></label> <label rel="p-4-3" class="b" for="s_f"></label> <label rel="p-5-3" class="t" for="s_f"></label> <label rel="p-5-3" class="l" for="s_f"></label> <label rel="p-5-3" class="r" for="s_6_3"></label> <label rel="p-5-3" class="b" for="s_5_4"></label> <label rel="p-6-3" class="t" for="s_f"></label> <label rel="p-6-3" class="l" for="s_5_3"></label> <label rel="p-6-3" class="r" for="s_7_3"></label> <label rel="p-6-3" class="b" for="s_f"></label> <label rel="p-7-3" class="t" for="s_f"></label> <label rel="p-7-3" class="l" for="s_6_3"></label> <label rel="p-7-3" class="r" for="s_8_3"></label> <label rel="p-7-3" class="b" for="s_f"></label> <label rel="p-8-3" class="t" for="s_f"></label> <label rel="p-8-3" class="l" for="s_7_3"></label> <label rel="p-8-3" class="r" for="s_f"></label> <label rel="p-8-3" class="b" for="s_8_4"></label> <label rel="p-9-3" class="t" for="s_f"></label> <label rel="p-9-3" class="l" for="s_f"></label> <label rel="p-9-3" class="r" for="s_f"></label> <label rel="p-9-3" class="b" for="s_9_4"></label> <label rel="p-10-3" class="t" for="s_10_2"></label> <label rel="p-10-3" class="l" for="s_f"></label> <label rel="p-10-3" class="r" for="s_f"></label> <label rel="p-10-3" class="b" for="s_10_4"></label>  <label rel="p-1-4" class="t" for="s_1_3"></label> <label rel="p-1-4" class="l" for="s_f"></label> <label rel="p-1-4" class="r" for="s_f"></label> <label rel="p-1-4" class="b" for="s_1_5"></label> <label rel="p-2-4" class="t" for="s_f"></label> <label rel="p-2-4" class="l" for="s_f"></label> <label rel="p-2-4" class="r" for="s_3_4"></label> <label rel="p-2-4" class="b" for="s_f"></label> <label rel="p-3-4" class="t" for="s_f"></label> <label rel="p-3-4" class="l" for="s_2_4"></label> <label rel="p-3-4" class="r" for="s_4_4"></label> <label rel="p-3-4" class="b" for="s_f"></label> <label rel="p-4-4" class="t" for="s_f"></label> <label rel="p-4-4" class="l" for="s_3_4"></label> <label rel="p-4-4" class="r" for="s_5_4"></label> <label rel="p-4-4" class="b" for="s_f"></label> <label rel="p-5-4" class="t" for="s_5_3"></label> <label rel="p-5-4" class="l" for="s_4_4"></label> <label rel="p-5-4" class="r" for="s_f"></label> <label rel="p-5-4" class="b" for="s_f"></label> <label rel="p-6-4" class="t" for="s_f"></label> <label rel="p-6-4" class="l" for="s_f"></label> <label rel="p-6-4" class="r" for="s_7_4"></label> <label rel="p-6-4" class="b" for="s_f"></label> <label rel="p-7-4" class="t" for="s_f"></label> <label rel="p-7-4" class="l" for="s_6_4"></label> <label rel="p-7-4" class="r" for="s_f"></label> <label rel="p-7-4" class="b" for="s_7_5"></label> <label rel="p-8-4" class="t" for="s_8_3"></label> <label rel="p-8-4" class="l" for="s_f"></label> <label rel="p-8-4" class="r" for="s_f"></label> <label rel="p-8-4" class="b" for="s_8_5"></label> <label rel="p-9-4" class="t" for="s_9_3"></label> <label rel="p-9-4" class="l" for="s_f"></label> <label rel="p-9-4" class="r" for="s_f"></label> <label rel="p-9-4" class="b" for="s_9_5"></label> <label rel="p-10-4" class="t" for="s_10_3"></label> <label rel="p-10-4" class="l" for="s_f"></label> <label rel="p-10-4" class="r" for="s_f"></label> <label rel="p-10-4" class="b" for="s_10_5"></label>  <label rel="p-1-5" class="t" for="s_1_4"></label> <label rel="p-1-5" class="l" for="s_f"></label> <label rel="p-1-5" class="r" for="s_2_5"></label> <label rel="p-1-5" class="b" for="s_f"></label> <label rel="p-2-5" class="t" for="s_f"></label> <label rel="p-2-5" class="l" for="s_1_5"></label> <label rel="p-2-5" class="r" for="s_3_5"></label> <label rel="p-2-5" class="b" for="s_2_6"></label> <label rel="p-3-5" class="t" for="s_f"></label> <label rel="p-3-5" class="l" for="s_2_5"></label> <label rel="p-3-5" class="r" for="s_4_5"></label> <label rel="p-3-5" class="b" for="s_3_6"></label> <label rel="p-4-5" class="t" for="s_f"></label> <label rel="p-4-5" class="l" for="s_3_5"></label> <label rel="p-4-5" class="r" for="s_5_5"></label> <label rel="p-4-5" class="b" for="s_4_6"></label> <label rel="p-5-5" class="t" for="s_f"></label> <label rel="p-5-5" class="l" for="s_4_5"></label> <label rel="p-5-5" class="r" for="s_6_5"></label> <label rel="p-5-5" class="b" for="s_5_6"></label> <label rel="p-6-5" class="t" for="s_f"></label> <label rel="p-6-5" class="l" for="s_5_5"></label> <label rel="p-6-5" class="r" for="s_7_5"></label> <label rel="p-6-5" class="b" for="s_6_6"></label> <label rel="p-7-5" class="t" for="s_7_4"></label> <label rel="p-7-5" class="l" for="s_6_5"></label> <label rel="p-7-5" class="r" for="s_f"></label> <label rel="p-7-5" class="b" for="s_7_6"></label> <label rel="p-8-5" class="t" for="s_8_4"></label> <label rel="p-8-5" class="l" for="s_f"></label> <label rel="p-8-5" class="r" for="s_f"></label> <label rel="p-8-5" class="b" for="s_8_6"></label> <label rel="p-9-5" class="t" for="s_9_4"></label> <label rel="p-9-5" class="l" for="s_f"></label> <label rel="p-9-5" class="r" for="s_f"></label> <label rel="p-9-5" class="b" for="s_9_6"></label> <label rel="p-10-5" class="t" for="s_10_4"></label> <label rel="p-10-5" class="l" for="s_f"></label> <label rel="p-10-5" class="r" for="s_f"></label> <label rel="p-10-5" class="b" for="s_10_6"></label>  <label rel="p-1-6" class="t" for="s_f"></label> <label rel="p-1-6" class="l" for="s_f"></label> <label rel="p-1-6" class="r" for="s_2_6"></label> <label rel="p-1-6" class="b" for="s_1_7"></label> <label rel="p-2-6" class="t" for="s_2_5"></label> <label rel="p-2-6" class="l" for="s_1_6"></label> <label rel="p-2-6" class="r" for="s_3_6"></label> <label rel="p-2-6" class="b" for="s_2_7"></label> <label rel="p-3-6" class="t" for="s_3_5"></label> <label rel="p-3-6" class="l" for="s_2_6"></label> <label rel="p-3-6" class="r" for="s_4_6"></label> <label rel="p-3-6" class="b" for="s_f"></label> <label rel="p-4-6" class="t" for="s_4_5"></label> <label rel="p-4-6" class="l" for="s_3_6"></label> <label rel="p-4-6" class="r" for="s_5_6"></label> <label rel="p-4-6" class="b" for="s_f"></label> <label rel="p-5-6" class="t" for="s_5_5"></label> <label rel="p-5-6" class="l" for="s_4_6"></label> <label rel="p-5-6" class="r" for="s_6_6"></label> <label rel="p-5-6" class="b" for="s_f"></label> <label rel="p-6-6" class="t" for="s_6_5"></label> <label rel="p-6-6" class="l" for="s_5_6"></label> <label rel="p-6-6" class="r" for="s_7_6"></label> <label rel="p-6-6" class="b" for="s_f"></label> <label rel="p-7-6" class="t" for="s_7_5"></label> <label rel="p-7-6" class="l" for="s_6_6"></label> <label rel="p-7-6" class="r" for="s_f"></label> <label rel="p-7-6" class="b" for="s_f"></label> <label rel="p-8-6" class="t" for="s_8_5"></label> <label rel="p-8-6" class="l" for="s_f"></label> <label rel="p-8-6" class="r" for="s_f"></label> <label rel="p-8-6" class="b" for="s_8_7"></label> <label rel="p-9-6" class="t" for="s_9_5"></label> <label rel="p-9-6" class="l" for="s_f"></label> <label rel="p-9-6" class="r" for="s_f"></label> <label rel="p-9-6" class="b" for="s_9_7"></label> <label rel="p-10-6" class="t" for="s_10_5"></label> <label rel="p-10-6" class="l" for="s_f"></label> <label rel="p-10-6" class="r" for="s_f"></label> <label rel="p-10-6" class="b" for="s_10_7"></label>  <label rel="p-1-7" class="t" for="s_1_6"></label> <label rel="p-1-7" class="l" for="s_w_7"></label> <label rel="p-1-7" class="r" for="s_2_7"></label> <label rel="p-1-7" class="b" for="s_f"></label> <label rel="p-2-7" class="t" for="s_2_6"></label> <label rel="p-2-7" class="l" for="s_1_7"></label> <label rel="p-2-7" class="r" for="s_3_7"></label> <label rel="p-2-7" class="b" for="s_2_8"></label> <label rel="p-3-7" class="t" for="s_f"></label> <label rel="p-3-7" class="l" for="s_2_7"></label> <label rel="p-3-7" class="r" for="s_4_7"></label> <label rel="p-3-7" class="b" for="s_3_8"></label> <label rel="p-4-7" class="t" for="s_f"></label> <label rel="p-4-7" class="l" for="s_3_7"></label> <label rel="p-4-7" class="r" for="s_5_7"></label> <label rel="p-4-7" class="b" for="s_4_8"></label> <label rel="p-5-7" class="t" for="s_f"></label> <label rel="p-5-7" class="l" for="s_4_7"></label> <label rel="p-5-7" class="r" for="s_6_7"></label> <label rel="p-5-7" class="b" for="s_5_8"></label> <label rel="p-6-7" class="t" for="s_f"></label> <label rel="p-6-7" class="l" for="s_5_7"></label> <label rel="p-6-7" class="r" for="s_f"></label> <label rel="p-6-7" class="b" for="s_6_8"></label> <label rel="p-7-7" class="t" for="s_f"></label> <label rel="p-7-7" class="l" for="s_f"></label> <label rel="p-7-7" class="r" for="s_8_7"></label> <label rel="p-7-7" class="b" for="s_7_8"></label> <label rel="p-8-7" class="t" for="s_8_6"></label> <label rel="p-8-7" class="l" for="s_7_7"></label> <label rel="p-8-7" class="r" for="s_f"></label> <label rel="p-8-7" class="b" for="s_8_8"></label> <label rel="p-9-7" class="t" for="s_9_6"></label> <label rel="p-9-7" class="l" for="s_f"></label> <label rel="p-9-7" class="r" for="s_f"></label> <label rel="p-9-7" class="b" for="s_9_8"></label> <label rel="p-10-7" class="t" for="s_10_6"></label> <label rel="p-10-7" class="l" for="s_f"></label> <label rel="p-10-7" class="r" for="s_f"></label> <label rel="p-10-7" class="b" for="s_10_8"></label>  <label rel="p-1-8" class="t" for="s_f"></label> <label rel="p-1-8" class="l" for="s_f"></label> <label rel="p-1-8" class="r" for="s_f"></label> <label rel="p-1-8" class="b" for="s_1_9"></label> <label rel="p-2-8" class="t" for="s_2_7"></label> <label rel="p-2-8" class="l" for="s_f"></label> <label rel="p-2-8" class="r" for="s_3_8"></label> <label rel="p-2-8" class="b" for="s_2_9"></label> <label rel="p-3-8" class="t" for="s_3_7"></label> <label rel="p-3-8" class="l" for="s_2_8"></label> <label rel="p-3-8" class="r" for="s_4_8"></label> <label rel="p-3-8" class="b" for="s_f"></label> <label rel="p-4-8" class="t" for="s_4_7"></label> <label rel="p-4-8" class="l" for="s_3_8"></label> <label rel="p-4-8" class="r" for="s_5_8"></label> <label rel="p-4-8" class="b" for="s_f"></label> <label rel="p-5-8" class="t" for="s_5_7"></label> <label rel="p-5-8" class="l" for="s_4_8"></label> <label rel="p-5-8" class="r" for="s_6_8"></label> <label rel="p-5-8" class="b" for="s_f"></label> <label rel="p-6-8" class="t" for="s_6_7"></label> <label rel="p-6-8" class="l" for="s_5_8"></label> <label rel="p-6-8" class="r" for="s_f"></label> <label rel="p-6-8" class="b" for="s_f"></label> <label rel="p-7-8" class="t" for="s_7_7"></label> <label rel="p-7-8" class="l" for="s_f"></label> <label rel="p-7-8" class="r" for="s_8_8"></label> <label rel="p-7-8" class="b" for="s_7_9"></label> <label rel="p-8-8" class="t" for="s_8_7"></label> <label rel="p-8-8" class="l" for="s_7_8"></label> <label rel="p-8-8" class="r" for="s_9_8"></label> <label rel="p-8-8" class="b" for="s_f"></label> <label rel="p-9-8" class="t" for="s_9_7"></label> <label rel="p-9-8" class="l" for="s_8_8"></label> <label rel="p-9-8" class="r" for="s_f"></label> <label rel="p-9-8" class="b" for="s_9_9"></label> <label rel="p-10-8" class="t" for="s_10_7"></label> <label rel="p-10-8" class="l" for="s_f"></label> <label rel="p-10-8" class="r" for="s_f"></label> <label rel="p-10-8" class="b" for="s_10_9"></label>  <label rel="p-1-9" class="t" for="s_1_8"></label> <label rel="p-1-9" class="l" for="s_f"></label> <label rel="p-1-9" class="r" for="s_2_9"></label> <label rel="p-1-9" class="b" for="s_1_10"></label> <label rel="p-2-9" class="t" for="s_2_8"></label> <label rel="p-2-9" class="l" for="s_1_9"></label> <label rel="p-2-9" class="r" for="s_f"></label> <label rel="p-2-9" class="b" for="s_2_10"></label> <label rel="p-3-9" class="t" for="s_f"></label> <label rel="p-3-9" class="l" for="s_f"></label> <label rel="p-3-9" class="r" for="s_4_9"></label> <label rel="p-3-9" class="b" for="s_f"></label> <label rel="p-4-9" class="t" for="s_f"></label> <label rel="p-4-9" class="l" for="s_3_9"></label> <label rel="p-4-9" class="r" for="s_5_9"></label> <label rel="p-4-9" class="b" for="s_f"></label> <label rel="p-5-9" class="t" for="s_f"></label> <label rel="p-5-9" class="l" for="s_4_9"></label> <label rel="p-5-9" class="r" for="s_6_9"></label> <label rel="p-5-9" class="b" for="s_f"></label> <label rel="p-6-9" class="t" for="s_f"></label> <label rel="p-6-9" class="l" for="s_5_9"></label> <label rel="p-6-9" class="r" for="s_f"></label> <label rel="p-6-9" class="b" for="s_6_10"></label> <label rel="p-7-9" class="t" for="s_7_8"></label> <label rel="p-7-9" class="l" for="s_f"></label> <label rel="p-7-9" class="r" for="s_f"></label> <label rel="p-7-9" class="b" for="s_7_10"></label> <label rel="p-8-9" class="t" for="s_f"></label> <label rel="p-8-9" class="l" for="s_f"></label> <label rel="p-8-9" class="r" for="s_9_9"></label> <label rel="p-8-9" class="b" for="s_8_10"></label> <label rel="p-9-9" class="t" for="s_9_8"></label> <label rel="p-9-9" class="l" for="s_8_9"></label> <label rel="p-9-9" class="r" for="s_f"></label> <label rel="p-9-9" class="b" for="s_9_10"></label> <label rel="p-10-9" class="t" for="s_10_8"></label> <label rel="p-10-9" class="l" for="s_f"></label> <label rel="p-10-9" class="r" for="s_f"></label> <label rel="p-10-9" class="b" for="s_10_10"></label>  <label rel="p-1-10" class="t" for="s_1_9"></label> <label rel="p-1-10" class="l" for="s_f"></label> <label rel="p-1-10" class="r" for="s_2_10"></label> <label rel="p-1-10" class="b" for="s_1_11"></label> <label rel="p-2-10" class="t" for="s_2_9"></label> <label rel="p-2-10" class="l" for="s_1_10"></label> <label rel="p-2-10" class="r" for="s_3_10"></label> <label rel="p-2-10" class="b" for="s_f"></label> <label rel="p-3-10" class="t" for="s_f"></label> <label rel="p-3-10" class="l" for="s_2_10"></label> <label rel="p-3-10" class="r" for="s_4_10"></label> <label rel="p-3-10" class="b" for="s_f"></label> <label rel="p-4-10" class="t" for="s_f"></label> <label rel="p-4-10" class="l" for="s_3_10"></label> <label rel="p-4-10" class="r" for="s_5_10"></label> <label rel="p-4-10" class="b" for="s_f"></label> <label rel="p-5-10" class="t" for="s_f"></label> <label rel="p-5-10" class="l" for="s_4_10"></label> <label rel="p-5-10" class="r" for="s_6_10"></label> <label rel="p-5-10" class="b" for="s_f"></label> <label rel="p-6-10" class="t" for="s_6_9"></label> <label rel="p-6-10" class="l" for="s_5_10"></label> <label rel="p-6-10" class="r" for="s_f"></label> <label rel="p-6-10" class="b" for="s_6_11"></label> <label rel="p-7-10" class="t" for="s_7_9"></label> <label rel="p-7-10" class="l" for="s_f"></label> <label rel="p-7-10" class="r" for="s_f"></label> <label rel="p-7-10" class="b" for="s_7_11"></label> <label rel="p-8-10" class="t" for="s_8_9"></label> <label rel="p-8-10" class="l" for="s_f"></label> <label rel="p-8-10" class="r" for="s_f"></label> <label rel="p-8-10" class="b" for="s_8_11"></label> <label rel="p-9-10" class="t" for="s_9_9"></label> <label rel="p-9-10" class="l" for="s_f"></label> <label rel="p-9-10" class="r" for="s_f"></label> <label rel="p-9-10" class="b" for="s_9_11"></label> <label rel="p-10-10" class="t" for="s_10_9"></label> <label rel="p-10-10" class="l" for="s_f"></label> <label rel="p-10-10" class="r" for="s_f"></label> <label rel="p-10-10" class="b" for="s_10_11"></label>  <label rel="p-1-11" class="t" for="s_1_10"></label> <label rel="p-1-11" class="l" for="s_f"></label> <label rel="p-1-11" class="r" for="s_f"></label> <label rel="p-1-11" class="b" for="s_1_12"></label> <label rel="p-2-11" class="t" for="s_f"></label> <label rel="p-2-11" class="l" for="s_f"></label> <label rel="p-2-11" class="r" for="s_3_11"></label> <label rel="p-2-11" class="b" for="s_2_12"></label> <label rel="p-3-11" class="t" for="s_f"></label> <label rel="p-3-11" class="l" for="s_2_11"></label> <label rel="p-3-11" class="r" for="s_4_11"></label> <label rel="p-3-11" class="b" for="s_f"></label> <label rel="p-4-11" class="t" for="s_f"></label> <label rel="p-4-11" class="l" for="s_3_11"></label> <label rel="p-4-11" class="r" for="s_5_11"></label> <label rel="p-4-11" class="b" for="s_f"></label> <label rel="p-5-11" class="t" for="s_f"></label> <label rel="p-5-11" class="l" for="s_4_11"></label> <label rel="p-5-11" class="r" for="s_6_11"></label> <label rel="p-5-11" class="b" for="s_f"></label> <label rel="p-6-11" class="t" for="s_6_10"></label> <label rel="p-6-11" class="l" for="s_5_11"></label> <label rel="p-6-11" class="r" for="s_7_11"></label> <label rel="p-6-11" class="b" for="s_f"></label> <label rel="p-7-11" class="t" for="s_7_10"></label> <label rel="p-7-11" class="l" for="s_6_11"></label> <label rel="p-7-11" class="r" for="s_f"></label> <label rel="p-7-11" class="b" for="s_7_12"></label> <label rel="p-8-11" class="t" for="s_8_10"></label> <label rel="p-8-11" class="l" for="s_f"></label> <label rel="p-8-11" class="r" for="s_f"></label> <label rel="p-8-11" class="b" for="s_8_12"></label> <label rel="p-9-11" class="t" for="s_9_10"></label> <label rel="p-9-11" class="l" for="s_f"></label> <label rel="p-9-11" class="r" for="s_10_11"></label> <label rel="p-9-11" class="b" for="s_9_12"></label> <label rel="p-10-11" class="t" for="s_10_10"></label> <label rel="p-10-11" class="l" for="s_9_11"></label> <label rel="p-10-11" class="r" for="s_f"></label> <label rel="p-10-11" class="b" for="s_10_12"></label>  <label rel="p-1-12" class="t" for="s_1_11"></label> <label rel="p-1-12" class="l" for="s_f"></label> <label rel="p-1-12" class="r" for="s_f"></label> <label rel="p-1-12" class="b" for="s_f"></label> <label rel="p-2-12" class="t" for="s_2_11"></label> <label rel="p-2-12" class="l" for="s_f"></label> <label rel="p-2-12" class="r" for="s_3_12"></label> <label rel="p-2-12" class="b" for="s_f"></label> <label rel="p-3-12" class="t" for="s_f"></label> <label rel="p-3-12" class="l" for="s_2_12"></label> <label rel="p-3-12" class="r" for="s_4_12"></label> <label rel="p-3-12" class="b" for="s_f"></label> <label rel="p-4-12" class="t" for="s_f"></label> <label rel="p-4-12" class="l" for="s_3_12"></label> <label rel="p-4-12" class="r" for="s_5_12"></label> <label rel="p-4-12" class="b" for="s_f"></label> <label rel="p-5-12" class="t" for="s_f"></label> <label rel="p-5-12" class="l" for="s_4_12"></label> <label rel="p-5-12" class="r" for="s_6_12"></label> <label rel="p-5-12" class="b" for="s_f"></label> <label rel="p-6-12" class="t" for="s_f"></label> <label rel="p-6-12" class="l" for="s_5_12"></label> <label rel="p-6-12" class="r" for="s_7_12"></label> <label rel="p-6-12" class="b" for="s_f"></label> <label rel="p-7-12" class="t" for="s_7_11"></label> <label rel="p-7-12" class="l" for="s_6_12"></label> <label rel="p-7-12" class="r" for="s_f"></label> <label rel="p-7-12" class="b" for="s_f"></label> <label rel="p-8-12" class="t" for="s_8_11"></label> <label rel="p-8-12" class="l" for="s_f"></label> <label rel="p-8-12" class="r" for="s_f"></label> <label rel="p-8-12" class="b" for="s_f"></label> <label rel="p-9-12" class="t" for="s_9_11"></label> <label rel="p-9-12" class="l" for="s_f"></label> <label rel="p-9-12" class="r" for="s_10_12"></label> <label rel="p-9-12" class="b" for="s_f"></label> <label rel="p-10-12" class="t" for="s_10_11"></label> <label rel="p-10-12" class="l" for="s_9_12"></label> <label rel="p-10-12" class="r" for="s_f"></label> <label rel="p-10-12" class="b" for="s_f"></label> <div id="boy"></div> <div id="congratulation"> The key is: LISTEN </div> </div> <div class="challenges" style="margin-top: 80px;"><<textboxPlus "mazeKey" "$mazeKey" `{ maxlength: 6}`>>\ [[Enter the key|challenge4check]]</div> <span class="skip">[[Skip this challenge|Q4]]</span>

<<if visited() is 1>> <<set $starsCount += 1>>\ <<notify>>🌟 You earned a star!<</notify>>\ <<audio "coin2" play>>\ <</if>> <<if $doorOption is 1>>\ <<include [[Q4]]>> <</if>>\

<<audio "type" play>>\ <<if visited() is 1>> <span class="terminal-rojo">panda@nautilus:~$</span><<type 40ms keep class "terminal">>Overengineering much...?<</type>> <<cont append keypress>>\ <span class="terminal-azul">you@makerspace:~$</span> <<typesim "It’s so easy to get carried away and start planning a project only from your own point of view...">> <<include [[Q4final]]>> <</typesim>> <</cont>> <<else>> <span class="terminal-rojo">panda@nautilus:~$</span> <span class="macro-type">Have you experienced any situations were makers got too excited and the solutions started getting too far away from people’s needs?</span> <span class="terminal-azul">you@makerspace:~$</span> <span class="macro-type">\ <<radiobutton "$qFourLikert" "1">> Not really... It hasn't happened to me yet <<radiobutton "$qFourLikert" "2">> I have seen some examples but I wouldn't say a lot <<radiobutton "$qFourLikert" "3">> Yes, many times </span> <span class="terminal-rojo">panda@nautilus:~$</span> <span class="macro-type">Tell me more about that if you feel like it. Do you have any ideas how to better understand each other’s problems?</span> <span class="terminal-azul"><<textbox '$qFour' ' '>></span> [[Got it!|Q4 check]] <</if>>

<span class="terminal-rojo">panda@nautilus:~$</span><<type 40ms keep class "terminal">>I think it's all about listening, paying attention to what the other person has to say.<</type>> <<timed 5s t8n>>\ <span class="terminal-azul">you@makerspace:~$</span> <<typesim "That’s one useful skill to learn…">> <<include [[Q4final]]>> <</typesim>> <</timed>>

<<if $qFourLikert is 0>>\ <span class="challenges">Please make sure you choose one of the options before moving on! <<return>> </span> <<elseif $stickerFour is true>>\ <<goto 'prestory1.5'>> <<else>> <<audio "type" stop>>\ <<audio "key" play>>\ <<set $stickerFour to true>>\ <<set $questionsCount.pushUnique("answer4")>>\ <span class="challenges">Congratulations! You got a new [[sticker|Passport]] for your laptop!</span> <<cont>><<goto 'prestory1.5'>><</cont>> <</if>>\

<span class="terminal-rojo">panda@nautilus:~$</span> <<type 40ms keep class "terminal">><span class="macro-type">Have you experienced any situations were makers got too excited and the solutions started getting too far away from people’s needs?</span> <span class="terminal-azul">you@makerspace:~$</span> <span class="macro-type">\ <<radiobutton "$qFourLikert" "1">> Not really... It hasn't happened to me yet <<radiobutton "$qFourLikert" "2">> I have seen some examples but I wouldn't say a lot <<radiobutton "$qFourLikert" "3">> Yes, many times </span> <span class="terminal-rojo">panda@nautilus:~$</span> <span class="macro-type">Tell me more about that if you feel like it. Do you have any ideas how to better understand each other’s problems?</span> <span class="terminal-azul"><<textbox '$qFour' ' '>></span> [[Got it!|Q4 check]] <</type>>

<div class="challenges">Find the shortest pathway between these components, using each of them at least once.</div>\ <img src="img/pathways.jpg" width=40%> <span class="challenge-questions">Which is the shortest path?</span> [img[img/patha.jpg][challenge5checkA]] [img[img/pathb.jpg][challenge5checkB]] [img[img/Solution.jpg][challenge5checkC]] <span class="skip">[[Skip this challenge|Q5]]</span>

<<goto 'Coin5'>>

<<if visited() is 1>> <<set $starsCount += 1>>\ <<notify>>🌟 You earned a star!<</notify>>\ <<audio "coin2" play>>\ <</if>> <<if $doorOption is 1>>\ <<include [[Q5]]>> <</if>>\

<<audio "type" play>>\ <<if visited() is 1>> <span class="terminal-rojo">panda@nautilus:~$</span><<type 40ms keep class "terminal">>That puzzle is called "travelling salesman problem", it's an interesting Algorithm to find the shortest and most efficient route<</type>> <<cont append keypress>>\ <span class="terminal-azul">you@makerspace:~$</span> <<typesim "I knew I had seen it somewhere...">> <<include [[Q5b]]>> <</typesim>> <</cont>> <<else>> <span class="terminal-rojo">panda@nautilus:~$</span> <span class="macro-type">Have you ever had to work around scarce resources or lack of skills in your project?</span> <span class="terminal-azul">you@makerspace:~$</span> <span class="macro-type">\ <<radiobutton "$qFiveLikert" "1">> Not really... I never had the chance <<radiobutton "$qFiveLikert" "2">> I had some experience but I wouldn't say a lot <<radiobutton "$qFiveLikert" "3">> Definitely, we always need to design with very few resources </span> <span class="terminal-rojo">panda@nautilus:~$</span> <span class="macro-type">How do you manage?</span> <span class="terminal-azul"><<textbox '$qFive' ' '>></span> [[Let's keep moving|Q5 check]] <</if>>

<span class="terminal-rojo">panda@nautilus:~$</span><<type 40ms keep class "terminal">>It's a nice challenge to work with and make the most of what you already have, what do you think?<</type>> <<timed 5s t8n>>\ <span class="terminal-azul">you@makerspace:~$</span> <<typesim "It is, but sometimes people really have too few things to work with...">> <<include [[Q5final]]>> <</typesim>> <</timed>>

<<if $qFiveLikert is 0>>\ <span class="challenges">Please make sure you choose one of the options before moving on! <<return>> </span> <<elseif $stickerFive is true>>\ <<goto 'Story 1.6'>> <<else>>\ <<audio "type" stop>>\ <<audio "key" play>>\ <<set $stickerFive to true>>\ <<set $questionsCount.pushUnique("answer5")>>\ <span class="challenges">Hey! You got a new [[sticker|Passport]] :)</span> <<cont>><<goto 'Story 1.6'>><</cont>> <</if>>\

<span class="terminal-rojo">panda@nautilus:~$</span> <<type 40ms keep class "terminal">><span class="macro-type">Have you ever had to work around scarce resources or lack of skills in your project?</span> <span class="terminal-azul">you@makerspace:~$</span> <span class="macro-type">\ <<radiobutton "$qFiveLikert" "1">> Not really... I never had the chance <<radiobutton "$qFiveLikert" "2">> I had some experience but I wouldn't say a lot <<radiobutton "$qFiveLikert" "3">> Definitely, we always need to design with very few resources </span> <span class="terminal-rojo">panda@nautilus:~$</span> <span class="macro-type">How do you manage?</span> <span class="terminal-azul"><<textbox '$qFive' ' '>></span> [[Let's keep moving|Q5 check]] <</type>>

<<audio "coin2" play>>\ <<set $beansChecker to true>>\ <span class="challenges">You got a screwdriver!</span>\ <<include [[challenge1 check]]>>

<<audio "coin2" play>>\ <<set $pressChecker to true>>\ <span class="challenges">You got a bag of bolts & nuts!</span>\ <<include [[challenge1 check]]>>

<<audio "coin2" play>>\ <<set $grinderChecker to true>> <span class="challenges">You found an allen key set!</span>\ <<include [[challenge1 check]]>>

<<speech "Marble">> Well we are currently working on a water quality project. And I think we can collaborate!" <</speech>> <<timed 2s t8n>><<speech "You">> Sounds awesome. If you want to come in I'll introduce you to the space. Do you want [[some coffee|challenge1]]?<</speech>><</timed>>

<span class="challenges">Can you gather the necessary items to repair the coffee machine?</span> <img class="rainbow-border" src="img/kitchen.jpg" usemap="#image-map"> <map name="image-map">\ <area class="coffeeHint" alt="" title="Maybe there's something here..." coords="476,468,475,497,529,521,532,482" shape="poly" data-passage="pressChecker">\ <area alt="" title="Who would hide things in a can?!" coords="920,452,922,487,955,485,960,463" shape="poly" data-passage="beanCheck">\ <area alt="" title="No food but maybe some tools?" coords="410,148,479,329" shape="rect" data-passage="grinderChecker">\ </map>\ <span class="skip">[[Skip this challenge|Q1]]</span>

<<audio "mistery" play>>\ <span class="challenges">But while you think how good you're at making coffee, a <span class="macro-type">[[green glow|Q1]]</span> catches your eye...</span> <<cont>><<goto 'Q1'>><</cont>>

<<audio "fail" volume 0.3 play>>\ <div class="challenges">You found the zines box, but it's locked!</div> <<cont>><<goto 'challenge2'>><</cont>>

<<speech "Granite">>Hi there!<</speech>> <<speech "You">>Hey Grani! This is Marble, it's her first time at the makerspace. Can you tell her about your [[project|Story1.3b]]?<</speech>> <<timed 2s t8n>><<speech "Marble">>Hi there!<</speech>><</timed>>

<<audio "fail" volume 0.3 play>>\ <span class="challenges">Oh no, it is full of jargon!</span> <<cont>><<goto "challenge3">><</cont>>

<<speech "Marble">>Oh but that wouldn't work because we would like to measure it with the kids...<</speech>> <<timed 1s t8n>><<speech "Granite">>I don't think this is the best idea, measuring is complicated, data won't be [[accurate|Story 1.4c]]...<</speech>><</timed>>

<<speech "Marble">>Yes but this is the whole purpose of the project, it has a strong educational component<</speech>> <<timed 1s t8n>><<speech "Granite">>I'm still not [[convinced|prechallenge4]]...<</speech>><</timed>>

<<set $mazeKey to $mazeKey.toLowerCase()>> <<if $mazeKey is "listen">> <<goto [[Coin4]]>> <<else>> <<audio "nop" play>>\ <span class="challenges">Nop, that was not the key. [[Try again!|challenge4]]</span> <</if>>

<<audio "type" stop>>\ <<audio "voices" play>>\ <span class="challenges">Voices coming from the next room distract you from the conversation...</span> <<cont>><<goto "Story 1.4">><</cont>>

<<audio "fail" volume 0.3 play>>\ <span class="challenges">Well, we can't buy all these components! We need to find a simpler but effective design</span> <<cont>><<goto "challenge5">><</cont>>

<span class="challenges">Can you find the hidden message?</span>\ <div class="darkbg"> "If you cross out <i>nine letters</i> from the following string, a single word will be revealed" [img["img/string.png"]] If you need a hint, read the instructions *very* carefully :) <<textboxPlus "huntKey" "$huntKey" `{ maxlength: 11}`>> <span class="challenges">[[Check it|challenge6 check]] </span>\ </div> <span class="skip">[[Skip this challenge|Q6]]</span>

<<set $huntKey to $huntKey.toLowerCase()>> <<if $huntKey is "asingleword">> <<goto [[Coin6]]>> <<else>> <<audio "nop" play>>\ <span class="challenges">Nop, that was not the key. [[Try again!|challenge6]]</span> <</if>>

<<if visited() is 1>> <<set $starsCount += 1>>\ <<notify>>🌟 You earned a star!<</notify>>\ <<audio "coin2" play>>\ <</if>> <<if $doorOption is 1>>\ <<include [[Q6]]>> <</if>>\

<<audio "type" play>>\ <span class="terminal-rojo">panda@nautilus:~$</span><<type 40ms keep class "terminal">>Sometimes the best strategy is to hide in plain sight :)<</type>> <<cont append keypress>>\ <span class="terminal-azul">you@makerspace:~$</span> <<typesim "Can't believe it took me so long to see it!">> <<include [[Q6b]]>> <</typesim>> <</cont>>

<span class="terminal-rojo">panda@nautilus:~$</span> <<type 40ms keep class "terminal">><span class="macro-type">Have you ever tried a workaround, to find alternatives to the way things are usually done?</span> <span class="terminal-azul">you@makerspace:~$</span> <span class="macro-type">\ <<radiobutton "$qSixLikert" "1">> Not really... I never had the chance <<radiobutton "$qSixLikert" "2">> I had some experience but I wouldn't say a lot <<radiobutton "$qSixLikert" "3">> Yes, we have to do this quite often </span> <span class="terminal-rojo">panda@nautilus:~$</span> <span class="macro-type">How do you manage?</span> <span class="terminal-azul"><<textbox '$qSix' ' '>></span> [[Let's keep moving|Q6check]] <</type>>

<<if $qSixLikert is 0>>\ <span class="challenges">Please make sure you choose one of the options before moving on! <<return>></span> <<elseif $stickerSix is true>>\ <<goto 'Story 1.7'>> <<else>>\ <<audio "type" stop>>\ <<audio "key" play>>\ <<set $stickerSix to true>>\ <<set $questionsCount.pushUnique("answer6")>>\ <span class="challenges">Hey! You got another [[sticker|Passport]] for your laptop :)</span> <<cont>><<goto 'Story 1.7'>><</cont>> <</if>>\

<<speech "You">>Well there is so much funding for developing environmental sensors...<</speech>> <<timed 2s t8n>><<speech "Granite">>We can say the project is about the tech, so it is supported...<</speech>><</timed>> <<timed 4s t8n>><<speech "You">>...but it's actually [[an excuse|challenge6]] for getting people to talk about this!<</speech>><</timed>>

<<audio "fail" volume 0.3 play>>\ <span class="challenges">A project like this one can't generate so much waste!</span>\ <<cont>><<goto "challenge7">><</cont>>\

<span class="challenges">Can you help the team identify the impacts of their projects?</span> [img[img/Logic.jpg]] <div class="challenges">Project A does not use too much of anything Project B is low-energy Project C impacts can increase the bills Project D affects biodiversity</div> <div class="challenges">For projects ABCD, the impacts are (in numbers): <<textboxPlus "envImpact" "$envImpact" `{ maxlength: 4}`>> [[Check it!|challenge7check]] </div> <span class="skip">[[Skip this challenge|Q7]]</span>

<<if $envImpact is "1324">> <<goto [[Coin7]]>> <<else>> <<audio "nop" play>>\ <span class="challenges">Nop, that was not the right answer. [[Try again!|challenge7]]</span> <</if>>

<<if visited() is 1>> <<set $starsCount += 1>>\ <<notify>>🌟 You earned a star!<</notify>>\ <<audio "coin2" play>>\ <</if>> <<if $doorOption is 1>>\ <<include [[Q7]]>> <</if>>\

<<audio "type" play>>\ <span class="terminal-rojo">panda@nautilus:~$</span> <<type 40ms keep class "terminal">><span class="macro-type">This one was hard. Thinking before doing! Do you usually consider social and ecological sustainability when planning a new project? </span> <span class="terminal-azul">you@makerspace:~$</span> <span class="macro-type">\ <<radiobutton "$qSevenLikert" "1">> Not really... I never had the chance <<radiobutton "$qSevenLikert" "2">> I have some experience but I wouldn't say a lot <<radiobutton "$qSevenLikert" "3">> Absolutely, we always put sustainability first</span> <span class="terminal-rojo">panda@nautilus:~$</span> <span class="macro-type">How do you manage?</span> <span class="terminal-azul"><<textbox '$qSeven' ' '>></span> [[Let's keep moving|Q7check]] <</type>>

<<if $qSevenLikert is 0>>\ <span class="challenges">Please make sure you choose one of the options before moving on! <<return>></span> <<elseif $stickerSeven is true>>\ <<goto 'Story 1.8'>> <<else>>\ <<audio "type" stop>>\ <<audio "key" play>>\ <<set $stickerSeven to true>>\ <<set $questionsCount.pushUnique("answer7")>>\ <span class="challenges">Hey! You got a [[sticker|Passport]] :)</span> <<cont>><<goto 'Story 1.8'>><</cont>> <</if>>\

<<audio "fail" volume 0.3 play>>\ <div class="challenges" style="text-align:center">Sam is there but can't get in! The only door wide enough for a wheelchair is locked</div> <<cont>><<goto "challenge8">><</cont>>

<span class="challenges">Can you help unlocking the door?</span> <img src="img/lock.png" width=50%> <div class="challenges"><<textboxPlus "lock" "$lockKey" `{ maxlength: 3}`>> [[Check it!|challenge8check]] <<link "I need a hint ✣">> <<script>> Dialog.setup("Hint", "dialog-box"); Dialog.wiki("Everything starts from zero...<br><br><img src='img/dial.png'/>"); Dialog.open(); <</script>> <</link>></div> <span class="skip">[[Skip this challenge|Q8]]</span>

<<if $lockKey is "042">> <<goto [[Coin8]]>> <<else>> <<audio "nop" play>>\ <span class="challenges">Nop, that was not the right. [[Try again!|challenge8]]</span> <</if>>

<<if visited() is 1>> <<set $starsCount += 1>>\ <<notify>>🌟 You earned a star!<</notify>>\ <<audio "coin2" play>>\ <</if>> <<if $doorOption is 1>>\ <<include [[Q8]]>> <</if>>\

<<audio "type" play>>\ <<if visited() is 1>> <span class="terminal-rojo">panda@nautilus:~$</span> <span class="macro-type">42, what a mysterious number... <<cont append keypress>>\ <span class="terminal-azul">you@makerspace:~$</span> <<typesim "Not funny to leave that door locked though!">> <<include [[Q8b]]>> <</typesim>> <</cont>> <<else>> <span class="terminal-rojo">panda@nautilus:~$</span> <span class="macro-type">Do you ever think the barriers people may face to join your space?</span> <span class="terminal-azul">you@makerspace:~$</span> <span class="macro-type">\ <<radiobutton "$qEightLikert" "1">> Not really... I never had the chance <<radiobutton "$qEightLikert" "2 - Somehow familiar">> I had some experience but I wouldn't say a lot <<radiobutton "$qEightLikert" "3">> Absolutely, the projects I work on are usually oriented towards social change </span> <span class="terminal-rojo">panda@nautilus:~$</span> <span class="macro-type"> How could we work on these?</span> <span class="terminal-azul"><<textbox '$qEight' ' '>></span> [[Got it|Q8 check]] <</if>>

<<if $qEightLikert is 0>>\ <span class="challenges">Please make sure you choose one of the options before moving on! <<return>></span> <<elseif $stickerEight is true>>\ <<goto 'Story 1.9'>> <<else>>\ <<audio "type" stop>>\ <<audio "key" play>>\ <<set $stickerEight to true>>\ <<set $questionsCount.pushUnique("answer8")>>\ <span class="challenges">Hey! You got a new [[sticker|Passport]] :)</span> <<cont>><<goto 'Story 1.9'>><</cont>> <</if>>\

<span class="terminal-rojo">panda@nautilus:~$</span> <<type 40ms keep class "terminal">><span class="macro-type">Do you ever think the barriers people may face to join your space?</span> <span class="terminal-azul">you@makerspace:~$</span> <span class="macro-type">\ <<radiobutton "$qEightLikert" "1">> Not really... I never had the chance <<radiobutton "$qEightLikert" "2">> I had some experience but I wouldn't say a lot <<radiobutton "$qEightLikert" "3">> Absolutely, the projects I work on are usually oriented towards social change </span> <span class="terminal-rojo">panda@nautilus:~$</span> <span class="macro-type"> How could we work on these?</span> <span class="terminal-azul"><<textbox '$qEight' ' '>></span> [[Got it|Q8 check]] <</type>>

<<audio "voices" stop>>\ <<speech "Marble">>So, we all tested the devices, they work. Let's relax now. Any question for our friends at the makerspace?<</speech>> <<cont>><<goto "story1.9c">><</cont>>

<<speech "Aplite">>Well, sorry to put it this way but we just met a couple of days ago. How can we really trust you?<</speech>> <<timed 2s t8n>><<speech "You">>Em... What do you [[mean|story1.9d]]?<</speech>><</timed>>

<<audio "fail" volume 0.3 play>>\ <span class="challenges">Well, that's an uncomfortable but necessary silence</span> <<cont>><<goto "challenge9">><</cont>>

<span class="challenges">Help your makerspace understand which pathways and values it can take</span> <div class="challenge-questions">Step 1. Start at https://criticalmaking.eu/gender-equality-making/ Step 2. Find the story of a Polish maker (hint: "iegN") Step 3. Read through the story and find the key word</div> <span class="challenges">Which word is missing?</span> <div class="challenge-questions">Star came from _ _ _ _ _ to Poland <<textboxPlus "directionsB" "$directionsB" `{ maxlength: 5}`>> [[Check it!|challenge9check]]</div> <span class="skip">[[Skip this challenge|Q9]]</span>

<<speech "Aplite">>We had bad experiences in the past. Which are your values? You only share the tech, but we don't know why you are helping us...<</speech>> <<cont>><<goto "prechallenge9">><</cont>>

<<set $directionsB to $directionsB.toLowerCase()>> <<if $directionsB is "kenya">> <<goto [[Coin9]]>> <<else>> <<audio "nop" play>>\ <span class="challenges">Nop, that was not the right answer. [[Try again!|challenge9]]</span> <</if>>

<<if visited() is 1>> <<set $starsCount += 1>>\ <<notify>>🌟 You earned a star!<</notify>>\ <<audio "coin2" play>>\ <</if>> <<if $doorOption is 1>>\ <<include [[Q9]]>> <</if>>\

<<audio "type" play>>\ <<if visited() is 1>> <span class="terminal-rojo">panda@nautilus:~$</span> <span class="macro-type">People are doing truly amazing stuff around the world... <<cont append keypress>>\ <span class="terminal-azul">you@makerspace:~$</span> <<typesim "I can't believe we could actually help so much!">> <<include [[Q9b]]>> <</typesim>> <</cont>> <<else>> <span class="terminal-rojo">panda@nautilus:~$</span> <span class="macro-type">Absolutely. Do you ever think about how your actions contribute to the change you want to see in the world, even if small?</span> <span class="terminal-azul">you@makerspace:~$</span> <span class="macro-type">\ <<radiobutton "$qNineLikert" "1">> Not really... I never had the chance <<radiobutton "$qNineLikert" "2 - Somehow familiar">> I had some experience but I wouldn't say a lot <<radiobutton "$qNineLikert" "3">> Absolutely, the projects I work on are usually oriented towards social change </span> <span class="terminal-rojo">panda@nautilus:~$</span> <span class="macro-type"> Tell me a little more about it</span> <span class="terminal-azul"><<textbox '$qNine' ' '>></span> [[Got it|Q9 check]] <</if>>

<<if $qNineLikert is 0>>\ <span class="challenges">Please make sure you choose one of the options before moving on! <<return>></span> <<elseif $stickerNine is true>>\ <<goto 'Story 1.10'>> <<else>>\ <<audio "type" stop>>\ <<audio "key" play>>\ <<set $stickerNine to true>>\ <<set $questionsCount.pushUnique("answer9")>>\ <span class="challenges">Hey! That's another laptop [[sticker|Passport]] for you :)</span> <<cont>><<goto 'Story 1.10'>><</cont>> <</if>>\

<<speech "Granite">>A friend of mine works at the city council, maybe he could help<</speech>> <<timed 2s t8n>><<speech "You">>I doubt the city can give us money [[though|prechallenge10]]!<</speech>><</timed>>

<<audio "fail" volume 0.3 play>>\ <span class="challenges">There is no much time to decide and lots of things to do!</span> <<cont>><<goto "challenge10">><</cont>>

<span class="challenges">Which partners would you choose to ask for support for this project?</span> <div class="challenges">\ <<radiobutton "$support1" "academia">> Academia <<radiobutton "$support1" "government">> City Council <<radiobutton "$support1" "NGOs">> Civil society organizations <<radiobutton "$support1" "companies">> Local companies 👇🏾 Match them below before [[moving on|challenge10check]]! </div> <section class="memory-game">\ <div class="memory-card" data-framework="universities">\ <img class="front-face" src="img/cards1.png" alt="University" />\ <img class="back-face" src="img/logo.png" alt="Credibility & Visibility" />\ </div>\ <div class="memory-card" data-framework="universities">\ <img class="front-face" src="img/cards1.png" alt="University" />\ <img class="back-face" src="img/logo.png" alt="Credibility & Visibility" />\ </div>\ <div class="memory-card" data-framework="City council">\ <img class="front-face" src="img/cards2.png" alt="City council" />\ <img class="back-face" src="img/logo.png" alt="Networking & Legislation" />\ </div>\ <div class="memory-card" data-framework="City council">\ <img class="front-face" src="img/cards2.png" alt="City council" />\ <img class="back-face" src="img/logo.png" alt="Networking & Legislation" />\ </div>\ <div class="memory-card" data-framework="Local companies">\ <img class="front-face" src="img/cards3.png" alt="Local companies" />\ <img class="back-face" src="img/logo.png" alt="Sponsoring" />\ </div>\ <div class="memory-card" data-framework="Local companies">\ <img class="front-face" src="img/cards3.png" alt="Local companies" />\ <img class="back-face" src="img/logo.png" alt="Sponsoring" />\ </div>\ <div class="memory-card" data-framework="Non profit organization">\ <img class="front-face" src="img/cards4.png" alt="Non profit organization" />\ <img class="back-face" src="img/logo.png" alt="Advocacy" />\ </div>\ <div class="memory-card" data-framework="Non profit organization">\ <img class="front-face" src="img/cards4.png" alt="Non profit organization" />\ <img class="back-face" src="img/logo.png" alt="Advocacy" />\ </div> </section>\ <span class="skip">[[Skip this challenge|Q10]]</span> <script> /*Memory game*/ const cards = document.querySelectorAll('.memory-card'); let hasFlippedCard = false; let lockBoard = false; let firstCard, secondCard; function flipCard() { if (lockBoard) return; if (this === firstCard) return; this.classList.add('flip'); if (!hasFlippedCard) { hasFlippedCard = true; firstCard = this; return; } secondCard = this; checkForMatch(); } function checkForMatch() { let isMatch = firstCard.dataset.framework === secondCard.dataset.framework; isMatch ? disableCards() : unflipCards(); } function disableCards() { firstCard.removeEventListener('click', flipCard); secondCard.removeEventListener('click', flipCard); resetBoard(); } function unflipCards() { lockBoard = true; setTimeout(() => { firstCard.classList.remove('flip'); secondCard.classList.remove('flip'); resetBoard(); }, 1500); } function resetBoard() { [hasFlippedCard, lockBoard] = [false, false]; [firstCard, secondCard] = [null, null]; } (function shuffle() { cards.forEach(card => { let randomPos = Math.floor(Math.random() * 12); card.style.order = randomPos; }); })(); cards.forEach(card => card.addEventListener('click', flipCard)); /*end memory game*/ </script>

<<goto [[Coin10]]>>

<<if visited() is 1>> <<set $starsCount += 1>>\ <<notify>>🌟 You earned a star!<</notify>>\ <<audio "coin2" play>>\ <</if>> <<if $doorOption is 1>>\ <<include [[Q10]]>> <</if>>\

<<audio "type" play>>\ <span class="terminal-rojo">panda@nautilus:~$</span> <<type 40ms keep class "terminal">><span class="macro-type">Support can be tricky. But like every maker, you are doing this to create a future you want to see... Can you think of different resources for supporting your vision?</span> <span class="terminal-azul">you@makerspace:~$</span> <span class="macro-type">\ <<radiobutton "$qTenLikert" "1">> Not really... I never had the chance <<radiobutton "$qTenLikert" "2">> I have some experience but I wouldn't say a lot <<radiobutton "$qTenLikert" "3">> Absolutely, we have a diversified set of sources we can go ask for support </span> <span class="terminal-rojo">panda@nautilus:~$</span> <span class="macro-type"> Which support options do you work with?</span> <span class="terminal-azul"><<textbox '$qTen' ' '>></span> [[Got it|Q10 check]] <</type>>

<<if $qTenLikert is 0>>\ <span class="challenges">Please make sure you choose one of the options before moving on! <<return>></span> <<elseif $stickerTen is true>>\ <<goto 'Story 1.11'>> <<else>>\ <<audio "type" stop>>\ <<audio "key" play>>\ <<set $stickerTen to true>>\ <<set $questionsCount.pushUnique("answer10")>>\ <span class="challenges">That's another [[laptop sticker|Passport]] :)</span> <<cont>><<goto 'Story 1.11'>><</cont>> <</if>>\

<<speech "kat">>So, I have a question...<</speech>> <<timed 1s t8n>><<speech "You">>Shoot!<</speech>><</timed>> <<timed 1s t8n>><<speech "kat">>You will be collecting people's data, have you [[thought about that|story1.11c]]?<</speech>><</timed>>

<<audio "fail" volume 0.3 play>>\ <span class="challenges">Nop. No one had thought about that!</span> <<cont>><<goto "challenge11">><</cont>>

<span class="challenges">Can you solve the riddle to help our friends?</span> <div class="challenges">Something that has never happened before. It's around the corner. What does it hold in store? It will happen tomorrow, next month, and next year. We all face it, there is nothing to fear. </div> <span class="challenge-questions">Hint: F _ T _ R _</span> <div class="challenges"><<textboxPlus "riddle11" "$riddle11" `{ maxlength: 6}`>> [[Check it!|challenge11check]]</div> <span class="skip">[[Skip this challenge|Q11]]</span>

<<set $riddle11 to $riddle11.toLowerCase()>> <<if $riddle11 is "future">> <<goto [[Coin11]]>> <<else>> <<audio "nop" play>>\ <span class="challenges">Nop, that was not the right answer. [[Try again!|challenge11]]</span> <</if>>

<<if visited() is 1>> <<set $starsCount += 1>>\ <<notify>>🌟 You earned a star!<</notify>>\ <<audio "coin2" play>>\ <</if>> <<if $doorOption is 1>>\ <<include [[Q11]]>> <</if>>\

<<audio "type" play>>\ <span class="terminal-rojo">panda@nautilus:~$</span> <<type 40ms keep class "terminal">><span class="macro-type">It's so hard to anticipate the future! But we should try at least, right?! What's your experience “future-proofing” your projects – meaning that even if circumstances change, the projects can still function?</span> <span class="terminal-azul">you@makerspace:~$</span> <span class="macro-type">\ <<radiobutton "$qElevenLikert" "1">> Not really... I never had the chance <<radiobutton "$qElevenLikert" "2">> I had some experience but I wouldn't say a lot <<radiobutton "$qElevenLikert" "3">> We do this with every project we start </span> <span class="terminal-rojo">panda@nautilus:~$</span> <span class="macro-type"> How do you work around changes in political, environmental, social circumstances?</span> <span class="terminal-azul"><<textbox '$qEleven' ' '>></span> [[Got it|Q11 check]] <</type>>

<<if $qElevenLikert is 0>>\ <span class="challenges">Please make sure you choose one of the options before moving on! <<return>></span> <<elseif $stickerEleven is true>>\ <<goto 'Story 1.12'>> <<else>>\ <<audio "type" stop>>\ <<audio "key" play>>\ <<set $stickerEleven to true>>\ <<set $questionsCount.pushUnique("answer11")>>\ <span class="challenges">Another [[sticker|Passport]] for your laptop!?</span> <<cont>><<goto 'Story 1.12'>><</cont>> <</if>>\

<<speech "Granite">>Hey but wait... These sensors don't measure exactly what we need!<</speech>> <<timed 2s t8n>><<speech "Marble">>Oh, and they want us to give them [[full access|prechallenge12]] to the database too...<</speech>><</timed>>

<<audio "fail" volume 0.3 play>>\ <span class="challenges">Is this starting to look a little suspicious to you too?</span> <<cont>><<goto "challenge12">><</cont>>

<span class="challenges">Can you put the clue together?</span> <img src="img/puzzle13.png"> <div class="challenges">\ 1. Grab all the highlighted letters 2. Don't use spaces <<textboxPlus "puzzle12" "$puzzle12" `{ maxlength: 18}`>> [[Check it!|challenge12check]]</div> <span class="skip">[[Skip this challenge|Q12]]</span>

<<if visited() is 1>> <<set $starsCount += 1>>\ <<notify>>🌟 You earned a star!<</notify>>\ <<audio "coin2" play>>\ <</if>> <<if $doorOption is 1>>\ <<include [[Q12]]>> <</if>>\

<<set $puzzle12 to $puzzle12.toLowerCase()>> <<if $puzzle12 is "committoyourvalues">> <<goto [[Coin12]]>> <<else>> <<audio "nop" play>>\ <span class="challenges">Nop, that was not the right answer. [[Try again!|challenge12]]</span> <</if>>

<<audio "type" play>>\ <span class="terminal-rojo">panda@nautilus:~$</span> <<type 40ms keep class "terminal">><span class="macro-type">Do you think about who you take money and/or resources from and how does that affect your projects?</span> <span class="terminal-azul">you@makerspace:~$</span> <span class="macro-type">\ <<radiobutton "$qTwelveLikert" "1">> Not really... I never had the chance <<radiobutton "$qTwelveLikert" "2">> I had some experience but I wouldn't say a lot <<radiobutton "$qTwelveLikert" "3">> Absolutely, we are very careful about who supports our projects </span> <span class="terminal-rojo">panda@nautilus:~$</span> <span class="macro-type"> How do you make sure to remain neutral and uninfluenced by external partners?</span> <span class="terminal-azul"><<textbox '$qTwelve' ' '>></span> [[Got it|Q12 check]] <</type>>

<<if $qTwelveLikert is 0>>\ <span class="challenges">Please make sure you choose one of the options before moving on! <<return>></span> <<elseif $stickerTwelve is true>>\ <<goto 'Story 1.13'>> <<else>>\ <<audio "type" stop>>\ <<audio "key" play>>\ <<set $stickerTwelve to true>>\ <<set $questionsCount.pushUnique("answer12")>>\ <span class="challenges">Your laptop must be full of [[stickers|Passport]] by now!</span> <<cont>><<goto 'Story 1.13'>><</cont>> <</if>>\

<<audio "voices" stop>>\ <<speech "You">>Hey, remember that journalist that visited a week ago? His article is now published, let's [[take a look|article13]]!<</speech>>

<<speech "Granite">>This is terrible! I'm never giving an interview again!<</speech>> <<timed 2s t8n>><<speech "You">>People in the community will think we [[actually believe|prechallenge13]] this...<</speech>><</timed>>

<<audio "fail" volume 0.3 play>>\ <<speech "Marble">>So we are the helpless ones, when we started this project...!<</speech>> <<cont>><<goto "challenge13">><</cont>>

<span class="challenges">Let's change how we speak about communities!</span> <div class="challenges"> - Vulnerable groups --> <<textboxPlus "puzzle12" "$puzzle13a">> - In need --> <<textboxPlus "puzzle12" "$puzzle13b">> - Lack of skills --> <<textboxPlus "puzzle12" "$puzzle13c">> </div> <span class="challenges">[[Check it!|challenge13check]]</span> <span class="skip">[[Skip this challenge|Q13]]</span>

<<goto [[Coin13]]>>

<<if visited() is 1>> <<set $starsCount += 1>>\ <<notify>>🌟 You earned a star!<</notify>>\ <<audio "coin2" play>>\ <</if>> <<if $doorOption is 1>>\ <<include [[Q13]]>> <</if>>\

<<audio "type" play>>\ <span class="terminal-rojo">panda@nautilus:~$</span> <<type 40ms keep class "terminal">><span class="macro-type">Do you think about the way you speak about your own practice, and how it can affect the decisions you take?</span> <span class="terminal-azul">you@makerspace:~$</span> <span class="macro-type">\ <<radiobutton "$qThirteenLikert" "1">> Not really... I never had the chance <<radiobutton "$qThirteenLikert" "2">> I had some experience but I wouldn't say a lot <<radiobutton "$qThirteenLikert" "3">> Yes, this is very important for me </span> <span class="terminal-rojo">panda@nautilus:~$</span> <span class="macro-type"> How do you reflect about this issue?</span> <span class="terminal-azul"><<textbox '$qThirteen' ' '>></span> [[Got it|Q13 check]] <</type>>

<<if $qThirteenLikert is 0>>\ <span class="challenges">Please make sure you choose one of the options before moving on! <<return>></span> <<elseif $stickerThirteen is true>>\ <<goto 'epilogue'>> <<else>>\ <<audio "type" stop>>\ <<audio "key" play>>\ <<set $stickerThirteen to true>>\ <<set $questionsCount.pushUnique("answer13")>>\ <span class="challenges">Hey! You got the last of the [[stickers|Passport]]!</span> <<cont>><<goto 'epilogue'>><</cont>> <</if>>\

<<speech "Marble">>"People in need of help, with no XXIst century skills"...<</speech>> <<timed 2s t8n>><<speech "You">>"saved by the kind help of developers who volunteer their [[precious time|story1.13c]]"...<</speech>><</timed>>

<<speech "Marble">> This coffee smells amazing!"<</speech>> <<timed 1s t8n>><<speech "You">>Thanks, I'm very proud of my coffee and my repairing skills.<</speech>><</timed>> <<set $starsCount += 1>>\ <<notify>>🌟 You earned a star!<</notify>>\ <<audio "coin2" play>>\ <<cont>><<goto 'preQ1'>><</cont>>

<<audio "type" stop>>\ <<audio "voices" play>>\ <span class="challenges">People seem to be finally agreeing on a design!</span> <<cont>><<goto "Story 1.5">><</cont>>

<<audio "nop" play>>\ <span class="challenges">Nop, that was not the shortest pathway! [[Try again|challenge5]]</span>

<<speech "You">>...in one life cycle it uses so many [[batteries|story1.7b]]!<</speech>>

<<speech "You">>That's great! Hopefully they can make it today?<</speech>> <<timed 2s t8n>><<speech "Marble">>Well it's strange, they [[should be here|prechallenge8]] already...<</speech>><</timed>>

<span class="terminal-rojo">panda@nautilus:~$</span> <<type 40ms keep class "terminal">><span class="macro-type">Absolutely. Do you ever think about how your actions contribute to the change you want to see in the world, even if small?</span> <span class="terminal-azul">you@makerspace:~$</span> <span class="macro-type">\ <<radiobutton "$qNineLikert" "1">> Not really... I never had the chance <<radiobutton "$qNineLikert" "2 - Somehow familiar">> I had some experience but I wouldn't say a lot <<radiobutton "$qNineLikert" "3">> Absolutely, the projects I work on are usually oriented towards social change </span> <span class="terminal-rojo">panda@nautilus:~$</span> <span class="macro-type"> Tell me a little more about it</span> <span class="terminal-azul"><<textbox '$qNine' ' '>></span> [[Got it|Q9 check]] <</type>>

<<audio "type" play>>\ <span class="terminal-rojo">panda@nautilus:~$</span> <<type 40ms keep class "terminal">>Well done, Critical Maker! How are you feeling?<</type>> <span class="terminal-azul">you@makerspace:~$</span> <<typesim "I have so many things to discuss with the people at my space!">> <<include [[epilogueb]]>> <</typesim>>

<<audio "type" stop>>\ <span class="terminal-rojo">panda@nautilus:~$</span> <<type 40ms keep class "terminal">>Go ahead! And feel free to share with us how your critical making journey is going :)<</type>> <span class="terminal-azul">you@makerspace:~$</span> <<typesim "thank you :) you've been really helpful...">> <span class="challenges">You are about to ask your new friend's name, but [[suddenly|FINAL]]... </span> <</typesim>>

<<audio "fail" volume 0.3 play>>\ <<timed 1s t8n>><span class="challenges"> This is getting [[confusing|challenge4]] very fast...</span><</timed>>