0

So I have a quiz where based on a sum value an image with your character will be appended to the paragraph showing the result, my problem is the images will not load in. I know the code works but until the console.log(sum) since it is logged when loading the file in the browser.

I'll post my code below(this is Javascript and html)

HTML:

<body>
  <h1>Which Star Wars Character Are You?</h1>
  <form>
    What color is your Lightsaber?
    <blockquote>
      <br><input type="radio" name="lightsaber" id="red" value="1"> <label  for="red">Red</label> 
      <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">Blue</label> 
      <br><input type="radio" name="lightsaber" id="purple" value="3"> <label   for="purple">Purple</label>
    </blockquote>
  </form>
  <form>
    With which organization would you most likely aligned?
    <blockquote>
      <br><input type="radio" name="lightsaber" id="red" value="1"> <label  for="red">Empire</label> 
      <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">Rebel Alliance</label> 
      <br><input type="radio" name="lightsaber" id="purple" value="3"> <label   for="purple">Neither</label> 
    </blockquote>
  </form>
  <form>
    Do you submit to the Emperor's will?
    <blockquote>
      <br><input type="radio" name="lightsaber" id="red" value="1"> <label  for="red">Yes</label> 
      <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">No</label> 
      <br><input type="radio" name="lightsaber" id="purple" value="3"> <label   for="purple">Maybe</label> 
    </blockquote>
  </form>
  <form>
    Would you help a friend if it meant being sealed in carbonite?
    <blockquote>
      <br><input type="radio" name="lightsaber" id="red" value="1"> <label  for="red">No of course not</label> 
      <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">Yes, I want to save my friends</label> 
      <br><input type="radio" name="lightsaber" id="purple" value="3"> <label   for="purple">Depends on the friend</label> 
    </blockquote>
  </form>
  <form>
    Do you like Wookies?
    <blockquote>
      <br><input type="radio" name="lightsaber" id="red" value="1"> <label  for="red">Only as a tool to crush my enemies</label> 
      <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">Yes I consider the creatures as friends</label> 
      <br><input type="radio" name="lightsaber" id="purple" value="3"> <label   for="purple">I've met a few good Wookies in my time, a few hostile ones     too</label> 
    </blockquote>
  </form>
  <form>
    Would you ever construct a Droid Army to usurp the Empire's power?
    <blockquote>
      <br><input type="radio" name="lightsaber" id="red" value="1"> <label  for="red">No, the Empire must be upheld, always</label> 
      <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">No, using an Army of Droids would make us just as bad</label> 
      <br><input type="radio" name="lightsaber" id="purple" value="3"> <label   for="purple">Yes, absolutely</label> 
    </blockquote>
  </form>
  <form>
    Jar Jar Binks yay or nay?
    <blockquote>
      <br><input type="radio" name="lightsaber" id="red" value="1"> <label  for="red">Yay</label> 
      <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">My father liked Jar Jar</label> 
      <br><input type="radio" name="lightsaber" id="purple" value="3"> <label   for="purple">Nay, a thousand times, Nay</label> 
    </blockquote>
  </form>
  <form>
    Have you seen the Mr. Plinkett Star Wars Reviews?
    <blockquote>
      <br><input type="radio" name="lightsaber" id="red" value="1"> <label  for="red">No</label> 
      <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">I've heard of them</label> 
      <br><input type="radio" name="lightsaber" id="purple" value="3"> <label   for="purple">Yes, he is right on all points raised</label> 
    </blockquote>
  </form>
  <form>
    Would you build a DeathStar or something like it to assert dominance over   the Galaxy?
    <blockquote>
      <br><input type="radio" name="lightsaber" id="red" value="1"> <label  for="red">Yes, maybe even 2 times</label> 
      <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">No, the DeathStar is a war machine that must be destroyed</label> 
      <br><input type="radio" name="lightsaber" id="purple" value="3"> <label   for="purple">I would possible use such a machine or vessel for my goals</label> 
    </blockquote>
  </form>
  <form>
    Did you like/know of KOTOR 1 or 2
    <blockquote>
      <br><input type="radio" name="lightsaber" id="red" value="1"> <label  for="red">No</label> 
      <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">Yes</label> 
      <br><input type="radio" name="lightsaber" id="purple" value="3"> <label   for="purple">I liked KOTO2 but KOTOR 1 had a lame ending.</label> 
    </blockquote>
    <br><br><input type="button" id="qButton" value="Choose">
  </form>
  <p id="QuestionParagraph"></p>
</body>

CSS:

