Forum Discussion
Open layer in Storyline from Web object
Edit: Well, that last post was butchered...
Let's try again.
Here is an example project.
https://360.articulate.com/review/content/fcf12929-8cc7-403f-818f-235f72a2d7fb/review
Files are attached. All of the code is in the index.html file that is part of the web object. You would replace that with your own, but the concept of attaching the onclick (or similar) event handlers, locating the SL player object, and using it to set a SL variable remains the same. Inside Storyline, you just watch for the variable to change and then trigger layers as desired.
The index.html file contains the following, with the JavaScript event handlers at the end. Excuse the hacky HTML/CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<title>SL WO Variable X-fer</title>
<style>
body {background: lightgray}
p {
font-size:5vw;
font-weight: bolder;
color:white;
position: absolute;
top:30%;
left: 50%; /* Optional: for horizontal centering */
transform: translate(-50%, -50%); /* Centers the element precisely */
}
#Three p {color:black;}
#One {
position:absolute;
top:5%;
left:5%;
width:40%;
height:40%;
background-color:red;
}
#Two {
position:absolute;
top:5%;
left:50%;
width:40%;
height:40%;
background-color:blue;
}
#Three {
position:absolute;
top:55%;
left:5%;
width:40%;
height:40%;
background-color:yellow;
}
#Three {
position:absolute;
top:50%;
left:5%;
width:40%;
height:40%;
background-color:yellow;
}
#Four {
position:absolute;
top:50%;
left:50%;
width:40%;
height:40%;
background-color:green;
}
</style>
</head>
<body>
<div id="One"><p>One</p></div>
<div id="Two"><p>Two</p></div>
<div id="Three"><p>Three</p></div>
<div id="Four"><p>Four</p></div>
<script>
//attach onclick event handlers to the divs
document.getElementById("One").onclick = onClickHandler
document.getElementById("Two").onclick = onClickHandler
document.getElementById("Three").onclick = onClickHandler
document.getElementById("Four").onclick = onClickHandler
//handle all of the click events here
function onClickHandler(e) {
//check which div was clicked
let sourceId = e.srcElement.id
//get the SL player, if it is accessible
let slParent = findSLPlayer(window.parent)
//if player found, continue
if (slParent) {
//get the parent SL player
let player = slParent.GetPlayer()
//clear the last click value
player.setVar("woClickValue", -1)
//set a new value based on div clicked
switch (sourceId) {
case "One":
player.setVar("woClickValue", 1)
break
case "Two":
player.setVar("woClickValue", 2)
break
case "Three":
player.setVar("woClickValue", 3)
break
case "Four":
player.setVar("woClickValue", 4)
}
console.log("Clicked on:", sourceId, e)
}
else {
console.log("Cannot find Storyline player!")
}
}
//function to locate the SL player in a parent window
function findSLPlayer(win) {
if (typeof win.GetPlayer === 'function') {
return win
}
else if (win == win.parent) {
return null
}
else {
return findSLPlayer(win.parent)
}
}
</script>
</body>
</html>
Since zip attachments never seem to work, you can download it from here:
Thank you so much, Nathan, you are God-sent!
In case my variable is True/False, I would have to change it to something like this:
player.setVar("woClickValue", true)
Is the syntax correct?
Yes, as long as the Storyline variable is set as a T/F type instead of a number.
Note: If you want something to happen once when your DIV is clicked, then setting the variable to TRUE from FALSE will work with an On Variable Change trigger. If you want something to happen EACH time you click the DIV, then toggle your T/F variable instead.
// Assuming T/F, replace woClickValue with the opposite of whatever is currently in woClickVaue player.setVar("woClickValue", !player.getVar("woClickValue"))