Re: Using prompts for player-created names?

[HarmlessTrouble]

A few topics down from this one is the question about a password prompt. I was wondering if the prompt can be used to let the player type his own name, which can then be stored as a variable for use in the passages after (eg I type 'Jack', all passages name 'Jack' instead of 'PlayerName'). Is this possible?

e.g.

<<set $playerName = prompt("Please enter your name","Jack")>>  

 Where "Please enter your name" is the prompt title and "Jack" is the default text.

[HarmlessTrouble]

Oh and forgot the important part. Just place a <<print>> macro where ever you need to in the story.

e.g.

Hello <<print $playerName>>, Is this the first time you played this adventure?

[[Yes]] [[No]]

[Carlos Feliu]

Awesome! Thanks.

Integrating the text box in the game screen instead of showing it in a prompt (so it feels more, say, "organic" and less disruptive to the game flow) is still a bit far-fetched, right?

[HarmlessTrouble]

Here's a custom macro that creates an input element and captures the input values to a twee variable. 

<<textinput $[variableName]>>

::Macro textinput [script] 

try {
  version.extensions['textinput'] = { 
    major:1, minor:0, revision:0 
  };
macros['textinput'] = {
handler: function(place, macroName, params, parser) {
v = params[0].replace("$","");
var input= document.createElement('input');
input.type = "text";
d = v+"TextInput";
input.id = d;
input.addEventListener('keyup', function()
{
state.history[0].variables[v] = document.getElementById(d).value;
});
place.appendChild(input);
},
init: function() { var v; var d;},
};
} catch(e) {
  throwError(place,"textinput Setup Error: "+e.message); 
}

Example Use

::Name Entry
Enter Your Name:
<<textinput $playerName>>
[[Say Hello]]
::Say Hello
Hello <<print $playerName>>!

 

Actualy I'd like you to test this.  Let me know if it works for you.

[Trevor Robinson]

It's been a while since there was a post on this, but I reached this via Google and thought I'd help it out. Using the code previously written here gave me errors, due to... something. I think I just changed the spacing around it and it worked, but that's not important.

I modified the macro to accept a second optional argument that is the default value of the text area.
Thus you can use it like this: <<textinput $variable "Default Value">>
Or: <<textinput $variable Default>>
Or perhaps: <<textinput $variable $default>>

The default value won't be assigned to the variable immediately, so if you want that you should assign it separately.

For the person who knows nothing about Twine (like I did when I found this) here is exactly what you do to include this in your story:

Make a passage somewhere. It doesn't matter what you call it but for organizational purposes you should probably call it "TextInput". It must have a tag of 'script'. Paste the code below into it.

try
{
    version.extensions['textinput'] = {
    major:1, minor:0, revision:0
    };
   
    macros['textinput'] = {
     handler: function(place, macroName, params, parser) {
      v = params[0].replace("$","");
      var input= document.createElement('input');
      input.type = "text";
      d = v+"TextInput";
      input.id = d;

      input.defaultValue = params[1];

      input.addEventListener('keyup', function()
      {
       state.history[0].variables[v] = document.getElementById(d).value;
      });
      place.appendChild(input);
     },    
     init: function() { var v; var d;},
    };
} catch(e) {
    throwError(place,"textinput Setup Error: "+e.message);
}

No macro will work in the Start passage, just a Twine bug for now. (1.3.5) Hope this helps somebody.


On Friday, February 8, 2013 4:03:29 PM UTC-8, Ernst-Jan van Melle wrote:

Awesome! Thanks for this!

On Tuesday, February 5, 2013 9:36:48 PM UTC+1, HarmlessTrouble wrote:

[Trevor Robinson]

Okay that example I provided with the variable default value doesn't work.

[Kolya]

Works for me. Thank you!

[Kolya]

I had one problem with this script: When you have more than one text input on the page it only saves the last one used.
The following script will work with multiple text inputs:

