How to add the score, according to the value with survey.js?

Question

I am doing a Quiz that requires that according to the chosen value, a value (score). And at the end of the quiz, add the scores according to the options chosen. This is the code I have: Html. (library. survey.ko.js)

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

Js

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 //Este score se tendria que sumar en cada pregunta.
      }
       ],
       "title": "Intro"
      }};
    var survey = new Survey.Model(json);

survey.onComplete.add(function(result) {
    document.querySelector('#result').innerHTML = "result: " + JSON.stringify(result.data); 
});

What I want to do is that when they click on an option it adds to the previous one; until the end of the quiz. I saw that the JSON result only shows me "value" but not the "score" element. Do you have any idea to solve it?

Answer 1

I believe this unit test from SurveyJS Library source code demonstrates exactly your scenario - https://github.com/surveyjs/survey-library/blob/master/tests/surveytests.ts#L7266-L7594

QUnit.test(
  "custom fields in getPlainData - https://surveyjs.answerdesk.io/ticket/details/T1778",
  function (assert) {
    Serializer.addProperty("question", {
      name: "score:number",
    });

    Serializer.addProperty("itemvalue", {
      name: "score:number",
    });

    var q = new QuestionImagePickerModel(null);

    var survey = new SurveyModel({
      questions: [
        {
          type: "rating",
          name: "question11",
          score: 11,
        },
        {
          type: "dropdown",
          name: "question12",
          score: 12,
          choices: [
            {
              value: "item1",
              score: 1,
            },
            {
              value: "item2",
              score: 2,
            },
            {
              value: "item3",
              score: 3,
            },
          ],
        },
        {
          type: "text",
          name: "question13",
          score: 13,
        },
        {
          type: "checkbox",
          name: "question14",
          score: 14,
          choices: [
            {
              value: "item1",
              score: 1,
            },
            {
              value: "item2",
              score: 2,
            },
            {
              value: "item3",
              score: 3,
            },
          ],
        },
        {
          type: "radiogroup",
          name: "question1",
          score: 1,
          choices: [
            {
              value: "item1",
              score: 1,
            },
            {
              value: "item2",
              score: 2,
            },
            {
              value: "item3",
              score: 3,
            },
          ],
        },
        {
          type: "comment",
          name: "question2",
          score: 2,
        },
        {
          type: "imagepicker",
          name: "question3",
          score: 3,
          choices: [
            {
              value: "lion",
              score: 1,
              imageLink:
                "https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg",
            },
            {
              value: "giraffe",
              text: "giraffe22",
              score: 2,
              imageLink:
                "https://surveyjs.io/Content/Images/examples/image-picker/giraffe.jpg",
            },
            {
              value: "panda",
              score: 3,
              imageLink:
                "https://surveyjs.io/Content/Images/examples/image-picker/panda.jpg",
            },
            {
              value: "camel",
              score: 4,
              imageLink:
                "https://surveyjs.io/Content/Images/examples/image-picker/camel.jpg",
            },
          ],
        },
        {
          type: "file",
          name: "question4",
          score: 4,
        },
        {
          type: "multipletext",
          name: "question5",
          score: 5,
          items: [
            {
              name: "text1",
            },
            {
              name: "text2",
            },
          ],
        },
        {
          type: "matrixdropdown",
          name: "question9",
          score: 9,
          columns: [
            {
              name: "Column 1",
            },
            {
              name: "Column 2",
            },
            {
              name: "Column 3",
            },
          ],
          choices: [
            {
              value: 1,
              score: 1,
            },
            {
              value: 2,
              score: 2,
            },
            {
              value: 3,
              score: 3,
            },
            {
              value: 4,
              score: 4,
            },
            {
              value: 5,
              score: 5,
            },
          ],
          rows: ["Row 1", "Row 2"],
        },
        {
          type: "matrix",
          name: "question10",
          score: 10,
          columns: [
            {
              value: "Column 1",
              score: 1,
            },
            {
              value: "Column 2",
              score: 2,
            },
            {
              value: "Column 3",
              score: 3,
            },
          ],
          rows: ["Row 1", "Row 2"],
        },
        {
          type: "panel",
          name: "panel1",
          elements: [
            {
              type: "radiogroup",
              name: "question6",
              score: 6,
              choices: [
                {
                  value: "item1",
                  score: 1,
                },
                {
                  value: "item2",
                  score: 2,
                },
                {
                  value: "item3",
                  score: 3,
                },
              ],
            },
            {
              type: "file",
              name: "question7",
              score: 7,
            },
          ],
        },
        {
          type: "paneldynamic",
          name: "question8",
          score: 8,
          templateElements: [
            {
              type: "text",
              score: 21,
              name: "question21",
            },
          ],
        },
      ],
    });
    survey.data = {
      question11: 3,
      question12: "item2",
      question13: "some text 13",
      question14: ["item2", "item3"],
      question1: "item1",
      question2: "comment2",
      question3: "giraffe",
      question4: [
        {
          name: "favicon.ico",
          type: "image/x-icon",
          content: "data:image/x-icon;base64,A=",
        },
      ],
      question5: { text1: "a", text2: "b" },
      question9: {
        "Row 1": { "Column 1": 1, "Column 2": 2, "Column 3": 3 },
        "Row 2": { "Column 1": 4, "Column 2": 5, "Column 3": 4 },
      },
      question10: { "Row 1": "Column 1", "Row 2": "Column 2" },
      question8: [
        { question21: "Panel dynamic content 1" },
        { question21: "Panel dynamic content 2" },
      ],
    };

    var plainData = survey.getPlainData({
      calculations: [{ propertyName: "score" }],
    });
    assert.equal(plainData.length, 12, "all questions are present");
    assert.deepEqual(plainData[0].value, 3);
    assert.equal(plainData[0].score, 11);
    assert.equal(plainData[0].isNode, false);
    assert.deepEqual(plainData[1].value, "item2");
    assert.equal(plainData[1].score, 12);
    assert.equal(plainData[1].isNode, true);
    assert.equal(plainData[1].data[0].score, 2);
    assert.deepEqual(plainData[2].value, "some text 13");
    assert.equal(plainData[2].score, 13);
    assert.deepEqual(plainData[3].value, ["item2", "item3"]);
    assert.equal(plainData[3].score, 14);
    assert.deepEqual(plainData[4].value, "item1");
    assert.equal(plainData[4].score, 1);
    assert.deepEqual(plainData[5].value, "comment2");
    assert.equal(plainData[5].score, 2);
    assert.deepEqual(plainData[6].value, "giraffe");
    assert.equal(plainData[6].score, 3);
    assert.deepEqual(plainData[7].value, [
      {
        content: "data:image/x-icon;base64,A=",
        name: "favicon.ico",
        type: "image/x-icon",
      },
    ]);
    assert.equal(plainData[7].score, 4);
    assert.deepEqual(plainData[8].value, { text1: "a", text2: "b" });
    assert.equal(plainData[8].score, 5);
    assert.deepEqual(plainData[9].value, {
      "Row 1": { "Column 1": 1, "Column 2": 2, "Column 3": 3 },
      "Row 2": { "Column 1": 4, "Column 2": 5, "Column 3": 4 },
    });
    assert.equal(plainData[9].score, 9);

    assert.deepEqual(plainData[10].value, {
      "Row 1": "Column 1",
      "Row 2": "Column 2",
    });
    assert.equal(plainData[10].score, 10);
    assert.equal(plainData[10].data[0].score, 1);
    assert.equal(plainData[10].data[1].score, 2);

    assert.deepEqual(plainData[11].value, [
      { question21: "Panel dynamic content 1" },
      { question21: "Panel dynamic content 2" },
    ]);
    assert.equal(plainData[11].score, 8);

    assert.ok(plainData[3].isNode);
    assert.equal(plainData[3].data.length, 2);
    assert.equal(plainData[3].data[0].value, "item2");
    assert.equal(plainData[3].data[0].displayValue, "item2");
    assert.equal(plainData[3].data[1].value, "item3");
    assert.equal(plainData[3].data[1].displayValue, "item3");

    Serializer.removeProperty("question", "score");
    Serializer.removeProperty("itemvalue", "score");
  }
);