Skip to main content
Participating Frequently
August 2, 2023
Answered

Is there a way to hide the lowest numbered text caption on slide entry using Javascript?

  • August 2, 2023
  • 3 replies
  • 1163 views

Hi, first of all thank you for any help provided. I have a simple show me, try me and test me project. I have 100 slides for show me all with one single text caption providing guidance. For test me I am providing one text caption for guidance and one hidden text caption accessed through a hint button for assistance. Instead of hiding each text caption manually is there a way to wildcard hide the lowest numbered caption using javascript  and then this can be set as the page enter action to the 100 try me slides. I could also use this on the hint button to show the hidden caption. Aware there may be slicker ways of working in terms of setup but as this is an established project I'm looking to align to the current practices. Thanks again in advance for any help. 

    This topic has been closed for replies.
    Correct answer Stagprime2687219

    What is tricky about this is that all of the objects on your stage are added to an array but not always in the same order or at the same index value... etc. That makes it tough to pinpoint.

     

    I did a little work on something you could at least give a try.

    The code will find the array of objects for the current slide and then separate out the captions to a new array.

    Then the code will hide the first item in the array of captions. Hopefully it populates the new array in numerical order.

    These are on timeouts as the first one needs to wait so the slide can be fully populated to grab the array and the second one needs to wait for the first array to be created. You can play with the timing and see how quick you can get away with.

    This code would go on each slide as an onEnter JavaScript event.

    setTimeout(function() {
    slideID=$(".cp-frameset").attr("id"); 
    myArray=cp.D[slideID].si; 
    },500);
    
    setTimeout(function() {
    const filtered = (col) => myArray.filter(i => i.n.includes(col));
    const output = filtered('Caption');
    newArray=output;
    cp.hide(newArray[0].n);
    },1000);

     

    3 replies

    New Participant
    August 3, 2023

    Thanks 

    Stagprime2687219
    Brainiac
    August 2, 2023

    I am not 100% sure of the plan here but from what I can tell - it sounds like we have two captions on a slide and want to hide one of them at the start with the ability to show it on the click of a button. Are these two separate smartshapes with text?

     

    Here is what I might do using JavaScript - and it is best to implement this up front so that as you replicate the captions (smartshapes) you also replicate the JavaScript that is attached to them.

     

    In essence - you make the caption a button with two states one blank (default) and one with the hint. Clicking the button will change the state but since the JavaScript is the exact same for all instances of the button - you don't have to do the little updates save for the change of the hint text itself.

     

    Basically - this is the code 

     

    var thisBox=$(event.target)[0].id;
    cp.goToNextState(thisBox);

     

    The nice part about this code is that it does not matter what the name of the object is. Clicking the button would grab the name of the object for you and then use that name to go to the next state of the button like a toggle.

     

    Hopefully that helps somewhat. It is probably the least complicated JavaScript solution I can think of for this scenario.

    Participating Frequently
    August 2, 2023

    Thank you. I can see Lilybiri has followed up below. Although this solution looks great it would involve a change to ways of working that can't be implemented at the moment but happy to explore for future revisions. Thanks for your help.

    Participating Frequently
    August 4, 2023

    Glad to hear that this worked for you. I appreciate the follow up.


    Apologies for the follow up. Just looking to tap into your expertise again if possible. Is there a way the above JavaScript can be extended to hide all the visible buttons on the same slide. One is a hint and the other is a home button. These are visible during the try me segment and I am using your JavaScript that is working great to hide the text caption but it would be fantastic if this extended to hiding the the visible buttons for test me. Currently removing them manually on every slide. Again thanks in advance for your great help. 

    Lilybiri
    Brainiac
    August 2, 2023

    You are asking for JS, so I will not propose a shared action.

    However while you are waiting for a JS expert, it would be great to clarify some more:

    • You didn't use a Software simulation, or you would have those text captions automatically depending on the mode: Demo, Training, Assessment. You created it manually and added the text captions?
    • Or did you do a recording in one mode, and used that to create the other modes?
    • You talk about 'lowest number', probably referring to the generic name of the text captions. Why the lowest? The labels will be different on each slide, does the Hint caption's generic name always have a lower number than the other caption?
    Participating Frequently
    August 2, 2023

    Hi, thank you for the quick response. Answers below:

     

    • Software simulation not used as the content needs a large amount of manupulation in other packages (illustrator/photoshop) due to enviroment restrictions before bringing to captivate. All slides created manually.
    • No recordings used.
    • The hint caption is the orginal whereas the instruction which contains slightly amended text is the duplicate with the higher ID number eg hint Text_Caption_201 and the instruction will be Text_Caption_230 etc

    Thanks again

    Lilybiri
    Brainiac
    August 2, 2023

    It is a pity that you didn't use software simulation in the two or three modes. It is pretty easy to edit the captured backgrounds with roundtripping to PS from the project library.

    Indeed, I warned Greg that you wouldn't change the workflow basically. I would look for a solution using CpExtra widget, but you probably do not have that widget. And it would mean that you have to rename all the captions. 

    In the default software sims, the Hint caption appears as a Rollover. Did you ever think about that possibility? If you have shapes as text containers - which is possible although you always say 'caption' - it is easy to convert them to a Rollover shape. Probably too much work, because you need to define another shape to activate the rollover. But at this moment you also needed to have a button on each slide to activate the Hint, correct?