Show a DIV image with a javascript trigger.

Hi David, we're going to need a bit more detail on this one. You are using Storyline right? And in Storyline you want to show/hide and image? If so this is done using triggers.

The HTML posted doesn't make a great deal of sense without any context.

Hello,

Yes I am using storyline. Basically, I am trying to embed a coding environment "workspace"  into my storyline. This is done with some Javascript that passes along an API key and produces the workspace and then I would show the workspace with a DIV. (That's how I am doing it with HTML).

Simply embedding the .html won't work, since the code needs to be generated based on the user, and not hard coded like it would be embedded.

I posted that HTML as an example since posting more of my code proved to be less than helpful.

 

:) ok, this is a bit more of a complex issue. Yep, we're going to need plenty of information for this one.

How are you currently embedding this in Storyline? Are you using a WebObject? What are the variable parts of the code? For example, you say that it can't be hardcoded and so what user data do you need and where are you looking to get this user data from, an LMS or user input in Storyline?

If not already using a WebObect, I would recommend looking into it. It allows you to load content into and iframe. This can be a remote URL, or can be a local file.

I appreciate the help!

I'm going to post the code below:

We are looking to use an interactive coding environment (https://docs.sphere-engine.com/) and create kind of a "data camp" feel where on one part of the screen there's the coding environment, and the other half is some text or instructions.

It get's tricky. In the code I need to pass through a persons API key to load their own individual workspace. Right now I have it in there as a local WebObject file, which loads the web object, but its hard coded. Unless there is a way for it to take in some sort of arguments, I don't see this as an end solution...

A remote URL could potentially work. I wanted to avoid that due to the clients that we will have. There's a decent chance our clients will need everything in one place due to security concerns. (I can double check that though).

Which led me to my current idea. Have a trigger that loads the interactive coding environment/web object in javascript, so that we don't need to do any sort of outside calls other than the API call to sphere-engine. Sadly I don't have a ton of Javascript experience so I don't know the best way for it to load. Could I create an object in storyline and then replace it with the web object? Maybe?

I'm really appreciative of any help!

CODE BELOW: NOT SURE IF IT HELPS

<script>

// this part of the function opens the workspace

(function(d, s, id){
SE_BASE = "38071bda.containers.sphere-engine.com";
SE_HTTPS = true;
SE = window.SE || (window.SE = []);
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = (SE_HTTPS ? "https" : "http") + "://" + SE_BASE + "/static/sdk/sdk.min.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, "script", "sphere-engine-jssdk"));
SE.ready = function(f){if (document.readyState != "loading" && document.readyState != "interactive") f();else window.addEventListener("load", f);};
</script>

// This part loads it.

<div data-id="example-workspace" data-workspace="workspace"></div>
<script>
SE.ready(function() {
var workspace = SE.workspace("example-workspace");
console.log('test_function')
});

 

</script>

 

Hi David, it might be helpful to know that it is easy enough to take variable values from the Storyline file and so you would be able to get the user to enter their key. For example, defining a variable api_key in Storyline, you would be able to use JavaScript to retrieve this using the following script:

var player = GetPlayer();
const apikey = player.GetVar('apl_key');

Be concious if you scripting is via a webobject, you will need to reference the parent to get the player.

var player = parent.GetPlayer();
const apikey = player.GetVar('apl_key');

So, the WebObject you import, the first task can be to get the api_key from the Storyline file, and then use the key in any further scripting that takes place to integrate the coding environment.

A theoretical process:

1. User loads Storyline file. 
2. Storyline variable "api_key" is blank, load input box asking user to enter api_key
3. User enters key, clicks submit
4. Key is valid (not sure if you have a way of checking?)
5. Load WebObject
6. WebObject retrieves api_key from Storyline.
7. WebObject then executes script to load coding space (with the provided api_key).

I know this might not match your requirement, but will hopefully give you enough to work with to create your solution.