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?