Last updated: 14 Jan 21 17:25:45 (UTC)

Escape Room Template

Please note: I’m releasing this template on 24 Nov 2020, and it hasn’t been fully beta-tested yet!  If you encounter problems with it, please contact me on Twitter @lskains.

  • Escape Room Template (this won’t work unless you go to File -> Make a copy and create your own. You’ll then need to make sure you complete steps 3, 6.1.4-9, and 6.2). If you have this Template, you can skip steps 1, 2, 4,  5, and 6.1.1-3.
  • The Twine Escape Room Template: import the file below into Twine 2:

The template is based on Lyle Skains’ Holiday Escape Room, Nov 2020. What you will need:

  1. The template file imported into Twine (Twine Sugarcube 2).

  2. A Google Sheet with 4 worksheets (the only name that’s important is “DATA”):

    1. Teams Sign Up

    2. Individuals Sign Up (we allowed singles to register, and we placed them in teams)

    3. Leaderboard

    4. DATA

  3. The Google Sheet must be open to edit by anyone with a link (Share > Get Link > Anyone on the internet can edit).

  4. In the DATA Google Sheet tab, enter column headers for:

    • Team
    • Total Time
    • Minutes
    • Seconds
    • Start Time
    • End Time
      • Note: You don’t actually need any of the above except “Team” and “Total Time”, but the rest are here for anyone who wants them.
    • Name
    • Team Leader
    • Team Member 2
    • Team Member 3
    • Team Member 4
    • Individual
  5. Each of the other tabs is going to PULL its information from the DATA tab (see also Google Query Language):

    1. Teams Sign Up

      1. In cell A1 enter a query that calls rows G through K on the DATA tab where G is not empty:

      2. =QUERY(DATA!G:K, “SELECT * where G is not null”)

      3. Screenshot 2020-11-24 at 15.40.23.png

      4. This automatically populates this sheet with the team names of those who pre-register on the Twine site. Then the Twine game will pull from this tab to populate its list of pre-registered teams.

    2. Individuals Sign Up

      1. Same as above, but query the row in DATA where the Individuals data is:

      2. =QUERY(DATA!L:L, “SELECT * where L is not null”)

    3. Leaderboard

      1. Much the same, but we add a little formula here to automatically rank the finished teams by their finish time:

      2. In cell B1 (NOT A): =QUERY(DATA!A:B, “SELECT * where A is not null ORDER BY B ASC”)

        1. This pulls in Team Name and Total Time, then ranks by Total Time from least to most.
      3. In cell A1, I put the header “Rank”. In cell A2, the following formula:

        1. =IF(ISBLANK(B2),“”,1)
      4. Then in Cell A3, a formula to increase each cell by 1:

        1. =IF(ISBLANK(B3),“”, A2+1)

        2. Copy and paste this to all cells in column A (Rank).

        3. This formula checks column B to check if it’s blank. If it’s not, it adds 1 to the cell above, giving us a ranking 1, 2, 3, 4. This is cleaner than just manually putting in the numbers when the leaderboard gets pulled to Twine, because it would show ALL the ranking numbers, with blank spots if they’re not taken.

  6. Here we use Dan Cox’s tutorialwith a couple of adjustments to enable two-way communication between the Twine game and Google Sheets.

    1. Writing FROM Twine TO G-sheets:

      1. In your G-sheet, open the Script Editor. This can be found under Tools –> Script Editor.

        • undefined
      2. Replace any existing code with Code.gs contents. *(From Dan’s site, or from the txt file below.) *This will provide the necessary server backend to updating cells.

      3. If you did not rename the sheet “DATA”, replace the name of the sheet in the CodeGS to use in the SHEET_NAME variable. By default, the first sheet will be called “Sheet1”. Following these directions, replace the string “DATA” with “Sheet1” in the code.

        • // 1. Enter sheet name where data is to be written below
        • var SHEET_NAME = “DATA”;
      4. Click the save icon.

      5. NOTE!!! As of 14 Jan 2021, Google has updated their Scripts GUI. I’ve included the updated elements FIRST in each of steps 6-10, then the older ones, just in case you run into that version again.

      6. NOTE: As of 14 Jan 2021, Google scripts interface has been updated. Instructions below are for the updated interface.

      7. Run the setup function. In the Script Editor (the < > icon on the left), select “setup” in the function drop-down (it will initially say “doGet”). Then click “Run”. This will prepare the code.

        • Screenshot 2021-01-14 at 17.15.23.png
        • Note: Google will need permissions to access your account, etc. This is all okay. It may also flag itself as “unsafe”; just click “Advanced”, and continue on, trusting the developer (you).
      8. Publish the web app. In the Script Editor, go to Deploy -> New Deployment. This will open the dialog box for deploying the script as a web app.

        • Screenshot 2021-01-14 at 17.22.24.png
      9. **Select Type -> Web app. Fill in the project version, select to execute the app as “Me…”, and select “Anyone” as the access level. **Add in a project version and select to execute the app and who has access. Be sure to select “Anyone” or the code will not be able to accept incoming requests.

      10. Click Deploy to finish.

      11. Copy the provided Web app URL and click “Done” to close. The code will now be deployed and ready. Paste this into a notepad somewhere, so you have it (you’ll need a couple of these links, so it also helps to label them).

        • Screenshot 2021-01-14 at 17.24.28.png
      12. Return to the Google Sheet and add in column names (step 4 above) and verify the sheet name. The data passed to the server-side function MUST match existing column names or it will be ignored. In order to accept incoming data, add column names.

        • The column names, ideally, should match the variable names. So if you have a “points” variable, name a column “points”.
        • Note: This code adds a Timestamp column if one is not found. As part of the code, it will record changes and when they happened.
      13. In your Twine template, there are two passages where you need to paste in the script URL you copied here:

        1. signin: in two spots, both buttons (one for teams sign-up, one for individuals). Paste the URL under the “$ajax” function line.

