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

我认为以下代码应该可以胜任

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>

Answer 2

我制作了这个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); });

从HTML表单中分割值，将其用作Google散点图

2 个答案: