Random picture with corresponding data from database on a dynamic page

Hi guys,
I have prepared a dynamic page to practise vocabulary. The idea is to have on the page 1) image1, 2) input1 (to write the correct word shown on the picture), 3) button1 to verify if the word is correct , 4) text1 showing true or false, 5) hidden text2 with the correct answer for the if/else condition and 6) a button2 “next picture”. Database with images and texts is ready. Now I struggle with the JavaScript.
I need to show pictures from database randomly. I found several discussions and was able to randomise the picture, but the text does not follow the data from dataset, so the student sees a person, a house, a tree, but the correct answer is still “cat”.
Can anybody help me with the code? I would be the happiest guy on the planet.

I won’t have time to answer the question at the moment (off to bed) but i might be able tondonit later.
1 question.
Are you using 1 database? With multiple colums with the text, image and the answer in the same database?
Ifso then it won’t be that hard i gues to figure it out.
Also,
When randomizing the image how do you do it?
And last but not least.
Can you provide the code you are currently using?
Add it in a nice codeformat on the page not a screenshot.

Kind regards,
Kristof.

Hi Kristof,
thanks for the interest! Yes the database is only one with multiple colums (image, answer) and rows.
This is the code I have for the moment. They are actually very amateurly joined two ideas together, so I guess there will be the problem… And one more thing: For the moment I don’t have the “next word” button.

