Remember clicked buttons

Ask the community
,
1

Hi forum
I am making a quiz based on the Corvid Gift Quiz (https://www.wix.com/corvid/example/gift-quiz).
The only difference is that I have added navigations arrows so users can go back and forth.

My question: How do keep the clicked/selected buttons highlighted in a “hover-like” effect so the user can remember that their previous choices were?
Something like the example below when the user go back to review previous answers.
Thank.

Best regards

2874×1202 214 KB

2

You could make use of the Wix Storage API to save the users chosen answer.
https://www.wix.com/corvid/reference/wix-storage.html

You could do it on the button choice selection or the navigation arrow click to set the item and then when the page loads to get the item again.

Or you can look at changing the design and use dependent dropdowns which you can find an example of here.
https://www.wix.com/corvid/example/Cascading-Form
https://www.wix.com/corvid/forum/community-discussion/dependent-dropdown

3

Thanks GOS
Could you please elaborate your answer? I want the button to remained hovered once clicked until a new button is clicked on that particular slide if the user chooses to go back and change their answer.
I was thinking of something like this:

function setButtonColor(button, opacity){
button.style.backgroundColor = rgba( 32 , 25 , 200 ,${opacity});
button.style.borderColor = rgba( 0 , 0 , 0 ,${(opacity + 1 ) % 2 });
}
//rgba color similar to buttons
$w.onReady( function () {
//TODO: write your page related code here…
let buttonsToChange = [$w( “#button1” ), $w( “#button2” ), $w( “#button3” )]; //put the relevant buttons here
buttonsToChange.forEach(button => {
setButtonColor(button, 0 );
button.onClick((event) => {
buttonsToChange.forEach(b => {
setButtonColor(b, 0 );
});
setButtonColor(button, 1 );
})
})

but maybe there is a shortcut.