0
Ich habe ein Problem, bei dem 2 gleiche Bilder auf der Seite gedruckt werden. Kann mir jemand helfen, es zu reparieren? Ich habe die letzten 2 Stunden daran gearbeitet und es ist heute fällig. Ich habe es so, dass es auf einer anderen Seite die Ergebnisse basierend auf Ihren Entscheidungen druckt. Quiz Fehlerbehebung
<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;
}
so Sie sehen zwei Bilder anstelle von einem Bild nach rechts? 'if (score> 30 && score <35)' – ajup
Es druckt nur das eine Bild (und glücklicherweise das richtige), aber es tut es zweimal. – TheShadowGamer