🕹️ This short mission of TwilioQuest was designed for Twilio's Devangels to run at booths. A mission takes about 5-7 minutes to complete. It is forked from the first iteration repo made by @nokenwa.
- Video
- What's Different with this Version?
- Installing the Extension
- Getting Started
- At the Booth
- Future To Do List
- License
- First & second challenges are much trickier, as they're coding riddles the user needs to figure out.
- If the player exits the mission after any barrier has been lowered, they will reset.
- Updated titles, menus, and instructions.
- Voice Call challenge no longer uses a TwiML bin URL. Instead, players just enter the TwiML directly.
- Fixed a bug where the code editor was not resetting.
- Revamp the map with an all new terrain.
- Added 2 NPCs with dialog to make the experience more interactive.
- Replaced the WhatsApp mission with a Video challenge. Because there aren't many WhatsApp users in the US.
- Added a counter to each mission/challenge which increments each time one is completed. Now we know how many people have completed each area!
- Added an iFrame that shows the name of the conference (needs to be updated each time). This is a seperate project that needs to run on localhost:3000.
- Added an Easter Egg, if the player explores the map they can win swag by finding the secret station!
- Dev mode! If you walk between the tree trunk and boulder under the Twilio instructor, you will enter dev mode and be teleported into the API missions (bypassing the first 2 challenges).
You can install this extension by following the steps in Enabling Extensions.
The first step is to enable extensions in the TQ game client.
In the Settings UI (press the 3 key in-game), navigate to the Extensions submenu. Click the button there labeled Enable Extensions.
IMPORTANT NOTE: As the UI indicates, only use extensions from trusted sources. Like "mods" from other games you may have played before (Minecraft, Skyrim, etc.), a TwilioQuest extension will be able to execute code on your computer. Exercise caution when installing an extension, just as you would using any third-party code on your computer. Once you have enabled extensions, specify a folder on your computer where you will download and manage extensions. This folder contains the parent folder of images, levels, objects, and so on, i.e., two levels above these folders. Specify the full path to this folder on your computer.
Once you have enabled extensions, you should see a listing of automatically-installed "base extensions" and a list of any extensions you have installed yourself.
Hint: If you don't see the extension loaded, hit the "Disable Extensions" button and enable them again.
There are a few bits of code that you need to modify so that the instructions are consistent with your account.
Ensure that the TwilioQuest game has your demo account sid and auth token. You can do this by playing the "Twilio API Setup" training mission from the Fog Owl.
Here are instructions that should help guide you through the prep to run TQ at the booth.
Before starting, open the file,
~/Library/Application Support/TwilioQuest/config.jsonand add an env file to line 64. The variable name isTQ_BOOTH_MISSION_PASSCODEand the value isSuper Secret Passcode.
There is a book on the floor near the entrance. When opened, it launches an iFrame which directs to a URL (localhost:3000). To make this work, you need to have another application running on localhost:300. Clone the following React application, npm install, npm run start and leave it running. For each conference you attend, you can edit this project by changing the name of the conference you're attending.
I think it's best not to have multiple windows running, just TQ with this Booth Mission already loaded.
-
The first barrier is a riddle that isn't obvious at first glace. Watch the behavior of the player and assist them as needed. Many people will think the passcode is
passcode123but in order to see the actual password, they need to execute the program and fetch the value, which is stored as an ENV variable. The correct passcode isSuper Secret Passcode. -
At the second barrier, they will need to find the Twilio number you already own. Please direct them to the code editor where they will see another riddle. This one also isn't obvious, so please help as needed. It says
2+1which is 3. So many people will think it's the 3rd phone number. But since this is an array (with index 0), the correct answer is option 4, or phone number940-394-8137. -
After this, they will have three choices:
- SMS Message: Turn Right; They will have to add a
toandbodyparameter and send a message to themselves. - Phone Call: Turn Left; They will have to add a
toandtwimlparameter and call themselves. For the TwiML, ask them to fill in the TwiML. Let them know that TwiML is Twilio's Markup Language. It starts with a<Response><Say>Enter some message here</Say></Response>. - Video Chat: Go Straight; They will have to fill in their number in the
toparameter. After executing, a link will be sent via text. Have them open the link and join a video chat room. You can also open the same link on the display so you can live chat in real time.
- SMS Message: Turn Right; They will have to add a
-
Once they have completed the mission, they can open the chest. This will increment a counter to keep a count of the missions completed. To reset the game, simply walk through the exit at the top of the screen. This will reload the mission with all the code, and the barriers reset.
- Create an automated counter for how many times each mission has been completed
- Create an embedded form for people to submit job title, company, and email to win prizes
- Reset user code after each playthrough
- Add name of conference
- Display large sign that says "Win swag play completing a mission"
- Add NPC with dialog
- Reskin the map
- Create a custom character (me) in Pixel Art
- Add a phone on the map which makes a phone call on interacts
- Add a showcase so people can try out demo apps that we've made
This template is open source under the MIT license.