Play multiple timelines in order one at a time

Animation
#21

Below is not answering you question… but…

I assume you are trying to search in these objects:

hypeDocument.verb1 = {
 		pret: true, 
 		place: 1, 
 		pret_sentence: "el perro meneó la cola", 
 		imp_sentence: "el perro meneaba la cola"
};

First place them in a hypeDocument.customData global var. not on the hypeDocument as you are doing.

i.e

hypeDocument.customData.verb1 = {
pret: true,
place: 1,
pret_sentence: “el perro meneó la cola”,
imp_sentence: “el perro meneaba la cola”
};

You seem to be using a for loop to pick up the correct verb and using the loops index to get the number i.e verb1, verb2.

Not sure why you are using eval you should avoid this. ( or what you are doing )

You should be able to do for example:

hypeDocument.customData.greatest=0;
var dummy=0;
    for (i = 1; i < 6; i++) {
    	 var dummy2=  hypeDocument.customData['verb' + i ].pret
   
    	if (dummy2 == true) {
    		 
             dummy=  hypeDocument.customData['verb' + i ].place
    	 
    		if  (dummy > hypeDocument.customData.greatest) {
    		hypeDocument.customData.greatest=dummy;
    		
    		}
    	}

    }

If I get a min I will try and have a look it. But no promises…

1 Like
#22

Thanks no worries if you can’t take a look! I honestly used eval even though I saw it was a bad idea because I could wrap my head around its use given my level of programming understanding. I never really got around to objects or indexes in computer programming in high school or when I was programming with Actionscript back in the day.

#23

So eval.

In this case Evaluates the concatenated string construction into an executable command…

You generally really do not want this in your code.

Read this

And from whaI can see all you really want is to be able to convert a string and a var value into an object name.

We do this as I have shown using the square bracket. []

The JavaScript API will convert the concatenated string/var into an object’s name.

And it can be used as a direct reference to the object with that name.

1 Like
#24

So I’ve finally understood most of the coding you used but I just have one question. I want to splice the array you wrote so that it takes an element back out that the first if function puts in:

//-- if the order object does not already have the data attribute value of the button..
 			if(! Object.values(hypeDocument.customData.selectionOrder).includes(element.dataset.timeline)  ){

 				
 					//-- Set the value of the key using the data attribute for the button ( each button has a data attribute with the timeline name)  as the value and index numberas the key.. 
 					hypeDocument.customData.selectionOrder[hypeDocument.customData.selectionCounterIndex] = element.dataset.timeline;
 					
 					//only adds button key values on first press, ignores on 2+ attempts
 					var place_holder= hypeDocument.customData.selectionOrder[hypeDocument.customData.selectionCounterIndex] + hypeDocument.getElementById('order_text').innerHTML;
 					hypeDocument.getElementById('order_text').innerHTML = ' ';
 					hypeDocument.getElementById('order_text').innerHTML = place_holder;

 					//-- add 1 to the index number
 					hypeDocument.customData.selectionCounterIndex++;
 					alert(Object.values(hypeDocument.customData.selectionOrder));
 				
 			} else {
 				
 				// figure out what place in the index the data attribute value of the button is
 				var dummy = Object.values(hypeDocument.customData.selectionOrder).indexOf(element.dataset.timeline);
 				alert(dummy);
 				
 				Object.values(hypeDocument.customData.selectionOrder).splice(dummy, 1);

}

I tried to write the splice function just like the indexOf function but it’s not working… The alert(dummy) though does work in that it tells me what index place of whatever button attribute value I’m clicking on is at. Did I write the splice function wrong?

I apologize if I’m asking for too much help. I am trying to figure it out on my own.

#25

The idea is kind of right.

But we are not using an array [] we are using an associative array {}

An Array just has items and the item can only be accessed by the index number within the array.

An Associative array has keys and values

The value is normally accessed by using the key.
No Associative array can have two keys with the same name. (the key is the name)

Arrays can have more than one item with the same value.

Trying to keep things similar to what we had and simple ( we would have to change the values of every key just to remove one key/value so you got the correct order)

lets try and only use an Array.

selectOrder()

	//-- Lets init some stuff
			if (typeof hypeDocument.customData.selectionOrder == "undefined"){
			
			//-- index to use a object key
			hypeDocument.customData.selectionCounterIndex = 1
			//-- order object
				hypeDocument.customData.selectionOrder = []
 			}
 			
 			
 			if(hypeDocument.customData.selectionOrder.length == 3){
 			return
 			}
 			 
 			
 		//-- if the order object does not already have the data attribute value of the button..
 			if(! Object.values(hypeDocument.customData.selectionOrder).includes(element.dataset.timeline)  ){

 				
 					//-- Set the value of the key using the data attribute for the button ( each button has a data attribute with the timeline name)  as the value and index numberas the key.. 
 					hypeDocument.customData.selectionOrder.push( element.dataset.timeline);
 					
 					//only adds button key values on first press, ignores on 2+ attempts
 					
 					
 					hypeDocument.getElementById('order_text').innerHTML = hypeDocument.customData.selectionOrder.toString() 
 					 
 					 	 
 					 
 					//-- add 1 to the index number
 					hypeDocument.customData.selectionCounterIndex++;
 					
 				
 			} else {
 				
 				// figure out what place in the index the data attribute value of the button is
 				var dummy =  hypeDocument.customData.selectionOrder.indexOf(element.dataset.timeline )
 				console.log({"removed":element.dataset.timeline  ,  "at index": dummy }  );
 			 
 				 
 				
 				
 				 hypeDocument.customData.selectionOrder.splice(dummy, 1);
 				 
 				 hypeDocument.getElementById('order_text').innerHTML = hypeDocument.customData.selectionOrder.toString() 
 					
	}
	
	console.log( hypeDocument.customData.selectionOrder  );
	
	 
	
	if(hypeDocument.customData.selectionOrder.length == 3){
 			//console.log(hypeDocument.customData.selectionOrder)
 			
 			
 			//-- call the runINOrder function
 			hypeDocument.functions().runInOrder(hypeDocument, element, event)
 			
 			
 			}

runInOrder()

	//-- init a counter index
		if (typeof hypeDocument.customData.runOrder == "undefined"){
			hypeDocument.customData.runOrder = 0
		 
 			}
 			
 			//-- only run # times
 if  ( hypeDocument.customData.runOrder < 3 ){
	
	//-- get the selectionOrder item using the new index number as the key to look for.
	var thisOrderItem = hypeDocument.customData.selectionOrder[hypeDocument.customData.runOrder]
	
	////-- use the value to run the timeline
	 
	  
	  hypeDocument.startTimelineNamed(thisOrderItem, hypeDocument.kDirectionForward)
	  hypeDocument.customData.runOrder++
	
 }

reset()

	hypeDocument.customData.runOrder = 0
	 
 	hypeDocument.customData.selectionOrder = []
 
 hypeDocument.goToTimeInTimelineNamed(0, 'A')
  hypeDocument.goToTimeInTimelineNamed(0, 'B')
    hypeDocument.goToTimeInTimelineNamed(0, 'C')
    
     hypeDocument.getElementById('order_text').innerHTML = hypeDocument.customData.selectionOrder.toString()

runInOrderv2.hype.zip (20.9 KB)

3 Likes
#26

Thanks so much! I don’t think I would’ve figured that one out in a million years. I think now I can pretty much build my old file I had around this one, and with so much less coding. Much appreciated!

1 Like