Reset Selection tags in the multi-state box

Ask the community
,
1

am working off this tutorial: https://www.wix.com/velo/example/gift-quiz

I am trying to add a reset button to go back to the start of the quiz. I wrapped the code in a function and called it on reset

button click but the Selection tags buttons show in their clicked state for the options that were selected in the first run through the quiz.

Example:

If I select option 1 the button turns from white to black and runs through the quiz.
If I click the reset button it starts the quiz again but option 1 is black(its clicked state).

867×353 9.86 KB

logically everything functions fine but visually I can see all the previous answers to the quiz.

Is there a way to reload the multi-state box and selection tags without reloading the page?

2

Hi there!

You can accomplish this in two ways.

Method 1: Making the currently selected tag (on every state) null as soon as you save the selection in the keywordsArray.

This uses SelectionTags.selectedIndices property

Here’s a example:

Original Code:

$w('#whoTags').onChange(event => {
        keywordsArray.push(event.target.value[0]);
        $w('#quizStates').changeState('whatState');
});

Updated code:

$w('#whoTags').onChange(event => {
        keywordsArray.push(event.target.value[0]);
        $w("#whoTags").selectedIndices = null;
        $w('#quizStates').changeState('whatState');
});

This will prevent the “Selected” style from showing if you reset the quiz.

Method 2: Changing the design of the “Selected” state for the Selection Tags in the editor.

If you are not using the “Selected” style for any ux purpose, changing the style to match the default color would also prevent the previously selected choices from being visible.