Total Score Per Page

Widgets can also be used to interact with respondent answers to generate a given results without having to define a user interface for the widget.

In the sample below the widget calculates on a scored survey the total score of all scored answers that are on the same page as the widget.

class PageScoreTotalWidget extends NGSWidget {
    /*  Html template that will generate before class gets created
        All id's and css classes name will be suffixed by the uniqueId
        provided during creation of the widget */
    static get template() {
        return ` `; // We dont need any UI
    }

    /* Style that will be assigned to this widget, note that all 
      elements class names will be scoped using the widget unique id */  
    static get style() {
        return ``
    }

    /* Does this widget support label, the label is the text a form
     admin can enter using the form design and can be injected in
     the template using the <ngs-label></ngs-label> tag
     */
    static get hasLabel() {
        return false; // We dont need to show any label as we dont have any UI
    }

    /* Allows the answer to be set required or not
       from the answer settings page to make
       the widget answer required during survey */
    static get required() {
        return true;
    }

    /* Properties that can be set in from the form designer for each
     answer using this widget as an answer type in the answer properties */
    static get propertiesDef() {
        return [];
    }

    init() {
        // Returns the page id on which the widget has been instantiated
        currentPageId = this.getAnswerPage(this.answerContext.answer);
        
        // Subscribe to the respondent answers observable
        // this will allow us to get the respodent answers
        // as soon as new answers have been entered or modified 
        this.getRespondentAnswers$(respondentAnswers => {
            // Calculate the score and store the result
            // as a respondent answer in the actual survey
            this.setAnswer(getPageTotalScore(respondentAnswers))
        });
    }
    
    // Returns the total score based 
    // on the respondent answers and
    // this widget page 
    getPageTotalScore(respondentAnswers) { 
        var totalScore = 0;
        for (var i=0;i<respondentAnswers.length;i++) {
            // Is this respondent answer part of the current widget page ?
            if (this.getAnswerPage(this.answers.find(a => a.id == respondentAnswers[i].answerId)) == currentPageId) {
                
                // Retrieve the survey answer
                var answer = this.answers
                    .find(a => a.id == respondentAnswers[i].answerId);
                
                // Does the answer have a score to calculate ?
                if (answer && answer.scorePoint != null) {
                    // Recalculate the page score
                    totalScore+=answer.scorePoint;
                }
            }
        }
        
        return totalScore;
    }
    
    // Look up the page id of the answer
    getAnswerPage(answer) {
        if (!answer) return;
        var question = this.questions.find(q => q.id == answer.questionId);
        return question ? question.pageId : null;
    }

    isValid() {
        return null;
    }
}