Message Boards Message Boards

Back

Web object communicating with lesson content

Toggle
Hello, 
I have just recently got introduced to SmartBuilder and I am very optimistic about the potential use of SB in my Instructional Design content.
What I am trying to do is to embed interactive content, written in Adobe Animate, into a SmartBuilder lesson. Animate uses JavaScript to add interactivity to the content through the CreateJs framework.
Obviously, the output of Animate should be added to the lesson using a Web Object.
My question(s) :
1- is there a way to enable the content embedded in an iframe (web object) to interact with the other content of the lesson (added throug SmartBuilder interface) ?
2- If yes, What should my JavaScript (in the iframe) call in order to communicate with the lesson? for example, say I want the lesson to progress to the next page based on certain condition occuring within the iframe content, how am I supposed to do that?
3- What if I want to control the iframe content from withing the lesson through actions, how do I go about doing that? How do I reference the innerHtml of the DOM elements in the Web Object through the Actions blocks?
4-Is there a way to access the code (presumably JavaScript) generated by the blocks of the Actions panel after the export of the lesson to enable further interactions and is there a guide on the relevant APIs? 

Thank you for your time and support.
0 (0 Votes)

RE: Web object communicating with lesson content
Answer
10/4/22 9:40 PM as a reply to Walid Sinno.
Hi Walid,
Excellent questions! Yes to most of them. Here's a video that covers all the information below - https://share.smartbuilder.com/public/support/web-object-communication-and-external-javascript-sb4config.mp4

Obviously, the output of Animate should be added to the lesson using a Web Object.
Correct.

1- is there a way to enable the content embedded in an iframe (web object) to interact with the other content of the lesson (added throug SmartBuilder interface) ?
Yes.

2- If yes, What should my JavaScript (in the iframe) call in order to communicate with the lesson? for example, say I want the lesson to progress to the next page based on certain condition occuring within the iframe content, how am I supposed to do that?
For communication from the Web Object to SmartBuilder, you can either catch events initiated by the content (see webobject1.png), or send data into to the Web Object and wait for a response (see webobject2.png).

3- What if I want to control the iframe content from withing the lesson through actions, how do I go about doing that? How do I reference the innerHtml of the DOM elements in the Web Object through the Actions blocks?
To send data into the Web Object for its own internal consumption, you can use "set data" (see webobject3.png). From there, you can create whatever code you need to control your content. I don't believe you can control the content from SmartBuilder, the content would need to be set up to receive a call and know what to do with it.

You have a couple choices on how you get this code into your lesson - since you're communicating with an external thing, not standalone code, you probably would NOT use the Embed Code for your use case (see webobject4.png). Source files - https://share.smartbuilder.com/public/support/webobject-iframe-testing2.zip

4-Is there a way to access the code (presumably JavaScript) generated by the blocks of the Actions panel after the export of the lesson to enable further interactions and is there a guide on the relevant APIs?
You cannot modify the SmartBuilder actions directly post-production. You can attach CSS to override the built in CSS, and attach your own custom JavaScript functions that you can communicate with, however. You would use these blocks to communicate with your custom JavaScript (see registeredfunction.png). To bundle the custom CSS and JavaScript, see the video above for how to do that. Source package here - https://share.smartbuilder.com/public/support/sb4config-demo.zip

Hope that helps! Let us know if you have any questions about the SmartBuilder side of things.

- Nav
0 (0 Votes)