Anagram - working with input fields

Using JavaScript with Hype
1

Hei all,
just learning how input fields work and how to call Hype functions from innerHTML. So have a guess... :slight_smile: anagram

anagram.zip (45.9 KB)

Just noticed - it looks fine in Safari and Chrome, letters are shifted in Firefox... any ideas?

2 Likes
2

hint: the new attributes-part even offers a simple way to add ‘contenteditable’ : true as key value pair -> https://www.w3schools.com/tags/att_global_contenteditable.asp

3 Likes
3

Ok - got it… This would make things much easier…

1 Like
4

Hi all,
due to silly season... I´ve got some time to work on projects for our children´s editorial group. :grinning: The example above doesn´t work (anymore :thinking:) for any reason. So here´s a complete rebrush of the anagram file - still beta.

The overall concept was:

  • any number of puzzles in one scene
  • individual evaluation for each puzzle
  • editors with no coding experience must be able to set up the anagrams
  • each puzzle makes use of one and the same set of scripts
  • no copying of scripts, just copying anagram-symbols to template files

So, if you like - please have a look.

image

anagram.zip (69.2 KB)

2 Likes
5

Cool!

I suspect the problem you're hitting with the other document is this bit of hard code in init():

docName = "anagram";
myHypeDocument = HYPE.documents[docName];

The docName must be anagram and in an export situation this can change or in a preview situation this is always index. Using something like Object.values(HYPE.documents)[0] is a better general way to get this if you know there will only be one Hype document in the .html page. You also had access to the hypeDocument variable itself, so could have just used:

myHypeDocument = hypeDocument;

However, your new code is much more streamlined and works really well :-D.

1 Like
6

Yep This is three years ago! And I learned a lot, especially here in the forum. :+1:t3:

Completely new approach here… :grinning:

2 Likes