对 HTML 表单中的拆分值求和，用作 Google 散点图的数据

Question

我正在创建一个在线测验并希望能够在图表上绘制分数。

我试图在表单的选中单选按钮中添加所有逗号分隔值，结果也是逗号分隔值，但我不确定如何执行此操作。

示例：

2,2 + -2,2 + 1,-1 = 1,3

然后我想将生成的数字插入 Google Visualization API 以在同一页面上绘制图表，最好在选中每个单选按钮时进行更新。

示例表单代码：

<form>

<input type="radio" name="q1" class="option" value="2,-2" /> 
<input type="radio" name="q1" class="option" value="1,-1" /> 
<input type="radio" name="q1" class="option" value="0,0" /> 
<input type="radio" name="q1" class="option" value="-1,1" /> 
<input type="radio" name="q1" class="option" value="-2,2" />

<input type="radio" name="q2" class="option" value="2,-2" /> 
<input type="radio" name="q2" class="option" value="1,-1" /> 
<input type="radio" name="q2" class="option" value="0,0" /> 
<input type="radio" name="q2" class="option" value="-1,1" /> 
<input type="radio" name="q2" class="option" value="-2,2" />

</form>

Google 可视化 API：

google.load("visualization", "1", {packages:["corechart"]});

google.setOnLoadCallback(drawChart);

function drawChart() {

  var data = google.visualization.arrayToDataTable([

    ['',''],

    [0,0]

  ]);

var options = {
  hAxis: {minValue: -94, maxValue: 94, gridlines: {count:0}},
  vAxis: {minValue: -94, maxValue: 94, gridlines: {count:0}},
  legend: 'none',
  colors: ['#000000'],
  width: 500,
  height: 500
};

var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
}

我一直在寻找一种方法来实现这一点，但是到目前为止，我找到的解决方案都不适合。任何帮助将不胜感激，谢谢。

Answer 1

我制作了这个Fiddle 示例来向您展示如何对逗号分隔值进行动态求和。获得值后，您可以使用 Google Visualization API 绘制结果。

$(document).ready(function(){

  var radios = $('input[type=radio]');

  var evalResult = function(){

    var sum1 = 0;
    var sum2 = 0;

    var q1 = $("input[type=radio][name=q1]:checked").val();
    var q2 = $("input[type=radio][name=q2]:checked").val();

    var values_q1 = q1.split(',');
    var values_q2 = q2.split(',');

    sum1 = parseInt(values_q1[0]) + parseInt(values_q1[0]);
    sum2 = parseInt(values_q1[1]) + parseInt(values_q2[1]);

    $(".expression").html(q1+" + "+ q2 + " = "+ sum1 + ","+sum2);
  }

  evalResult();
  radios.change(evalResult);

});

编辑

您可以通过 n 个问题概括该过程。

$(document).ready(function(){

  var radios = $('input[type=radio]');

  var evalResult = function(){

    var numQuestions = 80;
    var sum1 = 0;
    var sum2 = 0;

    var expr_str = '';
    for(var i = 1; i <= numQuestions; i++){
      var q = $("input[type=radio][name=q"+i+"]:checked").val();
      var value = q.split(',');
      sum_1 += parseInt(value[0]);
      sum_2 += parseInt(value[1]);
      expr_str += (i <= numQuestions) ? q + " + " : q + " = ";
    }

    $(".expression").html(expr_str);
  }

  evalResult();
  radios.change(evalResult);

});

Answer 2

我认为下面的代码应该可以完成这项工作

var totalVal = $(':checked')
  .map(function() { return $(this).val(); })
  .toArray()
  .reduce(function(sum, val) {
    var splitVal = val.split(',');
    sum[0] = sum[0] + parseInt(splitVal[0], 10);
    sum[1] = sum[1] + parseInt(splitVal[1], 10);
    return sum;
  }, [0, 0]);

console.log(totalVal)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<form>

  <input checked type="radio" name="q1" class="option" value="2,-2" />
  <input type="radio" name="q1" class="option" value="1,-1" />
  <input type="radio" name="q1" class="option" value="0,0" />
  <input type="radio" name="q1" class="option" value="-1,1" />
  <input type="radio" name="q1" class="option" value="-2,2" />

  <input type="radio" name="q2" class="option" value="2,-2" />
  <input checked type="radio" name="q2" class="option" value="1,-1" />
  <input type="radio" name="q2" class="option" value="0,0" />
  <input type="radio" name="q2" class="option" value="-1,1" />
  <input type="radio" name="q2" class="option" value="-2,2" />

</form>