try {
      version.extensions['textinput'] = { major:1, minor:0, revision:0 };
    macros['textinput'] = {
            handler: function(place, macroName, params, parser) {

                var v = params[0].replace("$","");

                var input= document.createElement('input');
                input.type = "text";

                var d = v+"TextInput";

                input.id = d;
                input.addEventListener('keyup', function()
                {
                state.history[0].variables[v] = document.getElementById(d).value;
                });
                place.appendChild(input);
            },   

    };
    } catch(e) {
      throwError(place,"textinput Setup Error: "+e.message);
    }

On Wednesday, 6 February 2013 18:59:24 UTC+1, HarmlessTrouble wrote:

[Richard Sharpe]

I tried using this macro in the brand new Twine 1.4 released today, since 1.4 doesn't have textinput, and there was no button to click to take the player to the passage.

What am I doing wrong?

Thanks!

[Kolya]

Just use a regular link. There never was a button iirc.

> --
> You received this message because you are subscribed to a topic in the Google Groups "Tweecode / Twine" group.
> To unsubscribe from this topic, visit https://groups.google.com/d/topic/tweecode/Rl-OhqTQvb4/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to tweecode+u...@googlegroups.com.
> For more options, visit https://groups.google.com/groups/opt_out.

[HarmlessTrouble]

Haven't had a chance to get Twine 1.4.  If your getting the textbox and no errors then your doing almost everything right.  Remember to set a normal twine link to go to the next passage.  In my example I linked to a passage titled "Say Hello" Where in I printed the value from the variable used in textinput in the previous passage.  The macro detects every change made to the textarea and stores the value each time.  

[Richard Sharpe]

Well, I'll be! *smacks knee*

Yep, that did it. I have a feeling this will be a popular macro. :-)

There are a lot of cool things about 1.4. It has different-colored passage headers and when the user closes before saving, it prompts "Save before exit? Yes, No, Cancel."

The thing I liked most is that you can write [[link text|passage name][$var = value]] to make a passage or external link that changes a variable when it's followed. The code section is treated as if it were arguments to a <<set>> macro.

However, I've experienced a couple minor issues with the CSS in stylesheets. In my stylesheet a:link {color:#00FF00 !important; text-decoration:underline;} displays blue when it should be lime


You guys making it over to the new forum?

[Ben Swinden]

Were you able to get textinput working in 1.4? I'm getting the same issue as you. I have the text input box without the button and pressing enter does nothing.

Is it not possible to use textinput in the same way as the version that was included in twine 1.3.5? 

[HarmlessTrouble]

Ah now I

I understand the tweet.  This is a different, simpler, textinput than the one that slipped into the previous versions. Text is saved automatically to the variable as the player types, no button required.  Use normal twine links to advance your story.   

Sharpe, I've posted to Twinery.org/forum a few times but now a spam problem has developed.  Someone is bypassing the registration captcha.  

[Ben Swinden]

Ok, works well enough. Would still be really nice to have the enter to advance functionality since thats the most intuitive thing to do once you've finished typing in a textinput

[LoStavro]

Hey! 

This is awesome - any suggestions as to how to modify the size of the text box?

Also - is it possible to save the inputted text somewhere ie on a server?

Thanks :)

L

[Richard Sharpe]

LoStavro,

Note that changes were made to the text input in 1.4.1. See here: http://twinery.org/forum/index.php/topic,707.0.html

Attached is a story file with a styled textinput and button.

Here is the stylesheet:

input[type="text"] {
    background-color: green;
}

.passage button {
    color: red
}

For more information:
http://www.w3schools.com/css/css_attribute_selectors.asp
http://www.w3schools.com/html/html_forms.asp
http://www.456bereastreet.com/lab/styling-form-controls-revisited/text-input-single

Hope that helps!

As for your other question, that's out of my league,but it can certainly be done.

You might try asking on the official Twine forum: twinery.org/forum/



—Sharpe