body {
    background-color: #0000ff;
}
h1 {
    color: black;
    text-align: center;
}
p {
    font-family: "Arial";
    font-size: 25px;
    text-align: center;
}
.house {
    max-width: 200px;
    width: 100%;
}

JS:

function getButton() {
    var button = document.getElementById('qButton');
    button.onclick = getResult;
}

function getResult() {

    var sum = 0;
    var inputs = document.getElementsByName('lightsaber');
    for (i = 0; i < inputs.length; i++) {
        if (inputs[i].checked) {
            sum += parseInt(inputs[i].value);
            console.log(sum);
            showChar(sum);
        }
    }
}

function showChar(sum) {

    var image = document.createElement('img');
    image.className = 'lightsaber';
    var source = document.getElementById('QuestionParagraph');

    switch (sum) {
        case (sum <= 12):
            image.src = 'http://www.hp-lexicon.org/images/icons/shield_sly.jpg';
            break;
        case (13 <= sum <= 17):
            image.src = 'http://www.hp-lexicon.org/images/icons/shield_01-5B1-5D.jpg';
            break;
        case (18 <= sum <= 30):
            image.src = 'http://www.hp-lexicon.org/images/icons/shield_huf.jpg';
            break;
        default:
            image.src = '';
            source.appendChild(image);
    }
}

window.onload = getButton;

2 Answers 2

0

If you really want to use a switch (instead of an if-else construct), replace the condition sum by true. Also, your source.appendChild is inside the switch, so it will be executed only when the switch case falls to default. I guess what you want is for it to be always executed, so put it outside the switch.

Example:

switch(true){
    case (sum<=12):
        image.src = 'http://www.hp-lexicon.org/images/icons/shield_sly.jpg';
        break;
    case (13<=sum<=17):
        image.src = 'http://www.hp-lexicon.org/images/icons/shield_01-5B1-5D.jpg';
        break;
    case (18<=sum<=30):
        image.src = 'http://www.hp-lexicon.org/images/icons/shield_huf.jpg';
        break;
    default:
        image.src = '';
}
source.appendChild(image);

Finally, by always creating the image, you will potentially end up with multiple image results. To avoid this, you could use this code at the beginning of showChar:

var image = document.getElementById('imgResult');
if (!image) {
  image = document.createElement('img');
  image.id = "imgResult";
  image.className = 'lightsaber';
}

Working versions:

0

May I suggest you change to if/then/else and do it for example like below sample snippet.

By start using objects like the var img = {...}, you will be able to make your solution more dynamic, where you also can handle your questions and answer in a similar way.

var qp = document.getElementById('QuestionParagraph');
var img = {
            12: 'http://www.hp-lexicon.org/images/icons/shield_sly.jpg',
            17: 'http://www.hp-lexicon.org/images/icons/shield_01-5B1-5D.jpg',
            30: 'http://www.hp-lexicon.org/images/icons/shield_huf.jpg'
          }

function getButton() {
    var button = document.getElementById('qButton');
    button.onclick = getResult;
}

function getResult(){
    var sum = 0;
    var inputs = document.getElementsByName('lightsaber');
    for (i=0;i<inputs.length;i++){
        if (inputs[i].checked) {
        sum += parseInt(inputs[i].value);
        console.log(sum);
        showChar(sum);
        }
    }       
}

function appendImage(src,trg){    
  var image = document.createElement('img');
  image.className = 'lightsaber';
  image.src = src;
  trg.appendChild(image);
}

function showChar(sum){
  if (sum <= 12) {
    appendImage(img[12],qp);
  } else if (sum <= 17) {
    appendImage(img[17],qp);
  } else if (sum <= 30) {
    appendImage(img[30],qp);
  }
}

window.onload = getButton;
body {
  background-color: #06f;
}

h1 {
  color: black;
  text-align: center;
}

p {
  font-family: "Arial";
  font-size: 25px;
  text-align: center;
}
.house {
  max-width: 200px;
  width: 100%;
}
<h1>Which Star Wars Character Are You?</h1>
<form>
What color is your Lightsaber?
<blockquote>
    <br><input type="radio" name="lightsaber" id="red" value="1"> <label    for="red">Red</label> 
   <br><input type="radio" name="lightsaber" id="blue" value="2"> <label    for="blue">Blue</label> 
    <br><input type="radio" name="lightsaber" id="purple" value="3"> <label     for="purple">Purple</label>
</blockquote>   
</form>

