Forum Discussion

stokiczanka's avatar
stokiczanka
Community Member
8 days 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 inside the web object, perhaps by setting a variable using SetVar or something similar. Rise has that functionality, but I haven't seen anything similar for Storyline.

Thank you guys

5 Replies

    • Nathan_Hilliard's avatar
      Nathan_Hilliard
      Community Member
      6 days 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
        4 days 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?