Help with custom multistep form

beckettla · August 14, 2020, 5:43am

I’m creating a filtering quiz and I’ve got most of the code worked out (except for field validation- I gave up on that), but it’s not working properly. Someone who knows Wix forms really well, I’d really appreciate your help!

Here’s a link to the quiz: https://www.beckettarnolddesigns.com/free-quiz

So the problems are as follows:

None of the answers are being recorded. They’re all laid out on the submission table, but only the answer to the very first question records.
When a user finishes the quiz, they’re supposed to be directed to the end state, but the end state only flashes for a second, and then they’re redirected to the first question.

Here’s my code:

var selectedValue

//----------------------FUNNEL QUIZ FORM Sate 1----------------------//

export function q1submit_click(event) {
//  if ($w('#orgYorN').selectedValue === null) {
//      $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")}
}

//----------------------FUNNEL QUIZ FORM State 2----------------------//

export function q2submit_click(event) {
//  if ($w('#radioGroup1').selectedValue === null) {
//      $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 
        $w('#funnelQuiz01').changeState("q3")

}

export function q2back_click(event) {
    $w('#funnelQuiz01').changeState("q1") 
}   

//----------------------FUNNEL QUIZ FORM State 3----------------------//

export function q3submit_click(event) {
//  if ($w('#selectionTags1').selectedValue === null) {
//      $w('#q1submit').disable()
//      $w('#errorText').show()
//      $w('#errorText').text = "Please select at least 1 option"
 
//      setTimeout (function () {
//          $w('#q1submit').enable()
//          $w('#errorText').hide()
 
//      },2000)}
//  else 
    $w('#funnelQuiz01').changeState("q4")
}

export function q3back_click(event) {
    $w('#funnelQuiz01').changeState("q2") 
}

//----------------------FUNNEL QUIZ FORM Sate 4----------------------//

export function q4submit_click(event) {
//      if ($w('#clientsYorN').selectedValue === null) {
//      $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('#clientsYorN').selectedIndex
 if(selectedValue ===0) 
        {$w('#funnelQuiz01').changeState("q5clients")}
 if(selectedValue ===1) 
        {$w('#funnelQuiz01').changeState("q5revenue")}
}

export function q4back_click(event) {
    $w('#funnelQuiz01').changeState("q3")  
}

//----------------------FUNNEL QUIZ FORM Sate 5----------------------//

export function q5revSubmit_click(event) {
//  if ($w('#slider3').selectedValue === null) {
//      $w('#q1submit').disable()
//      $w('#errorText').show()
//      $w('#errorText').text = "Please select an amount to continue"
 
//      setTimeout (function () {
//          $w('#q1submit').enable()
//          $w('#errorText').hide()
 
//      },2000)}
//  else 
        $w('#funnelQuiz01').changeState("q6revenue")
}

export function q5revBack_click(event) {
    $w('#funnelQuiz01').changeState("q4") 
}

export function q5cliSubmit_click(event) {
//  if ($w('#slider2').selectedValue === null) {
//      $w('#q1submit').disable()
//      $w('#errorText').show()
//      $w('#errorText').text = "Please select an amount to continue"
 
//      setTimeout (function () {
//          $w('#q1submit').enable()
//          $w('#errorText').hide()
 
//      },2000)}
//  else 
        $w('#funnelQuiz01').changeState("q6clients")
}

export function q5cliBack_click(event) {
    $w('#funnelQuiz01').changeState("q4")
}

//----------------------FUNNEL QUIZ FORM Sate 6----------------------//

export function q6revSubmit_click(event) {
//  if ($w('#moreRevYorN').selectedValue === null) {
//      $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('#moreRevYorN').selectedIndex
 if(selectedValue ===0) 
        {$w('#funnelQuiz01').changeState("q7")}
 if(selectedValue ===1) 
        {$w('#funnelQuiz01').changeState("looksGood")} 
}

export function q6revBack_click(event) {
    $w('#funnelQuiz01').changeState("q5revenue") 
}

export function q6cliSubmit_click(event) {
//  if ($w('#moreClientsYorN').selectedValue === null) {
//      $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('#moreClientsYorN').selectedIndex
 if(selectedValue ===0) 
        {$w('#funnelQuiz01').changeState("q7")}
 if(selectedValue ===1) 
        {$w('#funnelQuiz01').changeState("looksGood")}  
}

