Forum Discussion
Trivia Game - Using Variables and JavaScript to remove answered questions from the deck.
Concept
Create a trivia game that would:
- Randomly select a category from a list of 5, but limit the selection to only categories containing unanswered questions.
- Display a random question in the selected category from a list of unanswered questions.
- End the game when all questions in all categories have been answered.
In other words, once you answer a question correctly, you won't see it again; answer it wrong, and it will keep randomly appearing until you get it right. Once you answer all the questions in a category, it will also be "removed" and you won't see it again.
How
The key was to use variables to track things and JavaScript Arrays. Many of you have already seen the JavaScript to generate a random number. I just took it a step further by defining an array based on variables, filtering the array to remove 0's, and then pulling a random number from the remaining value set.
The script looks something like the following:
//var player=GetPlayer();
//var nv1=player.GetVar("V1");
//var nv2=player.GetVar("V2");
//var nv3=player.GetVar("V3");
//var nv4=player.GetVar("V4");
//var nv5=player.GetVar("V5");
//var values1 = [nv1, nv2, nv3, nv4, nv5];
//var filtered1 = values1.filter(function(x) {return x>0;});
//var target = filtered1[Math.floor(Math.random() * filtered1.length)];
//player.SetVar("ShowCategory",target);
I don't have access to a server to post the published version, but below is the .story file. If someone wants to publish it and share a link, that would be awesome. Enjoy!
Update. Dave posted the published version for me HERE.
- OwenHoltSuper Hero
Are you sending the info back to 50 variables? Or is the outcome a list of 50 flowers loaded into a single variable?
- EvaHorneCommunity Member
Hi Owen,
Thanks for your response! The outcome is loaded into a single variable. The code that I'm using (which I got from another of these posts but that I can't find now) is below. I then have triggers that change the state of each flower when the single variable (FM) changes. It works when the Javascript is repeated because FM changes each time the code runs. Hopefully, that will also happen in the loop. Here's the code (with a shorter list of single variables than I am using just to save space):
var player=GetPlayer();
var nv1=player.GetVar("F1");
var nv2=player.GetVar("F2");
//to
var nv100=player.GetVar("F100");var myArray = [nv1, nv2, ....., nv100];
var filtered1 = myArray.filter(function(x) {return x>0;});var myNumber = filtered1[Math.floor(Math.random() * filtered1.length)];
player.SetVar("FM",myNumber);var myVariable = "F" + myNumber;
player.SetVar(myVariable, "0"); - OwenHoltSuper Hero
Ok, I think I get where you are going with this and a sequential loop should work for you. A sequential loop is basically a command statement that tells the computer to repeat the same sequence of commands a certain number of times.
The basic construct looks like this
for ("variable to track iterations with a starting value"; "condition test to stop looping"; "command to update the tracking variable at the end of each loop") {
"code you want to execute each loop";
}
That's it.
So here is a quick example you can try right now in this window. Open up your browser's console. (For most browsers, click in the address bar and push the F12 key.) Copy and paste the following code into the console and execute it.for (var i = 0; i < 10; i += 1) {
console.log(i);
};When you execute this code, you should see the numbers 0 through 9 returned. So here is what happened. We created a loop and declared a variable "i" with a value of 0. We created a stop condition to exit the loop as soon as the variable "i" was equal to 10. We incremented the value of the variable "i" by 1 each time we went through the loop. The code we executed during each loop was to write the current value of the variable "i" to the console log. Make sense?
If I apply this basic looping construct to your code, it would look like this if I wanted to loop through 50 times://only need to get the player once
var player=GetPlayer();//start the loop
for (var i = 0; i < 50; i += 1) {
//add your code and close the statement with "}"
var nv1=player.GetVar("F1");
var nv2=player.GetVar("F2");
//to
var nv100=player.GetVar("F100");var myArray = [nv1, nv2, ....., nv100];
var filtered1 = myArray.filter(function(x) {return x>0;});
var myNumber = filtered1[Math.floor(Math.random() * filtered1.length)];
player.SetVar("FM",myNumber);var myVariable = "F" + myNumber;
player.SetVar(myVariable, "0");
};
Let me know how it goes and if this explanation made sense.
~ Owen - EvaHorneCommunity Member
Yes! That makes sense and it works perfectly! Turns out I was doing a couple things wrong. I'm a trial-and-error user of javascript, in that I search the web for bits of code that do what I want and play with it until I get it to work. But, this one was eluding me. Now, I just need to work out the logistics/connections of the different slides and get my math to work correctly.
Thanks very much for the help!! - Eva
- OwenHoltSuper Hero
That is exactly how I learned what I know about JavaScript!
Feel free to connect with me on LinkedIn and I can try to assist with other JS questions you might have.
- EvaHorneCommunity Member
Thanks! But, I'm afraid that I'm not a member of LinkedIn (or any other social network). I find that because I already do so much on the computer, I don't want more accounts to keep up with. So, I've never joined. I did find your info on LinkedIn though and will be able to use that to contact you if I need to. I really appreciate the current help and offer of future aid! I would post a link to the material I used your code in, but the server I put those things on is currently down due to a fire and I don't know when it will be back in working order. -Eva
- PaulaAnderson-4Community Member
Could anyone help me use the trivia array while removing some questions or characters? Which code would I have to alter to make this happen. I have made several attempts, but must be missing something.
- MathNotermans-9Community Member
Probably quite easy to solve your issue Paula. Do share a sample of whats going wrong and/or your Storyline and im quite sure someone will help.
- PaulaAnderson-4Community Member
I have changed the variables to remove the 4th question in each section and removed the questions, but the character continues to come up after questions have been asked and at that point, the user has no further options (i.e. continue button, etc.)
- MathNotermans-9Community Member
After some digging to understand the logic of it, the solution was easy. To help you solve this kind of things yourself i am gonna explain what i did.
I added a textfield to the MasterSlide referencing and showing all variables i thought were important in the setup.
All questions i added an asterisk * behind the proper answer, so i could test and check off all quickly without errors... and having to redo questions ;-)
Then i published and tested the Storyline. I noticed that when a question was answered correctly 1 was deducted from a variable. Depending on categorie either QR1,QR2,QR3,QR4 or QR5. And that was the clue. In the Storyline those variables were hardcoded to 4. Because you removed 1 question from the categories those didnot match anymore.
So your solution is simple. Change those variables to 3 and its working fine.QR1,QR2,QR3,QR4 and QR5 need to be 3.
- PaulaAnderson-4Community Member
Yes! That was the fix. I am new to Storyline and wanted to challenge myself, but this was beyond my scope. Thank you!!!
- OwenHoltSuper Hero
Thank you for jumping in on this Matths, I'm not sure how I missed the notification.