Use array value to source an img file for use in DIV element

Question

I've tried searching for answers and testing this but cannot get it to work.

I'm creating a random question generator quiz for myself to help with Uni studies. I have the random question thing working ok but I'm trying to get a DIV element to display an image if required to go along with the question.

I have a multi dimension array holding the data for the question, choices, answer, and the name of the jpg file...see example below (and yes, I know these are really simple questions in the array but they are there just for testing. The actual content will be about Microeconomics) .

var questionsArray = [
    ["What is 10 + 4?", "12", "14", "16", "B", "This is correct","This is incorrect","pic","test.jpg"],
    ["What is 20 - 9?", "7", "13", "11", "C", "This is correct again","This is incorrect","pic","test.jpg"],
    ["What is 7 x 3?", "21", "24", "25", "A", "This is so correct","This is incorrect","pic","test.jpg"],
    ["What is 8 / 2?", "10", "2", "4", "C", "Too good","This is incorrect","pic","test.jpg"]
];

In the HTML section I have a number of DIV elements, one with the ID of "image" and in the script I have code which places the question and choices etc into one of DIV elements, the result into another and I'm trying to get the image to show in the "image" DIV element.

Here is the code HTML code and script (which is held in a separate .js file)which displays the question and answers etc...it's not pretty but it does what I need :)

HTML:

 <style>
    div#test{ border:#000 1px solid; padding:10px 40px 40px 40px; }
    div#answer{ border:#000 1px solid; padding:10px 40px 40px 40px; }
    div#image{ border:#000 1px solid; padding:10px 500px 500px 500px; }
    </style>
    <script src="q_list.js">
    </script>
    </head>
    <body>
    <h2>For each question, choose the option which you feel is correct.</h2>
    <h2>At the end of the test you will be given your score. Good luck!</h2>
    <h2 id="test_status"></h2>
    <div id="test"></div>
    <div id="answer"></div>
    <div id="image"></div>

Script (some of)

function renderQuestion(){
    test = _("test");
    if(pos >= randomQuestions.length){
        test.innerHTML = "<h2>You got "+correct+" of "+randomQuestions.length+" questions correct</h2>";
        _("test_status").innerHTML = "Test Completed";
        _("answer").innerHTML = "<h3>To redo the test, press F5 function key or click Refresh icon on your browser</h3>";
        pos = 0;
        correct = 0;
        return false;
    }
    _("test_status").innerHTML = "Question "+(pos+1)+" of "+randomQuestions.length;
    question = randomQuestions[pos][0];
    chA = randomQuestions[pos][1];
    chB = randomQuestions[pos][2];
    chC = randomQuestions[pos][3];
    cor_answer = randomQuestions[pos][5];
    incor_answer = randomQuestions[pos][6];
    pic = randomQuestions[pos][7];
    picture = c = randomQuestions[pos][8];
    test.innerHTML = "<h3>"+question+"</h3>";
    test.innerHTML += "<input type='radio' name='choices' value='A'> "+chA+"<br>";
    test.innerHTML += "<input type='radio' name='choices' value='B'> "+chB+"<br>";
    test.innerHTML += "<input type='radio' name='choices' value='C'> "+chC+"<br><br>";
    image.innerHTML += document.getElementById('image').src = picture;
    test.innerHTML += "<button onclick='checkAnswer()'>Submit Answer</button>";

The second last line is the one that is giving me trouble. On the DIV ID="image" element, I just get the words "test.jpg" and not the actual image.

Any ideas?

All other things aside, I think you're misusing arrays here. Instead of a multi-dimensional array, your source data should be an array of objects. — sg.cc
– sg.cc, Commented Oct 7, 2015 at 15:21
You are setting the src of the #image element. But that element is a div and not an img. — Gabriele Petrioli
– Gabriele Petrioli, Commented Oct 7, 2015 at 15:26
sg.cc I don't know what you mean by an array of objects. I'm very very new to javascript and most of the code was from another open source which I have tried to modify to do what I needed. — Paul.T
– Paul.T, Commented Oct 7, 2015 at 15:53
Gaby...same for your comment, not sure what you mean so don't know how to correct it. When I try to look up answers, they are usually part of someone's code which has a whole heap more going on that I can't follow. — Paul.T
– Paul.T, Commented Oct 7, 2015 at 15:55

Anonymous0day · Accepted Answer · 2015-10-07 16:52:39Z

1

From this line code :

 <div id="image"></div>

Change by this :

<img id="image"></img>

answered Oct 7, 2015 at 16:52

Anonymous0day

3,0521 gold badge16 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Paul.T Over a year ago

Ah....got it. Made that change and it worked fantastically! Thank you Anonymous0day, Gaby and sg.cc for your help. Greatly appreciated.

Collectives™ on Stack Overflow

Use array value to source an img file for use in DIV element

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related