Linking to random scenes using Javascript

Hello,

I previously received help making a button that links to a set of random external links. I ended up with some code which works great.

I now need to make a button that performs the same function but doesn’t link to external links but links to scenes within the hype document.

I have read Daniel’s helpful post on linking to specific scenes, but I just can’t get it to work. I must be really close, but I’ve tried a bunch of options and variations and I can’t get it to work.

This is the javascript I have been working on using the previous code:

var links = new Array();
links[0] = "hypeDocument.showSceneNamed('scene1',hypeDocument);"
links[1] = "hypeDocument.showSceneNamed('scene2',hypeDocument);"
links[2] = "hypeDocument.showSceneNamed('scene3',hypeDocument);"


function untitledFunction() {
  // Chooses a random link:
  var i = Math.floor(Math.random() * links.length);
  // Directs the browser to the chosen target:
  parent.location = links[i];
  return false;

}    
  untitledFunction();    

I have also attached a link to a document I have been working on if it helps.

randomscene.zip (29.9 KB)

Hi,

The real problem is you are not understanding the code.
In the code you had, you were trying to have the button's parent set it's location to an URL. But what you put in was a Hype Javascript command to change scenes. Not an URL.

What you should be doing is just put the scene names in the array and randomly use the Hype Javascript in the correct way to change the scene.

   var links = ["scene1","scene2","scene3"];


    function untitledFunction() {
      // Chooses a random link:
      var i = Math.floor(Math.random() * links.length);
      // Directs the browser to the chosen target:
      hypeDocument.showSceneNamed(links[i], hypeDocument.kSceneTransitionCrossfade, 1.1);
      return false;

    }	
      untitledFunction();	

I also suggest you have a look at this learning resource.. :smile:

3 Likes

Thank you Mark!

I’m learning a lot about how to read what some code does logically, but I (very) often get confused.

Thanks again for your help :smiley:

1 Like

Thank you so much!!
but, if i want to make that stop repeating the previous loaded scenes?

please help me!!

To have never visit the scene again, you’d want to remove the scene name from the list of scenes to potentially visit. The javascript code for a mouse click action would look like:

	// create an array search function if it doesn't exist (for old versions of IE)
	var myIndexOf = (function (haystack, needle) {
		if(haystack.indexOf) {
			return haystack.indexOf(needle);
		} else {
			for(var i = 0; i < haystack.length; i++) {
				if(haystack[i] == needle) {
					return i;
				}
			}
		}
		return -1;
	});
	
	// setup the scenes the first time this is called
	if(window.remainingSceneNames == null) {
		// two options:
		// #1: use all the scenes automatically
		window.remainingSceneNames = hypeDocument.sceneNames();
		
		// #2: use specific names of scenes (uncomment and name scenes to use)
		//window.remainingSceneNames = ["Scene3", "Scene4", "Scene5"];
		
		// as a starting condition, remove the scene I am currently in
		var currentSceneIndex = myIndexOf(window.remainingSceneNames, hypeDocument.currentSceneName());
		if(currentSceneIndex != -1) {
			window.remainingSceneNames.splice(currentSceneIndex, 1);
		}
	}
	
	// test to see if there are any scenes to go to. If not, don't do anything
	if(window.remainingSceneNames.length <= 0) {
		return;
	}
	
	// choose a random scene
	var randomSceneIndex = Math.floor(Math.random() * window.remainingSceneNames.length);
	var randomSceneName = window.remainingSceneNames[randomSceneIndex];

	// go to that scene
	hypeDocument.showSceneNamed(randomSceneName);
	
	// remove it from the list of available scenes
	window.remainingSceneNames.splice(randomSceneIndex, 1);

Here’s the document showing it off:

ReducingRandomScene.hype.zip (56.7 KB)

Note that the button will still appear clickable. If you wanted a different behavior, you’d want to inspect the window.remainingSceneNames variable and change the button based on that. You might add an On Scene Load javascript that would do something like:

	if(window.remainingSceneNames != null && window.remainingSceneNames.length == 0) {
		var randomSceneButtonElement = document.getElementsByClassName("randomSceneButton")[0];
		hypeDocument.setElementProperty(randomSceneButtonElement, "opacity", .5);
	}

(this relies on your buttons having the class name of randomSceneButton, added in the element inspector)

Hope that helps!

3 Likes

Hello,

I have assign the random function to my project but there are some problems. I attach a sample to figure out what I 'm saying. I used the second option with specific names of scenes.

The first time I hit each game button everything works fine. If I wish to replay the same game or change to the other one, there is a problem. It loads the first scene of the game and then it redirect to the start page. In my project (not in the sample that I attach), after the first game that works fine, it also mixes the scenes of each game among them. Is there a way to fix it?

multiple games random scenes.hype.zip (58.7 KB)

I think what you’d want is a way to reset on the “start” scene, so that it can have the whole pool of scenes to choose from. The easiest way to do this would be an On Scene Load action for this scene that runs javascript:

window.remainingSceneNames = null;

This probably would clear up both issues… with your current flow you should note that you are reusing some of the same variables for the game 1 and game 2 flows, specifically this window.remainingSceneNames variable. If you hit other problems I would first try changing all instances of it in the game1randomScenes and game2randomScenes functions to be something unique, like window.remainingSceneNamesForGame1. (You’d also need to set these new ones to null in the above mentioned On Scene Load handler for the start scene).

Hi Jonathan,

Thanks a lot for your help.
The first line of Javascript corrected the problem.
I realised from your sayings that it is better not to use the same variables in every game, so I 've also followed your suggestion to have unique variables for each one and set them to null at the start scene. Everything still works fine.

Thanks again for your help!

1 Like

Glad you got it going with that!

Another benefit of this script is being able to use it for randomization of ads if they’re brought in via html widget in say up to 10 ads. @Daniel, I’d imagine this would apply to scenes as well? If so, how different would the code look if it was with scenes rather than timelines?

Linking to random scenes using Javascript and Random scenes, prevent doubles demonstrates that (you create an array of scenes and pick from that)

Cool, Im guessing this is it?

   var links = ["scene1","scene2","scene3"];


    function untitledFunction() {
      // Chooses a random link:
      var i = Math.floor(Math.random() * links.length);
      // Directs the browser to the chosen target:
      hypeDocument.showSceneNamed(links[i], hypeDocument.kSceneTransitionCrossfade, 1.1);
      return false;

    }	
      untitledFunction();

Yup looks good!