Screenshot 2020-11-24 at 15.37.15.png 2. results: same thing as above, but only once. 2. Writing TO Twine FROM G-sheets

    1. Here we need the specific URLs of each of the sheet tabs we'll need information on. Open each tab (Teams Sign Up, Individuals Sign Up, and Leaderboard), and copy/paste the URL of each into your notepad. You'll note the URLs are the same except the "id=123456789" string at the end. This is identifying the specific sheet.

    2. In the Twine template, select Edit Story JavaScript from the main menu. You'll see the same sheetrock.js functions that Dan Cox has in his tutorial.

    3. Under "function loadSheet()" three variables (mySpreadsheet, myBoard, and inds) are defined. Here is where you need to copy/paste the URLs from your G-sheet tabs:

        1. ![Screenshot 2020-11-24 at 15.33.56.png](:/ff84fe88319619c455d6a69796fad50d)

mySpreadsheet: copy the URL from your “Teams Sign Up” tab 2. inds: copy the URL from your “Individuals Sign Up” tab 3. myBoard: copy the URL from your “Leaderboard” tab

            1. This one ALSO needs to go in the "leader" passage, as the leaderboard has to be updated with the team's final score, so we have to call the sheetrock function again.

            2. ![Screenshot 2020-11-24 at 17.16.07.png](:/ea674cb01cf8a6ced638f329a83dcff7)
  1. Update the Escape Room date. In the Twine file, “signin” passage, there will be a line at the top setting $gamest to new Date. Fill in the date that is there with the date and time you want your escape room to start; the signin passage will automatically change at that date/time from the sign-in options to the escape room entry.

    1. Date format: (YYYY, MM, DD, HH, MM, SS) Note that months start with 0 as January and end with 11 as December. Hours (HH) are in 24-hour time. If a number is singular (as in the date is 2 December), do NOT put a leading 0; just put the single digit.

Screenshot 2020-11-25 at 16.31.42.png

  1. Place puzzles in the Question passages (Q1, Q2, etc.). Copy Q1/2 passage template for as many puzzles or rooms as you want. Each question passage can have an associated “hint” pop-up passage that is offered as a link after 3 incorrect answers.

  2. PassageHeader places the team name playing and the count-down timer at the head of each passage. If you create passages where you don’t want this header, tag them with “noheader”.

  3. PassageFooter places a long answer textbox that players can use for notes as they work out a puzzle. If you create passages where you don’t want this footer, tag them with “nofooter”.

  4. Style your CSS. You’ll note that mine is styled with Google Fonts, and a holiday color scheme. I’ve commented what the various bits of CSS are for (Twine -> Main Menu -> Edit Stylesheet). Play with colors and fonts and images to get what you want.

  5. Time limit: time limit on the template is set to 45 minutes. At 45 minutes, the game automatically records the team’s time (45 min) and takes them to the results page. To change this:

    1. PassageHeader: The following lines need to change:

      • <<if $mcounter < 45>> …change “45” to your time limit in minutes
      • <<elseif $mcounter >=10 && $mcounter <=45>> …change 45 to your time limit
      • <<elseif $mcounter == 45>>…change 45 to your time limit
      • <<set $tTime = 2700>>…*change this to  (x * 60) to put your time limit in seconds (this records the team’s time as 45 minutes) *

Screenshot 2020-11-24 at 17.08.59.png 2.