converting function to JavaScript for use in HTML5 pub

Stephen · **Posted:** August 10th, 2016, 12:34 am

I've been trying to 'get my brain around' a challenging function conversion (from Opus Script to JavaScript) for use in an HTML5 pub (wait() can't be used in HTML5 pubs). Need to re-write the function (see Opus Script below) without wait(.2) and without wait(.5). Then could put these functions into an external JS file, link to it and try to call them from that external JS.

I've tried, for example, splitting it up to 2 functions (for example, displaybox1 and displaybox2, which maybe could be used with setTimeout). But the 'for' condition (for(i=1;i<=turn;i++)) would run twice, getting a different item each time?)

Can't figure it out and would appreciate any help. (The original Opus Professional pub has additional scripts needing conversion, but figuring out this one would be a good start on which to base solutions for the others.)

Here's the original Opus Script that I need to convert:

Code:

function displaybox(){

      for(i=1;i<=turn;i++)
         {
         
         if (randomset[i] == 1 ){box1.Show()}
         if (randomset[i] == 2 ){box2.Show()}
         if (randomset[i] == 3 ){box3.Show()}
         if (randomset[i] == 4 ){box4.Show()}
         if (randomset[i] == 5 ){box5.Show()}
         if (randomset[i] == 6 ){box6.Show()}
         if (randomset[i] == 7 ){box7.Show()}
         if (randomset[i] == 8 ){box8.Show()}

         wait(0.2)
         if (randomset[i] == 1 ){box1.Hide()}
         if (randomset[i] == 2 ){box2.Hide()}
         if (randomset[i] == 3 ){box3.Hide()}
         if (randomset[i] == 4 ){box4.Hide()}
         if (randomset[i] == 5 ){box5.Hide()}
         if (randomset[i] == 6 ){box6.Hide()}
         if (randomset[i] == 7 ){box7.Hide()}
         if (randomset[i] == 8 ){box8.Hide()}
         wait(.5)         
         showing++
         }   
}

mackavi · **Posted:** August 10th, 2016, 9:22 am

This is best built first in JavaScript and then adapted to work with Opus Pro HTML5

JavaScript Code:

Code:

/**
* @Author: Interaktiv
* @Date:   2016-08-10T07:49:10+01:00
* @Project: Pulsing
* @Last modified by:   Interaktiv
* @Last modified time: 2016-08-10T08:44:28+01:00
* @License: GPLv3
*/

showing = 0;
randomset = new Array(1,2,3,4,5,6,7,8);
randomsetShow(0,7);


function randomsetShow(loopCounter, loopLimit){
  if (randomset[loopCounter] == 1 ){console.log('box1.Show()')};
  if (randomset[loopCounter] == 2 ){console.log('box2.Show()')};
  if (randomset[loopCounter] == 3 ){console.log('box3.Show()')};
  if (randomset[loopCounter] == 4 ){console.log('box4.Show()')};
  if (randomset[loopCounter] == 5 ){console.log('box5.Show()')};
  if (randomset[loopCounter] == 6 ){console.log('box6.Show()')};
  if (randomset[loopCounter] == 7 ){console.log('box7.Show()')};
  if (randomset[loopCounter] == 8 ){console.log('box8.Show()')};
  setTimeout(function(){
    randomsetHide(loopCounter, loopLimit)
  }, 200);
}


function randomsetHide(loopCounter, loopLimit){
  if (randomset[loopCounter] == 1 ){console.log('box1.Hide()')};
  if (randomset[loopCounter] == 2 ){console.log('box2.Hide()')};
  if (randomset[loopCounter] == 3 ){console.log('box3.Hide()')};
  if (randomset[loopCounter] == 4 ){console.log('box4.Hide()')};
  if (randomset[loopCounter] == 5 ){console.log('box5.Hide()')};
  if (randomset[loopCounter] == 6 ){console.log('box6.Hide()')};
  if (randomset[loopCounter] == 7 ){console.log('box7.Hide()')};
  if (randomset[loopCounter] == 8 ){console.log('box8.Hide()')};
  setTimeout(function(){
    showing++
    loopCounter++
    if (loopCounter <= loopLimit) {
      randomsetShow(loopCounter, loopLimit);
    }
  }, 500)
}

When you apply this to Opus, you'll hit an export issue due to the SetTimeout using a function callback. Therefore, you'll need to keep this as a JavaScript set of functions and then adapt the JS code to access the aspects of Opus required.

For example, this would include the hiding and showing of boxes. Calling box1.Show() from internal or external JS will fail because it doesn't know where the box1 object is located. Therefore you'll need to tell this scripting, where to find certain things.

Below is an example of how to do this for the boxes. It's simplified by using the HTML5 object to hold the code, but it would be better to use an external JS file. The exact same principles will apply.

Download: http://www.live.interaktiv.co.uk/?secti ... evine.info

</mack>

Stephen · **Posted:** August 10th, 2016, 12:12 pm

Thank you, Mack.

Learned good ideas (especially on setTimeout-see below) on how to convert scripts.

Decided to break up the larger functions that have "wait()" in them, into smaller functions that can be run sequentially using setTimeout for anonymous functions (function() {}, milliseconds).

Problem is, while not breaking anymore, still doesn't run.

So, using FF firebug. Can see that variables from the original pub were not recognized in the new JS. If I try solving these (using _DWPub.) gets somewhat better (firebug variable errors gone), but still doesn't run as intended.

So, wading through the debugging, trying different variations on the JS. So far, no joy.

(This is a simple variation on the Simon-Says game, but for HTML5. Shouldn't be that difficult. :oops:

)

Best Wishes,

mackavi · **Posted:** August 11th, 2016, 7:14 pm

Are you passing the variable to or from the native JavaScript function?

</mack>

Stephen · **Posted:** August 11th, 2016, 7:35 pm

First tried using external JS, calling functions from Opus via JS object in a start button.

Then tried placing all of the JS inside Opus, in a JS object that runs on page show, again using a start button to call the functions from a JS object. Tried to make the variables match by using, for example, listamount = _DWPub.listamount. Played with a variety of combinations.

Same results: no joy.

While I wrote the external JS in Notepad/Dreamweaver, always possible my script is not correct, but Dreamweaver isn't showing any errors. So, my first thought is that the problem is in passing the function calls.

mackavi · **Posted:** August 11th, 2016, 8:47 pm

Have you watched this video?

https://www.youtube.com/watch?v=tEHrDlY ... 4ucrELVYhq

</mack>

Stephen · **Posted:** August 11th, 2016, 9:56 pm

Impressive video. Just watched it end to end. ("AhHa" moment: hadn't been able to figure out where console was. Kept trying windows CMD prompt to no avail. Finally changed console.log to alert to see returns in Windows message box. Now I know where the console.log displays: in firebug.)

One item I can try is to use is a regular script object and use prefix: window.
see if that helps. Great learning experience!

However, animations currently available as standard actions for HTML5 in latest Opus Pro (quite a robust offering) lead to a better solution for me. The animation exercise needed in my eLearning lesson is simply a visuospatial "warm-up" for another lesson. So, I can use currently available animation actions to craft this new warm-up exercise instead of struggling with trying to get an old game animation to work. Same result, much easier to achieve.

(BTW the old game animation's original script is from jezjones29 (for an Opus Professional pub) in an old IMP on this forum: download/file.php?id=1026)

Digital Workshop

converting function to JavaScript for use in HTML5 pub

Who is online