You can create a link that directly loads a certain experiment or directly loads a specific experiment configuration.

Please follow the instructions under Build Instructions to find out how you can get a WebGL build of Maroon. Once you have a build, upload it to your server. Maroon also has a few features that can help you integrate it into your website. Alternatively you can also use some (not all though) of the features with our web build hosted at https://maroon.tugraz.at/build/web/.

The following table provides an overview of which features are available and their requirements.

⚠️ Please note that the loading of experiment configurations is not supported for all experiments:

Linking to a specific experiment will automatically start the experiment once Maroon has loaded. For example, this link automatically loads the Faraday's Law experiment.

To load a specific experiment, simply append the following text to the URL where Maroon is hosted:

?loadScene=ExperimentName

For example, if Maroon is hosted on https://maroon.tugraz.at/build/web/, and you want to load the Pendulum experiment, the URL becomes https://maroon.tugraz.at/build/web/?loadScene=Pendulum.

Some experiments support loading a certain configuration for them from a source outside of the Maroon instance. The configurations are stored as a JSON string. Once you assembled a valid JSON string, you can then pass it to Maroon either via a file that lies on your web server, via Javascript, or via the URL fragment.

⚠️ Please note that config loading support for an experiment via one method does not automatically imply the config loading support via other methods.

The following table shows which experiments support loading their configuration with different methods.

An experiment configuration can be loaded by putting a file on your server where Maroon is hosted. When passing the desired config file as a URL Parameter, the server will then load the desired preset. Loading one of the default presets can also be done with our Maroon web build, e.g. https://maroon.tugraz.at/build/web/?loadScene=3DMotionSimulation&config=BallInTheWind. For custom presets, you need to create a JSON file on your server (see below).

Supported Experiments:

• 3D Motion Simulation

To load an experiment config, the JSON config needs to be present as a file on your server. The configs are located at <Maroon Location>\StreamingAssets\Config\<Experiment>, e.g. <Maroon Location>\StreamingAssets\Config\3DMotionSimulation. The filename (without the .json extension) will be the name of the config in-game. Please refer to the Experiment Config JSON documentation to find out how to create a valid experiment config JSON.

To load the experiment config, you need to link to the experiment scene as described above, and then append to the URL

&config=configName

⚠️ Do not confuse &config with #config! For example, if Maroon is hosted on https://maroon.tugraz.at/build/web/, to load the 3DMotionSimulation configuration RocketLaunch, the url would be https://maroon.tugraz.at/build/web/?loadScene=3DMotionSimulation&config=RocketLaunch. :information_source: Note that custom experiment configurations will also be selectable from the parameter preset dropdown in the experiment.

An experiment config can be loaded dynamically by Maroon when the website that embeds Maroon sends a JSON string via Javascript to the Maroon instance.

Supported Experiments:

• Optics

In order to send the JSON config to Maroon via Javascript, you need to have the unityInstance (ensure it is not null, especially when calling this when loading the website), and then call its SendMessage, with the parameters "WebGL Receiver", "GetDataFromJavaScript", <data>. The code might look something like the following example:

	function sendConfig(config) {
		try {
			// Send configuration to Maroon.
			sendDataToUnity(config);
		} catch (e) {
			alert('Check the syntax of the input. ' + e);
		}
	}
	
	async function sendDataToUnity(data){
		console.log("Send Data to Unity");
		
		if (!unityInstance)
		{
			console.log("UnityInstance is null, waiting...");
		}
		await waitForNonNullUnityInstance();
		
		unityInstance.SendMessage("WebGL Receiver", "GetDataFromJavaScript", data);
	}
	
	async function waitForNonNullUnityInstance() {
	  return new Promise(resolve => {
		const checkInterval = setInterval(() => {
		  if (unityInstance !== null) {
			clearInterval(checkInterval);
			resolve(unityInstance); // Resolves once unityInstance is no longer null
		  }
		}, 100); // Check every 100ms
	  });
	}

Similar to the loading of experiment configurations via Javascript, a config can also be loaded via a JSON string passed in the URL fragment (i.e. the part of an URL after the #). To be more specific, the default HTML template of a Maroon build actually has Javascript code built-in that parses the URL fragment and then sends the JSON from the URL fragment to Maroon, as described above. Loading experiment configurations via a URL fragment also works with with our WebGL build of Maroon.

Supported Experiments:

• Optics

To create such an experiment config fragment URL, you have link to the desired experiment scene as described above, and then append to the end of the URL:

#config=<properly escaped JSON config>

⚠️ Do not confuse #config with &config!

So the full URL might look something like https://maroon.tugraz.at/build/web/?loadScene=Optics#config=<replace with config JSON string>.

⚠️ Beware that the JSON config string needs to be properly escaped! Browsers assume a + is a (space), thus you need to replace any actual + with %2B so that it works with browsers.

Naturally, as an experiment config might become quite long, the resulting URL can also be quite long. An example for a valid experiment config in the URL fragment is this link.