manager: smoother survey rating scale (fixes #9068) (#9070)

Author: Mutugiii

package.json

@@ -1,10 +1,10 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.20.18",
+  "version": "0.20.19",
   "myplanet": {
-    "latest": "v0.30.73",
-    "min": "v0.29.73"
+    "latest": "v0.30.87",
+    "min": "v0.29.87"
   },
   "scripts": {
     "ng": "ng",

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

@@ -25,6 +25,7 @@
         <button mat-menu-item type="button" (click)="addQuestion('textarea')" i18n>Text - Long answer</button>
         <button mat-menu-item type="button" (click)="addQuestion('select')" i18n>Multiple Choice - single answer</button>
         <button mat-menu-item type="button" (click)="addQuestion('selectMultiple')" i18n>Multiple Choice - multiple answer</button>
+        <button *ngIf="examType !== 'exam'" mat-menu-item type="button" (click)="addQuestion('ratingScale')" i18n>Rating Scale - 1 to 9</button>
       </mat-menu>
       <mat-accordion class="exam-inputs" *ngIf="!isCourseContent">
         <mat-expansion-panel [expanded]="!isQuestionsActive">

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

@@ -6,6 +6,7 @@
         <mat-option value="textarea" i18n>Text - Long answer</mat-option>
         <mat-option value="select" i18n>Multiple Choice - single answer</mat-option>
         <mat-option value="selectMultiple" i18n>Multiple Choice - multiple answer</mat-option>
+        <mat-option *ngIf="examType !== 'exam'" value="ratingScale" i18n>Rating Scale - 1 to 9</mat-option>
       </mat-select>
     </mat-form-field>
   </div>
@@ -20,7 +21,7 @@
         You must add a choice
       </span>
     </div>
-    <div i18n class="mat-caption warn-text-color" *ngIf="!questionForm.controls.correctChoice.valid && questionForm.controls.correctChoice.touched">
+    <div i18n class="mat-caption warn-text-color" *ngIf="!questionForm.controls.correctChoice.valid && questionForm.controls.correctChoice.touched && questionForm.controls.type.value !== 'ratingScale'">
       You must select the correct {questionForm.controls.type.value, select, select {choice} selectMultiple {choices}}
     </div>
     <div *ngFor="let choice of choices.controls; index as i; trackBy: trackByFn">

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

@@ -77,6 +77,13 @@
                 </div>
               </ng-container>
             </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)">
+                  {{num}}
+                </button>
+              </div>
+            </div>
           </ng-container>
         </ng-container>
         <ng-container *ngSwitchCase="'grade'">

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

@@ -309,6 +309,11 @@ export class ExamsViewComponent implements OnInit, OnDestroy {
     this.checkboxState[option.id] = event.checked;
   }
 
+  setRatingScaleAnswer(number: number) {
+    this.answer.setValue(number.toString());
+    this.answer.updateValueAndValidity();
+  }
+
   calculateCorrect() {
     const value = this.answer.value;
     const answers = value instanceof Array ? value : [ value ];

src/app/exams/exams-view.scss

@@ -1,3 +1,5 @@
+@import '../variables';
+
 :host {
 
   .view-container {
@@ -48,4 +50,40 @@
     outline: none;
     max-width: 50%;
   }
+
+  .rating-scale-keypad {
+    display: flex;
+    justify-content: flex-start;
+    margin: 20px 0;
+  }
+
+  .rating-scale-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 10px;
+    max-width: 100px;
+    width: 100%;
+  }
+
+  .rating-scale-button {
+    height: 50px;
+    font-size: 24px;
+    font-weight: 500;
+    border: 2px solid #ddd;
+    border-radius: 8px;
+    transition: all 0.2s ease;
+
+    &:hover {
+      border-color: $primary;
+      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+    }
+
+    &.selected {
+      background-color: $primary;
+      color: white;
+      border-color: $primary;
+      box-shadow: 0 4px 8px rgba(33, 150, 243, 0.3);
+    }
+  }
+
 }

src/app/exams/exams.model.ts

@@ -13,7 +13,7 @@ export interface Exam {
 
 export interface ExamQuestion {
   body: string;
-  type: 'input' | 'textarea' | 'select' | 'selectMultiple';
+  type: 'input' | 'textarea' | 'select' | 'selectMultiple' | 'ratingScale';
   correctChoice: string[];
   marks: number;
   choices: { text: string, id: string }[];

src/app/exams/exams.service.ts

@@ -29,9 +29,8 @@ export class ExamsService {
   }
 
   choiceRequiredValidator(ac) {
-    return ac.get('type').value === 'select' || ac.get('type').value === 'selectMultiple' ?
-      Validators.required(ac.get('choices')) && { noChoices: true } :
-      null;
+    const questionType = ac.get('type').value;
+    return questionType === 'select' || questionType === 'selectMultiple' ? Validators.required(ac.get('choices')) && { noChoices: true } : null;
   }
 
   newQuestionChoice(newId, intialValue?) {

src/app/shared/ai-prompts.constants.ts

@@ -4,7 +4,7 @@ export const surveyAnalysisPrompt = (examType, examName, examDescription, payloa
   Please generate a detailed AI Analysis for PDF export, organized into 4 sections:
 
   1. INDIVIDUAL QUESTION ANALYSIS
-    If the question is a **Closed-ended questions(type - select or selectMultiple):**
+    If the question is a **Closed-ended questions(type - select or selectMultiple or rating scale [1-9 choices]):**
         - List the top three answer choices with absolute counts and percentages.
         - In addition to the top three, highlight any answer choice with fewer than 10% of responses and suggest why it might be under-selected
         - Create a hypothesis for the selections

src/app/submissions/submissions.service.ts

@@ -351,7 +351,7 @@ export class SubmissionsService {
     this.setHeader(docContent, 'Charts');
     for (let i = 0; i < exam.questions.length; i++) {
       const question = exam.questions[i];
-      if (question.type !== 'select' && question.type !== 'selectMultiple') { continue; }
+      if (question.type !== 'select' && question.type !== 'selectMultiple' && question.type !== 'ratingScale') { continue; }
       question.index = i;
       docContent.push({ text: `Q${i + 1}: ${question.body}` });
       if (question.type === 'selectMultiple') {
@@ -389,6 +389,16 @@ export class SubmissionsService {
           ],
           alignment: 'center'
         });
+      } else if (question.type === 'ratingScale') {
+        const ratingScaleAgg = this.aggregateQuestionResponses(question, updatedSubmissions, 'count');
+        const ratingScaleImg = await this.generateChartImage(ratingScaleAgg);
+        docContent.push({
+          stack: [
+            { image: ratingScaleImg, width: 300, alignment: 'center', margin: [ 0, 10, 0, 10 ] },
+            { text: `Total respondents: ${updatedSubmissions.length}`, alignment: 'center' }
+          ],
+          alignment: 'center'
+        });
       } else {
         const pieAgg = this.aggregateQuestionResponses(question, updatedSubmissions, 'count');
         const pieImg = await this.generateChartImage(pieAgg);
@@ -552,16 +562,18 @@ export class SubmissionsService {
     canvas.width = 300;
     canvas.height = 400;
     const isBar = data.chartType === 'bar';
+    const isRatingScale = data.isRatingScale || false;
     const ctx = canvas.getContext('2d');
 
     return new Promise<string>((resolve) => {
+      const maxCount = Math.max(...data.data);
       const chartConfig: ChartConfiguration<'bar' | 'doughnut'> = {
         type: isBar ? 'bar' : 'doughnut',
         data: {
           labels: data.labels,
           datasets: [ {
             data: data.data,
-            label: isBar ? '% of responders/selection' : undefined,
+            label: isRatingScale ? 'selection/choices(1-9)' : (isBar ? '% of responders/selection' : undefined),
             backgroundColor: [
               '#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40', '#C9CBCF', '#8DD4F2', '#A8E6CF', '#DCE775'
             ],
@@ -571,25 +583,33 @@ export class SubmissionsService {
           responsive: false,
           maintainAspectRatio: false,
           indexAxis: 'x',
+          plugins: {
+            legend: {
+              display: true,
+              labels: {
+                boxWidth: isBar ? 0 : 50,
+                boxHeight: isBar ? 0 : 20
+              }
+            }
+          },
           scales: isBar ? {
             y: {
               type: 'linear',
               beginAtZero: true,
-              max: 100,
-              ticks: { precision: 0 }
+              max: isRatingScale ? maxCount > 0 ? Math.ceil(maxCount / 10) * 10 : 10 : 100,
+              ticks: { precision: 0, stepSize: 2 }
             }
           } : {},
           animation: {
             onComplete: function() {
               if (isBar && data.userCounts) {
                 this.getDatasetMeta(0).data.forEach((bar, index) => {
-                  const percentage = data.data[index];
-                  const userCount = data.userCounts[index];
-                  if (percentage > 0) {
-                    ctx.fillText(`${userCount}`, bar.x - 2.5 , bar.y);
+                  const count = data.userCounts[index];
+                  if (count > 0) {
+                    ctx.fillText(`${count}`, bar.x - 2.5 , bar.y);
                   }
                 });
-              } else if (!isBar) {
+              } else {
                 const total = data.data.reduce((sum, val) => sum + val, 0);
                 this.getDatasetMeta(0).data.forEach((element, index) => {
                   const count = data.data[index];
@@ -609,37 +629,47 @@ export class SubmissionsService {
     });
   }
 
-  aggregateQuestionResponses(
-    question,
-    submissions,
-    mode: 'percent' | 'count' = 'percent',
-    calculationMode: 'users' | 'selections' = 'users'
-  ) {
+  aggregateQuestionResponses(question, submissions, mode: 'percent' | 'count' = 'percent', calculationMode: 'users' | 'selections' = 'users') {
     const totalUsers = submissions.length;
     const counts: Record<string, Set<string>> = {};
 
-    question.choices.forEach(c => { counts[c.text] = new Set(); });
-    if (question.hasOtherOption) {
-      counts['Other'] = new Set();
+    if (question.type === 'ratingScale') {
+      for (let i = 1; i <= 9; i++) {
+        counts[i.toString()] = new Set();
+      }
+    } else {
+      question.choices.forEach(c => { counts[c.text] = new Set(); });
+      if (question.hasOtherOption) {
+        counts['Other'] = new Set();
+      }
     }
 
     submissions.forEach((sub, submissionIndex) => {
       const ans = sub.answers[question.index];
       if (!ans) { return; }
 
       const userId = sub.user?._id || sub.user?.name || sub._id || `submission_${submissionIndex}`;
-      const selections = question.type === 'selectMultiple' ? ans.value ?? [] : ans.value ? [ ans.value ] : [];
-      selections.forEach(selection => {
-        if (selection.isOther || selection.id === 'other') {
-          counts['Other']?.add(userId);
-        } else {
-          const txt = selection.text ?? selection;
-          counts[txt]?.add(userId);
+      if (question.type === 'ratingScale') {
+        if (ans.value) {
+          const value = ans.value.toString();
+          if (counts[value]) {
+            counts[value].add(userId);
+          }
         }
-      });
+      } else {
+        const selections = question.type === 'selectMultiple' ? ans.value ?? [] : ans.value ? [ ans.value ] : [];
+        selections.forEach(selection => {
+          if (selection.isOther || selection.id === 'other') {
+            counts['Other']?.add(userId);
+          } else {
+            const txt = selection.text ?? selection;
+            counts[txt]?.add(userId);
+          }
+        });
+      }
     });
 
-    const labels = Object.keys(counts);
+    const labels = question.type === 'ratingScale' ? Array.from({length: 9}, (_, i) => (i + 1).toString()) : Object.keys(counts);
     const userCounts = labels.map(l => counts[l].size);
     const totalSelections = userCounts.reduce((sum, count) => sum + count, 0);
     let data: number[];
@@ -664,7 +694,8 @@ export class SubmissionsService {
       userCounts,
       totalUsers,
       totalSelections,
-      chartType: question.type === 'selectMultiple' ? (mode === 'percent' ? 'bar' : 'pie') : 'pie'
+      chartType: question.type === 'ratingScale' ? 'bar' : (question.type === 'selectMultiple' ? (mode === 'percent' ? 'bar' : 'pie') : 'pie'),
+      isRatingScale: question.type === 'ratingScale'
     };
   }
 
@@ -686,6 +717,9 @@ export class SubmissionsService {
         case 'selectMultiple':
           result = answer.value.map(item => item.text).join(', ');
           break;
+        case 'ratingScale':
+          result = `Rating: ${answer.value} (on 1-9 scale)`;
+          break;
         default:
           result = answer.value;
       }