Last updated: 20 Nov 20 03:22:25 (UTC)

Log-in Page that Pulls codenames IDs from Google Sheet

Sugarcube 2

I do more with the data on Google Sheets in this note: More Twine + Google Sheets

Basically:

Totally rip-off the Google Spreadsheet Testing from Dan Cox’s tutorial (first bit of code - loads sheetrock and your Google Sheet). Put the javascript portion in the Story Javascript of Twine.
For var = mySpreadsheet, put in the url of your own Google Sheet (really, straight from the address bar).
Where he has State.variables.response = response.rows[0];, replace this with State.variables.response = response.html;. (It was this bit that I couldn’t get straight!!!)
Comment out the query line (this returns the whole sheet).
In the passage, I’ve used this code:

<<textbox "$codename" "" autofocus>>
<span id="textbox-reply"></span>
<<button "Log In">>
/* This sets the codename to all lower case and removes spaces */

        <<set $codename to $codename.trim().toLowerCase().replace(/\s\s+/g, "")>>

/* This makes sure the textbox isn’t blank */
        <<if $codename == "">>
                    <<replace "#textbox-reply">>\
                    Please enter your codename.\
                    <</replace>>
/* This checks the codename against the data returned from the Google Sheet */
                <<elseif $response.includes($codename)>>
          <<goto [[Next]]>>
/* This gives an error code if the codename doesn’t match the system. */
        <<else>>
            <<replace "#textbox-reply">>\
                Incorrect.  Please try again.\
            <</replace>>
        <</if>>
                <</button>>

<<textbox "$codename" "" autofocus>>
<span id="textbox-reply"></span>
<<button "Log In">>
/* This sets the codename to all lower case and removes spaces */

        <<set $codename to $codename.trim().toLowerCase().replace(/\s\s+/g, "")>>

/* This makes sure the textbox isn’t blank */
        <<if $codename == "">>
                    <<replace "#textbox-reply">>\
                    Please enter your codename.\
                    <</replace>>
/* This checks the codename against the data returned from the Google Sheet */
                <<elseif $response.includes($codename)>>
          <<goto [[Next]]>>
/* This gives an error code if the codename doesn’t match the system. */
        <<else>>
            <<replace "#textbox-reply">>\
                Incorrect.  Please try again.\
            <</replace>>
        <</if>>
                <</button>>

And voila!!! A log-in page that is dynamically updatable through Google Sheets.