Intro

For those not familiar with the term, radio-buttons are a group of buttons where only one can be selected and highlighted at a time.  They are typically represented as circles and then when selected, filled-in circles.

In Captivate, radio buttons appear on quiz selection and look like this.

Want to create your own buttons with cool shapes and different colours with minimal coding?  Keep reading. I’ve included a sample .cptx file as a demonstration.

Step 1: Create the Radio Button

Create a shape – for example a circle.  Tick the box ‘use as button’.

Click ‘State View’ and then ‘New State’.  Select custom state and title it ‘pressed’.  For the new state add another shape or object in the center of your original shape.  (For example a check, a smiley face, an ‘x’).  If you prefer, delete the ‘rollover’ and ‘down’ views.

Exit state view and name your object ‘button1’

Duplicate this button as many times as you would like on the page.

Step 2: Javascript Programming

Click project -> Variables and create a new variable called ‘last’ with no value.

On enter execute javascript:

window.addEventListener(“mousedown”, function(e) {

if(e.target.id.startsWith(“button”))
{
cp.changeState(last, “Normal”)
last = e.target.id
cp.changeState(last,”pressed”)

}
});

And your done!  Now all of your buttons will toggle like radio buttons.

CustomButtons

Additional Notes

– The javascript only needs to be executed once per project since it creates a mouse eventListener.

– In the sample document, I had the buttons execute javascript to change a comment variable.  The submit button then executes javascript that evaluates this variable.

– The code will work with any object that has an id that starts with ‘button’ and has a state named ‘pressed’

– I know there are many other methods for achieving this. But if you had dozens of buttons, this might simplify the process.

Thanks and if you have any questions please let me know.