Backend code(data.js) doesn't work in dynamics page?

Ask the community
,
1

Hi all, I have an issue of runing my data.js in the backend on my dynamic page. It does not work and it prevent my frontend code from working also if I important the function from my backend folder. How can I make my backend code work in this case?
How the page work:

1915×941 58.3 KB

I have a dynamics pages of English practices. After a visitor practice and he/she click the submit button to submit the answers. The submitted answer are then inserted in into the database collection “Practice1” using the frontend code see attachment, the page will be reload, then the lightbox shows up. I want to use my backend code, see in the code snipet, to compute the score and give feedback on which question they made mistakes in that lightbox. I have attached the page and codes in the attachment. Thank you very for any help and suggestions on how to fix the issue!

Frontend code on the dynamics pages

//frontend code
import {Practice1_afterInsert} from 'backend/data';
import wixWindow from 'wix-window';
import wixData from 'wix-data';
import wixLocation from 'wix-location';
export function button1_click(event,$w) {
//insert user inputs to "Practice1" data collection
wixData.insert('Practice1',{
 'title': $w("#text57").text,'q1':$w('#radioGroup1').value,'q2':$w('#radioGroup5').value,'q3':$w('#radioGroup7').value
                ,'q4':$w('#radioGroup12').value,'q5':$w('#radioGroup2').value,'q6':$w('#radioGroup6').value,'q7':$w('#radioGroup8').value
                ,'q8':$w('#radioGroup11').value,'q9':$w('#radioGroup3').value,'q10':$w('#radioGroup4').value,'result':0,
 'validQ1':"cor",'validQ2':"cor",'validQ3':"cor",'validQ4':"cor",'validQ5':"cor",'validQ6':"cor",'validQ7':"cor"
                ,'validQ8':"cor",'validQ9':"cor",'validQ10':"cor"
                })
            $w('#dataset1').refresh();//reload the data
            //directing to another practice page
            wixLocation.to("/common-proper-n-questions/Practice-2");
            //Open the lightbox
            setTimeout(() => {
                wixWindow.openLightbox("Practice1"); // use your lightbox name here         
            }, 1000)
}

Backend code

export function Practice1_afterInsert(item, context) {
 let Sign=[];
 var Answer_CP=[];
 if (item.title==="Practice 1"){Answer_CP=["Common Noun","Common Noun","Common Noun","Proper Noun","Proper Noun",
 "Common Noun","Common Noun","Common Noun","Proper Noun","Common Noun"]}
 if (item.title==="Practice 2"){Answer_CP=["Proper Noun","Common Noun","Common Noun","Proper Noun","Common Noun",
 "Proper Noun","Proper Noun","Common Noun","Proper Noun","Common Noun"]}
 if (item.title==="Practice 3"){Answer_CP=["Proper Noun","Common Noun","Proper Noun","Common Noun","Common Noun",
 "Common Noun","Common Noun","Common Noun","Proper Noun","Common Noun"]}
 var submitted=[item.q1,item.q2,item.q3,item.q4,item.q5,item.q6,item.q7,item.q8,
                   item.q9,item.q10];
 var N=0;
    item.result=Score_CP(submitted,Answer_CP,N);
    Sign=Valid(submitted,Answer_CP,N);  
    item.validQ1=Sign[0];item.validQ2=Sign[1];item.validQ3=Sign[2];item.validQ4=Sign[3];item.validQ5=Sign[4];
    item.validQ6=Sign[5];item.validQ7=Sign[6];item.validQ8=Sign[7];item.validQ9=Sign[8];item.validQ10=Sign[9];
return item 
 //TODO: write your code here...
}

function Valid(submitted,Answer_CP,N){
 let Sign=[];
for(N=0;N<submitted.length;N++){
 if (submitted[N]===Answer_CP[N]){
        Sign[N]="cor";}
 if(submitted[N]!==Answer_CP[N]) {
        Sign[N]="inc";}
    }
return Sign 
}
function Score_CP(item,A,N){
 var result=0;
 for(N=0;N<A.length;N++){
 if(item[N]===A[N]){
            result++;
        }
    }
return result.toString();   
}
2

Since your intent is to return something to the specific user, and not to alter your database, you should create a separate backend module, and import that instead to run alongside the insert().

There’s no need to import hooks from data.js in order for them to work, and you’re never calling the function in frontend anyway so you can delete the first import.

Since you are sending several items, you should console.log() what you’re feeding to the insert function to make sure it logs everything reliably. There is also no need to refresh your dataset since you are redirecting to another page anyway.

Also, a couple notes about ECMAScript6:

  1. With for loops, you can now write them as for (let N = 0; N < A.length; N++) to make your code more concise and readable. You do not have to set N as a variable outside the loop.

  2. There’s no point to the way you are switching between var and let . The point of let and const is that they create more readable ways about variables that tells you more about their intended scope and purpose. Let should therefore be used to completely replace var , as it is more informative and readable, with the only difference/excception being their ability to escape function blocks. For example:

function foo() {
    for (let i = 0; i < 10; i++) {
        console.log(i);    // 1,2,3,4,5,6,7,8,9
    }
    console.log(i);    // 'undefined'
}

function bar() {
    for (var i = 0; i < 10; i++) {
        console.log(i);    // 1,2,3,4,5,6,7,8,9
    }
    console.log(i);    // 9
}