export function q6cliBack_click(event) {
    $w('#funnelQuiz01').changeState("q5clients")
}

//----------------------FUNNEL QUIZ FORM Sate 7----------------------//

export function q7submit_click(event) {
//   if ($w('#slider4').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('#bounceRate').selectedIndex
 if(selectedValue ===4) 
        {$w('#funnelQuiz01').changeState("looksGood")}
 else
        $w('#funnelQuiz01').changeState("q8") 
 //  if ($w('#slider4').value > 3){
 //      $w('#funnelQuiz01').changeState("q8");}
 //  if ($w('#slider4').value < 3){
 //      $w('#funnelQuiz01').changeState("sorry");}
 
}
export function q7back_click(event) {
    $w('#funnelQuiz01').changeState("q6") 
}

//----------------------FUNNEL QUIZ FORM Sate 8----------------------//

export function q8submit_click(event) {
    $w('#funnelQuiz01').changeState("q9") 
}

//----------------------FUNNEL QUIZ FORM Sate 9----------------------//

export function q9submit_click(event) {
    $w('#funnelQuiz01').changeState("q10") 
}

export function q9back_click(event) {
    $w('#funnelQuiz01').changeState("q8")  
}

//----------------------FUNNEL QUIZ FORM Sate 10----------------------//

export function q10submit_click(event) {
    $w('#funnelQuiz01').changeState("q11") 
}

//----------------------FUNNEL QUIZ FORM Sate 11----------------------//

export function q11submit_click(event) {
    $w('#funnelQuiz01').changeState("endState") 
}

//END OF QUIZ CODE//

Any help will be greatly appreciated, thanks in advance!

anon72313111 · August 14, 2020, 7:23am

Hey Beckett

The answers are not being recorded because you’re not capturing the answers, why not defining a variable as an object with the questions numbers as its keys and the answers as their values. Example:

let record = {
    firstQ: {
        answer chosen: // add the value here when answering,
        correct: false
    }
}

/* Here is a question.
Q1: What's the result of multiplying 2 by 4?
- 5.
- 8.
- 4.

When choosing any answer, run a check (which you already do) and capture the answer. */

let answer = $w('#options').selectedIndex;
record.firstQ.answer = answer;

if (answer === 8) {
    record.firstQ.correct = true;
}

And do the state transition as usual.

Now regarding the last slide, I don’t see anything wrong in your code, perhaps because I don’t know what each element ID is. Please add some screenshots with the last state’s elements IDs so I can help further.

Hope this helps!~
Ahmad

beckettla · August 14, 2020, 9:16pm

Hey Ahmad, thanks for your reply!

Not to worry about the end state, I figured out a workaround.

So, to clarify - I thought the answers were supposed to be recorded automatically with Wix forms, but you’re saying that if I add the answers to the code, then they’ll be recorded in the submission table? I just want them to show up in the submissions.

No answers are right or wrong, so would you suggest just listing all the possible choices here?:

let record = {
    firstQ: {
        answer chosen: 0, 1, 2,
    }
}
        
let answer = {
    $w('#radioGroup1').selectedIndex;
        record.firstQ.answer = answer;
}

Or something?

Thanks again!

anon72313111 · August 15, 2020, 7:37am

@beckettla Yeah, sure … But since I don’t know the elements IDs for sure, you might need to double check them. But before that, you have some elements that are placed outside the page’s onReady() function, please move them inside it to avoid any errors.

$w.onReady(() => {
    let answers = {};
    
    $w('#progressBar1').targetValue = 11;
    $w('#progressBar1').value = 1;
    $w('#progressBar2').targetValue = 11;
    $w('#progressBar2').value = 2;
    $w('#progressBar3').targetValue = 11;
    $w('#progressBar3').value = 3;
    $w('#progressBar4').targetValue = 11;
    $w('#progressBar4').value = 4;
    $w('#progressBar5').targetValue = 11;
    $w('#progressBar5').value = 5;
    $w('#progressBar6').targetValue = 11;
    $w('#progressBar6').value = 5;
    $w('#progressBar7').targetValue = 11;
    $w('#progressBar7').value = 6;
    $w('#progressBar8').targetValue = 11;
    $w('#progressBar8').value = 6;
    $w('#progressBar9').targetValue = 11;
    $w('#progressBar9').value = 7;
    $w('#progressBar10').targetValue = 11;
    $w('#progressBar10').value = 8;
    $w('#progressBar11').targetValue = 11;
    $w('#progressBar11').value = 9;
    $w('#progressBar12').targetValue = 11;
    $w('#progressBar12').value = 10;
    $w('#progressBar13').targetValue = 11;
    $w('#progressBar13').value = 11;
    let isValid = $w("#input13").valid;
})

