Need help converting Twine variables to a Google Form input using JavaScript

Hey everyone!
I’ve recently created a game using Twine 2.3.8, SugarCube 2.31.1. Basically, it is a ‘treasure hunt’ type of a game, i.e. the winner is the one who finishes the game the fastest. I have tested it out with a couple of friends and they suggested adding an online leaderboard to track scores.

I have never coded anything in my life so this is a first for me. I don’t really possess any knowledge relating to JavaScript or HTML, everything that I did for the game, I Googled.

I did the same for a code to add the online leaderboard and stumbled upon this website - http://www.ohiofi.com/blog/how-to-use-google-drive-to-store-high-scores-for-twine-games/
It basically converts the twine variables into a Google form input, and saves it as a form response on a Google Sheet. Even though it was written for an older version of Twine, I managed to replicate everything except for one block of code.

/Places the variables (given as parameters) into the Google Forms
text input field.
/
macros[‘googleForms’] =
{
handler: function (place, macroName, params, parser)
{
/Enter the ID of the first Google Forms text input field here./
a = place.querySelector("#entry_111111111");
a.value = eval(Wikifier.parse(params[0]));
/Enter the ID of the second Google Forms text input field here./
b = place.querySelector("#entry_222222222");
b.value = eval(Wikifier.parse(params[1]));
}
};

From my understanding, the #entry_11111… is a unique Google Form input variable (ID) that is generated for every textbox input in the form.
I used this code in my Story JavaScript and swapped the #entry variables but I keep getting an error - “Error: cannot execute macro <<googleForms>>: a is not defined”.
I think this is because the syntax used in the code is not suited for Twine 2.x or Sugarcube 2.x.

Either way, I checked out the Sucarcube Macro API from the official website but couldn’t seem to make any sense of it. The code above is suited for 2 variables, my game has 4 that need to be captured and stored ($player_name, $hour, $min, $sec) but I’ve tried the code with 2 variables for starters ($player_name, $hour).

Any help in translating the above code to one that will work with Twine 2.3.8, SugarCube 2.31.1 will be really helpful. Thanks in advance!

PS - There is a demo available at the link sent above but it is coded in Twine 1, I suppose.

<<googleForms>>: a is not defined
a = place.querySelector("#entry_111111111");

This is kind of JS 101 here, but you can’t just reference a variable out of the blue like that. You have to use var first.

This would fix your problem (with that line, at least.):

var a = place.querySelector("#entry_111111111");

You should add var to the b = line also.

The var reserved word tells the script “Hi. I’d like to create a variable that I’ll be referring to in the future.”

Think of it as adding a name to a guest list. var bob is saying, “I’m adding Bob to the guest list.” Then when you say “bob.value”, you’re saying “I need to ask Bob what his value is.” and the response is “Very well, sir. Let me get him.” Without var, the response would be “I’m sorry. Who the heck is Bob?”

Not the greatest analogy, but hopefully you get the idea.

1 Like

You might want to take a look at my answer to this question: “Question about functionality

That translates some code for accessing Google Sheets to Twine/SugarCube code.

Hope that helps! :grinning:

2 Likes

Hey tayruh
I tried out what you recommended, but now I get an error:

"Error: cannot execute macro <<googleForms>>: Leee is not defined"

I entered “Leee” as the $player_name. I think it basically took ‘a’ as ‘Leee’ and threw out the same error.

I still think it is a syntax error, Sugarcube 2.x isn’t compatible with the syntax used in the above code. I did some more research on Macros in Sugarcube 2.x, the macro syntax is Macro.add(name , definition [, deep]) as opposed to macros['NameOfMacro']
But I’m not sure how to use the same in this block of code…

Any help would be grateful! Its alright if nothing comes to mind, appreciate you taking the time to reply.

Hey HiEv
I should have mentioned it in my initial post, but I did take a look at the exact same blog you referenced before posting the question. As mentioned, I’m new to this, I was perplexed by just looking at the code. I did give it a try but there must’ve been something that I missed out due to which the values never turned up on the Google Sheet.
Nonetheless, I will try it out once more and post a reply if I do manage to figure it out on my own.

Appreciate you taking the time to reply!

Update: Followed the instructions carefully and it worked like a charm! Thanks a ton!

1 Like