1. Zuhause
  2. Frage und Antwort
  3. Umfrage - Ergebnisse basierend auf Antworten berechnen

Umfrage - Ergebnisse basierend auf Antworten berechnen

2017-08-20 2 views
-1

Ich versuche eine Umfrage zu erstellen, die die Prozentsätze der Bewertungen berechnet, sobald der Benutzer auf "Senden" klickt. Die Kategorienantworten sollten "verbale Kommunikation", "nonverbale Kommunikation" und schriftliche Kommunikation sein. Wenn die Bewertung abgeschlossen ist, sollte eine Bewertung angezeigt werden. Scoring sollte als Prozentwert in einer Grafik oder Skala angezeigt werden. Darüber hinaus müssen Antworten oder Noten beibehalten werden. Wenn jemand mir dabei helfen könnte, würde ich es sehr schätzen!Umfrage - Ergebnisse basierend auf Antworten berechnen

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Survey</title> 
    <link rel="stylesheet" href="style.css"> 
</head> 
<body> 
    <main class="content" role="main"> 
    <div class="grid-100"> 
     <div class="contained"> 
     <div class="grid-100"> 
      <h3>KeyPath Survey</h3> 
      </br> 
      <form action=""> 
      <fieldset> 
       <div> 
       <label for="">1. Which of the following describes you best?</label> 
       </div> 
       <div class="grid-75 grid-parent"> 
       <div class="form-item"> 
        <select name="" id=""> 
        <option value="Employed">Select One</option> 
        <option value="Employed">Verbal Communication</option> 
        <option value="Employed">Nonverbal Communication</option> 
        <option value="Employed">Written Communication</option> 
        </select> 
       </div> 
       </div> 
       <div> 
       <label for="">2. Which of the following describes you best?</label> 
       </div> 
       <div class="grid-75 grid-parent"> 
       <div class="form-item"> 
        <select name="" id=""> 
        <option value="Employed">Select One</option> 
        <option value="Employed">Verbal Communication</option> 
        <option value="Employed">Nonverbal Communication</option> 
        <option value="Employed">Written Communication</option> 
        </select> 
       </div> 
       </div> 
       <div> 
       <label for="">3. Which of the following describes you best?</label> 
       </div> 
       <div class="grid-75 grid-parent"> 
       <div class="form-item"> 
        <select name="" id=""> 
        <option value="Employed">Select One</option> 
        <option value="Employed">Verbal Communication</option> 
        <option value="Employed">Nonverbal Communication</option> 
        <option value="Employed">Written Communication</option> 
        </select> 
       </div> 
       </div> 
       <div> 
       <label for="">4. Which of the following describes you best?</label> 
       </div> 
       <div class="grid-75 grid-parent"> 
       <div class="form-item"> 
        <select name="" id=""> 
        <option value="Employed">Select One</option> 
        <option value="Employed">Verbal Communication</option> 
        <option value="Employed">Nonverbal Communication</option> 
        <option value="Employed">Written Communication</option> 
        </select> 
       </div> 
       </div> 
       <div> 
       <label for="">5. Which of the following describes you best?</label> 
       </div> 
       <div class="grid-75 grid-parent"> 
       <div class="form-item"> 
        <select name="" id=""> 
        <option value="Employed">Select One</option> 
        <option value="Employed">Verbal Communication</option> 
        <option value="Employed">Nonverbal Communication</option> 
        <option value="Employed">Written Communication</option> 
        </select> 
       </div> 
       </div> 
       <div> 
       <label for="">6. Which of the following describes you best?</label> 
       </div> 
       <div class="grid-75 grid-parent"> 
       <div class="form-item"> 
        <select name="" id=""> 
        <option value="Employed">Select One</option> 
        <option value="Employed">Verbal Communication</option> 
        <option value="Employed">Nonverbal Communication</option> 
        <option value="Employed">Written Communication</option> 
        </select> 
       </div> 
       </div> 
       <div> 
       <label for="">7. Which of the following describes you best?</label> 
       </div> 
       <div class="grid-75 grid-parent"> 
       <div class="form-item"> 
        <select name="" id=""> 
        <option value="Employed">Select One</option> 
        <option value="Employed">Verbal Communication</option> 
        <option value="Employed">Nonverbal Communication</option> 
        <option value="Employed">Written Communication</option> 
        </select> 
       </div> 
       </div> 
       <div> 
       <label for="">8. Which of the following describes you best?</label> 
       </div> 
       <div class="grid-75 grid-parent"> 
       <div class="form-item"> 
        <select name="" id=""> 
        <option value="Employed">Select One</option> 
        <option value="Employed">Verbal Communication</option> 
        <option value="Employed">Nonverbal Communication</option> 
        <option value="Employed">Written Communication</option> 
        </select> 
       </div> 
       </div> 
       <div> 
       <label for="">9. Which of the following describes you best?</label> 
       </div> 
       <div class="grid-75 grid-parent"> 
       <div class="form-item"> 
        <select name="" id=""> 
        <option value="Employed">Select One</option> 
        <option value="Employed">Verbal Communication</option> 
        <option value="Employed">Nonverbal Communication</option> 
        <option value="Employed">Written Communication</option> 
        </select> 
       </div> 
       </div> 
       <div> 
       <label for="">10. Which of the following describes you best?</label> 
       </div> 
       <div class="grid-75 grid-parent"> 
       <div class="form-item"> 
        <select name="" id=""> 
        <option value="Employed">Select One</option> 
        <option value="Employed">Verbal Communication</option> 
        <option value="Employed">Nonverbal Communication</option> 
        <option value="Employed">Written Communication</option> 
        </select> 
       </div> 
       </div> 
      </fieldset> 
      </form> 
     </div> 
     </div> 
     <div class="form-footer"> 
     <button class="button primary">Submit Survey</button> 
     </div> 

    </div></main> 

