Delay on show text via onClick

Ask the community
,
1

I’m trying to create a “quiz” that will show an answer (retrieved from a datbase) depending on which radio button one selects.
I’ll do multiple per page with the 2nd and further hidden at first until one rpesses a next button.’

ISSUE:
It seems that the answer DOESN’T show when 1st clicked, but if you click another answer, or double click, the radio button, it shows correctly. :thinking:

I can send a link of the page, but is there a way to send privatly if one asks?

import wixData from 'wix-data';

let answer;

$w.onReady(function () {

    // reveal question 2
    $w('#btnNext1').onClick((event) => {
        $w('#boxQ2').expand();
        $w('#btnNext1').hide();
    });
    // reveal question 3
    $w('#btnNext2').onClick((event) => {
        $w('#boxQ3').expand();
        $w('#btnNext2').hide();
    });
    // reveal question 4
    $w('#btnNext3').onClick((event) => {
        $w('#boxQ4').expand();
        $w('#btnNext3').hide();
    });
    // reveal question 5
    $w('#btnNext4').onClick((event) => {
        $w('#boxQ5').expand();
        $w('#btnNext4').hide();
    });
    // reveal question 6
    $w('#btnNext5').onClick((event) => {
        $w('#boxQ6').expand();
        $w('#btnNext5').hide();
    });
});

// retrieve answer from specific databse
export function getAnswer(rdoSetValue, databaseName) {
    let question = databaseName;
    wixData.query(question)
        .eq("value", rdoSetValue)
        .find()
        .then((results) => {
            if (wixData.query(question).eq("value", rdoSetValue)) {
                let items = results.items;
                let item = items[0];
                answer = item.answerText;
                return answer;
            } else {
                console.log("oops");
            }
        })
        .catch((error) => {
            let errorMsg = error.message;
            let code = error.code;
            console.log(errorMsg + " + code= " + code);
        });
}

// Expand and show answer text
export function displayAnswers(databaseName, radioButtonSet, answerBox, answerText) {
    const rdoSet = radioButtonSet;
    let rdoSetValue = rdoSet.value;
    getAnswer(rdoSetValue, databaseName);
    if (rdoSet.value === rdoSetValue) {
        answerBox.expand()
        answerText.html = answer;
    } else {
        answerBox.collapse()
    }
}

// onClick question 1
export function rdbQ1_click(event) {
    displayAnswers("kidsQuiz1", $w('#rdbQ1'), $w('#boxA1'), $w('#txtA1'));
}
//onClick question 2
export function rdbQ2_click(event) {
    displayAnswers("kidsQuiz2", $w('#rdbQ2'), $w('#boxA2'), $w('#txtA2'));
}
// onClick question 3
export function rdbQ3_click(event) {
    displayAnswers("kidsQuiz3", $w('#rdbQ3'), $w('#boxA3'), $w('#txtA3'));
}
// onClick question 4
export function rdbQ4_click(event) {
    displayAnswers("kidsQuiz4", $w('#rdbQ4'), $w('#boxA4'), $w('#txtA4'));
}
// onClick question 5
export function rdbQ5_click(event) {
    displayAnswers("kidsQuiz5", $w('#rdbQ5'), $w('#boxA5'), $w('#txtA5'));
}
// onClick question 6
export function rdbQ6_click(event) {
    displayAnswers("kidsQuiz6", $w('#rdbQ6'), $w('#boxA6'), $w('#txtA6'));
}
2

Didn’t fully understand yet the entire logic but one thing I note is that you invoke " getAnswer()" in “displayAnswers()” without “await”, might be one of the issues.