javascript - Survey - calculate scores based on answers -
i trying create survey calculates percentages of scores once user clicks submit. category answers should, "verbal communication", "non-verbal communication" , written communication. when assessment finished score should displayed. scoring should shown percentages shown in graph or scale. in addition answers or scores must retained. if me appreciate it!
<!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. of following describes 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. of following describes 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. of following describes 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. of following describes 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. of following describes 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. of following describes 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. of following describes 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. of following describes 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. of following describes 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. of following describes 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. of following describes 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. of following describes 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. of following describes 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. of following describes 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. of following describes 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. of following describes 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. of following describes 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. of following describes 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. of following describes 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. of following describes 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>
using jquery , chart.js, can read in answers , chart them when submit form, store values localstorage score retained.
since localstorage doesn't work in sandbox, here's pen 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; (var = 0; < 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. of following describes 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. of following describes 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. of following describes 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. of following describes 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. of following describes 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. of following describes 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. of following describes 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. of following describes 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. of following describes 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. of following describes 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>
Comments
Post a Comment