Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    May 2005
    Posts
    220
    Thanks
    1
    Thanked 2 Times in 2 Posts

    Images in Javascript???

    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:

    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

  • #2
    Regular Coder
    Join Date
    May 2005
    Posts
    220
    Thanks
    1
    Thanked 2 Times in 2 Posts
    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.

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    Code:
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    Regular Coder
    Join Date
    May 2005
    Posts
    220
    Thanks
    1
    Thanked 2 Times in 2 Posts
    Hmmm, Sorry, I still can't get it to work right.

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    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.

    Code:
    <!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>
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •