Forum Discussion

stokiczanka's avatar
stokiczanka
Community Member
1 month ago

Open layer in Storyline from Web object

Hello guys 👋 I need your help. Is there any way I can open layers on a particular slide in Storyline where I've embedded a web object? I would like to open the layer(s) when I click a specific div...
Nathan_Hilliard's avatar
Nathan_Hilliard
Community Member
1 month ago

Please see my reply below...

  • Nathan_Hilliard's avatar
    Nathan_Hilliard
    Community Member
    1 month ago

    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:

    https://paedagogus.org/elh/woVariableXfer_1.0.zip

    • stokiczanka's avatar
      stokiczanka
      Community Member
      1 month ago

      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?

       

      • Nathan_Hilliard's avatar
        Nathan_Hilliard
        Community Member
        1 month ago

        Yes, as long as the Storyline variable is set as a T/F type instead of a number.