Problem in Wix velo code, while using multi-state boxes.

Ask the community
, ,
1

I’m currently developing an e-learning calculator which, on answering the questions, mails the users the summary of the calculations, using Wix multi-state boxes, velo code, and SendGrid for sending emails. I’ve written the code for the multi-state boxes and referred chatgpt and SendGrid documentation for the rest of the code. But, after incorporating the whole code, my multi-state boxes stopped working. Below is the code-

import {sendEmail, sendEmailWithRecipient} from 'backend/email';
//question1 - Course length
$w.onReady(function () { 
    let courseLength;
    let devTime;
    let devCost;
   
//    function getCourseLength() {
      
       $w('#radio1click').onClick(() => {  
        $w('#opt1statebox').changeState("opt1expanded");
        $w('#opt2statebox').changeState("opt2collapsed");
        $w('#opt3statebox').changeState("opt3collapsed");
        $w('#opt4statebox').changeState("opt4collapsed");
        $w('#tipstatebox').changeState("opt1state");
       courseLength = parseInt($w('#iltInput').value) * 60;
    })
    
    $w('#radio2click').onClick(() => {
        $w('#opt2statebox').changeState("opt2expanded");
        $w('#opt1statebox').changeState("opt1collapsed");
        $w('#opt3statebox').changeState("opt3collapsed");
        $w('#opt4statebox').changeState("opt4collapsed");
        $w('#tipstatebox').changeState("opt2state");
         let words = parseInt($w('#scriptInput').value);
        courseLength = Math.round(words * 0.006666666666666667);
    })

    $w('#radio3click').onClick(() => {
        $w('#opt3statebox').changeState("opt3expanded");
        $w('#opt1statebox').changeState("opt1collapsed");
        $w('#opt2statebox').changeState("opt2collapsed");
        $w('#opt4statebox').changeState("opt4collapsed");
        $w('#tipstatebox').changeState("opt3state");
        let slides = parseInt($w('#slideInput').value);
       courseLength = Math.round(slides * 0.45454545454545453);
    })

    $w('#radio4click').onClick(() => {
        $w('#opt4statebox').changeState("opt4expanded");
        $w('#opt1statebox').changeState("opt1collapsed");
        $w('#opt2statebox').changeState("opt2collapsed");
        $w('#opt3statebox').changeState("opt3collapsed");
        $w('#tipstatebox').changeState("opt4state");
       courseLength = parseInt($w('#courseLengthInput').value);
    })
//    }
        

 
    //question 2 -Development Time

    function getDevelopmentTime() {
       
    }
    

   //question 3- Development Cost

   function getDevelopmentCost() {
        
   }

     
// function to send summary email to user
  
function sendFormData() {
  const subject = `E-Learning Calculator`;
  const body =  `Course Length: ${courseLength} minutes `;
  const recipient = $w("#emailInput").value;
 
  sendEmailWithRecipient(subject, body, recipient)
    .then(response => console.log(response)); 
}
});

here is the image of the question. Each radio button is a separate multi-state box, on clicking, which expands to a specific input text box, that is further used in the sendFormData function to email the users. I’ve just tried it for the first question. I need to input courselength from the function getCourseLength and return it so that I can use it in the email function. But I am unable to incorporate this idea. Currently, neither the email function is working nor can I return the course length. Could someone please tell me why are my multi-state boxes not working after incorporating the further code?

2

Did you check the CONSOLE for → error-logs?
Which error-message do you get?

You should work much more with console-logs, if you want to get it to work.

3

Hey, Thank you for responding, haven’t checked this yet, will check it. Thank you for the piece of advice.