Hi, I'm really hoping someone can help point me in the right direction here, I'm very new to all this and trying really hard to learn.
I am trying to create flashcards that pull information through from a database. on load I want it to load a random question that it pulls from the database, then on button click load another random question but only show 1 question at a time in my repeater. I have managed to do this but on button click, I can only get it to randomize it if I don't set a limit, as soon as I set it to only show 1 it won't pull through new questions from the database. Can anyone see where I am going wrong and help me set it right? Any help would be hugely appreciated, thank you!
// For full API documentation, including code examples, visit http://wix.to/94BuAAs
import wixData from 'wix-data';
$w.onReady(async function () {
$w("#myRepeater").onItemReady(($item, itemData, index) => {
$item('#ans').text = itemData.answer;
$item('#quest').text = "" + itemData.question;
});
let results = await wixData.query("MedicalFlashcards").limit(1).find();
let items = results.items;
console.log(items); // take a peek at the items
let shuffled = shuffleArray(items);
console.log(shuffled); // now see the shuffled array
$w('#myRepeater').data = shuffled;
$w('#myRepeater').expand();
});
$w("#shuffleButton").onClick (async function () {
$w("#myRepeater").onItemReady(($item, itemData, index) => {
$item('#ans').text = itemData.answer;
$item('#quest').text = "" + itemData.question;
});
let results = await wixData.query("MedicalFlashcards").limit(1).find();
let items = results.items;
console.log(items); // take a peek at the items
let shuffled = shuffleArray(items);
console.log(shuffled); // now see the shuffled array
$w('#myRepeater').data = shuffled;
$w('#myRepeater').expand();
});
function shuffleArray(array) {
for (let last = array.length - 1; last > 0; last--) {
const next = Math.floor(Math.random() * (last + 1));
// ECMAScript 2015 allows us to assign two variables at once.
// We can swap the values of two variables in one line of code.
[array[last], array[next]] = [array[next], array[last]];
}
return array;
}
// show question box
import wixWindow from 'wix-window';
$w('#myRepeater').show();
let fadeOption1 = {
"duration": 400,
"delay": 0,
};
//Show answer on hover
$w('#myRepeater').onMouseIn((event) => {
$w('#ans').show("fade",fadeOption1);
$w('#hoverBox').show("fade",fadeOption1);
$w('#quest').hide("fade",fadeOption1);
})
$w('#myRepeater').onMouseOut((event) => {
$w('#ans').hide("fade",fadeOption1);
$w('#hoverBox').hide("fade",fadeOption1);
$w('#quest').show("fade",fadeOption1);
})