Using a variable in a variable

Using JavaScript with Hype
1

Hi

I am creating a trivia quiz and having trouble with what is probably very simple. I want to have a bank of questions that are presented randomly.

I start by declaring the questions as global variables in the first scene load:

function getInfo() {
window.question1 = "This sexpot’s performance resulted in the FCC rebuking NBC and banning her for 15 years.";
window.question2 = "When this heart throb died of a ruptured appendix there was national mourning and at least one fan committed suicide.";
window.question3 = "The KKK had a major resurgence when this movie was released.";
window.question0 = "This scientist was awarded a second Nobel Prizes in sympathy for the scandal they endured following an affair with another married scientist.";
}

On the second scene load I generate a random number with the var randomNumber. I then try to use that variable to call the global variable using a function:

function displayQuestion(hypeDocument, element, event){
var randomNumber =  "question" + Math.floor(Math.random() * 4);

	hypeDocument.getElementById("questionDisplay").innerHTML = window.randomNumber;
	
	alert(randomNumber)
}

It comes up as undefined. Any guidance would be appreciated.

Thanks

2

Wow,

Don't know where to start with the issues of that without writing a very long post.

So I would suggest you look at learning the very basics of JS.
It is not too hard and will not take long. Probably an hour or so..

There are plenty of instructions on the forum where to do this, just do a search or just search the internet.

www.w3schools is a good starting place

Apart from that this is what you are aiming for...

Putting your questions in an Array() using hypes custom data api. Which is a convince global that can hold objects within hype's scope for you.

Yor=ur second code function will access this global and return the value at the index position in the Array() derived from the random number.

questions.hype.zip (29.0 KB)

Although I have included an example with some basic code to do this, it would be best to follow my suggestion so you understand what it is doing so you can add/adjust it to suit.

3

This seems related…

https://photics.com/free-template-tuesday-7-tumult-hype-capitals/

There's also a video…

4

The main issue with your code is that window.randomNumber is literally looking for the object field of randomNumber and not referencing the local variable. To do this, you'd use the bracket notation, so the line would look like:

hypeDocument.getElementById("questionDisplay").innerHTML = window[randomNumber];

The other potential issue is that you need to make sure your getInfo() method is being called at some point. I wouldn't know if this is a problem or not without seeing your document.

Longer term though, you'll probably want to instead just use arrays like what @MarkHunte is suggesting. (Or look at @Photics's example if that applies).

5

Thanks for the help, Photics template was particularly helpful.

I have created a wireframe based on it that is working great except I am trying to add an image for each question. I have included a url for each image as part of the multidimensional array that I feed into an HTML widget.

I can't get the widget to refresh so all it does is display the url.

Can this be done or is there a better way to have dynamic images?
Scandalous History the Game.hype.zip (37.7 KB)

6

Have a look at Hype Data Magic… might be helpful.

7

There are two issues with your code:

  • you are trying to set HTML with .innerText = "..." code. But this is strictly for text. Instead you should use .innerHTML = "...".

  • You are using an HTML Widget, which is an iframe. As such, you cannot set the inner html contents. Instead use a Rectangle element (removing styling). These are <div> elements on the page and therefore you have access to set their innerHTML.

1 Like
8

Thank you, worked perfectly.

1 Like