Trivia Game - Using Variables and JavaScript to remove answered questions from the deck.

Dec 02, 2016

OWEN HOLT
By OWEN HOLT

Concept
Create a trivia game that would:

  1. Randomly select a category from a list of 5, but limit the selection to only categories containing unanswered questions. 
  2. Display a random question in the selected category from a list of unanswered questions.
  3. 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.

26 Replies
David Anderson
over 7 years ago12/04/16 at 11:25 am (UTC)

This is very cool use of JavaScript, Owen. I'll get this added to our downloads hub. 

Would you mind sharing your example to our screencast and e-learning challenges? 

Screencast challenge:

Elearning challenge:

Here's a link to the published example: http://articulate-heroes-authoring.s3.amazonaws.com/Examples/Storyline/SL2/TriviaGameArray/publish/story.html

Jewell Ullven
over 6 years ago01/12/18 at 1:36 pm (UTC)

HI Owen!

 

Thank you so much for sharing this brilliant activity!

I was wondering if there was a way to get Graded Results once the learner is finished. Also, is there a way to stay in one scene/category, answer all of the questions and then randomly go to another scene/category?

Thank you, again!

~Kaylee

Kristin Augusta
over 6 years ago01/18/18 at 4:39 pm (UTC)

Hi Owen - I tried to use this code and modify it in order to randomly generate a unique number and then show the corresponding slide layer.  I theoretically understand creating an array and removing numbers from the array that have been used by setting their value to zero.  I just can't make it work.  Can you help a gal out?  I'm trying to make a "random accolade generator" for my team's Trainer Appreciation Week next week.  I can get it to choose random - but not unique yet.

 

Thank you!

 

OWEN HOLT
6 years ago01/19/18 at 2:58 am (UTC)

Sorry for the late response, I've been at a leadership offsite.  Any chance you can share your file so I can see what is going on under the hood? 

I'm not sure I did a great job of explaining all of the details when I made this post, but there are some critical steps here.

To keep it simple, let's assume that in Story line I have 5 variables to store values from 1 to 5 and I want to choose a random number. The array will do this fine, but when I send the value back to SL I also need a trigger to set the selected variables value to 0. If I fail to adjust the variables to 0 as they are selected, they will never be filtered out of my array.  In my file, you will see that I perform this on the correct feedback layer for each question when the user presses the button to go back to the main menu.  Make sense?

OWEN HOLT
6 years ago01/19/18 at 10:02 pm (UTC)

AH HA! I see the issue!

When I originally posted this, the community "engine" kept ignoring my JavaScript code so I made each line of code a "comment".  In JavaScript, any command line that begins with a double forward slash (//) is ignored. Nothing is happening in your file because every line of JavaScript code is being treated as a comment and not a command. Remove all the double slashes // in the code and it should work. 

Eva Horne
almost 6 years ago05/29/18 at 2:40 pm (UTC)

Hi folks!  I am currently using a version of this code to choose more than one number from the array by repeating parts of the code the number of times that I want it to run.  For example, I have 100 flowers and I want to randomly choose 5 of them, so I copy/paste the last three lines of the code five times.  It works that way, but will become cludgy when I get to the slide where I need for it to choose 50 of the flowers.  I know that there are loops in javascript, but have so far not been able to figure out how to get a loop to work.  Do any of you know how to loop this code?  Thanks! 

Eva Horne
almost 6 years ago05/29/18 at 6:22 pm (UTC)

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");

OWEN HOLT
almost 6 years ago05/30/18 at 1:44 pm (UTC)

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

Eva Horne
almost 6 years ago05/30/18 at 6:37 pm (UTC)

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

Eva Horne
almost 6 years ago06/01/18 at 3:15 pm (UTC)

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

Math Notermans
2 years ago02/12/22 at 5:28 am (UTC)

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.

ms
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.

Sign In to Reply