load image when button is pressed in javascript

Question

I have a simple javascript Quiz with a button that will calculate the quiz in a percentage score.

Whenever the button is pressed at the end of the quiz, it will show the result, but I also want it to load a picture. The picture is a LVL bar, which shows which LVL you are, depending on the score you got.

<script language="JavaScript">


// Insert number of questions
var numQues = 20;

// Insert number of choices in each question
var numChoi = 4;

// Insert number of questions displayed in answer area
var answers = new Array(20);

// Insert answers to questions
answers[0] = "Cascading Style Sheets";
answers[1] = "Dynamic HTML";
answers[2] = "Netscape";
answers[3] = "Common Gateway Interface";
answers[4] = "Common Gateway Interface";
answers[5] = "Common Gateway Interface";
answers[6] = "Common Gateway Interface";
answers[7] = "Common Gateway Interface";
answers[8] = "Common Gateway Interface";
answers[9] = "Common Gateway Interface";
answers[10] = "Common Gateway Interface";
answers[11] = "Common Gateway Interface";
answers[12] = "Common Gateway Interface";
answers[13] = "Common Gateway Interface";
answers[14] = "Common Gateway Interface";
answers[15] = "Common Gateway Interface";
answers[16] = "Common Gateway Interface";
answers[17] = "Common Gateway Interface";
answers[18] = "Common Gateway Interface";
answers[19] = "Common Gateway Interface";

function getScore(form) {
  var score = 0;
  var currElt;
  var currSelection;
  for (i=0; i<numQues; i++) {
    currElt = i*numChoi;
    for (j=0; j<numChoi; j++) {
      currSelection = form.elements[currElt + j];
      if (currSelection.checked) {
        if (currSelection.value == answers[i]) {
          score++;
          break;
        }
      }
    }
  }
  score = Math.round(score/numQues*100);
  form.percentage.value = score + "%";
  var correctAnswers = "";
  for (i=1; i<=numQues; i++) {
    correctAnswers += i + ". " + answers[i-1] + "\r\n";
  }
  form.solutions.value = correctAnswers;

}

</script>

<body>
<div class="container">




    <div class="header"><img src="banner.png" height="250" /></div>

      <div class="navbartop">  
            <a href="Home.html" style="text-decoration:none">Home</a> |
            <a href="Games.html" style="text-decoration:none">Games</a> |
            <a href="#" style="text-decoration:none">Videotutorials &nbsp;</a>    
        </div>

