Many different texts - can they be loaded dynamically?

Using JavaScript with Hype
1

I try to make an application for some sort of divination cards. There are 330 possible cards to draw. The user draws a card (moves with mouse from a picture representing the full stack), the card turns and randomly shows one of the 330 possible card texts.

In addition: each card has a short and a long explanation. When the user has drawn a card he can click/tap somewhere on the card and the short or long explanation pops up - depending where the user clicked.

During a session a maximum of 20 cards are drawn.

All texts are stored in an array in JavaScript:
[number of card, text of card, short explanation of card, long explanation of card]]

The simplest way to program this, would be to have an object or symbol “Card” and create instances for each drawn card on the fly. As far as I understand, that is not possible in Hype 3 (right?).

My next idea was, to prepare 20 cards C1 … C20 (in Hype 3 these are text fields with some design, so it looks better). At the beginning of a session they are all hidden. When a user draws a card from the stack for the i-th time, (1) randomly a card number of one of the 330 cards is computed, then (2) the text of the next prepared card Ci is replaced by the text of the selected card number, then (3) Ci is made visible and the user sees what card he has drawn.

Then I discovered, that the function hypeDocument.setElementProperty does not allow to change the text of an element (that would be innerHTML). Only the position and size related properties can be changed.

Now I am stuck. Does that mean, I have to prepare a textfield for each single possible text of the 330 cards?
And if I cannot change the text of the card, then I also cannot change the text of a field for the short (or long) explanation. So do I have to put all these texts in advance in separate text fields? That would make a total of 990 textfields, the content of which I have to copy by hand into fields in Hype 3.
In addition: the system comes in (at least) 3 languages - now we have 2970 text fields… ?

I hope I have not seen the right thing - or Hype 3 might not be the right tool for this kind of application :wink:

Thanks for all hints.

2

sure you can populate any hypelement with dynamic content.
you can not create hypeelements on the fly (though it’s possible to clone elements, but it is not supported …)

what exactly is your question regarding this¿

3

Text can be changed dynamically with Hype. You could use the timeline to control the innerHTML, but that can be cumbersome. Instead, you can just add some JavaScript.

A great example of this is the #7 free Hype template, which shows how to create a quiz...

It uses an array to store the questions, which are displayed randomly.

3 Likes
4

Thank you, Michael! I had a “brain block” thinking I could use only the hypeDocument… functions described in the documentation. And the quiz example came exactly at the right moment for me - now it works like expected!!!

5

This quiz is amazing. I was just looking for something like this. My company wants to implement online tests (we give metallurgical courses every week and often people fail the final test, so they have to come back to our offices and re-do the test, and we want to make it easier for them.) do you have something for a more complicated quiz? still with random questions but every question would be totally different from the last one. Also a way to record their score ?

Any help would be awesome . I´ve been looking for something like this for 4 months now.

LL

6

Oh never mind, I found how to change all the questions. Now is there a way to not let the user know if the answer he or she chose was right or wrong ?

Thank you and sorry but I am a super noob with coding.

LL

7

If you didn’t want to show the answer immediately, you would need to modify the code in the answer function. Generally, you’d comment out (by placing a // in front of any line) or delete the lines that are modifying the backgroundColor or innerHTML. However, you’d probably still want some sort of marker that an answer was registered. In this case, perhaps you could just always have a neutral color for their selection.