Question 74574 in Html Question posted in
Some basic documentation can be found here.

How to swap image to show why the answer is correct or incorrect on quiz javascript – Html

I am trying to create a quiz in javascript which asks users to identify the correct image.
Once the user has selected there answer it tells them if they are correct or incorrect.

I want to expand on this by, displaying an image to show why it is fake, or why it is real – rather than just telling them their answer is correct or incorrect.

I have tried to do this by include message005.innerHTML = "<img src= images/q2answer.jpg "; into the code, although this works, this continues to display the image underneath the next question, how can I stop this from displaying when the users goes to the next question?

Looking for an easy solution as I’m still new and learning.

var question001 = [

"Is this image  real or fake? <br /><br /> <img src= images/q1.jpg </img>", 
"Is this image  real or fake? <br /><br /> <img src= images/q2.jpg </img>", 
"Is this image  real or fake? <br /><br /><img src= images/q3.jpg </img>",
"Is this image  real or fake? <br /><br /><img src= images/q4.png </img/>",
"Is this image  real or fake? <br /><br /><img src= images/q5.png </img/>",
"Is this image  real or fake? <br /><br /><img src= images/q6.png </img/>",
"Is this image  real or fake? <br /><br /><img src= images/q7.png </img/>",
"Is this image  real or fake? <br /><br /><img src= images/q8.png </img/>",
"Is this image  real or fake? <br /><br /><img src= images/q9.png </img/>",
"Is this image  real or fake? <br /><br /><img src= images/q10.png </img/>",

];

// Questions buttons
var options001 = ["<button class=buttonsreal onclick=q1i()>Real</button> <button class=buttonsfake onclick=q1c()>Fake</button>"];

var options002 = ["<button class=buttons001 onclick=q2c()>Real</button><br /><br /><button class=buttons001 onclick=q2i()>Fake</button>"];

var options003 = ["<button class=buttons001 onclick=q3c()>Real</button><br /><br /><button class=buttons001 onclick=q3i()>Fake</button>"];

var options004 = ["<button class=buttons001 onclick=q4i()>Real</button><br /><br /><button class=buttons001 onclick=q4c()>Fake</button>"];

var options005 = ["<button class=buttons001 onclick=q1c()>Real</button><br /><br /><button class=buttons001 onclick=q1i()>Fake</button>"];

var options006 = ["<button class=buttons001 onclick=q1c()>Real</button><br /><br /><button class=buttons001 onclick=q1i()>Fake</button>"];

var options007 = ["<button class=buttons001 onclick=q1i()>Real</button><br /><br /><button class=buttons001 onclick=q1c()>Fake</button>"];

var options008 = ["<button class=buttons001 onclick=q1c()>Real</button><br /><br /><button class=buttons001 onclick=q1i()>Fake</button>"];

var options009 = ["<button class=buttons001 onclick=q1c()>Real</button><br /><br /><button class=buttons001 onclick=q1i()>Fake</button>"];

var options010 = ["<button class=buttons001 onclick=q1i()>Real</button><br /><br /><button class=buttons001 onclick=q1c()>Fake</button>"];

var a = 0;
a++;
var b = 0;
b++;

function begin001() {
disappear001.innerHTML = "";
message001.innerHTML = question001[0];
message002.innerHTML = options001;
number001.innerHTML = a++;
message004.innerHTML = "<button class=buttons002 onclick=repeat001()>Start Again</button>";

}

function q1c() {
message001.innerHTML = ""; 
message003.innerHTML = "Correct! View the annonotated image to see how you could spot it is correct.";

message002.innerHTML = "";
score001.innerHTML = b++;
message005.innerHTML = "<img src= images/q2answer.jpg </img>";

message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
 
}

function q1i() {
message001.innerHTML = ""; 
message003.innerHTML = "Incorrect. View the annonotated image to see how you could spot it is correct." ;
message005.innerHTML="";
message002.innerHTML = "";

message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";

}

function q2c() {
    message001.innerHTML = ""; 
    message003.innerHTML = "Incorrect";
    message002.innerHTML = "";
    message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";   
    }

    function q2i() {
        message001.innerHTML = ""; 
        message003.innerHTML = "Correct! View the annonotated image to see how you could spot it is correct.";
        message002.innerHTML = "";
        score001.innerHTML = b++;
        message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";   
    }

    function q3c() {
        message001.innerHTML = ""; 
        message003.innerHTML = "Correct! View the annonotated image to see how you could spot it is correct.";
        message002.innerHTML = "";
        score001.innerHTML = b++;
        message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
      
        }
        function q3i() {
            message001.innerHTML = ""; 
            message003.innerHTML = "Incorrect";
            message002.innerHTML = "";
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";     
        }

        function q4c() {
            message003.innerHTML = "Correct";
            message002.innerHTML = "";
            score001.innerHTML = b++;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";

            }
        
            function q4i() {
                message003.innerHTML = "Incorrect test";
                message002.innerHTML = "";
                message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";

            }