</body> 


          
  
 
   
 
    
<!DOCTYPE html> 
 
    <html lang="en"> 
 
    <head> 
 
     <meta charset="UTF-8"> 
 
     <title>Survey</title> 
 
     <link rel="stylesheet" href="style.css"> 
 
    </head> 
 
    <body> 
 
     <main class="content" role="main"> 
 
     <div class="grid-100"> 
 
      <div class="contained"> 
 
      <div class="grid-100"> 
 
       <h3>KeyPath Survey</h3> 
 
       </br> 
 
       <form action=""> 
 
       <fieldset> 
 
        <div> 
 
        <label for="">1. Which of the following describes you best?</label> 
 
        </div> 
 
        <div class="grid-75 grid-parent"> 
 
        <div class="form-item"> 
 
         <select name="" id=""> 
 
         <option value="Employed">Select One</option> 
 
         <option value="Employed">Verbal Communication</option> 
 
         <option value="Employed">Nonverbal Communication</option> 
 
         <option value="Employed">Written Communication</option> 
 
         </select> 
 
        </div> 
 
        </div> 
 
        <div> 
 
        <label for="">2. Which of the following describes you best?</label> 
 
        </div> 
 
        <div class="grid-75 grid-parent"> 
 
        <div class="form-item"> 
 
         <select name="" id=""> 
 
         <option value="Employed">Select One</option> 
 
         <option value="Employed">Verbal Communication</option> 
 
         <option value="Employed">Nonverbal Communication</option> 
 
         <option value="Employed">Written Communication</option> 
 
         </select> 
 
        </div> 
 
        </div> 
 
        <div> 
 
        <label for="">3. Which of the following describes you best?</label> 
 
        </div> 
 
        <div class="grid-75 grid-parent"> 
 
        <div class="form-item"> 
 
         <select name="" id=""> 
 
         <option value="Employed">Select One</option> 
 
         <option value="Employed">Verbal Communication</option> 
 
         <option value="Employed">Nonverbal Communication</option> 
 
         <option value="Employed">Written Communication</option> 
 
         </select> 
 
        </div> 
 
        </div> 
 
        <div> 
 
        <label for="">4. Which of the following describes you best?</label> 
 
        </div> 
 
        <div class="grid-75 grid-parent"> 
 
        <div class="form-item"> 
 
         <select name="" id=""> 
 
         <option value="Employed">Select One</option> 
 
         <option value="Employed">Verbal Communication</option> 
 
         <option value="Employed">Nonverbal Communication</option> 
 
         <option value="Employed">Written Communication</option> 
 
         </select> 
 
        </div> 
 
        </div> 
 
        <div> 
 
        <label for="">5. Which of the following describes you best?</label> 
 
        </div> 
 
        <div class="grid-75 grid-parent"> 
 
        <div class="form-item"> 
 
         <select name="" id=""> 
 
         <option value="Employed">Select One</option> 
 
         <option value="Employed">Verbal Communication</option> 
 
         <option value="Employed">Nonverbal Communication</option> 
 
         <option value="Employed">Written Communication</option> 
 
         </select> 
 
        </div> 
 
        </div> 
 
        <div> 
 
        <label for="">6. Which of the following describes you best?</label> 
 
        </div> 
 
        <div class="grid-75 grid-parent"> 
 
        <div class="form-item"> 
 
         <select name="" id=""> 
 
         <option value="Employed">Select One</option> 
 
         <option value="Employed">Verbal Communication</option> 
 
         <option value="Employed">Nonverbal Communication</option> 
 
         <option value="Employed">Written Communication</option> 
 
         </select> 
 
        </div> 
 
        </div> 
 
        <div> 
 
        <label for="">7. Which of the following describes you best?</label> 
 
        </div> 
 
        <div class="grid-75 grid-parent"> 
 
        <div class="form-item"> 
 
         <select name="" id=""> 
 
         <option value="Employed">Select One</option> 
 
         <option value="Employed">Verbal Communication</option> 
 
         <option value="Employed">Nonverbal Communication</option> 
 
         <option value="Employed">Written Communication</option> 
 
         </select> 
 
        </div> 
 
        </div> 
 
        <div> 
 
        <label for="">8. Which of the following describes you best?</label> 
 
        </div> 
 
        <div class="grid-75 grid-parent"> 
 
        <div class="form-item"> 
 
         <select name="" id=""> 
 
         <option value="Employed">Select One</option> 
 
         <option value="Employed">Verbal Communication</option> 
 
         <option value="Employed">Nonverbal Communication</option> 
 
         <option value="Employed">Written Communication</option> 
 
         </select> 
 
        </div> 
 
        </div> 
 
        <div> 
 
        <label for="">9. Which of the following describes you best?</label> 
 
        </div> 
 
        <div class="grid-75 grid-parent"> 
 
        <div class="form-item"> 
 
         <select name="" id=""> 
 
         <option value="Employed">Select One</option> 
 
         <option value="Employed">Verbal Communication</option> 
 
         <option value="Employed">Nonverbal Communication</option> 
 
         <option value="Employed">Written Communication</option> 
 
         </select> 
 
        </div> 
 
        </div> 
 
        <div> 
 
        <label for="">10. Which of the following describes you best?</label> 
 
        </div> 
 
        <div class="grid-75 grid-parent"> 
 
        <div class="form-item"> 
 
         <select name="" id=""> 
 
         <option value="Employed">Select One</option> 
 
         <option value="Employed">Verbal Communication</option> 
 
         <option value="Employed">Nonverbal Communication</option> 
 
         <option value="Employed">Written Communication</option> 
 
         </select> 
 
        </div> 
 
        </div> 
 
       </fieldset> 
 
       </form> 
 
      </div> 
 
      </div> 
 
      <div class="form-footer"> 
 
      <button class="button primary">Submit Survey</button> 
 
      </div> 
 

 
     </div></main> 
 

 
    </body> 
 
     <script src="main.js"></script> 
 
    </html>
 
   
 
  
 
 

 


    <script src="main.js"></script> 
