0
我遇到了将相同图像的2个打印在页面上的问题。有人可以帮我修复它吗？我花了过去2个小时的时间来研究它，它今天就到期了。我拥有它，因此它会根据您做出的选择将结果打印到另一页。测验疑难解答
<html>
<head>
<title>Spirit Animal Quiz</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="quiz.css">
<h1><div class="title">Spirit Animal Quiz</div></h1>
</head>
<body onLoad="start()">
<form>
<br> <br>
<div class= "questionsStyle">
<div class="question">1. How would you describe your skin?</div><br>
<div class="answer">
<input type="radio" name="q1" onClick="scorer(1,2)">Rough<br>
<input type="radio" name="q1" onClick="scorer(1,4)">Smooth<br>
<input type="radio" name="q1" onClick="scorer(1,3)">Both<br>
</div><br>
<div class="question">2. Which of these words best describes you?</div><br>
<div class="answer">
<input type="radio" name="q2" onClick="scorer(2,2)" >Introvert<br>
<input type="radio" name="q2" onClick="scorer(2,6)">Extrovert<br>
<input type="radio" name="q2" onClick="scorer(2,4)">In between<br>
</div><br>
<div class="question3">3. What's your favorite color?</div><br>
<div class="answer3">
<input type="radio" name="q3">Red<br>
<input type="radio" name="q3">Blue<br>
<input type="radio" name="q3">Green<br>
<input type="radio" name="q3">Yellow<br>
<input type="radio" name="q3">Pink<br>
<input type="radio" name="q3">Purple<br>
<input type="radio" name="q3">Orange<br>
<input type="radio" name="q3">Brown<br>
</div><br>
<div class="question">4. Which of the following best describes you?</div><br>
<div class="answer">
<input type="radio" name="q4" onClick="scorer(4,6)">Timid<br>
<input type="radio" name="q4" onClick="scorer(4,4)">Courageous<br>
<input type="radio" name="q4" onClick="scorer(4,2)">Tough<br>
<input type="radio" name="q4" onClick="scorer(4,8)">Cowardly<br>
</div><br>
<div class="question">5. Which of these do you prefer?</div><br>
<div class="answer">
<input type="radio" name="q5" onClick="scorer(5,4)">Peace and quiet<br>
<input type="radio" name="q5" onClick="scorer(5,6)">Noise and crowds<br>
</div><br>
<div class="question">6. Do you cook your own food?</div><br>
<div class="answer">
<input type="radio" name="q6" onClick="scorer(6,2)">Yes<br>
<input type="radio" name="q6" onClick="scorer(6,4)">No<br>
</div><br>
<div class="question"><br>7. Which would you describe yourself as</div><br>
<div class="answer">
<input type="radio" name="q7" onClick="scorer(7,6)">Patient<br>
<input type="radio" name="q7" onClick="scorer(7,8)">Impatient<br>
</div><br>
<input type="button" name="result" value="Find out your spirit animal." onClick="total()">
</div>
</form>
<script language="javascript">
//sets up an array for the answers that are given
var result = new Array(7);
function start() {
for(var i=0; i<7; i++) { result[i]=0; }
}
// Adds points together.
function total() {
score=0;
for (var i=0; i<7; i++) { score=score+result[i]; }
analyzer(score);
}
output = new Array();
output[0] = "You have a more tender personality and tend to like being around others or at least feel like there is someone around. Your spirit animal is the crowd-loving rabbit";
output[1] = "Your a bit skittish, but you tend to stick around unless something bothers you. You prefer groups, but occasionally tend to wander on your own. Your spirit animal is the timid and fun loving deer.";
output[2] = "You are capable of doing things on your own, but don't really have an issue when in a group. You can be a bit tough to work with at times, but you always do your part. Your spirit animal is the fierce and courageous wolf.";
output[3] = "You prefer being alone in peace and quiet. You are patient and willing to do your own work to get what you need. Your spirit animal is the tough and vicious alligator.";
output[4] = "I think you missed something"
output[5] = "Come on now, you didn't answer any questions."
img = new Array();
img[0] = new Image();
img[0].src = 'images/Rabbit.jpg';
img[1] = new Image();
img[1].src = 'images/Deer.jpg';
img[2] = new Image();
img[2].src = 'images/Wolf.jpg';
img[3] = new Image();
img[3].src = 'images/Alligator.jpg';
function analyzer (score) {
// use total to determine spirit animal
if (score > 35) { finish = 0;}
else { if (score > 30) { finish = 1;}
else { if(score > 24) { finish = 2;}
else { if(score > 15) { finish = 3;}
else { if(score > 1) { finish = 4; }
else { finish = 5; console.warn("Please answer the questions.");}
}
}
}
}
//Add the points into an array
display(output[finish])
display(img[finish])
}
function scorer(q, points) {
q=q-1;
result[q]=points
}
//ALERT RESULTS: Replace with page change if time feasible
function display(output) {
if (score > 35) {document.write(output); document.write('<img src="images/Rabbit.jpg">')}
else if (score > 30) {document.write(output); document.write('<img src="images/Deer.jpg">')}
else if(score > 24) {document.write(output); document.write('<img src="images/Wolf.jpg">')}
else if(score > 15) {document.write(output); document.write('<img src="images/Alligator.jpg">')}
}
CSS
h1 {font-size: 3em; margin: center; font-weight:5; background-color:
red;text-align: center; border-radius: 6px;}
body { background-color: white; padding: 10px;
font-family: 'Roboto', sans-serif; font-size: 20px;
position: relative
overflow: hidden;
color:white;
background: black;
padding: 20px;
}
#questionStyle .answer{
font-family: cursive;
}
所以你看到两个图像，而不是一个形象吧？ '如果（得分> 30 &&得分<35）' – ajup
它只打印一张图片（幸运的是正确的一张），但它做了两次。 – TheShadowGamer