Web Design Quiz

    <form class="Quiz">
    <p>Quiz</p>

   1. What does CSS stand for? 
    <ul style="margin-top: 1pt">
      <li><input type="radio" name="q1" value="Colorful Style Symbols">Colorful Style Symbols</li>
      <li><input type="radio" name="q1" value="Cascading Style Sheets">Cascading Style Sheets</li>
      <li><input type="radio" name="q1" value="Computer Style Symbols">Computer Style Symbols</li>
      <li><input type="radio" name="q1" value="Computer Style Symbols">Computer Style Symbols</li>

    </ul>
   <br /> 
    2. What does DHTML stand for?
    <ul style="margin-top: 1pt">
      <li><input type="radio" name="q2" value="Dramatic HTML">Dramatic HTML</li>
      <li><input type="radio" name="q2" value="Design HTML">Design HTML</li>
      <li><input type="radio" name="q2" value="Dynamic HTML">Dynamic HTML</li>
      <li><input type="radio" name="q2" value="Computer Style Symbols">Computer Style Symbols</li>
    </ul>
    <br />

    3. Who created Javascript?
    <ul style="margin-top: 1pt">
      <li><input type="radio" name="q3" value="Microsoft">Microsoft</li>
      <li><input type="radio" name="q3" value="Netscape">Netscape</li>
      <li><input type="radio" name="q3" value="Sun Micro Systems">Sun Micro Systems</li>
      <li><input type="radio" name="q3" value="Sun Micro Systems">Sun Micro Systems</li>         
    </ul>
    <br />
    4. What does CGI stand for?
    <ul style="margin-top: 1pt">
      <li><input type="radio" name="q4" value="Cascading Gate Interaction">Cascading Gate Interaction</li>
      <li><input type="radio" name="q4" value="Common GIF Interface">Common GIF Interface</li>
      <li><input type="radio" name="q4" value="Common Gateway Interface">Common Gateway Interface</li>
      <li><input type="radio" name="q4" value="Common Gateway Interface">Common Gateway Interface</li>        
    </ul>
    <br />
     5. What does CGI stand for?
    <ul style="margin-top: 1pt">
      <li><input type="radio" name="q5" value="Cascading Gate Interaction">Cascading Gate Interaction</li>
      <li><input type="radio" name="q5" value="Common GIF Interface">Common GIF Interface</li>
      <li><input type="radio" name="q5" value="Common Gateway Interface">Common Gateway Interface</li>
      <li><input type="radio" name="q5" value="Common Gateway Interface">Common Gateway Interface</li>        
    </ul>
    <br />
     6. What does CGI stand for?
    <ul style="margin-top: 1pt">
      <li><input type="radio" name="q6" value="Cascading Gate Interaction">Cascading Gate Interaction</li>
      <li><input type="radio" name="q6" value="Common GIF Interface">Common GIF Interface</li>
      <li><input type="radio" name="q6" value="Common Gateway Interface">Common Gateway Interface</li>
      <li><input type="radio" name="q6" value="Common Gateway Interface">Common Gateway Interface</li>
    </ul>
    <br />
     7. What does CGI stand for?
    <ul style="margin-top: 1pt">
      <li><input type="radio" name="q7" value="Cascading Gate Interaction">Cascading Gate Interaction</li>
      <li><input type="radio" name="q7" value="Common GIF Interface">Common GIF Interface</li>
      <li><input type="radio" name="q7" value="Common Gateway Interface">Common Gateway Interface</li>
      <li><input type="radio" name="q7" value="Common Gateway Interface">Common Gateway Interface</li>
    </ul>
    <br />
     8. What does CGI stand for?
    <ul style="margin-top: 1pt">
      <li><input type="radio" name="q8" value="Cascading Gate Interaction">Cascading Gate Interaction</li>
      <li><input type="radio" name="q8" value="Common GIF Interface">Common GIF Interface</li>
      <li><input type="radio" name="q8" value="Common Gateway Interface">Common Gateway Interface</li>
      <li><input type="radio" name="q8" value="Common Gateway Interface">Common Gateway Interface</li>
    </ul>
    <br />
     9. What does CGI stand for?
    <ul style="margin-top: 1pt">
      <li><input type="radio" name="q9" value="Cascading Gate Interaction">Cascading Gate Interaction</li>
      <li><input type="radio" name="q9" value="Common GIF Interface">Common GIF Interface</li>
      <li><input type="radio" name="q9" value="Common Gateway Interface">Common Gateway Interface</li>
      <li><input type="radio" name="q9" value="Common Gateway Interface">Common Gateway Interface</li>
    </ul>
    <br />
    <input type="button" value="Get score" onClick="getScore(this.form)">
    <input type="reset" value="Clear answers">
    <p> Score = <strong><input class="bgclr" type="text" size="5" name="percentage" disabled></strong><br><br>
   <!-- Correct answers:<br>
    <textarea class="bgclr" name="solutions" wrap="virtual" rows="5" cols="30" disabled>
    </textarea>
   !-->
    </form>

    <br /> 
    <div class="LVL bar">
    <img src="LVLbar.png" />
    </div>
                <footer>
                    <img src="footer.png" class="footer" />
                </footer>     
      </div>
</body>

And what have you tried so far? Where's your code trying to load an image based on score? — Nicolae Olariu
– Nicolae Olariu, Commented Mar 19, 2014 at 21:20
I've tried to work it out in some ways, but since I am still very inexperienced coding in javascript, I haven't come up with a method yet. I've had only some ideas coding in if statements, but I don't know exactly how to do it correctly. — user3439591
– user3439591, Commented Mar 19, 2014 at 21:40

katsanva · Accepted Answer · 2014-03-19 21:39:51Z

1

Somewhere in your getScore function

$('.lvl-bar img').attr('src', 'your-picture-name-here.png');
$('.lvl-bar').show();

edited Mar 19, 2014 at 21:39

answered Mar 19, 2014 at 21:25

katsanva

1151 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

PatAtCP · Accepted Answer · 2014-03-20 16:42:35Z

0

seeing as you're not using jQuery, you should probably stick with standard JavaScript. at the end of your getScore function do something like this:

  document.querySelector('.LVL img').src = 'new-image-url.png';

You may also consider adding an id to the image, so you can use document.getElementById() which works on older browsers.

answered Mar 20, 2014 at 16:42

PatAtCP

5873 silver badges10 bronze badges

Collectives™ on Stack Overflow

load image when button is pressed in javascript

Web Design Quiz

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Web Design Quiz

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related