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.
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.
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:
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).
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.
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.