Does anyone happen to know some simple Javascript code that can be used in Storyline 3 to randomly place an object (like an oval) or an image (of a beetle) within a box on the screen? I'm trying to create a Natural Selection exercise in which students hunt for camouflaged beetles in which the beetles are randomly placed on the background in each round of the hunt. I am only vaguely familiar with Javascript coding and every example of something similar that I find online is different so that I'm having a hard time deciding on the essential elements required. Thanks!
I was thinking that you could have a bunch of beetle pictures and setting their default state to hidden.
In my example, I have 8 beetles. There is a Random number variable that chooses between 1 - 8. There are triggers on timeline start that changes the appropriate beetle state to normal depending on the number variable.
Thanks! Though, what I want to do involves at least 20 beetles onscreen all at the same time, half one color (green) and half another color (brown) against a background (say green) that is camouflage for one beetle color. Based on how many of each color beetle the student finds, the next generation of beetles will have some proportion of each color and those offspring beetles need to be randomly distributed on the slide so the students can't just look in the same spots each time. They will hunt beetles for 4 generations and calculate the allele frequencies of the colors in the population at the end. We have an old version (that has 40 beetles) of this activity that was written in 1997 and runs in shockwave. We can't update the program to run in newer versions of shockwave because we don't have the original code and none of us really know how to program. I have figured out enough of Storyline to do some pretty fancy things and know how to use Javascript to generate random numbers, just not how to get it designate a random position on the screen.
I think you are selling yourself short. From the way you describe your abilities, this should be a simple exercise for you. Simple; not easy. All that is holding you back is the ability and willingness to invest a lot of time, certainly not ability.
Remember, this is a visual medium, so nothing has to do what you want. It only has to look like it is doing what you want.
If you can produce one green beetle, and one brown beetle, you can produce 100 of each.
Like Russell says, scatter 100 green beetles (or how ever many it takes to fill the screen) around the screen and set their initial state to hidden. Go into js, and pick 40 random numbers between 1 and 100, and set the corresponding variables true. Pass them to SL, and run through the triggers: Change state of GB001 to Normal on condition variable G001 == true, etc. Repeat for BB. Check how many beetles are found, do the math for the next generation's ratio, and repeat.
Simple, just VERY time-consuming. The only hard part is the js programming, and you can do that already.
I would probably create 20-30 slides that have the beetles randomly on them. The slides would be placed inside of a question bank. This way you could randomly draw 4 slides from the bank (1 slide for each generation).
Whew! It took a long time (mostly getting the math to work the way I wanted), but I finally have a draft version (link below). There are 10 slides for each color background. Each slide has 50 green and 50 brown beetles. The different numbers of each color beetle are selected from the array using Javascript similar to one I found in another discussion (that I haven't been able to find again). As beetles are "captured" by clicking on them, calculations are going on invisibly so that when you finally have 20 total, it shows the number of each type of beetle remaining in the population and presents you with a button to proceed to the next generation. That generation slide is chosen based on how many beetles of each type were left (the value of "p", if you are familiar with population genetics). I still need to test it more thoroughly to make sure there are no bugs (ha) and to add the introductory information, assumptions, and directions. But the hardest part is now done. There are over 500 triggers per slide! Luckily, once the first slide worked, I was able to duplicate it and then just change a few triggers for each new slide. Anyway, thanks much for the inspiration and suggestions!
8 Replies
Hello Eva,
I was thinking that you could have a bunch of beetle pictures and setting their default state to hidden.
In my example, I have 8 beetles. There is a Random number variable that chooses between 1 - 8.
There are triggers on timeline start that changes the appropriate beetle state to normal depending on the number variable.
Hi Russell,
Thanks! Though, what I want to do involves at least 20 beetles onscreen all at the same time, half one color (green) and half another color (brown) against a background (say green) that is camouflage for one beetle color. Based on how many of each color beetle the student finds, the next generation of beetles will have some proportion of each color and those offspring beetles need to be randomly distributed on the slide so the students can't just look in the same spots each time. They will hunt beetles for 4 generations and calculate the allele frequencies of the colors in the population at the end. We have an old version (that has 40 beetles) of this activity that was written in 1997 and runs in shockwave. We can't update the program to run in newer versions of shockwave because we don't have the original code and none of us really know how to program. I have figured out enough of Storyline to do some pretty fancy things and know how to use Javascript to generate random numbers, just not how to get it designate a random position on the screen.
I think you are selling yourself short. From the way you describe your abilities, this should be a simple exercise for you. Simple; not easy. All that is holding you back is the ability and willingness to invest a lot of time, certainly not ability.
Remember, this is a visual medium, so nothing has to do what you want. It only has to look like it is doing what you want.
If you can produce one green beetle, and one brown beetle, you can produce 100 of each.
Like Russell says, scatter 100 green beetles (or how ever many it takes to fill the screen) around the screen and set their initial state to hidden. Go into js, and pick 40 random numbers between 1 and 100, and set the corresponding variables true. Pass them to SL, and run through the triggers: Change state of GB001 to Normal on condition variable G001 == true, etc. Repeat for BB. Check how many beetles are found, do the math for the next generation's ratio, and repeat.
Simple, just VERY time-consuming. The only hard part is the js programming, and you can do that already.
Oooooo, now I see what you mean. Time consuming indeed (that's a lot of triggers!), but I'll give it a try. Thanks!
Should be very effective once you get it done.
I would probably create 20-30 slides that have the beetles randomly on them.
The slides would be placed inside of a question bank. This way you could randomly draw 4 slides from the bank (1 slide for each generation).
Whew! It took a long time (mostly getting the math to work the way I wanted), but I finally have a draft version (link below). There are 10 slides for each color background. Each slide has 50 green and 50 brown beetles. The different numbers of each color beetle are selected from the array using Javascript similar to one I found in another discussion (that I haven't been able to find again). As beetles are "captured" by clicking on them, calculations are going on invisibly so that when you finally have 20 total, it shows the number of each type of beetle remaining in the population and presents you with a button to proceed to the next generation. That generation slide is chosen based on how many beetles of each type were left (the value of "p", if you are familiar with population genetics). I still need to test it more thoroughly to make sure there are no bugs (ha) and to add the introductory information, assumptions, and directions. But the hardest part is now done. There are over 500 triggers per slide! Luckily, once the first slide worked, I was able to duplicate it and then just change a few triggers for each new slide. Anyway, thanks much for the inspiration and suggestions!
http://public.biol.ksu.edu/beetles/story_html5.html
Very slick. That turned out nicely.
This discussion is closed. You can start a new discussion or contact Articulate Support.