Writing and reading from dataset to sum values

Hey there. I’m trying to build a quiz where every question has a radio button answer with different numeral values for their options. What I’d like to do is to be able to sum all the values of the selected choices in a field of the dataset called Score, to later be able to redirect the user to different links depending on their total score (similar to a personality test).

I was trying to use wixData.insert inside a radioGroup change event, but it’s not working and I’m not very experienced with databases.

export function radioGroup1_change(event) {
    let answer1 = {
     "q1": $w("#radioGroup1").value
    }
    wixData.insert("QAQuiz", "answer1",)};

Could you pease help me on how to do this?

Thanks.

You should do it differently.
But first are you saving the quiz using dataset with no code?
Do you save the quiz on a submit button click or on every input change?
Do you use custom form or one of the ready-made WixForms?

I am saving the quiz with a submit button. I tried saving with an insert funcion for every change event of every radio button, but for some reason the value is inserted as a string rather than as a number, so I am now using a submit button at the end of the quiz.

Each question of the quiz is in a slide of a slideshow box, and is just a radioGroup - so I’m not really using a form, rather a group of inputs in different slides.

I also tried adding a beforeInsert hook to my collection and added a sum column, but it’s still always empty after submitting the answes.

Instead of reading and writing to a dataset on every answer (which is inefficient at best) you could instead save a local score variable into a local or session storage container and then just update it from there. This will give you persistent (or semi persistent) access to the variable and you can change or update it without too much overhead. wix-storage - Velo API Reference - Wix.com

That seems like a great idea but I cannot figure out how to set the item and then update the value each time the change event happens for each radio button

  1. Is value a number? control it.
  2. Is the field(q1) number in the database? control it. If the field is boolean you need to use true - false .
  3. Convert the code to number with the Number function.
let answer1 = {
      "q1": Number($w("#radioGroup1").value)
     }

  1. If you have created collection for migrate data on switching to other pages. You can use local storage instead of this.

@ann62042 You can reference the article linked in my last comment to see how to set, call, and update local storage variables. To change them you just need to update the values in the onChange function. onChange - Velo API Reference - Wix.com

To access the value that you set up for the radio button you would just call the .value prop value - Velo API Reference - Wix.com

an example of this in code without import statements would be

$w("#radioButton").onChange(() => {
    let val = $w("#radioButton").value
    let item = local.getItem("key")
    let sum = val + item // call JS Number function if saved as a string
    local.setItem("key", sum) // call JSON.stringify() if you want to save as string 
})
1 Like

@gelecegiyazmak They both are numbers!

Thanks @amotor ! Although the code is super long, this helped me a lot and it seems to work. I’m sure there is a cleaner way to code this, but this is what I have so far (just in case anyone is curious):

import wixLocation from 'wix-location';
import {local} from 'wix-storage';

$w.onReady(function () {
     $w('#questions').changeSlide(0);
     local.clear()
      });

export function a1_change(event) {
$w('#questions').next()
  let val = Number($w("#a1").value);
    let item = Number(local.getItem("key"));
    let sum = val + item; 
    local.setItem("key", sum);
    console.log(sum)
}

export function a2_change(event) {
$w('#questions').next()
  let val = Number($w("#a2").value);
    let item = Number(local.getItem("key"));
    let sum = val + item; 
    local.setItem("key", sum);
    console.log(sum)
}

export function a3_change(event) {
$w('#questions').next()
  let val = Number($w("#a3").value);
    let item = Number(local.getItem("key"));
    let sum = val + item; 
    local.setItem("key", sum);
    console.log(sum)
}

export function a4_change(event) {
$w('#questions').next()
  let val = Number($w("#a4").value);
    let item = Number(local.getItem("key"));
    let sum = val + item; 
    local.setItem("key", sum);
    console.log(sum)
}

export function a5_change(event) {
$w('#questions').next()
  let val = Number($w("#a3").value);
    let item = Number(local.getItem("key"));
    let sum = val + item; 
    local.setItem("key", sum);
    console.log(sum)
}

export function a6_change(event) {
$w('#questions').next()
  let val = Number($w("#a6").value);
    let item = Number(local.getItem("key"));
    let sum = val + item; 
    local.setItem("key", sum);
    console.log(sum)
}


export function a7_change(event) {
$w('#questions').next()
  let val = Number($w("#a7").value);
    let item = Number(local.getItem("key"));
    let sum = val + item; 
    local.setItem("key", sum);
    console.log(sum)
}

export function a8_change(event) {
$w('#questions').next()
  let val = Number($w("#a8").value);
    let item = Number(local.getItem("key"));
    let sum = val + item; 
    local.setItem("key", sum);
    console.log(sum)
}

export function a9_change(event) {
$w('#questions').next()
  let val = Number($w("#a9").value);
    let item = Number(local.getItem("key"));
    let sum = val + item; 
    local.setItem("key", sum);
    console.log(sum)
}

export function a10_change(event) {
$w('#questions').next()
  let val = Number($w("#a10").value);
    let item = Number(local.getItem("key"));
    let sum = val + item; 
    local.setItem("key", sum);
    console.log(sum)
}

