Skip to main content
M
maria carmenu32233869
Participating Frequently
November 16, 2021
Answered

"Dropdown" learning interaction change font size

  • November 16, 2021
  • 4 replies
  • 752 views

Good morning, I want to use a "Dropdown" learning interaction but I have seen that it is not possible to increase the font size to more than 14 points (attached screenshot). Does anyone know if modifying the code of some .css or .js file in possible?

Thank you very much in advance

    This topic has been closed for replies.
    Correct answer RodWard

    I suggested you use the browser tools only so that you could find the right object in the code.  Once you know what it is called , then you would need to search the CPM.js file in the publsihed HTML5 output to find the code again and manually edit it. 

    4 replies

    J
    Joy218279054g8k
    Participant
    November 18, 2021

    Thank you

    Paul Wilson CTDP
    Community Expert
    Paul Wilson CTDPCommunity Expert
    Community Expert
    November 17, 2021

    This isn't exactly what you are looking for but perhaps you could make use of this...

    https://youtu.be/Wluk4aIGqLI 

    Paul Wilson, CTDP
      Lilybiri
      Lilybiri
      Legend
      November 16, 2021

      I know that this is very frustrating. Problem is that the learning interactions are closed widgets, you don't get the code version which makes it impossible to apply styling different from the one you get in its editing window. Quite a while ago I wrote a blog about this interaction:

      http://blog.lilybiri.com/dropdown-interaction-tips

      Sorry, the embedded example is SWF.

      You would need to create a custom interaction, or choose another learning interaction as alternative: radio buttons maybe? Or use the Scrolling Text interaction?

      Another possibiity: use Text Entry Boxes and allow to choose from the dropdown answers?

        RodWard
        Community Expert
        RodWardCommunity Expert
        Community Expert
        November 16, 2021

        Apart from the limited editing options available with the Learning Interaction interfaces, Captivate does not provide anything you can really use to override the values.

         

        However it should be possible to use the browser console developer tools to locate the specific JS or CSS code in the final published HTML5 output. Then you could use a code edting app to change the values. 

         

        But the downside of this is that you would need to do this each and every time you published the output.

        M
        maria carmenu32233869Author
        Participating Frequently
        November 17, 2021

        Hi Rod,

         

        Thank you very much, yes that is what I am trying but without success. I get the changes I try in the browser with the "Inspector depropiedasdes" to add:

        #dropdown {
        font-size: 22px !important;
        }

        But then to implement them as .css once published the scorm does not take them. In other occasions I have managed to change the appearance of the pop up "runtime dialog box", for example.

         

        Greetings

        RodWard
        Community Expert
        RodWardCommunity ExpertCorrect answer
        Community Expert
        November 17, 2021

        I suggested you use the browser tools only so that you could find the right object in the code.  Once you know what it is called , then you would need to search the CPM.js file in the publsihed HTML5 output to find the code again and manually edit it. 

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