function next001() {
if (a == "2") {
    message001.innerHTML = question001[1];
    message002.innerHTML = options002;
    message003.innerHTML = "";
    number001.innerHTML = a++;
    message004.innerHTML = "";
    message004.innerHTML = "<button class=buttons002 onclick=repeat001()>Start Again</button>";
}
else if (a == "3") {
    message001.innerHTML = question001[2];
    message002.innerHTML = options003;
    message003.innerHTML = "";
    number001.innerHTML = a++;
    message004.innerHTML = "";
    message004.innerHTML = "<button class=buttons002 onclick=repeat001()>Start Again</button>";
    
}

else if (a == "4") {
    message001.innerHTML = question001[3];
    message002.innerHTML = options004;
    message003.innerHTML = "";
    number001.innerHTML = a++;
    message004.innerHTML = "";
    message004.innerHTML = "<button class=buttons002 onclick=repeat001()>Start Again</button>";
}

else if (a == "5") {
    message001.innerHTML = question001[4];
    message002.innerHTML = options005;
    message003.innerHTML = "";
    number001.innerHTML = a++;
    message004.innerHTML = "";
    message004.innerHTML = "<button class=buttons002 onclick=repeat001()>Start Again</button>";
}

else if (a == "6") {
    message001.innerHTML = question001[5];
    message002.innerHTML = options006;
    message003.innerHTML = "";
    number001.innerHTML = a++;
    message004.innerHTML = "";
    message004.innerHTML = "<button class=buttons002 onclick=repeat001()>Start Again</button>";
}

else if (a == "7") {
    message001.innerHTML = question001[6];
    message002.innerHTML = options007;
    message003.innerHTML = "";
    number001.innerHTML = a++;
    message004.innerHTML = "";
    message004.innerHTML = "<button class=buttons002 onclick=repeat001()>Start Again</button>";
}

else if (a == "8") {
    message001.innerHTML = question001[7];
    message002.innerHTML = options008;
    message003.innerHTML = "";
    number001.innerHTML = a++;
    message004.innerHTML = "";
    message004.innerHTML = "<button class=buttons002 onclick=repeat001()>Start Again</button>";
}

else if (a == "9") {
    message001.innerHTML = question001[8];
    message002.innerHTML = options009;
    message003.innerHTML = "";
    number001.innerHTML = a++;
    message004.innerHTML = "";
    message004.innerHTML = "<button class=buttons002 onclick=repeat001()>Start Again</button>";
}

else if (a == "10") {
    message001.innerHTML = question001[9];
    message002.innerHTML = options010;
    message003.innerHTML = "";
    number001.innerHTML = a++;
    message004.innerHTML = "";
    message004.innerHTML = "<button class=buttons002 onclick=repeat001()>Start Again</button>";
} else {
    message001.innerHTML = "End of Quiz";
    message002.innerHTML = "";
    message003.innerHTML = "";
  
    message004.innerHTML = "<button class=buttons002 onclick=repeat001()>Play Again</button>";    
}

}

function repeat001() {
location.reload();
}
.buttons001 {
    background-color: #047aed;
    color: white;
    width: 150px;
    height: 50px;
    border-radius: 5px;
    border-color: #047aed;
    
     top: 70%;  
    
    
}

.buttonsreal {
    background-color: #047aed;
    color: white;
    width: 150px;
    height: 50px;
    border-radius: 2px;
    border-color: #047aed;
    margin: 20px; 
    
    
}

.buttonsfake {
    background-color: #047aed;
    color: white;
    width: 150px;
    height: 50px;
    border-radius: 2px;
    border-color: #047aed;
    margin: 20px;
}    

.buttonsrestart{
    background-color: #047aed;
    color: white;
    width: 150px;
    height: 50px;
    border-radius: 2px;
    border-color: #047aed;
    margin: 20px;
}   
.buttons002 {
    background-color: #047aed;
    color: white;
    width: 150px;
    height: 50px;
    border-radius: 2px;
    border-color: #047aed;
    margin: 20px;
}

#font001 {
    text-align: center;
    font-size: large;
    color: black;
}
<div id="main">
<div id="font001">
    
    <h1 style ="padding-bottom: 30px; padding-top: 100px;">Can You Spot The Correct Image?</h1>

    
    <p style="padding-bottom: 30px">Question: <text id="number001">0</p>
   
        <p style= "padding-bottom: 30px">Score: <text id="score001" >0</p>
    
    <div id="disappear001">
        <button class="buttons002" onclick="begin001()">Start Quiz</button>
        
    </div>
    <p id="message001"></p>
    <p id="message002"></p>
    <p id="message003"></p>
    <p id="message004"></p>
      <p id="message005"></p>
  
   
</div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Followed this advise and this solved the problem: "this continues to display the image underneath the next question" - and that did surprise you? Content added to an HTML document does not automagically disappear on its own again, why should it. If you don't need to show anything else in that element that needs to stay - then remove the added content again when you move on to the next question, by setting the innerHTML to an empty string again.


  2. 0

    By clicking on one image you can set the others with Display None

    document.getElementById("element").style.display = "none";
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search