测验疑难解答

时间:2017-04-17 17:26:48

标签: javascript image double document

我遇到的问题是它在页面上打印了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;
}

1 个答案:

答案 0 :(得分:0)

删除此

        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';