I was trying to make a simple multiplechoice quiz with HTML5 and JavaScript using this tutorial, so now I have this:


<html lang="en">

		<meta charset="utf-8">
		<link rel="stylesheet" href="design/css/stylesheet.css" />
            window.onload = function(){

                var canvas = document.getElementById("myCanvas");
                var context = canvas.getContext("2d");
				var quizbg = new Image(); // bg
				var Question = new String; // question
				var Option1 = new String; // options
				var Option2 = new String;
				var Option3 = new String;
				var mx = 0; // reference mouseclick variables
				var my = 0;
				var CorrectAnswer = 0; // hold the reference to the correct answer (1, 2, 3)
				var qnumber = 0; // track the current question number
				var rightanswers = 0; // calculate the score by storing the number of questions that the user got right and wrong
				var wronganswers = 0;
				var QuizFinished = false; // help track when the quiz is complete
				var lock = false; // lock answer so user can't click on more than one
				// important to keep track of the position of everything we draw
				var textpos1 = 45;
				var textpos2 = 145;
				var textpos3 = 230;
				var textpos4 = 325;
				var Questions = [
								"Where is Paris?",
								"Where is London?",
								"Where is Rome?"
				var Options = 	[

				quizbg.onload = function(){ // only load questions when bg image is loaded
			      context.drawImage(quizbg, 0, 0);
				quizbg.src = "quizbg.png";

				SetQuestions = function(){ // set questions and draw them on canvas

					Question=Questions[qnumber]; // select the current question from the array, and assign it to the string variable question
					CorrectAnswer=1+Math.floor(Math.random()*3); // select a random number, from 1 to 3 and assign it to CorrectAnswer


					context.textBaseline = "middle"; // text centered in boxes
					context.font = "24pt Calibri, Arial"; // font for question
					context.fillText(Question, 20,textpos1); // place our Question text 20 pixels from the right and 45 pixels (textpos1=45) from the top of the canvas
					context.font = "18pt Calibri, Arial"; // smaller font for options
					context.fillText(Option1, 20, textpos2);
					context.fillText(Option2, 20, textpos3);
					context.fillText(Option3, 20, textpos4);

				} // end SetQuestions

				canvas.addEventListener('click',ProcessClick,false);  // listens out for a mouseclick and then acts on it

				function ProcessClick(ev) { // if mouseclick (mouseclick event = ev)
					my=ev.y-canvas.offsetTop; // my to store the mouseclick y-coordinate
					if(ev.y == undefined){
						my = ev.pageY - canvas.offsetTop;

					if(lock){ // variable ‘lock’ to determine whether the question has been answered or not
					if(my>110 && my<180){GetFeedback(1);} // coördinates options
					if(my>200 && my<270){GetFeedback(2);}
					if(my>290 && my<360){GetFeedback(3);}


		GetFeedback = function(a){

		  if(a==CorrectAnswer){ // ‘a’ variable when we call the function corresponds to the variable passed to the function earlier, it will be 1,2 or 3 depending on which option was clicked
		  	// the variable CorrectAnswer holds the correct answer. Hence if a==CorrectAnswer then the answer is correct, otherwise (else) the answer is wrong
		  	context.drawImage(quizbg, 0,400,75,70,480,110+(90*(a-1)),75,70); //  take our original image and ‘slice’ off the tick graphic and place it on the screen
			//drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
		    context.drawImage(quizbg, 75,400,75,70,480,110+(90*(a-1)),75,70); //  take our original image and ‘slice’ off the tick graphic and place it on the screen
		  lock = true;
		  context.font = "14pt Calibri,Arial";
		  context.fillText("Click again to continue",20,380);
		}//get feedback

		ResetQ = function(){ // resets our quiz and move onto the next question
		lock = false;
		context.clearRect(0,0,550,400); // clear the entire canvas away
		if(qnumber==Questions.length){EndQuiz();} // means the last question has been reached and we should end the quiz with the function EndQuiz(); Otherwise (else), we need to redraw the quiz background using drawImage() and then call the function SetQuestions()
		context.drawImage(quizbg, 0, 0);

		context.drawImage(quizbg, 0,0,550,90,0,0,550,400);
		context.font = "20pt Calibri,Arial";
		context.fillText("You have finished the quiz!",20,100);
		context.font = "16pt Calibri,Arial";
		context.fillText("Correct answers: "+String(rightanswers),20,200);
		context.fillText("Wrong answers: "+String(wronganswers),20,240);
			}; //windowonload



    <div id="container1">
		<canvas id="myCanvas" width="550" height="400"></canvas>

So since I just followed the tutorial, everything works. So it always shows a question and three answers. But I just simply want to show a question, three answers and an image (this image is kind of some aid to help solve the question). I never worked with JavaScript before so I have no idea how to even start on this. I tried making a variable and in this array put all the images like with the "Questions" and "Options" but how do I make it display at the correct question?