0 votes
by (130 points)

Hi, I'm very new to Twine (using Harlowe2.0.1.). I am looking for a javascript alternative to (prompt:), allowing a player to input text on the page (not via the 'prompt' dialog box), and sending them to one passage if they answer "xxx" and another passage if they answer anything else.

I've found code that allows a variable to be set when a player types into a textbox and clicks a button:

https://twinery.org/forum/discussion/2220/any-other-user-input-methods-available

http://twinery.org/questions/881/a-way-to-have-a-text-box-on-the-page-rather-than-an-input-box (using features no longer supported in Harlowe 2.x it seems)

JAVASCRIPT:

if (typeof window.customScripts == "undefined") { 
window.customScripts = { 
submitName: function(inputName) { 
//Get the value of the textbox at time of click 
var newName = $("input[name='" + inputName + "']")[0].value; 
//Find the hook node based on name and set the text inside 
$("tw-hook[name*='" + inputName + "']").text(newName); 
//Log the Change console.log(inputName + " changed.") 
} 
}; 
};

PASSAGE:

(set: $rivalName to "your unnamed rival") You and [$rivalName]<fname|. 

<input type="text" name="fname" value="Johnson"> 
<button type="submit" onclick="customScripts.submitName('fname')">Yes that's it</button> 

|link>[] 

(live:100ms)[ 
(set: $rivalName to ?fname) 
(if: $rivalName is not "your unnamed rival")[ (replace: ?link)[

(link-goto: "Next Passage", "Next Passage")] 

(stop:) ] 

]

I am very bad at Javascript and unable to tweak this to what I need. Is it possible?

Any help would be most gratefully received.

1 Answer

+1 vote
by (148k points)

You could combine the hypothetical information found in the A way to have a text box on the page rather than an input box question with the information found in points 2 & 3 in the Any way to bind keyboard inputs to links... question to create a updateVariable() function that simulated the clicking of a (hidden) link once the other code had been executed.

1. Add the required links to the same passage as containing your input elements.
note: each link would need to be wrapped in it's own uniquely named hook. 

|next>[ [[Use the Save button to visit the Next passage.|Next]]]

2. Use CSS (based on the hook names) in your Story Stylesheet area to hide each of the links.

tw-hook[name="next"] {
	display: none;
}

3. Modify the existing updateVariable() function (or create a new function) to click the hidden link.

updateVariable(inputName) {
	/* The exisiting code of updateVariable function... */

	/* Check the value entered and click the link if it exists. */
	if (value == "correct value") {
		var link = $('tw-hook[name="next"] tw-link');
		if (link.length > 0) {
			link.click();
		}
	}
}

 

WARNING: If you are using JavaScript to modify the contents of the undocumented State.variables object and if that contents is a collection object of some kind (Array, Map, etc) then it is likely that you are corrupting History, which can effect the outcome of the Undo feature if more than a single passage traversal has occurred since the last TwineScript modification of the same collection.

by (130 points)
That is absolutely FANTASTIC. Thank you so much for your time, the solution worked! (And I got to learn a little more about javascript in the process).

Thanks again for your help :)
Welcome to Twine Q&A, where you can ask questions and receive answers from other members of the community.

You can also find hints and information on Twine on the official wiki and the old forums archive.

See a spam question? Flag it instead of downvoting. A question flagged enough times will automatically be hidden while moderators review it.
...