$w.onReady( function () {
});
function check_answer(inputVal, answerVal, resultEl) {
if (inputVal.toLowerCase() === answerVal.toLowerCase()) {
resultEl.text = “correcto” ;
} else {
resultEl.text = “incorrecto” ;
}
}
export function button1_click(event) {
check_answer($w( “#input1” ).value, $w( “#text2” ).text, $w( “#text1” ));
}

import wixWindow from ‘wix-window’ ;
import wixData from ‘wix-data’ ;

$w.onReady( async function () {

if (wixWindow.rendering.renderCycle === 1 ) {
let res = await wixData.query( “vocabulary” ).find();
let items = res.items;
let count = items.length;
let rnd = Math.floor(Math.random() * count);
$w( ‘#image1’ ).src = items[rnd].image; }
});
wixData.query( “vocabulary” )
.find()
.then( (results) => {
let randomNumber = Math.floor((Math.random() * results.items.length));
let randomItem = results.items[randomNumber];
})

  1. First lesson!
    The shown code of you is (NOT) the right format! That was not, what Kristof was asking for.

Here an example, how to do it right…

import wixWindow from 'wix-window';
import wixData from 'wix-data';

$w.onReady(function () {console.log("CODE-STARTED")
 let myQuery = wixData.query("vocabulary")
 
    myQuery.find()
    .then((res) => {console.log(res)
 let randomNumber =  Math.floor((Math.random() * res.items.length)); 
 let randomItem = res.items[randomNumber];
        console.log("randomNumber = ", randomNumber)
        console.log("randomItem = ", randomItem)

 if (wixWindow.rendering.renderCycle === 1) {console.log("Render-Cycle = 1")
 let items = res.items;
 let count = items.length;   
 let rnd = Math.floor(Math.random() * count);

            console.log("items: ", items)
            console.log("count: ", count)
            console.log("rnd: ", rnd)

            $w('#image1').src = items[rnd].image;} 
        }
    })
});


function check_answer(inputVal, answerVal, resultEl) {
 if (inputVal.toLowerCase() === answerVal.toLowerCase()) {
        resultEl.text = "correcto";
    } 
 else {resultEl.text = "incorrecto";}
}

export function button1_click(event) {   
    check_answer($w("#input1").value, $w("#text2").text, $w("#text1"));
}
  1. Second lesson! If you want to understand your own CODE, try to use much more CONSOLE-LOGs! This little console-helper, will show you the right way to code!

  2. Last lesson!
    Just to put some parts of CODE together, found somewhere in the world-wide-web, will not solve your problem —> you will have to understand your own CODE.

To do it the best way, you should do a plan, of your CODE, something like a little overview…

  1. Starting CODE with —> onReady()
  2. Quering the database
  3. using the results of the found items to define some variables and sonstants
  4. which step next ?
  5. what to do next?
  6. what do i want to have as end-result…
  7. and so on…

As you can see, i already have tried to modify your code. This shall not be the end-code, of course you have to modify and correct it even more.

In every of your CODES, you have to set the imports to the very top of your CODE!!!

import wixWindow from 'wix-window';
import wixData from 'wix-data';

following by “global-variables”, for example or constants…(if you use some)

var myGlobalVariable
const myGlobalConst

and then directly after these two, you should start with —> $w.onReady().
This will be the starting point of your CODE.
And of course you should use just —> ONE <— onReady()-function in your page!

$w.onReady(function() {console.log("CODE-STARTED")}

I think, Kristof will do the rest of lessons to learn :wink:

Good luck!

(And remember —> use more console-logs! You can see all logs in the Wix-Editor on the very bottom, or you can do the same, when you press F-12 in GOOGLE-CHROME for example.)

2 Likes

The code is olmost right but as you say there are 2 codes combined.
About the code layout.
Start with imports at the top of the page.
Wix imports above own moduke imports(you don’t use own modules yet but just so you know.
Its easyer to read.
Second, their always is an $w.onready on the page to start.
All code in it is run when the page loads.
Their only can be one $w.onready on the page.
Third, about the 2 combined code.
You made 2 times a random number, 1 time for the image source and 1 time for the other 2 items.
Add the other to items in the codeblock where the image source is set with the random number and use the same random number for it “rnd”

Kind regards,
Kristof.

Thank you both, guys! That was helpful, I used your cleaned code, Dima. And if I check it correctly it already contains the corrections, you mentioned, Kristof. But still this will be probably to complicated for me to solve as I cannot find the part which is wrong. Image appears randomly, but the other items are not linked to the randomly shown image in accordance to the database.:disappointed_relieved:

What you shoild do.
Combine this:

if (wixWindow.rendering.renderCycle === 1) {
let res = await wixData.query("vocabulary")
.find();
let items = res.items;
let count = items.length;
let rnd = Math.floor(Math.random() * count);        
$w('#image1').src = items[rnd].image;     
}});wixData.query("vocabulary")  
.find()  
.then( (results) => {
let randomNumber =  Math.floor((Math.random() * results.items.length)); 
let randomItem = results.items[randomNumber];    })

Into one function.
As i told you, u are using 2x a different random number.

1 called rnd
1 called randomNumber.

Make sure you only use 1 random number.
If you can’t figure it out tomorrow i wil change the code for you but you will better understans if you try yourself :slight_smile:

Kind regards,
Kristof.

Good morning, i am on the same opinion like Kristof.
You should first try to solve it by yourself. Learning by doing is one of the best methods to learn.
A good programmer never gives up! Or if he gives up, he already tried 100-different code-versions to bring his project to work. :wink:

And as i told you —> use much more —> CONSOLE-LOGs! This should be your best friend, when you do some codings!

Why you should using them and what are they for?
-console-logs gives you back results of your coded scripts
-with the help of console-logs you will get a better overview over your own code
-through console-logging you will understand all the interactions much better
-trough these logs you will discover new code-abilities/possibilities
-and much more!

Give console-logs a chance :grin:

Thanks guys, I appreciate your help. Actually I consider myself mainly a teacher of Spanish and not a programmer, but I will give it a shot and will see if I succede.

The fact, that you are a spanish-teacher is already a sign for some intelligence :wink:. So i am sure, you will be able to bring this little code-snipet to the end.
Surely you will also have some teacher-friends, which teaches programming :grin:

But if you won’t be able to figure it out, just bump this post up, by inserting your current unresolved question here into this post.

Good luck & happy coding!:wink: