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

renzlorenzz
10 Feb 2017, 13:33

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
10 Feb 2017, 21:03

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
11 Feb 2017, 12:35

[[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
11 Feb 2017, 18:15

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
13 Feb 2017, 12:47

Oooh, thank you very much. it works really well


Siddone
25 Feb 2017, 12:35

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


renzlorenzz
28 Feb 2017, 14:40

[[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}