How to change the design of multiple-choice checkboxes

[S_P-Team]

Hello,

i want to change the look of multiple-choice quizzes. Instead of the typical checkbox with checkmark i would like to place a button that changes its color - for example blue for right (activated) and white for wrong (not selected).

I think it should be possible, but I don't know where I can change the look of checkboxes. I Tried it with a hotspot-quiz, but that is not exactly what I'm searching for.

The best solution for me would be a kind of button with mouse-over effect as known from websites (HTML).

Can you please tell me what I have to edit?

Thank you very much.

Boris

[Captiv8r]

Hi Boris

I'm thinking you would do well to use two sets of Image Button objects. With an Image Button object, you supply up to three images to use for the different states. Because you want different behavior and coloring if the Button has been clicked, you would have a second set with the desired coloring.

Then hide one set via the properties and use Advanced Actions that would do the hiding and showing of the different buttons depending on whether they have been visited or not.

Cheers... Rick

[MB_Design2]

If you want to change the standard look and feel of multiple-choice quiz slides, you'll have to go into the assets where your Captivate program files are located and edit the files in Flash & a graphics editing program. Depending on if you want Flash or HTML5 output (or both) you'll need to edit the appropriate assets to change the actual template. This will save the time so you won't have to create a set of image buttons and advanced actions each time you make a new quiz slide.

     For example, the Flash assets for the Radio Buttons used on Multiple-Choice Quizzes are located in a path that will be like: C:\Program Files\Adobe\Adobe Captivate 6 x64\Gallery\Widgets\Source\RadioButtonWidget (depending on where you installed Captivate)

     And the HTML5 assets for those same Buttons are in: C:\Program Files\Adobe\Adobe Captivate 6 x64\HTML\assets\htmlimages

You can edit both the pngs and fla (and republish the swf to the appropriate directory), changing the way multiple-choice quiz slides look by default.

It might be a good idea to make a copy of the contents of the assets folder, that way if you want to revert to Captivate's default styles you'll have a backup.

[TimothyHays]

Hello and thank you for posting this information. I'm still seeing a number of problems with implementing a workable solution.

For HTML5 only (not Flash), I have changed the image: HTML/assets/htmlimages/checkBox_selected.png to a blue button (118x53 pixels instead of the default 22x22pixels), and as expected the button will still be the same size until I change the code description of the checkbox. I found the CSS description of the checkbox button in: HTML/assets/css/CPQuiz.css and have made the changes to the width and height (see below), and even though the following changes are generated in the output files, they don't have any effect on the button. However, I found that if I changed the 'Project.js' file where it defines the width and height of the checkboxes that this would actually change the values, but this is always re-written over and generated each time you click 'Publish'.

So, I then found some hard-coding in the file: HTML/assets/js/CPLibrary.js (just search for 22px and you'll see that the checkbox description width and height are not being read from the CSS file) and this appears to be where the actual code is coming from that gets generated for output when you click on 'Publish'.

This is not an optimal solution, I feel that I'm beginning to hack around the default code for Adobe Captivate more than I should be expected to do. Is this really what others are doing to make what should be pretty simple and easy changes?

Additionally, I noticed that when I click on my checkbox, the 'checkBox_selected.png' will be drawn, but if I click on it again the 'checkBox_disabled.png' appears to be drawn on top of the previous 'checkBox_selected.png' which is not the behavior I would expect. I want to be able to see what is underneath the button if I click on it again in order to un-check the box and instead it draws the 'checkBox_disabled.png' on top, covering up the default text I need to see!

Below are my changes to CPQuiz.css (which were copied to the 'Published' file, but had no visible effect)

input[type=checkbox]:checked

{

    background: url('../htmlimages/checkBox_selected.png') no-repeat center center;

    -webkit-appearance: none;

    border: none;

    -webkit-background-size: 118px 53px;

}

....

..

.spanCheckBoxInput

{

    position: fixed;

    display: block;

    width:118px;

    height:53px;

}

[stageit ab]

You are right about the HTML5 part.

But RadioButtonWidget you refer to are NOT the one used in quizzes. They don't look the same at all as the checkbox/radio buttons in a quiz.

!

But I found them hidden inside the captivate program itself. On a Mac you can right click on the Captivate program icon and choose "show content" (or similar).

You'll find the png's in "content/framework/CPQuizzing.framework/resources/".

EDIT:

I was right about where the png's was located. But:

1. It only takes effect on new created projects.

2. The edited graphics is only visible in Captivate when editing. Not when exported to Flash. (?!)

Can anyone proffesional from Adobe answer this question please!!

Where are does the graphic come from that is baked into the published Flash??!??!