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
I have included the code below:
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<link rel="stylesheet" href="css/utilities.css">
<link rel="stylesheet" href="css/quizstyle.css">
<title>Quiz</title>
</head>
<body>
<style>
.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;
}
</style>
<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>
JavaScript:
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();
}