Demo: Detective Security Leaks within 360 panorama

Dec 20, 2021

I used to love using 2D office layouts for creating learning activities for different course topics. Learners can explore the virtual office and learn to deal with whatever might actually happened in real world and that always leads to a good learning performance. So when Storyline add the 360 image function, I think I should transform the virtual office from 2D to 360 panorama and see how it works.

Below are the functions I want to test in the new 360 image:

  • Zoom in/out function: I got this worked, however the tooltip won't show while the 360 image is zoomed in, I hope Articulate team will fix this. I think I don't actually need zoom function in this demo but I can see in different applications will need it.
  • Jump between different 360 images: I am satisfied with this, they can be in different slides or different layers.
  • A message(layer) shows properly no matter it is zoomed or not: it won't be a problem if no zoom function here. But since I use zoom function, and a layer will also be zoomed when opening. It took me a little time to figure out how to zoom out first when a layer opens so it will show the correct size I want.
  • The shown message(layer) hides automatically(without clicking close) when user keep exploring: it also works as expect in a 360 image environment.  

One thing I found weird is if I click on any non interactive area of the 360 image, the hotspots I've interacted with will also show at the same time. I assume that's a bug for beta version.

Demo

31 Replies
Sarah Hodge

This is awesome, Joanne! I love the badges at the top to let me know how many I have left to find. And the topic is so perfect for 360° images. Thanks so much for sharing this example with the community! 

The hotspot behavior is expected. You can learn more about that here. I love the ideas you shared to help us improve the 360° learning experience. Would you mind submitting a feature request

Joanne Chen

Thank you Sarah for explaining the behavior of the hotspot,  I can see that behavior could help users aware of where they have interacted. I've updated the demo by adding hints because I found that it will be more difficult for users to find all the "correct" hotspots than in a 2D environment.
I've submitted a feature request for zoom function in 360 image. And I also like having states for 360 image so for example I could change the whiteboard to be cleaned after users click the related hotspot. And I've submitted that too.

Joanne Chen

At first, I used the zoom function built in SL with the jump to time triggers to create the zoom effect. Though I got that work it would also zoom layers too. So I had to add more triggers to fix it (described in the third point of the article). After I post, one day an idea came to me that since we can use JS to scale an image, maybe it could scale the panorama image too since it is a jpg file. And then I instead SL zoom function with JS code and it works perfectly.

The JS code I used is:

var myElement = document.querySelectorAll("[NAME OF THE PANORAMA IMAGE']");
gsap.to(myElement, {duration: 0.5,scale:2});

Ayse Sahin

Hello, in case some of you wants to have the steps to do it : 

You can zoom in and zoom out by executing 2 javascript here :

To zoom in :

var panoramaImg = document.querySelectorAll("canvas");
gsap.to(panoramaImg, { duration:1, scale:2 });

--> You can call the variable with any name
--> The queryselector must be All since it's the Canvas (when inspecting the module, you see that the image is "canvas")
--> Duration can be changed (1 is good for the zooming effect)
--> Scale can be changed too (2 is x2, don't do zoom too much if the quality is not high)


To zoom out :

var panoramaImg = document.querySelectorAll("canvas");
gsap.to(panoramaImg, { duration:1, scale:1 });

Like before but the scale is 1 (100% of the image)

Also, don't forget to execute the javascript with a trigger (here by clicking on the icon 1 to zoom in and on the icon 2 to zoom out)
Don't forget to change hide the icon 1 when icon 2 is normal, hide icon 2 when icon 1 is normal
Don't forget to hide the icon 1 when you click on it, hide icon 2 when you click on it

You can't do it by states (except if you have the solution, in this case, please share us !)

Mekesh Aietan

Hi everyone, 

I have tried adding a new post but haven't had any feedback or direction. 

I am trying to add a tracking of an interaction/knowledge check to the a 360 image. There is a link below to showcase more. 

https://360.articulate.com/review/content/adcecfb0-8fa4-411f-b55d-fad1eb7b8dd3/review

The specific part I am looking at is Part 2 of the course, where the question stays in the same place even when the users is moving around the screen. 


CAN ANYBODY HELP PLEASE? 

Thanks

Mekesh

Math Notermans

One thing to remember... querySelectorAll gets ALL elements of the type 'canvas' in your project. And so the variable is a HTMLCollection. If you only have one canvas element in your Storyline that will not be an issue...if you have more.. do use either querySelector to get a specific one...or just this coding to get a specific one out of a collection.

var panoramaImg = document.querySelector("canvas"); // if you have just one

var panoramaImages = document.querySelectorAll("canvas"); // if you have more
//then you can select any specific on the collection like this.
gsap.to(panoramaImages[1], {duration:1, scale:2 });

beyond led
walter simon

Hey, can anyone please confirm that has this affected Windows-based, Chrome products, as we no longer have the left-hand side edit buttons appear? We tried the same on Mac and it still works. Can you please advise? Please confirm anyone, I am looking around this for so long.

Can you please confirm if you have found any solution yet? I am facing the same error.

Amelia King

It's great to hear that you are exploring the use of 360 panorama images for creating engaging learning activities! It seems like you have already tested various functions and encountered a few issues. Let's address each of them:

  1. Zoom in/out function: You mentioned that the zoom function is working, but the tooltip doesn't show when the image is zoomed in. This could be a limitation or bug in the current version of the software you're using. It would be beneficial to report this issue to the Articulate team so they can be aware of it and consider fixing it in future updates.

  2. Jump between different 360 images: It's great to hear that you are satisfied with the ability to jump between different 360 images. This functionality allows for more immersive and interactive experiences within your learning activities.

  3. Message (layer) visibility while zoomed: You mentioned that when you open a layer while zoomed in, it takes some time to figure out how to zoom out first so that the layer displays at the correct size. It's important to ensure that the layer is set up to display at the desired size and position within the zoomed-in environment. Consider adjusting the layer properties or settings to achieve the desired outcome.

  4. Automatic hiding of shown messages (layers): You mentioned that the shown message (layer) hides automatically when users keep exploring, which is the expected behavior in a 360 image environment. This is great as it allows users to focus on exploring the virtual space without being interrupted by unnecessary overlays.

  5. Hotspots showing when clicking non-interactive areas: You observed that clicking on non-interactive areas of the 360 image causes the hotspots you've previously interacted with to show simultaneously. This does sound like a bug or unexpected behavior, especially if the hotspots are not intended to be visible in non-interactive areas. You may want to report this issue to the Articulate team so they can investigate and address it.

Overall, it seems like you have made good progress in testing the functions of the 360 panorama image within your learning activities. Remember to provide feedback and report any issues you encounter to the software provider, as this can contribute to improving the functionality and user experience for future versions.