Connecting image load to button push

Figuring out how to connect an image load to the push of a button

[ekv320]

Hello all,
I'm new to Javascript, but I believe that I would use it in this instance.

I am creating a quiz, where the user will look at an image and then has to answer a question about it. I've found a simple multiple choice quiz script, but I need to find some way to connect an image to each question.

Right now, the quiz questions are stored in an array like this:

var quiz = new Array(); var r = 0;
quiz[r++] =('32~92~What is the main script used in this image?~Kufic~Thuluth~Naskh~Nasta\'liq');
quiz[r++] =('45~93~What is the main script used in this image?~Shikaste~Maghribi~Ta\'liq~Riqa\'');

I'd like to somehow attach an image to each question. The way the script works, there's a button entitled "next question," and I'd like the image to change every time that button is pushed.
Thanks for any help you can give,
Elisabeth

[whoisgregg]

Welcome to WebmasterWorld, ekv320!

It looks like at some point in the script, it must split the array on the tilde (~) character. It should be as simple as adding the src of an image into each line and processing it later by dynamically creating an <img> element.

Something like this:

quiz[r++] =('32~92~What is the main script used in this image?~/path/to/image.jpg~Kufic~Thuluth~Naskh~Nasta\'liq'); 

Then wherever you find the .split() function, post that code and we'll see if we can recommend how to edit it to dynamically show the image. :)

[ekv320]

That would be fabulous, thank you so much!

When I add the image path, is it supposed to be the path from the html page where the script quiz is, or from javascript file that holds the array and is located in a subfolder? My directory looks like this:
script-quiz.html
scripts/
quizhead.js
quizbody.js
images/

Right now when I add the tilde and image path to the array, it just displays the image path as one of the answer choices.

I did find the split function, which is in a separate javascript file quizbody.js:

var parms = query.split('&');

The javascript is compressed so it's hard to read... sorry for my ignorance, but I don't know how much of the code would be helpful for you to see. I will go ahead and post it all, although I'm sorry for the difficult to read format.

var qsParm = new Array(); function qs() {var query = window.location.search.substring(1); var parms = query.split('&'); for (var i=0; i<parms.length; i++) {var pos = parms[i].indexOf('='); if (pos > 0) {var key = parms[i].substring(0,pos); var val = parms[i].substring(pos+1); qsParm[key] = val;}}} qsParm['questnum'] = 0; qsParm['cor'] = 0; qs(); var questnum = qsParm['questnum']; var cor = qsParm['cor'];cor=cor%53; function checkAnswer(e,b,g){var a = -1; var x = (b%5) + 2; for (var i=0; i<e.c.length; i++) {if (e.c[i].checked) {a = i;}} if (a == -1) {alert("You must select an answer"); return false;} var b = (g%x); var f = quiz[questnum].split('~'); if (a == b) {cor++;} else {alert('Incorrect\nThe Correct Answer is '+f[b+3]);} var www = self.location.href.lastIndexOf('?'); var thispage = self.location.href; if (www != -1) thispage = self.location.href.substr(0,www); questnum++; var p = Math.floor((Math.random() * 8) + 2); var m = (p * 53) +cor; top.location = thispage + '?questnum='+ questnum +'&cor='+m; return false;} var tblsz = quiz.length; document.write('<table align="center" cellpadding="3" width="350" border="1"><tr>'); if (questnum < quiz.length) {var f = quiz[questnum].split('~'); document.write('<td align="left"><form name="myForm"><div style="font-size:14px;">Question: '+f[2]+'</div><blockquote><span style="font-size:12px;">\n'); document.write('<input type="radio" name="c" value="0" /> '+f[3]+'<br />\n'); document.write('<input type="radio" name="c" value="1" \/> '+f[4]+'<br \/>\n'); if (f[5] != '') document.write('<input type="radio" name="c" value="2" /> '+f[5]+'<br />\n'); if (f[6] != '') document.write('<input type="radio" name="c" value="3" /> '+f[6]+'<\/span><\/blockquote>\n'); document.write('<div align="right"><input type="button" value="Next Question" onclick="checkAnswer(myForm,'+f[1]+','+f[0]+');return false;" /><\/div><\/form>\n');} else {document.write('<td align="center">\n'); document.write('<div style="font-size:14px;"><b>You have completed the quiz.<\/b><\/div><blockquote><span style="font-size:12px;"> <br \/> <br \/> <br \/> <br \/><\/span><\/blockquote>'); document.write('<div>You scored ' + cor + ' right answers out of ' + tblsz + '<\/div>\n');} document.write('<\/td><\/tr><\/table>\n');

Thank you so much again,
Elisabeth

[whoisgregg]

Hello Elisabeth,

If you find this section, it's the part we'll be working with:

document.write('<td align="left"><form name="myForm"><div style="font-size:14px;">Question: '+f[2]+'</div><blockquote><span style="font-size:12px;">\n'); document.write('<input type="radio" name="c" value="0" /> '+f[3]+'<br />\n'); document.write('<input type="radio" name="c" value="1" \/> '+f[4]+'<br \/>\n'); 

Basically, everywhere you see

f[1]

through

f[4]

is a reference to the portion of the string you enter in for the quiz[] array. Now that I see the code, we should change the <img> src to be at the end, like so:

quiz[r++] =('32~92~What is the main script used in this image?~Kufic~Thuluth~Naskh~Nasta\'liq~/path/to/image.jpg');

Then, you just need to add some code to do something with your new f[7] information:

document.write('<td align="left"><form name="myForm"><div style="font-size:14px;">Question: '+f[2]+'</div>[b]<img src=" '+f[7]+'" />[/b]<blockquote><span style="font-size:12px;">\n'); document.write('<input type="radio" name="c" value="0" /> '+f[3]+'<br />\n'); document.write('<input type="radio" name="c" value="1" \/> '+f[4]+'<br \/>\n');;

[ekv320]

This is so great, it works perfectly! Thank you so much for your help.

Elisabeth