Next, you need to register the selected values in an array, use the onClick() event handler that you’re already using save the values.

export function q1submit_click(event) {
    let q1 = $w('#orgYorN').value;
    answers.q1 = q1;
    
    // And do the rest as you do
    let selectedValue = $w('#orgYorN').selectedIndex;
    if(selectedValue ===0) {
        $w('#funnelQuiz01').changeState("q2")
    } else {
        $w('#funnelQuiz01').changeState("sorry")
    }
}

At the end, you’ll end up with an object that contains all the answers. It’ll look something like this:

console.log(answers);

/*
answers = {
    q1: "Yes",
    q2: "No I don't want that",
    q3: "...",
    q4: "...",
    ...
    ...
    q11: "Some answer",
    q12: "The final answer"
}
*/

Hope you find this useful.

beckettla · August 17, 2020, 10:50pm

@ahmadnasriya Thanks again for all your help!

A couple of issues, though.

#1: I moved the progress bar states like you suggested, and for some reason, that unlinked my form submissions. For some reason, the error of it being outside of a function only came up on the mobile version. Mobile capture being very important for my purposes, naturally, putting it on the onReady function at least got the form to work, but now I’m not capturing emails anymore for some reason…

What could the reason for that be?

#2: I tried adding the code for the answers, but it doesn’t work… When I try to run it, I get the error:

Here’s my code:

var selectedValue
var answers

export function q1submit_click(event) {
 let q1 = $w('#orgYorN').value;
        answers.q1 = q1;

        selectedValue = $w('#orgYorN').selectedIndex
 if(selectedValue ===0) 
        {$w('#funnelQuiz01').changeState("q2")}
 if(selectedValue ===1) 
        {$w('#funnelQuiz01').changeState("sorry")}

}

anon72313111 · August 18, 2020, 6:20am

@beckettla …

#1: The progress bar should NOT affect the flow of the quiz, it does only show how far the user went. The reason why you get an error only on mobile means that one or more of your elements are hidden, use the “hidden” icon in the left side bar to see what elements are hidden and show them back.

#2: When I defined the “answers” variable, I defined it as an empty object, while you’re not defining it as an object, also, I put it in the page’s onReady() function while it needs to be on the upper scope in order to be able to modify it inside the event handlers below, so I suggest that you move the declaration of the answers variable to the upper scope.

let answers = {};

$w.onReady(() => {
    // The progress bar things ....
})

// Your static event handlers ....

Try it and let me know if it worked.

beckettla · August 23, 2020, 9:02pm

Finally was able to come back to troubleshooting this.

No, adding the answers definition to the onReady function didn’t work. I’m still getting the error: “TypeError: cannot set property ‘q1’ of undefined”

And I tried unhiding all elements on mobile, but I’m still not capturing any emails.

anon72313111 · August 23, 2020, 9:12pm

Hey again, notice my answer, the ‘answers’ variable is declared outside the onReady function, in the top scoop. It’s crucial to be accessible by codes outside the onReady function.

Try it out, and if it didn’t work, I’ll troubleshoot your page and get it to work (for FREE of course).

beckettla · August 23, 2020, 11:41pm

Ohhhh, my apologies.

Ok, I moved the declaration, and the code is working now but still not recording the answers. The submissions table remains totally blank.

Thank you so much for all your help with this, I really appreciate it!

anon72313111 · August 23, 2020, 11:49pm

The answers are probably recorded, but are not being displayed on the table … Anyways, contact me on my website (link in my profile) so we can sort this out.

Topic		Replies	Views
Need help with Wix Query for quiz Ask the community code , question	3	121	April 26, 2021
Set up form with conditional steps Ask the community code , question	15	1173	April 18, 2021
Multi-step form - 'go to step' code Ask the community code , question	6	355	December 20, 2021
If else conditions for a dropdown menu. Ask the community code , question	2	243	January 20, 2023
Multiple outcomes quiz Ask the community code , wix-stores , question	3	747	June 26, 2018

Help with custom multistep form

Related topics