# Score total par page

Les widgets peuvent également être utilisés pour interagir avec les réponses des répondants afin de générer un résultat donné sans avoir à définir une interface utilisateur pour le widget.

Dans l'exemple ci‑dessous, le widget calcule sur un [scored survey](https://docs.ngsurvey.com/fr/form-management/form-designer/scoring) le score total de toutes les réponses notées qui se trouvent sur la même page que le widget.

```javascript
class PageScoreTotalWidget extends NGSWidget {
    /* Modèle HTML qui sera généré avant la création de la classe
        Tous les id et noms de classes CSS seront suffixés par l'uniqueId
        fourni lors de la création du widget */
    static get template() {
        return ` `; // Nous n'avons pas besoin d'interface utilisateur
    }

    /* Style qui sera assigné à ce widget, notez que tous 
      les noms de classes des éléments seront scindés en scope avec l'identifiant unique du widget */  
    static get style() {
        return ``
    }

    /* Est-ce que ce widget prend en charge le label, le label est le texte qu'un administrateur de
     formulaire peut saisir via le concepteur de formulaire et peut être injecté dans
     le modèle en utilisant la balise <ngs-label></ngs-label>
     */
    static get hasLabel() {
        return false; // Nous n'avons pas besoin d'afficher un label car nous n'avons pas d'interface utilisateur
    }

    /* Permet de définir si la réponse est requise ou non
       depuis la page de paramètres de la réponse pour rendre
       rendre la réponse du widget obligatoire pendant le Sondage */
    static get required() {
        return true;
    }

    /* Propriétés qui peuvent être définies depuis le concepteur de formulaire pour chaque
     réponse utilisant ce widget comme type de réponse dans les propriétés de réponse */
    static get propertiesDef() {
        return [];
    }

    init() {
        // Retourne l'id de la page sur laquelle le widget a été instancié
        currentPageId = this.getAnswerPage(this.answerContext.answer);
        
        // S'abonner à l'observable des réponses du répondant
        // cela nous permettra d'obtenir les réponses du répondant
        // dès que de nouvelles réponses auront été saisies ou modifiées 
        this.getRespondentAnswers$(respondentAnswers => {
            // Calculer le score et stocker le résultat
            // en tant que réponse du répondant dans le sondage actuel
            this.setAnswer(getPageTotalScore(respondentAnswers))
        });
    }
    
    // Retourne le score total basé 
    // sur les réponses du répondant et
    // la page de ce widget 
    getPageTotalScore(respondentAnswers) { 
        var totalScore = 0;
        for (var i=0;i<respondentAnswers.length;i++) {
            // Cette réponse du répondant fait‑elle partie de la page actuelle du widget ?
            if (this.getAnswerPage(this.answers.find(a => a.id == respondentAnswers[i].answerId)) == currentPageId) {
                
                // Récupérer la réponse du sondage
                var answer = this.answers
                    .find(a => a.id == respondentAnswers[i].answerId);
                
                // La réponse a‑t‑elle un score à calculer ?
                if (answer && answer.scorePoint != null) {
                    // Recalculer le score de la page
                    totalScore+=answer.scorePoint;
                }
            }
        }
        
        return totalScore;
    }
    
    // Rechercher l'id de la page de la réponse
    getAnswerPage(answer) {
        if (!answer) return;
        var question = this.questions.find(q => q.id == answer.questionId);
        return question ? question.pageId : null;
    }

    isValid() {
        return null;
    }
}

```