# إجمالي الدرجة لكل صفحة

يمكن أيضًا استخدام Widgets للتفاعل مع إجابات المستجيبين لتوليد نتيجة معينة دون الحاجة إلى تعريف واجهة مستخدم للـ widget.

في المثال أدناه يحسب الـ widget على [scored survey](https://docs.ngsurvey.com/ar/form-management/form-designer/scoring) المجموع الكلي لجميع الإجابات ذات النقاط الموجودة على نفس الصفحة التي يوجد فيها الـ widget.

```javascript
class PageScoreTotalWidget extends NGSWidget {
    /* قالب HTML سيتم توليده قبل إنشاء الكلاس
        سيتم إضافة لاحقة uniqueId إلى جميع معرفات وأسماء فئات CSS
        المقدمة أثناء إنشاء عنصر الواجهة */
    static get template() {
        return ` `; // We dont need any UI
    }

    /* النمط الذي سيتم تعيينه لهذه الأداة، ملاحظة أن جميع 
      أسماء فئات العناصر سيتم نطاقها باستخدام unique id للأداة */  
    static get style() {
        return ``
    }

    /* هل تدعم هذه الودجة التسمية؛ التسمية هي النص الذي
     يمكن لمسؤول النموذج إدخاله باستخدام مصمم النموذج ويمكن حقنه في
     القالب باستخدام الوسم <ngs-label></ngs-label>
     */
    static get hasLabel() {
        return false; // We dont need to show any label as we dont have any UI
    }

    /* يسمح بتعيين الإجابة كمطلوبة أو لا
       من صفحة إعدادات الإجابة لجعل
       إجابة الودجة مطلوبة أثناء الاستبيان */
    static get required() {
        return true;
    }

    /* الخصائص التي يمكن تعيينها من مصمم النموذج لكل
     إجابة تستخدم هذه الأداة كنوع إجابة في خصائص الإجابة */
    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;
    }
}

```