</html>

Quelle

2017-08-20 Missy Bur

+0

https://jsfiddle.net/c7pcwLxf/ einem Stift nicht in der Sandbox SO arbeiten - Hier ist eine Geige –

Antwort

0

Mit jQuery und chart.js, können Sie in den Antworten lesen und Diagramm, wenn Sie das Formular absenden, dann die Werte speichern local, so dass Ihre Punktzahl erhalten bleibt.

Seit local, hier ist https://codepen.io/mcoker/pen/eEMGYN

var $selects = $("select"), 
 
    data, 
 
    ctx = $("#myChart"), 
 
    config = { 
 
    selected: 0, 
 
    type: "pie", 
 
    options: { 
 
     responsive: true, 
 
     pieceLabel: { 
 
     render: function(args) { 
 
      var selected = function() { 
 
      var out = 0; 
 
      for (var i = 0; i < data.length; i++) { 
 
       out = out + data[i]; 
 
      } 
 
      return out; 
 
      }; 
 
      var percentage = Math.round(args.value/selected() * 100) + "%"; 
 
      $('#'+args.label).text(percentage); 
 
      return percentage; 
 
     }, 
 
     fontSize: 14, 
 
     fontStyle: "bold", 
 
     fontColor: "#fff", 
 
     fontFamily: '"Lucida Console", Monaco, monospace' 
 
     } 
 
    }, 
 

 
    data: { 
 
     labels: ["verbal", "non-verbal", "written"], 
 
     datasets: [ 
 
     { 
 
      data: [0, 0, 0], 
 
      backgroundColor: ["#09c", "#c00011", "green"] 
 
     } 
 
     ] 
 
    } 
 
    }; 
 

 
