Skip to main content
K
kristam26572151
Participating Frequently
March 28, 2018
Question

Moving objects using JavaScript

  • March 28, 2018
  • 5 replies
  • 4826 views

Hey guys. I am using Adobe Captivate 10 and I am having the following problem.

I want to create an interactive game for youngsters how to learn to use the Internet in a safe way.  My idea is to create a quiz and if a person answers correct (the answers are the buttons in blue) the girl which u see in the picture moves in the green part and if the answer is wrong  - to the red one and one of the shields disappears. The girl, net and shields are elements which duration is till the end of the project. When I am on slide 1 and and I give my answer the girl is moving in the right way, But when I continue on the second slide the pictures goes on position 0 - so the movement which was made the previous slide stays only in the first slide and has no effect for the second one. Which is my problem cause I want it to be on the position where it was moved after giving the answer on the first slide. I had the idea to put a code on the slide (like to launch it on enter of slide) which needs to check if the previous slide the person gave a correct or wrong answers. I put on slide 1  for the buttons - reporting and contain a quiz and gave points. In the code i am trying to use the default variable for quiz result in order to find out what kind of answer the person gave. For all these movements I am using this codes:

- moving the picture of the girl -

var obj = document.getElementById( "Image_246c");

obj.style.left = 40 + 'px';

- what kind of answer was given:

document.getElementById("Image_203c").style.visibility="hidden";

//var posX;

//var posY;

var obj = document.getElementById( "Image_249c");

if (cpQuizInfoPointsPerQuestionSlide==1) {

obj.style.left = -29 + 'px';

//obj.style.top=-33 + 'px'

}

//else {

// obj.style.left = 40 + 'px';

//}

But it doesn't work. Can u give me advices why it is not working, which variable should be used and if u have any suggestions how I can implement what i want to.

This topic has been closed for replies.

5 replies

K
kristam26572151Author
Participating Frequently
April 11, 2018

Yes, you are right. I am putting "c" all the time. Do you have any idea how I can access the quiz variables which are integrated in Captivate database? I mean the one the quiz which is for reporting (from the program itself).

Lilybiri
Lilybiri
Legend
April 11, 2018

List of quizzing system variables in this blog post:

Using Quizzing System Variables - Captivate blog

K
kristam26572151Author
Participating Frequently
April 4, 2018

Do you guys think the problem may be coming from the fact that the element is in fluid box and the duration of it is till the end of the project. So physically the element the element is not presented on slide 2. Are the object in project global variables?

Lilybiri
Lilybiri
Legend
April 4, 2018

I will not answer about JS, but AFAIK it is NOT possible to have an object timed for the rest of the project in a normal fluid box.

eLearning_Pundits
eLearning_Pundits
Participating Frequently
March 28, 2018

Applying the JS must be repositioning the objects. Have you tried applying effects instead. It's a quick and efficient way to move objects.

Lilybiri
Lilybiri
Legend
March 28, 2018

Having exact movements with motion effects is not easy at all, even when you are using guides and rulers. You could edit the xml-files to make it more precise. However it is not as quick as you think, when needing a lot of movements, because you have to create a lot of custom effects to be applied with actions which takes a lot of time. I use effects all the time, and you'll find several posts about them on  my blog, but there are limitations. And the interactive game which is the subject here, would be better suited with a JS workflow. Have a look at this movie with a game. I was very careful designing the complicated motion path and syncrhonizeing it with the timeline movement and pauses. Nevertheless it is not at all perfect concerning the movements:

Game

    J
    juan diegov33739285
    Participant
    September 9, 2022

    Hey Lieve, do you have anywhere in your blog detailed how to program a game like that one you created?

    The movements are set throught JS? 

    Jeremy Shimmerman
    Jeremy Shimmerman
    Participating Frequently
    March 28, 2018

    I'm not 100% sure the functionality you want.  

    Here's the I approach I use with animation in JS, variables, and having the object remain where you want.

    1. Create two variables 'sPos' (starting position) and 'ePos' (ending position). Give each a value of 0

    2. Execute this script when you want the object to move. 

    sPos = ePos

     

     

     

    ePos = ePos + 16;

     

     objectc.animate([

     

     

      {    transform: "translateY("+ (sPos)+ "px) ",   },

     

     

      {    transform: "translateY("+ (ePos)+ "px) ",     }

     

     

    ], {fill: 'forwards', duration: 1000});

    This will have the object only move on the Y axis, but you can have it move diagonally with something like:

      {    transform: "translateY("+ (sPos)+ "px) ",   },

      {    transform: "translateX("+ (sPos)+ "px) ",   },

    sabre123
    sabre123
    Participating Frequently
    March 28, 2018

    There's a lot to take in here.

    You may want to try and save the actual x and y offsets after the object moves on slide 1. On slide 2, you shouldn't need to check the value of the previous answer. What you need to do on slide 2 is run JS on slide enter and set the object's position (top and left) to that of the saved values.

    This is untested:

    // function to get x and y offsets

    function getOffset(el) {

        return {

        left: el.offsetLeft,

        top: el.offsetTop

      }

    }

    On slide 1, after you've moved the objects, save position:

    var posX = getOffset(yourObj).left;

    var posY = getOffset(yourObj).top;

    // Slide 2

    yourObj.style.left = posX;

    yourObj.style.top = posY;

    K
    kristam26572151Author
    Participating Frequently
    April 4, 2018

    Thank you very much for your suggestion. The problem is there that if a put JS on enter slide for moving the object it is not moving at all. I tired only putting a code for moving the object but it is not working. I tried your suggestion but unfortunately i didn't achieve functionality.

    Jeremy Shimmerman
    Jeremy Shimmerman
    Participating Frequently
    April 4, 2018

    Remember that you need to add a 'c' in your javascript to the end of the object's ID. Otherwise you are not moving the canvas object.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices