2017-04-17 2 views
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; 
} 
+0

그래서 당신이보고있는 두 개의 이미지를 제거? 'if (score> 30 && score <35) ' – ajup

+0

하나의 이미지 만 인쇄하고 (고맙게도 올바른 이미지) 두 번 인쇄합니다. – TheShadowGamer

답변

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

대단히 감사합니다. – TheShadowGamer