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. 🤔
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'));
}
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.