<form>
With which organization would you most likely aligned?
<blockquote>



    <br><input type="radio" name="lightsaber" id="red" value="1"> <label    for="red">Empire</label> 
   <br><input type="radio" name="lightsaber" id="blue" value="2"> <label    for="blue">Rebel Alliance</label> 
   <br><input type="radio" name="lightsaber" id="purple" value="3"> <label  for="purple">Neither</label> 
</blockquote>   
    </form>

<form>
Do you submit to the Emperor's will?
<blockquote>


    <br><input type="radio" name="lightsaber" id="red" value="1"> <label    for="red">Yes</label> 
    <br><input type="radio" name="lightsaber" id="blue" value="2"> <label   for="blue">No</label> 
    <br><input type="radio" name="lightsaber" id="purple" value="3"> <label     for="purple">Maybe</label> 
</blockquote>   
    </form>

<form>
Would you help a friend if it meant being sealed in carbonite?
<blockquote>


    <br><input type="radio" name="lightsaber" id="red" value="1"> <label    for="red">No of course not</label> 
    <br><input type="radio" name="lightsaber" id="blue" value="2"> <label   for="blue">Yes, I want to save my friends</label> 
    <br><input type="radio" name="lightsaber" id="purple" value="3"> <label     for="purple">Depends on the friend</label> 
</blockquote>   
    </form>

<form>
Do you like Wookies?
<blockquote>


    <br><input type="radio" name="lightsaber" id="red" value="1"> <label    for="red">Only as a tool to crush my enemies</label> 
    <br><input type="radio" name="lightsaber" id="blue" value="2"> <label   for="blue">Yes I consider the creatures as friends</label> 
  <br><input type="radio" name="lightsaber" id="purple" value="3"> <label   for="purple">I've met a few good Wookies in my time, a few hostile ones     too</label> 
</blockquote>   
    </form>

<form>
Would you ever construct a Droid Army to usurp the Empire's power?
<blockquote>


    <br><input type="radio" name="lightsaber" id="red" value="1"> <label    for="red">No, the Empire must be upheld, always</label> 
    <br><input type="radio" name="lightsaber" id="blue" value="2"> <label   for="blue">No, using an Army of Droids would make us just as bad</label> 
   <br><input type="radio" name="lightsaber" id="purple" value="3"> <label  for="purple">Yes, absolutely</label> 
</blockquote>   
    </form>

<form>
Jar Jar Binks yay or nay?
<blockquote>


    <br><input type="radio" name="lightsaber" id="red" value="1"> <label    for="red">Yay</label> 
   <br><input type="radio" name="lightsaber" id="blue" value="2"> <label    for="blue">My father liked Jar Jar</label> 
    <br><input type="radio" name="lightsaber" id="purple" value="3"> <label     for="purple">Nay, a thousand times, Nay</label> 
</blockquote>   
    </form>

<form>
Have you seen the Mr. Plinkett Star Wars Reviews?
<blockquote>


    <br><input type="radio" name="lightsaber" id="red" value="1"> <label    for="red">No</label> 
   <br><input type="radio" name="lightsaber" id="blue" value="2"> <label    for="blue">I've heard of them</label> 
    <br><input type="radio" name="lightsaber" id="purple" value="3"> <label     for="purple">Yes, he is right on all points raised</label> 
</blockquote>   
    </form>

<form>
Would you build a DeathStar or something like it to assert dominance over   the Galaxy?
<blockquote>


    <br><input type="radio" name="lightsaber" id="red" value="1"> <label    for="red">Yes, maybe even 2 times</label> 
    <br><input type="radio" name="lightsaber" id="blue" value="2"> <label   for="blue">No, the DeathStar is a war machine that must be destroyed</label> 
    <br><input type="radio" name="lightsaber" id="purple" value="3"> <label     for="purple">I would possible use such a machine or vessel for my goals</label> 
</blockquote>
    </form>

<form>
Did you like/know of KOTOR 1 or 2
<blockquote>


    <br><input type="radio" name="lightsaber" id="red" value="1"> <label    for="red">No</label> 
   <br><input type="radio" name="lightsaber" id="blue" value="2"> <label    for="blue">Yes</label> 
  <br><input type="radio" name="lightsaber" id="purple" value="3"> <label   for="purple">I liked KOTO2 but KOTOR 1 had a lame ending.</label> 
</blockquote>



<br><br><input type="button" id="qButton" value="Choose">
</form>
<p id="QuestionParagraph"></p>

1
  • thanks this works my only problem is the pictures are printing at each sum increment and I need it to just show the result once at the end. I'm thinking this is where having the same name for each input is making things difficult.
    – Phlash6
    Feb 14, 2016 at 22:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.