How to make the player have an text box to put their answer?

renzlorenzz

I'm going to put quizzes and riddles on my game where the player need to type their answer,

for example :
The first letter of the alphabet is A, and the letter B comes after the letter A.

However, the letter you need to worry about is the last one. What's the last letter of the alphabet?

Here's a hint: it isn't Z.

the answer will be letter T and I want the player to put their answer on a text field.

how can I do that on squiffy? I don't like the windowed one.


thetruespin

Your going to need a bit of html and Javascript.

Basically you can create an input field using bog standard html, give it a class name and then create a link to the next section.

In the next section include something like:

var myvariable = document.getElementById("classname").value;

This will convert whatever string is in the input field into a JS variable. Then you can do whatever you want with it, including checking for valid entries.

Be warned, Squiffy does not preserve JS variables, so if you need it at a later point you'll need to convert it again into a Squiffy attribute. You can then convert back and forth when required.



renzlorenzz

[[first]]:
The first letter of the alphabet is A, and the letter B comes after the letter A.

However, the letter you need to worry about is the last one. What's the last letter of the alphabet?

Here's a hint: it isn't Z.
</input type='text' id='answer'/> (I inserted the slash so it can display the code)
[[submit]]
[[submit]]:
{var answer = document.getElementById("answer").value;}
{answer}

is this how it should work? I'm getting values as NULL


thetruespin

Using {answer} calls a Squiffy attribute.

You haven't set a Squiffy attribute, only a javascript variable.

You need to add the following:

squiffy.set("answer", answer);

This takes your JS variable and turns it into a Squiffy attribute.

I'd use some different names a it's getting confusing calling everything answer.


renzlorenzz

Oooh, thank you very much. it works really well


Siddone

can you show how it is the right version, the one that works? thank you!


renzlorenzz

[[first]]:

Type your line here
</input type="text" id="alpha" pattern="A-Za-z" maxlength="1"/>

[[submit]]

[[submit]]:
squiffy.set("textline", jQuery("#alpha").val());
You type {textline} the textarea on the first section...

{if textline=t:yes you got it right} {else: you got it wrong}


Log in to post a reply.

Support

Forums