manager: smoother survey rating scale export (fixes #9083) (#9088)

Co-authored-by: dogi <[email protected]>

Author: Mutugiii

package.json

@@ -1,7 +1,7 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.20.22",
+  "version": "0.20.23",
   "myplanet": {
     "latest": "v0.31.27",
     "min": "v0.30.27"

src/app/exams/exams-view.component.html

@@ -79,7 +79,7 @@
             </div>
             <div *ngSwitchCase="'ratingScale'" class="rating-scale-keypad">
               <div class="rating-scale-grid">
-                <button type="button" mat-raised-button class="rating-scale-button" *ngFor="let num of [1,2,3,4,5,6,7,8,9]" [class.selected]="answer.value === num.toString()" (click)="setRatingScaleAnswer(num)">
+                <button type="button" mat-raised-button class="rating-scale-button" *ngFor="let num of [1,2,3,4,5,6,7,8,9]" [class.selected]="answer.value === num.toString()" [attr.data-rating]="num" (click)="setRatingScaleAnswer(num)">
                   {{num}}
                 </button>
               </div>

src/app/exams/exams-view.scss

@@ -60,19 +60,29 @@
   .rating-scale-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    gap: 10px;
-    max-width: 100px;
+    gap: 12px;
+    max-width: 240px;
     width: 100%;
   }
 
   .rating-scale-button {
-    height: 50px;
-    font-size: 24px;
+    height: 60px;
+    font-size: 28px;
     font-weight: 500;
     border: 2px solid #ddd;
     border-radius: 8px;
     transition: all 0.2s ease;
 
+    &[data-rating="1"] { background-color: #ffeaea; }
+    &[data-rating="2"] { background-color: #ffeeea; }
+    &[data-rating="3"] { background-color: #fff2ea; }
+    &[data-rating="4"] { background-color: #fff6ea; }
+    &[data-rating="5"] { background-color: #fffaea; }
+    &[data-rating="6"] { background-color: #f6faea; }
+    &[data-rating="7"] { background-color: #f2faea; }
+    &[data-rating="8"] { background-color: #eefaea; }
+    &[data-rating="9"] { background-color: #eafaea; }
+
     &:hover {
       border-color: $primary;
       box-shadow: 0 4px 8px rgba(0,0,0,0.1);

src/app/submissions/submissions.service.ts

@@ -382,10 +382,12 @@ export class SubmissionsService {
       } else if (question.type === 'ratingScale') {
         const ratingScaleAgg = this.aggregateQuestionResponses(question, updatedSubmissions, 'count');
         const ratingScaleImg = await this.generateChartImage(ratingScaleAgg);
+        const averageRating = this.calculateAverageRating(question, updatedSubmissions);
         docContent.push({
           stack: [
             { image: ratingScaleImg, width: 300, alignment: 'center', margin: [ 0, 10, 0, 10 ] },
-            { text: `Total respondents: ${updatedSubmissions.length}`, alignment: 'center' }
+            { text: `Total respondents: ${updatedSubmissions.length}`, alignment: 'center' },
+            { text: `The Score: ${averageRating}`, alignment: 'center', margin: [ 0, 5, 0, 0 ] }
           ],
           alignment: 'center'
         });
@@ -621,6 +623,12 @@ export class SubmissionsService {
     });
   }
 
+  calculateAverageRating(question, submissions): number {
+    const validRatings = submissions.map(sub => parseInt(sub.answers[question.index].value, 10)).filter(rating => !isNaN(rating) && rating >= 1 && rating <= 9);
+    const sum = validRatings.reduce((total, rating) => total + rating, 0);
+    return parseFloat((sum / validRatings.length).toFixed(1));
+  }
+
   aggregateQuestionResponses(
     question, submissions, mode: 'percent' | 'count' = 'percent', calculationMode: 'users' | 'selections' = 'users'
   ) {