Having problems with input text box

I am making a small interactive test and I would like to have a question and have the person answer the question by writing the answer in the text box. Then if the answer is correct an alert pops up and says so and if it’s wrong an alert also says so. I have done this before and it worked fine but now the if-else is always going to the wrong alert even if it is the right answer. I have compared the two functions and I can’t see the problem.

    function aranFunction((hype document, element, event) { 
        var answerElement = hypeDocument.getElementById('answer2') ;
    if (answerElement.innerHTML == 'Inis Mor') {
    alert ('Bravo, bonne réponse');
    } else {
    alert ("Oops mauvaise réponse") ;

Here is the code in the text box,

<span id="answer2" contenteditable="true" style="width:300px;float: left;"></span>

This is the other code for a question & answer and this one works just fine. I just can’t figure out why the if-else in the aran function doesn’t work and it works fine in the shepherd function.

function shepherdFunction((hype document, element, event) { 
var answerElement = hypeDocument.getElementById('answer6');
if (answerElement.innerHTML == 'shepherd') {
hypeDocument.startTimelineNamed('Question2 Timeline')
} else {
alert('Wrong answer');

Here is the code in the text box for the shepherd function. It is exactly the same as the other one.

<span id="answer6" contenteditable="true" style="width:300px;float: left;"></span>

Since I only dabble in Javascript programming I am really stuck and would really appreciate any help give. Thanks.

Both code snippets work fine for me. May be, there´s another mistake in the Hype file. Can you upload the file?

By the way - you don´t need the ‘span’ inside the text box. You can set the ‘contenteditable’ attribute (and of course the ID) within the Hype IDE:

Bildschirmfoto 2020-05-06 um 19.06.59

I have included the two scenes that don’t work. I wasn’t able to include the whole site since it was just too big. (upload only works with less than 3 megs)

Maxime et Noémie copie.zip (184.0 KB)

Also this may sound a bit silly but where do I find the Hype IDE? I have searched in the Hype documents but can’t find it.

@ktewes just meant the Hype application itself. This box can be found in the Identity Inspector.

I’m pretty certain that the problem is that you have multiple layouts, and they both have elements of the same ID. It is likely looking at the wrong one. If you test and use the first layout it will work. Instead you should give a class name to the element and scope the search to the scene.

So if you kept using spans, the inner HTML for the box would be:

<span class="answer3" contenteditable="true" style="width:300px;float: left;"></span>

But if you went with @ktewes’s recommendation to use the identity inspector, then you would set that contenteditable additional html attribute to true, and set a class name above to answer3.

The code to get the element would be:

var sceneElement = hypeDocument.getElementById(hypeDocument.currentSceneId());
var answerElement = sceneElement.getElementsByClassName('answer3')[0];
1 Like

Thank you @jonathan and @ktewes, it finally works. Also the tip about the identity inspector will make it easier to program. The strangest thing is that I had done the same this before in another game about the Hound of the Baskervilles and using the « id = » in the span and it worked fine, go figure.

1 Like

Great, glad you got it!

For the older document, if you only had one layout that had a single ID, then it would work. However if you have multiple layouts that had elements using the same ID then it definitely would fail! You may want to go back and test :slight_smile:.

1 Like

I have used « class » and the identity inspector for my functions and they work very well with both Safari and Chrome (can’t tell with Explorer since I don’t have it on my mac) but with Firefox it doesn’t work, just gives wrong answer. Is there something different with FF that I should take into account? I have the latest version of FF 76.01. I don’t really use it but many people do.

That’s odd, can you share your document and let us know how to reproduce the problem?

Here is the file.

Maxime et Noémie - copie.zip (216.8 KB)

In the Grace quiz the text answer is « poignard". In chapter 1 the first text answer is “Inis Mor” and the second is dolman. In chapter two the first test answer is « Galway" and the second is “Gleann Nehme”. The multiple choices work just fine.

The only thing you need to do here is make sure you run the init() function ‘On Layout Load’ for both layouts. Currently you have it only enabled for one.

(Your firefox browser was likely a different width than Safari and Chrome so it was picking up your smaller layout)