1 Reply Latest reply on Aug 15, 2013 5:50 AM by YOSHIOKA Ume

    Conditional Statements and the Timeline

    szuro Level 1

      I created an interactive pizza in which someone can choose up to three different toppings. The toppings are Green Pepper, Black Olive, Onion, Pepperoni, and Tomato. A person can drag a topping and drop it onto the pizza. The timeline of my Edge animation then positions itself to where the appropriate graphic is showing the pizza with the particular topping(s). I cannot seem to get the conditional statement to respond. For example, if a person drags a green pepper onto a plain pizza, the timeline should position itself to a green pepper pizza (G). If the pizza already has black olive on it, then if someone drags a green pepper onto the pizza, the timeline should position to a green pepper and black olive pizza (GL); etc. Here is my code; can someone help. Thanks.

       

      sym.$('Pepper').draggable( { revert: 'invalid', zIndex: 100} );

      sym.$('dropPepper').droppable( { accept: sym.$('Pepper'), drop: function() {

      sym.$('Pepper').hide();

      if(playPosition = 'Plain') {

      sym.stop('G'); }

      else if(playPosition = 'L') {

      sym.stop('GL'); }

      else if(playPosition = 'O') {

      sym.play('GO'); }

      else if(playPosition = 'P') {

      sym.play('GP'); }

      else if(playPosition = 'T') {

      sym.play('GT'); }

      }

      });

       

      sym.$('Olive').draggable({revert: 'invalid', zIndex: 100});

      sym.$('dropOlive').droppable( { accept: sym.$('Olive'), drop: function() {

      sym.$('Olive').hide();

      if(playPosition = 'Plain') {

      sym.stop('L'); }

      else if(playPosition = 'G') {

      sym.stop('GL'); }

      else if(playPosition = 'O') {

      sym.play('LO'); }

      else if(playPosition = 'P') {

      sym.play('LP'); }

      else if(playPosition = 'T') {

      sym.play('LT'); }

      }

      });

       

      sym.$('Onion').draggable({revert: 'invalid', zIndex: 100});

      sym.$('dropOnion').droppable( { accept: sym.$('Onion'), drop: function() {

      sym.$('Onion').hide();

      if(playPosition = 'Plain') {

      sym.stop('O'); }

      else if(playPosition = 'G') {

      sym.stop('GO'); }

      else if(playPosition = 'L') {

      sym.play('LO'); }

      else if(playPosition = 'P') {

      sym.play('OP'); }

      else if(playPosition = 'T') {

      sym.play('OT'); }

      }

      });

       

      sym.$('Pepperoni').draggable({revert: 'invalid', zIndex: 100});

      sym.$('dropRoni').droppable( { accept: sym.$('Pepperoni'), drop: function() {

      sym.$('Pepperoni').hide();

      if(playPosition = 'Plain') {

      sym.stop('P'); }

      else if(playPosition = 'G') {

      sym.stop('GP'); }

      else if(playPosition = 'L') {

      sym.play('LP'); }

      else if(playPosition = 'O') {

      sym.play('OP'); }

      else if(playPosition = 'T') {

      sym.play('PT'); }

      }

      });

       

      sym.$('Tomato').draggable({revert: 'invalid', zIndex: 100});

      sym.$('dropTomato').droppable( { accept: sym.$('Tomato'), drop: function() {

      sym.$('Tomato').hide();

      if(playPosition = 'Plain') {

      sym.stop('T'); }

      else if(playPosition = 'G') {

      sym.stop('GT'); }

      else if(playPosition = 'L') {

      sym.play('LT'); }

      else if(playPosition = 'O') {

      sym.play('OT'); }

      else if(playPosition = 'P') {

      sym.play('PT'); }

      }

      });

        • 1. Re: Conditional Statements and the Timeline
          YOSHIOKA Ume Level 3

          Hi, szuro.

          I teied. using "bit flag".

           

          pizza.png

          /*create topping info 
           *id:   topping id, use bit flag for unique value
           *label:label string */
          var tpInfo = {
            Pepper:   {id:1<<0,label:"G"},
            Olive:    {id:1<<1,label:"L"},
            Onion:    {id:1<<2,label:"O"},
            Pepperoni:{id:1<<3,label:"P"},
            Tomato:   {id:1<<4,label:"T"}
          }
          var currentTopping = 0;
          
          //load jQuery-ui from CDN & init
          yepnope({
           nope:"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js",
           complete:init
          });
          
          function init(){
            //add topping id to topping elems & draggable.
            $.each(tpInfo,function(key, value){
              sym.$(key)
                .data("toppingID",value.id)
                .draggable({revert: 'invalid'});
            });
            sym.$("Pizza").droppable({
              drop:function(evt, ui){
                ui.draggable.draggable({revert:false});
                //updata currentTopping(use | operator)
                currentTopping |= ui.draggable.data("toppingID");
                //check currentTopping (use & operator)
                var str = "";
                $.each(tpInfo,function(key, value){
                  str+=((currentTopping&value.id)>0)?value.label:"";
                });
                //get label string
                console.log(str);
                //play symbol
                sym.$("Pizza").play(str);
              }
            });
          }
          

           

          BTW, I think the most important point about this is "pepper and tomato is the best".

           

          HTH.

          Ume.

          1 person found this helpful