Close
Search
logo
Sign In
Blogs
eLearning Resources
Interactive eLearning
Video-Based Learning
Mobile Learning
Accessibility
Virtual Reality
Adobe Learning Manager
Events and Announcements
Screen Capture
All Blogs
Free Projects
Adobe Captivate
Adobe Captivate Classic
Learning Hub
Adobe Captivate
Adobe Captivate Classic
Discussions
Tutorials
Adobe Captivate
Adobe Captivate Classic
Webinars
Notification
Join Community
logo
  • Blogs
    • eLearning Resources
    • Interactive eLearning
    • Video-Based Learning
    • Mobile Learning
    • Accessibility
    • Virtual Reality
    • Adobe Learning Manager
    • Events and Announcements
    • Screen Capture
    • All Blogs
  • Free Projects
    • Adobe Captivate
    • Adobe Captivate Classic
  • Learning Hub
    • Adobe Captivate
    • Adobe Captivate Classic
  • Discussions
  • Tutorials
    • Adobe Captivate
    • Adobe Captivate Classic
  • Webinars
Join Community
Sign In
Close
Search
  • Blogs
  • Blogs
  • Adobe Captivate
  • Response History With A Sorted Display
HIGHLIGHT
SHARE
  • HIGHLIGHTED
    SHARE
  • +1
    SHARE
  • Response History With A Sorted Display
    July 11, 2019
    Greg Stager Follow
    Response History With A Sorted Display
    July 11, 2019
    Greg Stager
    I am currently a provider of technical training and support in the electronic manufacturing industry. My prior training and work experience as a teacher, network administrator, web design, and instructional design make me well prepared to design it, develop it, and deliver it. I am a father of five, a US Army veteran, and I enjoy playing the guitar as well as performing in local community theater. 
    Legend 99 posts
    Followers: 157 people
    Follow
    Greg Stager Follow
    8
    8
  • Summary

    A strategy to populate a feedback or response history box.

    This post is born out of a discussion about the need to track several choices that a user makes and populate those choices into a single text box.
    You can read the discussion here.

    Concatenation to build (populate) history text box

    As with most of my solutions to things – this uses JavaScript try and accomplish what our friend is looking to do.
    Here is the working project.

    Play

    Let’s examine how I pulled it off.

    The Elements

    This project is made up of 22 variables

    1. Ten for the radio button selection toggles named  pick1 – pick10
    2. Ten for each of the item entries in the blue box named  item1 – item10
    3. One for the array named  histArray
    4. One for the purpose of storing the index value of the selected item named  sweep

    There are 10 radio buttons which are nothing more than a circle with no fill that has an additional state with a smaller circle inside that is filled. The states are labeled ‘Normal’ and ‘selected’. Each radio button is named c1 thru c10 (c for circle) for ease of typing.

    There are 10 SmartShape labels for each radio button to designate what that particular selection is.

    The single blue box has a number value at the front and each of the item variables after it. So line one is  ( 1.  $$item1$$ )  skip a couple lines  ( 2.  $$item2$$ )  etc.

    The ‘Clear All’ button has all the code needed to reset all the variables and to clear the array.

    Code can be found on each of the radio buttons, on the ‘Clear All’ button, and as an onEnter action to the slide.
    Let’s look at each of these areas.

    Code for the onEnter Action

    I have a single line of code that runs onEnter to the slide.

    var histArray=[];

    This is to designate my histArray variable as an array.

    Code for the Radio Buttons

    The code on each of the buttons is essentially the same so I will only share one of them and discuss it. This is the code for the Baseball radio button.

    function writeList() {
    item1=histArray[0];
    item2=histArray[1];
    item3=histArray[2];
    item4=histArray[3];
    item5=histArray[4];
    item6=histArray[5];
    item7=histArray[6];
    item8=histArray[7];
    item9=histArray[8];
    item10=histArray[9];
    }

    if (window.pick1==0) {
    pick1=1;
    cp.changeState(“c1″,”selected”);
    histArray.push(“Baseball”);
    writeList();
    }

    else {
    pick1=0;
    cp.changeState(“c1″,”Normal”);
    var sweep=histArray.indexOf(“Baseball”);
    histArray.splice(sweep, 1);
    writeList();
    }

    There are essentially three blocks of code at work here.
    We start out at the top by simply defining the writeList() function. Here we set each of our item list variables to each of the values of the array such that item 1 is always the first item in the array which has an index of zero. I wrote this as a function since it was going to be called more than once and it just made things shorter. I called it writeList() since that is basically what it was going to do – write out my list.

    In the second block of code we are running an if statement. This is the first item in the list alphabetically so “Baseball” gets stuck with  pick1  as its variable. All of the radio buttons are deselected by default so all values are going to be zero at the start. That means our if statement will execute the first time the button is pressed.

    If pick1 equals zero – and it does –

    1. go ahead and change pick1 to a value of 1.
    2. change the state of c1 to ‘selected’.
    3. push the value “Baseball” out to the array  (this will automatically place it in the next available slot.)
    4. call the writeList() function to update the list on the side.

    The next time the button is pressed – the value of pick1 will be 1 which means that the if statement will be ignored and the else statement will execute instead.

    Since pick1 does not equal zero –

    1. go ahead and change pick1 back to a value of zero
    2. change the state of our button back to ‘Normal‘
    3. set our sweep variable to the index value of where ever “Baseball” falls in the array. We do this first since we don’t know what order this will be chosen.
    4. Now that we know the index value of “Baseball” – we can splice it out using the value of sweep. (This will allow other members of the array to move up if necessary.)
    5. call the writeList() function to update the list on the side.

    Code for the ‘Clear All’ Button

    So just a big reset here – nothing fancy.

    cp.changeState(“c1″,”Normal”);
    cp.changeState(“c2″,”Normal”);
    cp.changeState(“c3″,”Normal”);
    cp.changeState(“c4″,”Normal”);
    cp.changeState(“c5″,”Normal”);
    cp.changeState(“c6″,”Normal”);
    cp.changeState(“c7″,”Normal”);
    cp.changeState(“c8″,”Normal”);
    cp.changeState(“c9″,”Normal”);
    cp.changeState(“c10″,”Normal”);

    pick1=0;
    pick2=0;
    pick3=0;
    pick4=0;
    pick5=0;
    pick6=0;
    pick7=0;
    pick8=0;
    pick9=0;
    pick10=0;

    histArray=[];

    writeList();

    We change all the radio buttons back to a deselected state.
    We change all the pick choices back to zero

    The histArray=[]; code resets the array to an empty state.

    Then after all of that we call that writeList() function again – which since the array is empty now – there is nothing to write – but that effectively clears the blue box.

    **I believe there would be issues depending on the length of text you plan to cram into the array. If one is adventurous enough, you could make your text feedback into SmartShapes with multiple states for each of your selections and simply have those appear instead of the actual text as in this example. Basically – instead of $$item1$$ – you would have however many SmartShapes you needed neatly arranged. Instead of setting your item variables to each array index – just push a keyword to the array for each piece of feedback and make sure that name matches what you name that state in your state view. Then you have a line of code to change to the corresponding state.

    **It will take a little more work to have the history box on multiple slides with choices to be made on multiple slides as well but you should be able to extend this idea forward to make that happen if necessary.

    Hopefully this is helpful and provides some food for thought for all of you in some future projects.

    This post is born out of a discussion about the need to track several choices that a user makes and populate those choices into a single text box.
    You can read the discussion here.

    Concatenation to build (populate) history text box

    As with most of my solutions to things – this uses JavaScript try and accomplish what our friend is looking to do.
    Here is the working project.

    Play

    Let’s examine how I pulled it off.

    The Elements

    This project is made up of 22 variables

    1. Ten for the radio button selection toggles named  pick1 – pick10
    2. Ten for each of the item entries in the blue box named  item1 – item10
    3. One for the array named  histArray
    4. One for the purpose of storing the index value of the selected item named  sweep

    There are 10 radio buttons which are nothing more than a circle with no fill that has an additional state with a smaller circle inside that is filled. The states are labeled ‘Normal’ and ‘selected’. Each radio button is named c1 thru c10 (c for circle) for ease of typing.

    There are 10 SmartShape labels for each radio button to designate what that particular selection is.

    The single blue box has a number value at the front and each of the item variables after it. So line one is  ( 1.  $$item1$$ )  skip a couple lines  ( 2.  $$item2$$ )  etc.

    The ‘Clear All’ button has all the code needed to reset all the variables and to clear the array.

    Code can be found on each of the radio buttons, on the ‘Clear All’ button, and as an onEnter action to the slide.
    Let’s look at each of these areas.

    Code for the onEnter Action

    I have a single line of code that runs onEnter to the slide.

    var histArray=[];

    This is to designate my histArray variable as an array.

    Code for the Radio Buttons

    The code on each of the buttons is essentially the same so I will only share one of them and discuss it. This is the code for the Baseball radio button.

    function writeList() {
    item1=histArray[0];
    item2=histArray[1];
    item3=histArray[2];
    item4=histArray[3];
    item5=histArray[4];
    item6=histArray[5];
    item7=histArray[6];
    item8=histArray[7];
    item9=histArray[8];
    item10=histArray[9];
    }

    if (window.pick1==0) {
    pick1=1;
    cp.changeState(“c1″,”selected”);
    histArray.push(“Baseball”);
    writeList();
    }

    else {
    pick1=0;
    cp.changeState(“c1″,”Normal”);
    var sweep=histArray.indexOf(“Baseball”);
    histArray.splice(sweep, 1);
    writeList();
    }

    There are essentially three blocks of code at work here.
    We start out at the top by simply defining the writeList() function. Here we set each of our item list variables to each of the values of the array such that item 1 is always the first item in the array which has an index of zero. I wrote this as a function since it was going to be called more than once and it just made things shorter. I called it writeList() since that is basically what it was going to do – write out my list.

    In the second block of code we are running an if statement. This is the first item in the list alphabetically so “Baseball” gets stuck with  pick1  as its variable. All of the radio buttons are deselected by default so all values are going to be zero at the start. That means our if statement will execute the first time the button is pressed.

    If pick1 equals zero – and it does –

    1. go ahead and change pick1 to a value of 1.
    2. change the state of c1 to ‘selected’.
    3. push the value “Baseball” out to the array  (this will automatically place it in the next available slot.)
    4. call the writeList() function to update the list on the side.

    The next time the button is pressed – the value of pick1 will be 1 which means that the if statement will be ignored and the else statement will execute instead.

    Since pick1 does not equal zero –

    1. go ahead and change pick1 back to a value of zero
    2. change the state of our button back to ‘Normal‘
    3. set our sweep variable to the index value of where ever “Baseball” falls in the array. We do this first since we don’t know what order this will be chosen.
    4. Now that we know the index value of “Baseball” – we can splice it out using the value of sweep. (This will allow other members of the array to move up if necessary.)
    5. call the writeList() function to update the list on the side.

    Code for the ‘Clear All’ Button

    So just a big reset here – nothing fancy.

    cp.changeState(“c1″,”Normal”);
    cp.changeState(“c2″,”Normal”);
    cp.changeState(“c3″,”Normal”);
    cp.changeState(“c4″,”Normal”);
    cp.changeState(“c5″,”Normal”);
    cp.changeState(“c6″,”Normal”);
    cp.changeState(“c7″,”Normal”);
    cp.changeState(“c8″,”Normal”);
    cp.changeState(“c9″,”Normal”);
    cp.changeState(“c10″,”Normal”);

    pick1=0;
    pick2=0;
    pick3=0;
    pick4=0;
    pick5=0;
    pick6=0;
    pick7=0;
    pick8=0;
    pick9=0;
    pick10=0;

    histArray=[];

    writeList();

    We change all the radio buttons back to a deselected state.
    We change all the pick choices back to zero

    The histArray=[]; code resets the array to an empty state.

    Then after all of that we call that writeList() function again – which since the array is empty now – there is nothing to write – but that effectively clears the blue box.

    **I believe there would be issues depending on the length of text you plan to cram into the array. If one is adventurous enough, you could make your text feedback into SmartShapes with multiple states for each of your selections and simply have those appear instead of the actual text as in this example. Basically – instead of $$item1$$ – you would have however many SmartShapes you needed neatly arranged. Instead of setting your item variables to each array index – just push a keyword to the array for each piece of feedback and make sure that name matches what you name that state in your state view. Then you have a line of code to change to the corresponding state.

    **It will take a little more work to have the history box on multiple slides with choices to be made on multiple slides as well but you should be able to extend this idea forward to make that happen if necessary.

    Hopefully this is helpful and provides some food for thought for all of you in some future projects.

    Share
    Adobe Captivate
    blog
    custom feedback
    JavaScript
    Tips and Tricks
    Like
    (8)
    Comments
    (8)
    Share
    LinkedIn
    Twitter
    Facebook
    Email
    Greg Stager
    I am currently a provider of technical training and support in the electronic manufacturing industry. My prior training and work experience as a teacher, network administrator, web design, and instructional design make me well prepared to design it, develop it, and deliver it. I am a father of five, a US Army veteran, and I enjoy playing the guitar as well as performing in local community theater. 
    Legend 99 posts
    Followers: 157 people
    Follow
    Greg Stager Follow
    I am currently a provider of technical training and support in the electronic manufacturing industry. My prior training and work experience as a teacher, network administrator, web design, and instructional design make me well prepared to design it, develop it, and deliver it. I am a father of five, a US Army veteran, and I enjoy playing the guitar as well as performing in local community theater. 
    Like
    (8)
    Comments
    (8)
    Share
    LinkedIn
    Twitter
    Facebook
    Email
    Cancel

    You must be logged in to post a comment.

    All Comments
    Sort by:  Most Recent
    • Most Recent
    • Most Relevant
    Todd Spargo
    2019-07-19 03:43:54

    Creative idea. Thanks!

    Like
    Reply
    alveoli
    2019-07-11 20:47:06

    I am using a smartshape as a button (rather than radio button) and I’ve modified the Advanced Actions for the button to include the declaration of  the “pick1” variable, and item1 – item3 variables are declared in onEnter.   So, I have two Advanced Actions – one for onEnter (SetArray) and the other for my simple button.  I’m not sure where I need to declare vars within Captivate or JS? Perhaps I don’t need to declare variables?

    At this point, I’m not worried about the user clearing the selection.  They will have to live with their choice (although I do apreciate you including that in your example).

    Attachment  Javascript-example.cptx

    Like
    Reply
    Greg Stager
    2019-07-11 22:08:49

    Declaring variables just in the JavaScript window provides a limited scope so I always make sure that my variables are setup through Captivate. That makes them global and usable for the entire project.

    Go to your menu bar along the top

    Choose Project >> Variables

    Select Add New

    Type the name, default value if needed, and description if desired and click save.

    Like
    Reply
    Greg Stager
    2019-07-11 09:44:48

    There may be a tad bit more in terms of requirements but I believe this to be a strong start that will take care of the gaps between feedback issue for sure.

    Like
    Reply
    View All 3 Replies
    Lieve Weymeis
    2019-07-11 09:46:02

    For sure it is. Appreciate a lot your willingness to share your JS expertise with other users.

    Like
    Reply
    alveoli
    2019-07-11 18:53:17

    I’ve tried to replicate using a simple model of what you’ve provided (attached).  I did remove the change state in the button action.  I’m not sure what I have wrong, but it simply isn’t working for me.  Could you check it out?  I’m sorry.  I have never used javascript in Captivate so I am a bit lost.

    Attachment  Javascript-example.cptx

    Like
    Reply
    Greg Stager
    2019-07-11 22:10:20

    I believe we got this one squared up via the other forum.

    Like
    Reply
    Lieve Weymeis
    2019-07-11 06:56:59

    Thanks Greg. You know I followed that thread. Hope the user can understand what you created.  I also switch to arrays when necessary but his requirements were never very clear to me.

    Like
    Reply
    Share
    You might also like
    Other topics
    Adobe Learning Manager
    Virtual Reality
    Mobile Learning
    Video-Based Learning
    Adobe Captivate
    Download free 30-day trial of
    Adobe Captivate

    Free Trial
    Adobe Events
    Check out our upcoming webinars
    and workshops
    Register now
    Follow
    Response History With A Sorted Display
    8
  • Follow
    8
  • Looking for some information...
    Subscribe to our newsletter
    The Adobe family of companies may keep me informed with personalized emails about ELearning Community Content and News. See our Privacy Policy for more details or to opt-out at any time.
    Subscribe
    Enter a valid email address
    Thank you for subscribing to our newsletter
    Blogs
    Learning Hub
    Tutorials
    Free Projects
    Discussions
    © 2025 Adobe. All rights reserved. Privacy Terms of Use Cookie preferences Contact Us Do not sell or share my personal information