A way to have a text box on the page rather than an input box?

Question

I'm using harlowe 2.0.1

I want to have user input but rather than the box that pops up as soon you press test before the game even loads, I want something on screen. But surely that would take some kind of css or javascript, wouldn't it? If it isn't possible, that's chill, I'm just wondering.

I want the box to on screen, maybe with a box that says confirm next to it, just for naming purposes.

I've seen that it might be possible in sugarcube but I don't want to change my entire set up for just one thing.

Answer 1

WARNING: Please read the statement allow before preceding on to the hypothetical thought exercise following it.

Harlowe (1.x or 2.x) does not currently have in-built support for entering Reader supplied data via in-page input elements (like text field).

 

I strongly suggests visiting the Harlowe Issue page and either requesting that such macros be added to the story format or adding your support to any such existing request, and I strongly suggest doing that instead of considering the use of the following thought exercise within an actual story.

 

The following thought exercise uses internal knowledge about the implementation and undocumented features of the Harlowe v2.0.1 engine, because of this the following may stop working for any later version of Harlowe 2.x

 

The following thought exercise is not a recommendation and you use it at your own risk.

 

1. The following Javascript creates a method named CustomScripts.updateVariable which can be used to update a story variable based on the contents of a HTML input text field. The method takes a single parameter which is the name of the story variable without the leading dollar sign ($), it also expects the input text field to have the same name. The method uses an undocumented Harlowe feature to update the value of a story variable.

Place the following Javascript code within your story's Story Javascript area.

if (typeof window.CustomScripts == "undefined") {
	window.CustomScripts = {
		updateVariable(inputName) {
			// Get the value from the input textbox at time of click.
			var value = $("input[name='" + inputName + "']")[0].value;
			// Update the variable.
			State.variables[inputName] = value;
		}
	};
};

 

2. Place the following TwineScript within a Passage. it does three things:
a. It initialises a story variable named $fname which will be updated with the entered value.
b. It creates a HTML input text field named fname which will be used by the Reader to enter a value, this field has been assigned a default value of Johnson.
c. It creates a button which calls the CustomScripts.updateVariable when select, which in turn causes the current value of the fname input text field to be assigned to the $fname story variable.

(set: $fname to "")

<input type="text" name="fname" value="Johnson">
<button type="submit" onclick="CustomScripts.updateVariable('fname')">Save value to variable</button>

 

3.  You can test the above TwineScript by adding a markup link to the end of code in point 2 and then using TwineScript like the following within the targeted passage.

fname: $fname

... if you visit the target passage before selecting the Save value to variable button you will see the initial value, and if you visit the target passage after selecting the button you will see the entered value.

Comments

Thank you, this worked! Though it made my transitions not work and I'm not exactly sure why.

---

We (the people that supply answers on this site) can't give advice on code we can't see. *smile*

Answer 2

I suggest reading the Any other user input methods available? thread on the old forums, @csalzman describes a method/hack that can be used to achieve what you want. Make sure you read the whole thread as later comments contain corrections to @csalzman's original example.

Comments

This doesn't work for me. Because my thing won't accept javascript that uses brackets or < these things, and because I don't what I'm doing or how to comprehend the thread. Coding is like a whole 'nother language to me, one that I really don't understand, like japanese. But even as I read and try, it's not clicking. Also the problem with the html not working is as infuriating as unknown as to why to me. Both are a lot.

---

The Javascript code should be placed within your story's Story Javascript area, the TwineScript code with your Passage.

That being said I just retested the proposed solution and it seems that the Harlowe 2.x story format has been updated since that thread was written and one of the features required is no longer supported.

I guess I will need to do something I was hoping not to.

---

Yeah, I put the javascript where it's supposed to go and I get those errors. Could it be because I'm using the in browser version or that I'm on an old chromebook laptop?