Scoring responses

Jag

created 7 years ago

Hi,

Is it possible to score responses and based then apply calculations on the response values. Please have a look at the Qualtrics links and I like to achieve the same with Surveyjs

https://www.qualtrics.com/support/survey-platform/survey-module/survey-tools/scoring/

Regards,
Jag

Answers

Serge T

created 7 years ago

Hello,

As far as I've understood scoring by the link - each question of a quiz, including choices has it's score. This score can be entered in survey builder and after survey has been passed some code calculates the total achieved score.

In SurveyJS you can add a custom property named score of numeric type to each question and choice item. This property will be available in SurveyJS Builder property grid (right pane). Developer should write a code that will calculate total score then survey has been completed.

If you want to get a specific dedicated user interface to control scoring options (as shown in the link you've provided) - you will need to implement it yourself.

Thanks, Serge
SurveyJS Team

Show previous comments (6)

Adi 7 years ago

Hello,

Do you have a sample code to show a small text box for entering the "score" beside each question. Because from your answer the score entered will be fixed and in my case I'm thinking of somehow dynamic scoring.

Serge T 7 years ago

Hello,

Yes, it was static scoring for each question. I don't understand the dynamic scoring scenario.

You can include each question in a group with number question for scoring as shown in JSON below:

JSON
{
 pages: [
  {
   name: "page1",
   elements: [
    {
     type: "panel",
     name: "panel1",
     elements: [
      {
       type: "checkbox",
       name: "question1",
       choices: [
        "item1",
        "item2",
        "item3"
       ]
      },
      {
       type: "text",
       name: "question2",
       title: "question1 score",
       inputType: "number"
      }
     ]
    },
    {
     type: "panel",
     name: "panel2",
     elements: [
      {
       type: "radiogroup",
       name: "question3",
       choices: [
        "item1",
        "item2",
        "item3"
       ]
      },
      {
       type: "text",
       name: "question4",
       title: "question3 score",
       inputType: "number"
      }
     ]
    }
   ]
  }
 ]
}

Thanks, Serge
SurveyJS Team

Adi 7 years ago

I have reached the below result, I was able to dynamically add scores to each question, now my question is how to retrieve the entered number.

JavaScript
//Add a score property into all questions types 

Survey
    .JsonObject
    .metaData
    .addProperty("question", "score:number");    



var json = {
    title: "Software developer survey.",
            questions: [
                {
                    type: "text",
                    name: "name",
                    title: "Name:",
                    score:5,
                    popupdescription: "Please, type your name as 'Given Name' 'Family Name'."
                }, {
                    type: "text",
                    name: "email",
                    title: "Your e-mail",
                    score:7,
                    popupdescription: "Please, make sure you do not misspell your e-mail."
                }
            ]
};

window.survey = new Survey.Model(json);

survey
    .onComplete
    .add(function (result) {

       var modifiedData = Object.keys(result.data).map(function(qName) {
          return {
            value: result.data[qName],
            score: result.getQuestionByName(qName).score
          }
        });
        document.querySelector('#surveyScore').innerHTML = "result: " + JSON.stringify(modifiedData);
    });

survey
    .onAfterRenderQuestion
    .add(function (survey, options) {
        //Return if there is no description to show in popup
        if (!options.question.score) 
            return;
        var score = document.createElement("input");
        score.value = options.question.score;
        score.style="width:50px";
        //Add a button;
        var btn = document.createElement("div");
        btn.innerHTML = "i";
        var question = options.question;
        btn.onclick = function () {
            showDescription(question);
        }
        var header = options
            .htmlElement
            .querySelector("h5");
        header.appendChild(score);
    });

$("#surveyElement").Survey({model: survey});

jagjit.singh 7 years ago

Hi Adi,

Please check the link below

https://www.qualtrics.com/support/survey-platform/survey-module/survey-tools/scoring/

Regards,
Jag

Serge T 7 years ago

You need to update question score value from the score input element:

JavaScript
score.onchange = function(){
    options.question.score = score.value;
};

Thanks, Serge
SurveyJS Team

Adi 7 years ago

Works like a charm.

Thanks Serge T

jagjit.singh 7 years ago

Where do I insert the code. Below is my form code

Code
<!

DOCTYPEhtml>
<htmllang="en">

<head>
   <title>Tutorial</title>
   <linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css"/>
   <linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
   <scriptsrc="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.2.1.min.js"></script>
   <scriptsrc="https://unpkg.com/vue"></script>
   <scriptsrc="https://surveyjs.azureedge.net/1.0.48/survey.jquery.min.js"></script>
</head>

<body>
   <divstyle="padding:50px">
       <divid="app">
            <h2>{{ message }}</h2>
       </div>
       <divid="surveyContainer"></div>
   </div>
   <script>
       newVue({
           el:'#app',
           data: {
               message:'Online Questionnaire'
            }
        })
       Survey.Survey.cssType = "bootstrap";
       varsurveyJSON =

{
           "pages": [
                {
                   "name":"form2",
                   "elements": [
                        {
                           "type":"text",
                           "name":"question1",
                           "title":"Enter your Name"
                        },
                        {
                           "type":"checkbox",
                           "name":"question2",
                           "title":"Which item you like to purchase",
                           "choices": [
                                {
                                   "value":"item1",
                                   "text":"House"
                                },
                                {
                                   "value":"item2",
                                   "text":"Car"
                                },
                                {
                                    "value":"item3",
                                   "text":"Holiday"
                                }
                            ]
                        },
                        {
                           "type":"dropdown",
                           "name":"question3",
                           "title":"Whats your Income",
                           "choices": [
                               "Less than 50,000",
                               "50,000-100,000",
                               "Greater than 100,000"
                            ]
                        }
                    ]
                }
            ]
        }
       functionsendDataToServer(survey) {

alert("The results are:" + JSON.stringify(survey.data) + ". The results can be sent to a API server and save to a database.");

alert(111)

varform_data = {"request":"form2",sdata:survey.data };
           $.ajax({
                headers: {},
               type:"POST",
               url:"http://127.0.0.1:3000",
               contentType:"application/json",
               charset:"utf-8",
               dataType:"json",
               error:function (jqXHR,error,errorThrown) {if (jqXHR.status) { alert(jqXHR.responseText); } else {alert("Something went wrong"); } },
               data:JSON.stringify(form_data),
               success:function (c,textStatus,request) {
                   alert("So good")
                },
            })

}
       varsurvey =newSurvey.Model(surveyJSON);
       $("#surveyContainer").Survey({
           model:survey,
           onComplete:sendDataToServer
        });
   </script>
   <style>
        body {
           background-color:#dbecec;
        }
   </style>
</body>

</html>

Thanks
Jag

Serge T 7 years ago

Jagjit, your code doesn't contain a place to put this string.
You should check the code posted by Adi

Thanks, Serge
SurveyJS Team

Adi 7 years ago

Here the complete working code on plunker for reference and hopefully to serve someone else who needs this feature.

https://plnkr.co/edit/GFZssRnoZNUgYn8cGdI8?p=preview

Scoring responses

Answers

Recently viewed tickets