How do i add images to this multi dimensional array?

JavaScript
1

this is what i got so far:

<!doctype html>
<?php  ?>
<html lang="en">

<head id="head">
	<meta charset="utf-8">
	<link rel="stylesheet" href="style.css">
		<title>quiz</title>
	<meta name="jsWorkouts" content="jsWorkouts">

</head>

<body >

<div class="wrap">

	<header>
		<nav>

		</nav>	 <!-- end nav -->

		
	</header> <!-- end hdr -->
	
	<div id="ctr" class="ctr">
	
		<div id="sidebar" class="sidebar"></div> <!-- end sidebar -->
		
		<h2 id="test_status"></h2>
		<div id="test" class="test">
		
		
		
		</div> <!-- end test -->
		

	
	</div> <!-- end ctr -->
	<footer >
	 
	</footer>
</div> <!-- end wrapper -->
<!-- script src="js/myJs.js"></script
<script src="js/quiz.js"></script>  -->

<script>

var pos = 0, test, test_status, question, choice, choices, chA, chB, chC, correct = 0;
var questions = [
    [ "Did you bring your umbrella", "yes", "no", "maybe", "B" ],
	[ "What about your raincoat", "yes", "no", "maybe", "B" ],
	[ "Would you like it to rain", "yes", "no", "maybe", "B" ],
	[ "are you running for the bus", "yes", "no", "maybe", "A" ]
];

function _(x){
	return document.getElementById(x);
}
function renderQuestion(){
	test = _("test");
	if(pos >= questions.length){
		
		
		test.innerHTML = "<h2>You got "+correct/questions.length*100+ " % of chances of enjoying a sunny day</h2>";
		
		_("test_status").innerHTML = "Test Completed";
		pos = 0;
		correct = 0;
		return false;
	}
	_("test_status").innerHTML = "Question "+(pos+1)+" of "+questions.length;
	question = questions[pos][0];
	chA = questions[pos][1];
	chB = questions[pos][2];
	chC = questions[pos][3];
	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>";
	test.innerHTML += "<button onclick='checkAnswer()'>Submit Answer</button>";
}
function checkAnswer(){
	choices = document.getElementsByName("choices");
	for(var i=0; i<choices.length; i++){
		if(choices[i].checked){
			choice = choices[i].value;
		}
	}
	if(choice == questions[pos][4]){
		correct++;
	}
	pos++;
	renderQuestion();
}
window.addEventListener("load", renderQuestion, false);
</script>

</body>
</html>

I wanted to add an additional variable for image so each question would have an image.
I started with

var pos = 0, test, test_status, question, choice, choices, chA, chB, chC, correct = 0 , img;

var img = [
	[imgs/one.jpg],
	[imgs/two.jpg],
	[imgs/three.jpg],
	[imgs/four.jpg],
	[imgs/five.jpg]
];
[/code] at the top, then 
[code]
var questions = [
  [ "Did you bring your umbrella", "yes", "no", "maybe", "B", "imgs/one.jpg" ],
	[ "What about your raincoat", "yes", "no", "maybe", "B","imgs/two.jpg"],
	[ "Would you like it to rain", "yes", "no", "maybe","B", "imgs/three.jpg"],
	[ "are you running for the bus", "yes", "no", "maybe", "A", "imgs/four.jpg"]
];
[/code]
finally [code]

_("test_status").innerHTML = "Question "+(pos+1)+" of "+questions.length;
	question = questions[pos][0];
	chA = questions[pos][1];
	chB = questions[pos][2];
	chC = questions[pos][3];
	img = questions[pos][5];
	test.innerHTML = "<h3>"+question+"</h3>";
	test.innerHTML += "<img src=""> "+imgs+"<br>";
	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>";
	test.innerHTML += "<button onclick='checkAnswer()'>Submit Answer</button>";
}

so far am not right. could i please get some advice so i get get one image per question?
Thank you
D

2

should be:

test.innerHTML += "<img src="+imgs+"><br>";

3

thank you felgall will go try that out. Could you also advs on how to externalize this js?
i put

window.addEventListener("load", renderQuestion, false);

in the invoking page and the rest of the script on its own separate .js page but it didn’t work.

D

4

Attach the script at the bottom of the page just before the </body> tag.where almost all JavaScript belongs. You will then not need to wait for the page to finish loading before running:

renderQuestion()

5

finally got a chance to test it this is the code, but it is not working. It is giving me an error of “not defined” but i don’t see the prob.

<!doctype html>
<?php  ?>
<html lang="en">

<head id="head">
	<meta charset="utf-8">
	<link rel="stylesheet" href="style.css">
		<title>quiz</title>
	<meta name="jsWorkouts" content="jsWorkouts">

</head>

<body >

<div class="wrap">

	<header>
		<nav>

		</nav>	 <!-- end nav -->

		
	</header> <!-- end hdr -->
	
	<div id="ctr" class="ctr">
	
		<div id="sidebar" class="sidebar"></div> <!-- end sidebar -->
		
		<h2 id="test_status"></h2>
		<div id="test" class="test">
		
		
		
		</div> <!-- end test -->
		

	
	</div> <!-- end ctr -->
	<footer >
	 
	</footer>
</div> <!-- end wrapper -->
<!-- script src="js/myJs.js"></script
<script src="js/quiz.js"></script>  -->

<script>

var pos = 0, test, test_status, question, choice, choices, chA, chB, chC, correct = 0, imgs;



var questions = [
    [ "Did you bring your umbrella", "yes", "no", "maybe", "c", "one.jpg"],
	[ "What about your raincoat", "yes", "no", "maybe", "c", "two.jpg" ],
	[ "Would you like it to rain", "yes", "no", "maybe", "c", "three.jpg"],
	[ "are you running for the bus", "yes", "no", "maybe", "b", "four.jpg"]
];

function _(x){
	return document.getElementById(x);
}
function renderQuestion(){
	test = _("test");
	if(pos >= questions.length){
		
		
		test.innerHTML = "<h2>You got "+correct/questions.length*100+ " % of chances of enjoying a sunny day</h2>";
		
		_("test_status").innerHTML = "Test Completed";
		pos = 0;
		correct = 0;
		return false;
	}
	_("test_status").innerHTML = "Question "+(pos+1)+" of "+questions.length;
	question = questions[pos][0];
	chA = questions[pos][1];
	chB = questions[pos][2];
	chC = questions[pos][3];
	imgs = questions[pos][5];
	test.innerHTML += "<img src=imgs/"+imgs+"><br>";
	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>";
	test.innerHTML += "<button onclick='checkAnswer()'>Submit Answer</button>";
}

function checkAnswer(){
	choices = document.getElementsByName("choices");
	for(var i=0; i<choices.length; i++){
		if(choices[i].checked){
			choice = choices[i].value;
		}
	}
	if(choice == questions[pos][4]){
		correct++;
	}
	pos++;
	renderQuestion();
}
window.addEventListener("load", renderQuestion, false);
</script>

</body>
</html>
6

nvr mind found the prob

	test.innerHTML = "<img src=imgs/"+imgs+"><br>";
	test.innerHTML += "<h3>"+question+"</h3>";