February 28, 2018
Easy Customized Quiz (radio) Buttons
February 28, 2018
Easy Customized Quiz (radio) Buttons
Newbie 18 posts
Followers: 42 people













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) {

cp.changeState(last, “Normal”)
last = e.target.id


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


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.

2021-03-25 16:12:06
2021-03-25 16:12:06

Thanks for this, everything is working except the response= 0

Where do you assign this? If you assign it to the submit button, then the submit button will always be 0.


2019-10-14 18:20:28
2019-10-14 18:20:28

Do you have a sample I can download for this? I tried following the instructions but can’t seem to get it to work. Thanks!

2018-04-24 03:17:20
2018-04-24 03:17:20

Thanks for sharing. This sounds like a great solution. I will definitely give this a try. No need to set up advanced actions then.

Add Comment