调查 - 根据答案计算分数

Survey - calculate scores based on answers

我正在尝试创建一个调查，在用户点击提交后计算分数的百分比。类别答案应该，"verbal communication"，"non-verbal communication"和书面交流。评估完成后，应显示分数。评分应显示为图表或比例中显示的百分比。此外，必须保留答案或分数。如果有人可以帮助我，我将不胜感激！

<!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>

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre><code>    <!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>

使用 jQuery 和 chart.js，您可以在提交表单时阅读答案并绘制图表，然后将值存储到 localStorage 以便保留您的分数。

由于 localStorage 在 SO 沙箱中不起作用，这里有笔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>