export function a11_change(event) {
$w('#questions').next()
  let val = Number($w("#a11").value);
    let item = Number(local.getItem("key"));
    let sum = val + item; 
    local.setItem("key", sum);
    console.log(sum)
}

export function a12_change(event) {
$w('#questions').next()
  let val = Number($w("#a12").value);
    let item = Number(local.getItem("key"));
    let sum = val + item; 
    local.setItem("key", sum);
    console.log(sum)
}

export function a13_change(event) {
$w('#questions').next()
  let val = Number($w("#a13").value);
    let item = Number(local.getItem("key"));
    let sum = val + item; 
    local.setItem("key", sum);
    console.log(sum)
}

export function a14_change(event) {
    let val = Number($w("#a14").value);
    let item = Number(local.getItem("key"));
    let sum = val + item;
    local.setItem("key", sum);
    console.log(sum);
    if (sum < 55) {
        wixLocation.to("/level1")
    }
    else {
         $w('#questions').next()
    }
}

export function a15_change(event) {
$w('#questions').next()
let val = Number($w("#a15").value);
    let item = Number(local.getItem("level2"));
    let sum = val + item; 
    local.setItem("level2", sum);
    console.log(sum)
}

export function a16_change(event) {
$w('#questions').next()
let val = Number($w("#a16").value);
    let item = Number(local.getItem("level2"));
    let sum = val + item; 
    local.setItem("level2", sum);
    console.log(sum)
}

export function a17_change(event) {
let val = Number($w("#a17").value);
    let item = Number(local.getItem("level2"));
    let sum = val + item; 
    local.setItem("level2", sum);
    console.log(sum);
    if (sum < 10) {
        wixLocation.to("/level2")
    }
    else {
         $w('#questions').next()
    }
}


export function a18_change(event) {
$w('#questions').next()
let val = Number($w("#a18").value);
    let item = Number(local.getItem("level3"));
    let sum = val + item; 
    local.setItem("level3", sum);
    console.log(sum)
}

export function a19_change(event) {
     $w('#questions').next()
let val = Number($w("#a19").value);
    let item = Number(local.getItem("level3"));
    let sum = val + item; 
    local.setItem("level3", sum);
    console.log(sum)
}


export function a20_change(event) {
let val = Number($w("#a20").value);
    let item = Number(local.getItem("level3"));
    let sum = val + item; 
    local.setItem("level3", sum);
    console.log(sum);
    if (sum < 6) {
        wixLocation.to("/level3")
    }
    else {
         $w('#questions').next()
    }
}


export function a21_change(event) {
$w('#questions').next();
let val = Number($w("#a21").value);
    let item = Number(local.getItem("level4"));
    let sum = val + item; 
    local.setItem("level4", sum);
    console.log(sum)
}


export function a22_change(event) {
$w('#questions').next();
let val = Number($w("#a22").value);
    let item = Number(local.getItem("level4"));
    let sum = val + item; 
    local.setItem("level4", sum);
    console.log(sum)
}

export function a23_change(event) {
let val = Number($w("#a23").value);
    let item = Number(local.getItem("level4"));
    let sum = val + item; 
    local.setItem("level4", sum);
    console.log(sum);
    if (sum < 12) {
        wixLocation.to("/level4")
    }
    else {
         wixLocation.to("/level5")
    }
}
1 Like

Just in case anyone needs something similar, I enhanced my code. It now looks like this:


import wixData from 'wix-data';
import wixLocation from 'wix-location';
import { local } from 'wix-storage';

$w.onReady(function () {
    $w('#questions').changeSlide(0);
    local.clear();
    setActions();
});

function setActions() {
    for (let i = 1; i <= 23; i++) { answers(i) }
}

function answers(i) {
    $w("#a" + i).onChange((event) => {
        if ([14, 17, 20, 23].includes(i)) { calculateAndRedirect("#a" + i, minFor(i), levelFor(i), i) } 
        else { collectAnswers("#a" + i, levelFor(i), i) }
    });
}

function collectAnswers(a, level, i) {
    nextQuestion(i);
    let val = Number($w(a).value);
    let item = Number(local.getItem(level));
    let sum = val + item;
    local.setItem(level, sum);
    console.log(sum)
}

function calculateAndRedirect(a, min, level, i) {
        let val = Number($w(a).value);
    let item = Number(local.getItem(level));
    let sum = val + item;
    local.setItem(level, sum);
    if (sum < min) {
           wixLocation.to("/" + level);
        local.setItem("score", sum);
        local.setItem("userLevel", level)
    } else {
        if (i === 23) { goToLevel5() } else {
            nextQuestion(i);
        }
    }
}

function nextQuestion(i) {
  let progress = Number(i);
    $w('#questions').next();
    $w('#progressBar').value = progress
    
}

function goToLevel5() {
    wixLocation.to("/level5")
}

function minFor(i) {
    if (i === 14) { return 60 }
    if (i === 17) { return 10 }
    if (i === 20) { return 6 }
    return 12
}

function levelFor(i) {
    if (i <= 14) { return "level1" }
    if (i <= 17) { return "level2" }
    if (i <= 20) { return "level3" }
   return "level4"
}

Thanks for the information!