dimanche 29 mai 2022

How do you display an image with a source attached to an object? The object (question) is selected randomly and images should change with them

I have an array of objects which are questions. This is for a random question quiz. Basically, when one question is randomly selected, I thought all of the attributes would go with it (if "called" correctly). I am not sure how to display the image from the object when the question text (q) displays.

const questionBank = [
{
    q: "This is question 1's text",
    options:['1','2','3','4', '5'],
    answer:4,
    imgURL: 'http://drive.google.com/uc?export=view&id=googleDriveId',
},
{
    q: "question 2 will go here",
    options:['7','6','4'],
    answer:0,
    imgURL: 'http://drive.google.com/uc?export=view&id=differentDriveId',
}

function getNewQuestion(){
    const question = document.querySelector(".question");

    //set question text
    question.innerHTML = currentQuestion.q;

    //add image to question 
    //document.querySelector('.question').appendChild(img); (attempted, did not work)
    //var img = new Image(); (attempted, did not work)
    //img = document.createElement("img");  (attempted, did not work)
    //img.src = document.querySelector('.imgUrl'); (attempted, did not work)

I think that is all the relevant code.




Aucun commentaire:

Enregistrer un commentaire