How to change the appearance of a disabled quiz button?

[petrk27901450]

I have a quiz setup that only uses navigation buttons and not the playbar at all. Once a quiz is successfully answered I show a shape button. Since quiz submit buttons become disabled once a question is answered, the shape button is there to move to the next slide. This is useful when a user presses back and lands on a quiz that have been answered, since without it the user could not move forward again.

The issue I have is that visually the quiz submit does not actually look disabled when it is. So to a user it should work but clicking on it does nothing. I cannot place the shape button over the top of the submit button since it will always be sorted to below it. If I could at least control the look of the submit button's disabled state, I could lower its opacity, or darken it.

Any suggestions on this?

[ankits61431843]

You can change the color and opacity of quiz submit button using only javascript.

[Lilybiri]

Not true, sorry. The quiz buttons cannot be shape buttons. However both

transparent and image type of buttons are allowed. You can change fill and

border for transparent buttons, you can design image buttons. No need for

JS at all.

[ankits61431843]

I think the question is about changing the color and opacity of the disabled quiz submit button while revisiting the question slide and in my knowledge I have not found any inbuilt control of captivate changing those except without javascript which I have worked on it.

[petrk27901450]

Thank you for your replies. Just to confirm, I do know how to change a quiz submit button, it is when the quiz is in a disabled state i.e. the question on that slide has been answered and the quiz submit button can no longer be interacted with that I am not sure of.

If I go into the state view, there is a Normal, RollOver and Down state. I had assumed that the Down state would double as the disabled state but on testing it doesn't actually look the same visually. This is a UX issue because the disabled button looks the same as an enabled button and the user will be wondering why clicking on the disabled button is not doing anything. It would be great to be able to control what a disabled button looks like, since quiz buttons cannot be changed via actions as far as I know.

[Lilybiri]

Understand now what you mean, Since user cannot change any answer after leaving the question slide, I do not allow backward movement in quizzes, it has not much sense,

Down state has a typical meaning in all applications that use buttons: appears when the button is down, Buttons on quiz slides are embedded, which means they cannot be addressed in an action to change to another state. The pause of the quiz slide is linked to that Submit button, and its two-step process, After the second step the actions On Success  or, after exhausting the attempts on Question level, the Last attempt action are done, You could use those actions to add a note on the slide. You can add a shape button, but the embedded objects are always on top of custom objects, covering the Submit button is not possible. That is the reason why JS will be the only way.

[petrk27901450]

Hmm I suspected as much. I have a requirement for users to be able to move from the quiz back to the content slides so that the answers can be double checked. I will try to look up some tutorials on how to change quiz buttons with JS, hopefully this is not too difficult to implement.

[ankits61431843]

Hi, I will send you the screenshots in 1 hour

[ankits61431843 · Accepted solution]

Hi Please see the screenshots below to help you understand how to change the opacity of the disabled submit quiz button.

Screenshot 1 - the question initially look like without submit the answer

Screenshot 2 - Execute conditional action in onenter slide and below screenshot shows the if condition.

I have created variable q1 to hide the next button initially on the slide.

Screenshot 3 - shows else condition with javascript simple code and next button visible while revisit.

Here is the important thing to note you have to get the id name of the submit button and you will get it from when you

will preview the project in browser using F11.

Screenshot 4 - open developer tool using F12 in browser and pick the id name of submit button.

Screenshot 5 - This is the slide when I revisit and next is visible with submit button opacity also changed.

Please let me know if this help you.

[TLCMediaDesign]

I use this code since you never know the id. You can also use this (slightly modified) to get a reference to a SmartShape button on a master slide.

This code changes the cursor, prevents rollover states and changes opacity.

var elems = document.getElementsByClassName("cp-accessibility");

    for(var i = 0; i < elems.length; i++)

    {    

     if (elems.getElementsByTagName("p")[0].innerHTML.indexOf("Submit")!== -1)

     {

      var getSubmit = document.getElementById(elems.getElementsByTagName("p")[0].parentNode.parentNode.id);

      var getSubmitCanvas = document.getElementById(elems.getElementsByTagName("p")[0].parentNode.parentNode.id+"c");

      getSubmit.style.cursor = "default";

      getSubmit.style.pointerEvents = "none";

      getSubmitCanvas.style.opacity = 0.5;

      getSubmitCanvas.style.pointerEvents = "none";

     }    

    }