myChart = new Chart(ctx, config); 
 

 
$(".submit").on("click", function(e) { 
 
    var results = { v: 0, n: 0, w: 0 }, 
 
    hasSelected = 0; 
 
    e.preventDefault(); 
 
    $selects.each(function() { 
 
    var val = $(this).val(); 
 
    if (val) { 
 
     results[val]++; 
 
     hasSelected = 1; 
 
    } 
 
    }); 
 
    if (hasSelected) { 
 
    data = []; 
 
    $.each(results, function(k, v) { 
 
     data.push(v); 
 
    }); 
 
    } else { 
 
    data = JSON.parse(localStorage.getItem("data")); 
 
    } 
 
    config.data.datasets[0].data = data; 
 
    myChart.update(); 
 
    localStorage.data = JSON.stringify(data); 
 
});
.content { 
 
    display: flex; 
 
    max-width: 960px; 
 
    margin: auto; 
 
} 
 
.grid-100, .graph { 
 
    flex: 1 0 50%; 
 
    overflow: hidden; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> 
 
<script src="https://cdn.rawgit.com/emn178/Chart.PieceLabel.js/master/build/Chart.PieceLabel.min.js"></script> 
 
<main class="content" role="main"> 
 
    <div class="grid-100"> 
 
    <form action=""> 
 
     <div class="contained"> 
 
     <div class="grid-100"> 
 
      <h3>KeyPath Survey</h3> 
 
      </br> 
 
      <fieldset> 
 
      <div> 
 
       <label for="">1. Which of the following describes you best?</label> 
 
      </div> 
 
      <div class="grid-75 grid-parent"> 
 
       <div class="form-item"> 
 
       <select name="" id=""> 
 
        <option disabled selected>Select One</option> 
 
        <option value="v">Verbal Communication</option> 
 
        <option value="n">Nonverbal Communication</option> 
 
        <option value="w">Written Communication</option> 
 
        </select> 
 
       </div> 
 
      </div> 
 
      <div> 
 
       <label for="">2. Which of the following describes you best?</label> 
 
      </div> 
 
      <div class="grid-75 grid-parent"> 
 
       <div class="form-item"> 
 
       <select name="" id=""> 
 
        <option disabled selected>Select One</option> 
 
        <option value="v">Verbal Communication</option> 
 
        <option value="n">Nonverbal Communication</option> 
 
        <option value="w">Written Communication</option> 
 
        </select> 
 
       </div> 
 
      </div> 
 
      <div> 
 
       <label for="">3. Which of the following describes you best?</label> 
 
      </div> 
 
      <div class="grid-75 grid-parent"> 
 
       <div class="form-item"> 
 
       <select name="" id=""> 
 
        <option disabled selected>Select One</option> 
 
        <option value="v">Verbal Communication</option> 
 
        <option value="n">Nonverbal Communication</option> 
 
        <option value="w">Written Communication</option> 
 
        </select> 
 
       </div> 
 
      </div> 
 
      <div> 
 
       <label for="">4. Which of the following describes you best?</label> 
 
      </div> 
 
      <div class="grid-75 grid-parent"> 
 
       <div class="form-item"> 
 
       <select name="" id=""> 
 
        <option disabled selected>Select One</option> 
 
        <option value="v">Verbal Communication</option> 
 
        <option value="n">Nonverbal Communication</option> 
 
        <option value="w">Written Communication</option> 
 
        </select> 
 
       </div> 
 
      </div> 
 
      <div> 
 
       <label for="">5. Which of the following describes you best?</label> 
 
      </div> 
 
      <div class="grid-75 grid-parent"> 
 
       <div class="form-item"> 
 
       <select name="" id=""> 
 
        <option disabled selected>Select One</option> 
 
        <option value="v">Verbal Communication</option> 
 
        <option value="n">Nonverbal Communication</option> 
 
        <option value="w">Written Communication</option> 
 
        </select> 
 
       </div> 
 
      </div> 
 
      <div> 
 
       <label for="">6. Which of the following describes you best?</label> 
 
      </div> 
 
      <div class="grid-75 grid-parent"> 
 
       <div class="form-item"> 
 
       <select name="" id=""> 
 
        <option disabled selected>Select One</option> 
 
        <option value="v">Verbal Communication</option> 
 
        <option value="n">Nonverbal Communication</option> 
 
        <option value="w">Written Communication</option> 
 
        </select> 
 
       </div> 
 
      </div> 
 
      <div> 
 
       <label for="">7. Which of the following describes you best?</label> 
 
      </div> 
 
      <div class="grid-75 grid-parent"> 
 
       <div class="form-item"> 
 
       <select name="" id=""> 
 
        <option disabled selected>Select One</option> 
 
        <option value="v">Verbal Communication</option> 
 
        <option value="n">Nonverbal Communication</option> 
 
        <option value="w">Written Communication</option> 
 
        </select> 
 
       </div> 
 
      </div> 
 
      <div> 
 
       <label for="">8. Which of the following describes you best?</label> 
 
      </div> 
 
      <div class="grid-75 grid-parent"> 
 
       <div class="form-item"> 
 
       <select name="" id=""> 
 
        <option disabled selected>Select One</option> 
 
        <option value="v">Verbal Communication</option> 
 
        <option value="n">Nonverbal Communication</option> 
 
        <option value="w">Written Communication</option> 
 
        </select> 
 
       </div> 
 
      </div> 
 
      <div> 
 
       <label for="">9. Which of the following describes you best?</label> 
 
      </div> 
 
      <div class="grid-75 grid-parent"> 
 
       <div class="form-item"> 
 
       <select name="" id=""> 
 
        <option disabled selected>Select One</option> 
 
        <option value="v">Verbal Communication</option> 
 
        <option value="n">Nonverbal Communication</option> 
 
        <option value="w">Written Communication</option> 
 
        </select> 
 
       </div> 
 
      </div> 
 
      <div> 
 
       <label for="">10. Which of the following describes you best?</label> 
 
      </div> 
 
      <div class="grid-75 grid-parent"> 
 
       <div class="form-item"> 
 
       <select name="" id=""> 
 
        <option disabled selected>Select One</option> 
 
        <option value="v">Verbal Communication</option> 
 
        <option value="n">Nonverbal Communication</option> 
 
        <option value="w">Written Communication</option> 
 
        </select> 
 
       </div> 
 
      </div> 
 
      </fieldset> 
 
     </div> 
 
     </div> 
 
     <div class="form-footer"> 
 
     <button class="button primary submit">Submit Survey</button> 
 
     </div> 
 
    </form> 
 

 
    </div> 
 
    <div class="graph"> 
 
    <canvas id="myChart"></canvas> 
 
    </div> 
 
</main> 
 
<div> 
 
    Score: Verbal <span id="verbal">0</span> 
 
    Non-Verbal <span id="non-verbal">0</span> 
 
    Written <span id="written">0</span> 
 
</div>

Quelle

2017-08-20 18:16:01

Verwandte Themen

 Verwandte Themen