如何用Survey.js根据选项值实现分数累加并获取分数结果？

我明白你现在的需求——想要在测验中根据选中选项的score属性累加总分，并且最终能得到这个汇总值，但目前默认的结果只返回选项的value，不包含自定义的score。别担心，我们可以通过SurveyJS的事件和内置方法来实现这个功能，下面分两种场景给你解决方案：

一、测验完成后计算总分 #

如果你只需要在用户完成测验后展示最终总分，可以在onComplete回调里遍历所有问题，匹配用户选中的选项并累加分数：

修改你的代码如下：

<div id="surveyElement"></div>
<div id="result"></div>

var json = { 
  "title": "Quiz", 
  "description": "Prueba de Quiz", 
  "pages": [ 
    { 
      "name": "page1", 
      "elements": [ 
        { 
          "type": "radiogroup", 
          "name": "LifeStyleQ11E1", 
          "title": "Do you smoke?", 
          "isRequired": true, 
          "choices": [ 
            { "value": "SmokeYes", "text": "Yes", "score": 5 }, 
            { "value": "SmokeNo", "text": "No", "score": 4 } 
          ] 
        } 
      ], 
      "title": "Intro", 
      "maxTimeToFinish": 2 
    }, 
    { 
      "name": "page2", 
      "elements": [ 
        { 
          "type": "radiogroup", 
          "name": "LifeStyleQ10E1", 
          "title": "Do you suffer from back pain?", 
          "isRequired": true, 
          "choices": [ 
            { "value": "BackPainYes", "text": "Yes", "score": -4 }, 
            { "value": "BackPainNo", "text": "No", "score": 5 } 
          ] 
        } 
      ], 
      "title": "Intro" 
    } 
  ] 
};

var survey = new Survey.Model(json);
let totalScore = 0;

survey.onComplete.add(function(result) {
  // 遍历所有页面的问题
  survey.pages.forEach(page => {
    page.elements.forEach(question => {
      if(question.getType() === "radiogroup") {
        // 获取用户选中的选项值
        const selectedValue = result.data[question.name];
        // 找到对应的选项对象
        const selectedChoice = question.choices.find(choice => choice.value === selectedValue);
        // 如果有score属性就累加
        if(selectedChoice && selectedChoice.score !== undefined) {
          totalScore += selectedChoice.score;
        }
      }
    });
  });
  
  // 展示结果和总分
  document.querySelector('#result').innerHTML = 
    "选择结果: " + JSON.stringify(result.data) + 
    "<br>总得分: " + totalScore;
});

survey.render("surveyElement");

二、实时累加并展示分数 #

如果你想让用户在答题过程中就能看到当前的累计分数，可以使用onValueChanged事件，每次用户切换选项时更新总分：

在上面的JS代码基础上，添加这个事件监听：

// 实时更新总分的事件
survey.onValueChanged.add(function(sender, options) {
  const question = options.question;
  if(question.getType() === "radiogroup") {
    // 先减去之前选中选项的分数（如果有的话）
    if(options.oldValue !== undefined) {
      const oldChoice = question.choices.find(choice => choice.value === options.oldValue);
      if(oldChoice && oldChoice.score !== undefined) {
        totalScore -= oldChoice.score;
      }
    }
    // 加上当前选中选项的分数
    const newChoice = question.choices.find(choice => choice.value === options.value);
    if(newChoice && newChoice.score !== undefined) {
      totalScore += newChoice.score;
    }
    // 实时更新显示
    document.querySelector('#result').innerHTML = "当前累计得分: " + totalScore;
  }
});

这样用户每选一个选项，页面上的result区域就会实时更新当前的累计分数，完成测验后再展示完整结果和最终总分。

关键说明 #

• SurveyJS不会自动包含自定义的score属性到结果中，所以我们需要手动通过question.choices数组去匹配用户选中的选项，提取对应的分数。
• 对于单选框（radiogroup）这类问题，确保每个选项都有明确的value和score，这样才能准确匹配和累加。

内容的提问来源于stack exchange，提问作者Rafael Robles