Participating Frequently

Answered

"Dropdown" learning interaction change font size

10 replies
771 views
Translate

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 is closed to new replies. Start a new post to keep the conversation going.

RodWardCorrect answer

Community Expert

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.

J

Joy218279054g8k

Participant

Thank you

Translate

Paul Wilson CTDP

Community Expert

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

https://youtu.be/Wluk4aIGqLI

Translate

Paul Wilson, CTDP

Lilybiri

Legend

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?

Translate

RodWard

Community Expert

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.

Translate

M

maria carmenu32233869Author

Participating Frequently

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

Translate

RodWard

Correct answer

Community Expert

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.

Translate

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.