Hey community!
I’m having trouble finding resources on this… I’m attempting to make a multi-step form with conditional logic that will filter users out if they give certain answers.
For example, the first question being a yes or no radio selector, I want the user to only be able to progress if they choose “yes” and be sent to a different page if they choose “no.”
In another situation, I have a slider selector with different values, and I want users to only be able to progress if they choose a certain numerical value, and to be sent to a different page if they choose below a certain value.
I’m sure this can be done using Corvid, I’m just not well versed enough with Corvid to know how.
Please help!
Hello Beckett,
you can do by using multi-state-boxes. It isn’t even needed to change the page, you can do all query-process inside the multistate-box.
An example how to work with multistate-boxes you can see here…
https://russian-dima.wixsite.com/meinewebsite/multistate-boxes
Your project should work in the same way like this check-out form here…
https://russian-dima.wixsite.com/meinewebsite/blank-13
Good luck.
Thanks for your reply, however this is not really what I’m trying to do. The conditions should progress users, or stop them from progressing, through a multi-step form. I’m having quite a lot of trouble with this, any insight would be appreciated!
Here’s what I’ve come up with, but it still doesn’t work:
import wixWindow from 'wix-window';
export function q1submit_click(event) {
if ($w("#orgYorN").value !== "Yes") {
($w('#funnelQuiz01').changeState(2));}
else
wixWindow.openLightbox("PrivacyNotice");}
Any tips?
Ok i will give you another example, perhaps this one will help you.
You can later change it for your own needs…
Take a look here…
https://russian-dima.wixsite.com/meinewebsite/little-quiz
IAlso take a look at this video here…
This is the working code of my example…
$w.onReady(function () {});
var selectedValue
export function radioGroup1_click(event) {
$w('#TXToutput').text = $w('#radioGroup1').selectedIndex.toString()
selectedValue = $w('#radioGroup1').selectedIndex
console.log(selectedValue)
if (selectedValue ===0) {$w('#box1').style.backgroundColor="red"}
if (selectedValue ===1) {$w('#box1').style.backgroundColor="yellow"}
if (selectedValue ===2) {$w('#box1').style.backgroundColor="blue"}
}
export function button1_click(event) {
if(selectedValue ===0) {$w('#TXToutput1').text = "Sorry red is not my favourite color."}
if(selectedValue ===1) {$w('#TXToutput1').text = "Yes that's it, this is my favourite color."}
if(selectedValue ===2) {$w('#TXToutput1').text = "Sorry blue is not my favourite color."}
setTimeout(()=>{$w('#statebox8').changeState("state2")},1500)
}
Hey, thanks for your help - the example has been helpful, but I keep getting the error “Cannot read property ‘toString’ of undefined”.
I don’t need any text outputs, rather, I’d like the form to screen users. For example, the first question is, “Are you an authorized decision-maker for your organization?” and if the user submits a ‘Yes’ query, I want them to progress to the next question, but if they answer ‘No’, I want them to be taken to the very last form state which will be a thank you message.
Can you help?
Ohhh did not see your response, sorry!
You have to show your code, without taking a look at your current code, i cant do anything 
And yes you can modify it as you want, you have just to write your own wished code-comands and functions.
And by the way the error-throwing line will surely be this one…
$w('#radioGroup1').selectedIndex.toString()
Thanks for your help!
Yes, I know it’s that line, but can you help me fix it? How do I define the string?
Thanks!
@russian-dima Thanks again for all your help!
Yes, I know it’s that line that is giving me the error, but I can’t find any documentation on how to fix it and I just don’t know enough about JavaScript. How do I define the toString property?
Thanks in advance!
@beckettla
Take a look on my example one more time.
I have expanded it a little bit. Perhaps now you will recognice how it works.
https://russian-dima.wixsite.com/meinewebsite/little-quiz
$w.onReady(function () {});
var selectedValue
export function radioGroup1_click(event) {
$w('#TXToutput').text = $w('#radioGroup1').selectedIndex.toString()
selectedValue = $w('#radioGroup1').selectedIndex
console.log(selectedValue)
if (selectedValue ===0) {$w('#box1').style.backgroundColor="red"}
if (selectedValue ===1) {$w('#box1').style.backgroundColor="yellow"}
if (selectedValue ===2) {$w('#box1').style.backgroundColor="blue"}
}
export function button1_click(event) {
if(selectedValue ===0) {$w('#TXToutput1').text = "Sorry red is not my favourite color."}
if(selectedValue ===1) {$w('#TXToutput1').text = "Yes that's it, this is my favourite color."}
if(selectedValue ===2) {$w('#TXToutput1').text = "Sorry blue is not my favourite color."}
setTimeout(()=>{$w('#statebox8').changeState("state2")},1500)
}
export function button2_click(event) {
selectedValue = $w('#radioGroup2').selectedIndex
if(selectedValue ===0) {$w('#statebox8').changeState("state3")}
if(selectedValue ===1) {$w('#statebox8').changeState("Endstate"), $w('#TXTfinish').text = "Sorry you are not the right choice for us.."}
}
export function button3_click(event) {
selectedValue = $w('#radioGroup3').selectedIndex
if(selectedValue ===0) {$w('#statebox8').changeState("Endstate"), $w('#TXTfinish').text = "Congrats, you are the person we were searching for."}
if(selectedValue ===1) {$w('#statebox8').changeState("Endstate"), $w('#TXTfinish').text = "Sorry you are not the right choice for us.."}
}
export function button4_click(event) {$w('#statebox8').changeState("state1")}
@russian-dima YOU ARE A LIFESAVER!! This worked, thank you so much!!
One last question, if you don’t mind 
I’m trying to add validation, where the form will not be submittable until the user makes a selection. I got it to work, more or less; the form does not submit unless a selection is made, but my error message and button disable are not showing. Would you be able to tell me what’s wrong with my code?
Thanks again, you’ve been super helpful!!
var selectedValue
export function q1submit_click(event) {
if (selectedValue === false) {
$w('#q1submit').disable()
$w('#errorText').show()
$w('#errorText').text = "Please make a selection to continue"
setTimeout (function () {
$w('#q1submit').enable()
$w('#errorText').hide()
},2000)}
else
selectedValue = $w('#orgYorN').selectedIndex
if(selectedValue ===0)
{$w('#funnelQuiz01').changeState("q2")}
if(selectedValue ===1)
{$w('#funnelQuiz01').changeState("sorry")}
}
Hi Guys, I had the same problem and I cannot solve it!
Beckett, how did you did it?
What exactly is your issue? It is recommended to open your own post with your own well described issue + related code (code-part).
You can link this post with your own one.
@russian-dima Well, I have the same problem as this girl.
For example, the first question is, “Do you want to be anonymous?” and if the user submits a ‘Yes’ query, I want them to progress to the next question, but if they answer ‘No’, I don’t want any other question to appear.
@agathavazquez
All you have to do is to modify the given CODE above…like…
$w.onReady(function () {});
var selectedValue
export function radioGroup1_click(event) {
$w('#TXToutput').text = $w('#radioGroup1').selectedIndex.toString()
selectedValue = $w('#radioGroup1').selectedIndex; console.log(selectedValue)
if (selectedValue===0) {console.log("YES")}
if (selectedValue===1) {console.log("NO")}
}
export function button1_click(event) {
if(selectedValue===0) {console.log("Your choice = YES, programm will continue...")
setTimeout(()=>{$w('#statebox8').changeState("state2")},1500)
}
if(selectedValue===1) {console.log("Your choice = NO nothing will happen now!")}
}
Take also a look onto —> CONSOLE.
Godd luck and happy coding.