...

View Full Version : Images in Javascript???



Vapor
02-19-2007, 08:39 PM
Ok, I am making a little quiz, and for one of my questions I want to show images as my choices. How on earth do I show images as my choices? Everytime I try anything it messes up my whole quiz. Here is my code:



var questions = new Array();
var choices = new Array();
var answers = new Array();
var response = new Array();

questions[0] = "1) Which river is the longest in the world?";
choices[0] = new Array();
choices[0][0] = "Nile";
choices[0][1] = "Thames";
choices[0][2] = "Amazon";
choices[0][3] = "Mississippi";
answers[0] = choices[0][0];


// response for getting 100%
response[0] = "Excellent Job!";
// response for getting 1% or less
response[7] = "Sorry, the correct answer is the Nile River.";
Thanks

Vapor
02-19-2007, 08:55 PM
while I am at it, how do I put a link inside the pop-up javascript box for my code? I just want to reference another website and make it so that users can click on the link.

Arbitrator
02-19-2007, 09:02 PM
choices[0][0] = ["Photo of the Nile River", "nile.png"];

var img = document.createElement("img");
img.setAttribute("alt", choices[0][0][0]);
img.setAttribute("src", choices[0][0][1]);

You might add some entries into your array that indicate whether or not the answers are in image format and to handle the output of answers accordingly.

Vapor
02-19-2007, 09:32 PM
Hmmm, Sorry, I still can't get it to work right.

Arbitrator
02-19-2007, 10:45 PM
Try something like the below. The current examples work in modern browsers; modify the code as per the comments in the script to make it work for Internet Explorer.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en-US">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>CF 107869</title>

<style type="text/css">
body { width: 70%; margin: 0 auto; }
ul { list-style-type: decimal; }
ul ul { list-style-type: upper-latin; }
input { display: block; margin: 0 auto; }
.answer { border: 1px dotted; background-color: #eee; }
</style>

<script type="text/javascript">
var questions = [], choices = [], answers = [];

questions[0] = ["Which river is the longest in the world?", "text"];
choices[0] = ["Nile", "Thames", "Amazon", "Mississippi"];
answers[0] = 0;

questions[1] = ["Which image identifies most closely with the term “viridian”?", "image"];
choices[1] = [
["Article A", "150", "150", "article_a.png"],
["Article B", "150", "150", "article_b.png"],
["Article C", "150", "150", "article_c.png"],
["Article D", "150", "150", "article_d.png"],
]
answers[1] = 3;

document.defaultView.addEventListener("DOMContentLoaded", quiz, false);
// Use “window.onload = quiz;” for Internet Explorer.

function quiz() {
var body = document.getElementsByTagName("body")[0];
body.removeChild(body.getElementsByTagName("div")[0]);
var questionList = document.createElement("ul");
for (var i = 0; i < questions.length; i++) {
var section = document.createElement("li");
var question = document.createElement("h3");
var answerList = document.createElement("ul");
for (var j = 0; j < choices[i].length; j++) {
var answer = document.createElement("li");
if (questions[i][1] == "text") {
answer.appendChild(document.createTextNode(choices[i][j]));
}
else {
var image = document.createElement("img");
image.setAttribute("alt", choices[i][j][0]);
image.setAttribute("width", choices[i][j][1]);
image.setAttribute("height", choices[i][j][2]);
image.setAttribute("src", choices[i][j][3]);
answer.appendChild(document.createTextNode(""));
answer.appendChild(image);
}
answerList.appendChild(answer);
}
question.appendChild(document.createTextNode(questions[i][0]));
section.appendChild(question);
section.appendChild(answerList);
questionList.appendChild(section);
body.appendChild(questionList);
}
var check = document.createElement("input");
check.setAttribute("type", "button");
check.setAttribute("value", "Highlight Answers");
check.addEventListener("click", showAnswers, false);
// Use “check.onclick = showAnswers;” for Internet Explorer.
body.appendChild(check);
}
function showAnswers() {
for (var i = 0; i < answers.length; i++) {
document.getElementsByTagName("ul")[0].childNodes[i].getElementsByTagName("li")[answers[i]].className = "answer";
}
}
</script>

</head>
<body>

<div>Unable to load quiz. Make sure that you have JavaScript enabled.</div>

</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum