I have been following this guide on how to create a point system, but for some reason, the value I have set for the point system is not printing. Ideally, the Temperature should be set to 40 degrees Celsius and I am trying to create the $point variable so I can let the buttons affect the value printed in the square.
I have created a passage called StoryInit which contains:
Ah…if you read carefully, that’s not exactly what that guide says. You shouldn’t be displaying the points in StoryInit, you just want to set the initial value there. Plus you need a <<set>> command to set or change the value of a variable.
So. StoryInit should have only <<set $points = 40>> (or <<set $points to 40>> if you prefer).
The rest of your code should work, I think, though you should be able to just write $points to instead of <<print $points>> to print it: see SugarCube’s docs on the naked variable syntax. You only need the <<print>> command for printing more complicated expressions.
I read the doc on naked variable syntax and it seems like it should be printing based on the example. Do I need to initiate the variable again or something within StoryInterface for the number 40 to appear?
By default the content of your StoryInterface special Passage is considered raw HTML so that content isn’t being processed by the TwineScript parser, the exception to this is your passages ID’ed <div> element. This is why the current value of the $points variable is not being injected into that HTML.
There are a number of ways to resolve your issue, the following uses the setPageElement() function combined with a Passage to inject the output you want into the story-caption ID’ed <div> element. It also uses a :passagerender event handler to control when that injection occurs.
:: StoryInit
<<set $points to 40>>
:: StoryInterface
<div class="container">
<div id="passages"></div>
<div id="story-caption"></div>
</div>
:: Story Caption
Temperature:
<br><br>
<span id="temp"><<print $points>>°C</span>
:: Start
The initial passage of the project...
Add the following JavaScript to your project’s Story JavaScript area, it causes the story-caption element to be updated with the contents of the Story Caption passage each time a Passage is shown.
$(document).on(':passagerender', function (ev) {
setPageElement("story-caption", "Story Caption");
});
Alternatively. If per-turn updates are acceptable, then simply make use of the data-passage content attribute on the #story-caption element. For example (reusing Greyelf’s example):
I totally forgot that the HTML Attribute > Special Attribute feature also works in StoryInterface, and missed the mention of that fact in the interface documentation, thank you.
