How to track user progress?

Question

Hi,

I'm now using twinery to run some courses for students.

The wrapping app is a vue app like this one:https://github.com/klembot/twinejs

What I'm looking for is an easy way to track user progress. So I'll be able to track what passages the user clicked, how long a user stayed in a progress etc.

I've tried several things - but I could in no way get to the GotoPassage event.

I've finally decided to give up on Hallowe and moved on to SugarCube which allows for jQuery events.  I get the events in JS - but I do not have the story and passage info there.

$(document).on(':passagerender', (e) => console.log(1));

Is there any easy way to add a script to run on all passage transitions that receives the passage's data?

 

Answer 1

Which story format (and its version) are you using?  Aside from Harlowe, Twine 2 comes with SugarCube and Snowman preinstalled.  Unless you've manually installed a story format I've never heard of, you're using one of those.

Comments

I'm using SugarCube. Sorry - had a typo there.

The problem is that in the event's callback I have no way to reach the actual passage data. It just gives me the element itself and not the data object.

---

You can just use SugarCube's APIs. Sounds like you want the State: http://www.motoslave.net/sugarcube/2/docs/api-state.html

---

There is an event property for the passage data, however, it is currently undocumented (I'll rectify that soon).  The property you want is named passage.  For example:

$(document).on(':passageinit', function (ev) {
	console.log('incoming passage title:', ev.passage.title);
	console.log('outgoing passage time (ms):', time());
});

Additionally.  There are other ways to obtain data about the incoming passage, but the above example will do what you wanted.

---

Thanks.

I already got that in the `passagerender` event.

What I need is an easy way to connect the passage to the LocalStorage passage data (mainly - its ID). Can this be done?

---

What localStorage passage data?  Connect the passage to whatever data you're talking about how?

Are you asking how to store whatever statistics you're collecting in localStorage?

---

What I get is the passage title, element id and that's just about it.

What I'm missing is meta data I also have on the passage like id.

Here's a local storage example for a passage, that is set by twinery:

{"id":"170118b5-8705-459a-ba45-6ca70f02ad9e","story":"54cb4a81-0323-44b9-b475-58d1688809a4","top":173,"left":126,"width":100,"height":100,"tags":[],"name":"Math","selected":true,"text":"Double-click this passage to edit it."}

Can I access this info during the event?

 

---

I think you're confused about what data story formats are given.

The data you reference above is only used by Twine 2.  The data chunk given to story formats only includes the passage's name, tags, text, and position (and the latter only because it's necessary to restore the passage icon's position on the story map when decompiled).

I doubt any story format loads the position info from the data chunk, so that leaves the passage's name, tags, and text.  In particular to SugarCube's Passage object, which is what the event object's passage property yields, you may access all of those fields.  For example:

ev.passage.title  → The name of the passage.
ev.passage.tags   → The tags of the passage (as an array).
ev.passage.text   → The raw text of the passage.