From ddd487e72a05435a956f679f849c207ed5eab063 Mon Sep 17 00:00:00 2001
From: MrPlatnum <patrikspindler71@gmail.com>
Date: Sun, 14 Sep 2025 16:58:41 +0200
Subject: [PATCH] polishing 2

---
 .../components/consent/consent.component.html |  5 +-
 .../demographics-feedback.component.html      | 46 +++++----
 .../demographics-feedback.component.ts        | 98 +++++--------------
 3 files changed, 55 insertions(+), 94 deletions(-)

diff --git a/src/app/components/consent/consent.component.html b/src/app/components/consent/consent.component.html
index ce0e513..e4bbd42 100644
--- a/src/app/components/consent/consent.component.html
+++ b/src/app/components/consent/consent.component.html
@@ -26,9 +26,8 @@
           <ul class="list-disc list-inside space-y-1 ml-4">
             <li>Gerätespezifikationen (Display-Abmessungen, Browser-Version, Betriebssystem)</li>
             <li>WebXR-Interaktionsmetriken und Bewegungsverfolgungsdaten</li>
-            <li>Parameteranpassungsmuster und Timing</li>
-            <li>Geräteorientierung und Betrachtungswinkel-Parameter</li>
-            <li>Erste Eingabeerkennung und natürliche Gestenanalyse</li>
+            <li>Parameterauswahl</li>
+            <li>Geräteorientierung und Betrachtungswinkel</li>
             <li>Optionale demografische Informationen</li>
           </ul>
         </div>
diff --git a/src/app/components/test-suite/assessments/demographics-feedback/demographics-feedback.component.html b/src/app/components/test-suite/assessments/demographics-feedback/demographics-feedback.component.html
index 7070aba..ce96ca8 100644
--- a/src/app/components/test-suite/assessments/demographics-feedback/demographics-feedback.component.html
+++ b/src/app/components/test-suite/assessments/demographics-feedback/demographics-feedback.component.html
@@ -7,6 +7,7 @@
 
     <form [formGroup]="demographicsForm" (ngSubmit)="onSubmit()">
       
+      <!-- Bewertung der Halteposition -->
       <div class="mb-8">
         <h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
           <span class="bg-blue-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm mr-3">1</span>
@@ -66,6 +67,7 @@
             </div>
           </div>
 
+          <!-- Frage 4: Physische Anstrengung (5 Minuten) -->
           <div class="p-4 border border-gray-200 rounded-lg">
             <label id="label-physicalStrain5min" class="block text-sm font-medium text-gray-800 mb-3">
               Das Halten des Geräts für 5 Minuten wäre körperlich anstrengend. *
@@ -99,7 +101,7 @@
           <div>
             <label for="gender-select" class="block text-sm font-medium text-gray-700 mb-2">Geschlecht *</label>
             <select id="gender-select" formControlName="gender" (change)="logInteraction($event)" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
-              <option value="" disabled>Bitte auswählen</option>
+              <option [ngValue]="null" disabled>Bitte auswählen</option>
               <option value="male">Männlich</option>
               <option value="female">Weiblich</option>
               <option value="non-binary">Divers</option>
@@ -109,7 +111,7 @@
           <div>
             <label for="education-select" class="block text-sm font-medium text-gray-700 mb-2">Höchster Bildungsabschluss</label>
             <select id="education-select" formControlName="education" (change)="logInteraction($event)" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
-              <option value="" disabled>Bitte auswählen</option>
+              <option [ngValue]="null" disabled>Bitte auswählen</option>
               <option value="high-school">Schulabschluss</option>
               <option value="some-college">Berufsausbildung</option>
               <option value="bachelors">Bachelor</option>
@@ -132,24 +134,30 @@
           Vorerfahrung mit AR/VR
         </h3>
         <div class="space-y-6">
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <div>
-              <label for="ar-experience-slider" class="block text-sm font-medium text-gray-700 mb-2">Erfahrung mit Augmented Reality (AR) *<span class="text-gray-500"> (1=keine, 5=Experte)</span></label>
-              <div class="flex items-center space-x-2">
-                <span class="text-sm text-gray-500">1</span>
-                <input id="ar-experience-slider" type="range" formControlName="arExperience" min="1" max="5" (change)="logInteraction($event)" class="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
-                <span class="text-sm text-gray-500">5</span>
+          <div class="p-4 border border-gray-200 rounded-lg">
+            <label id="label-ar-experience" class="block text-sm font-medium text-gray-800 mb-3">Erfahrung mit Augmented Reality (AR) *</label>
+            <div class="flex justify-between items-center">
+              <span class="text-xs text-gray-500 w-1/5 text-center">Keine<br>Erfahrung</span>
+              <div class="flex-grow flex justify-around">
+                <label *ngFor="let option of [1, 2, 3, 4, 5]" class="flex flex-col items-center cursor-pointer">
+                  <input id="arExperience-{{option}}" type="radio" formControlName="arExperience" [value]="option" (change)="logInteraction($event)" class="mb-1 focus:ring-blue-500 text-blue-600">
+                  <span class="text-sm">{{ option }}</span>
+                </label>
               </div>
-              <div class="text-center mt-1"><span class="text-sm font-medium text-blue-600">{{ demographicsForm.get('arExperience')?.value }}/5</span></div>
+              <span class="text-xs text-gray-500 w-1/5 text-center">Experte</span>
             </div>
-            <div>
-              <label for="vr-experience-slider" class="block text-sm font-medium text-gray-700 mb-2">Erfahrung mit Virtual Reality (VR) *<span class="text-gray-500"> (1=keine, 5=Experte)</span></label>
-              <div class="flex items-center space-x-2">
-                <span class="text-sm text-gray-500">1</span>
-                <input id="vr-experience-slider" type="range" formControlName="vrExperience" min="1" max="5" (change)="logInteraction($event)" class="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
-                <span class="text-sm text-gray-500">5</span>
+          </div>
+          <div class="p-4 border border-gray-200 rounded-lg">
+            <label id="label-vr-experience" class="block text-sm font-medium text-gray-800 mb-3">Erfahrung mit Virtual Reality (VR) *</label>
+            <div class="flex justify-between items-center">
+              <span class="text-xs text-gray-500 w-1/5 text-center">Keine<br>Erfahrung</span>
+              <div class="flex-grow flex justify-around">
+                <label *ngFor="let option of [1, 2, 3, 4, 5]" class="flex flex-col items-center cursor-pointer">
+                  <input id="vrExperience-{{option}}" type="radio" formControlName="vrExperience" [value]="option" (change)="logInteraction($event)" class="mb-1 focus:ring-blue-500 text-blue-600">
+                  <span class="text-sm">{{ option }}</span>
+                </label>
               </div>
-              <div class="text-center mt-1"><span class="text-sm font-medium text-blue-600">{{ demographicsForm.get('vrExperience')?.value }}/5</span></div>
+              <span class="text-xs text-gray-500 w-1/5 text-center">Experte</span>
             </div>
           </div>
         </div>
@@ -165,7 +173,7 @@
           <div>
             <label for="vision-correction-select" class="block text-sm font-medium text-gray-700 mb-2">Benötigen Sie eine Sehhilfe?</label>
             <select id="vision-correction-select" formControlName="visionCorrection" (change)="logInteraction($event)" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
-              <option value="" disabled>Bitte auswählen</option>
+              <option [ngValue]="null" disabled>Bitte auswählen</option>
               <option value="none">Nein, keine</option>
               <option value="glasses">Brille</option>
               <option value="contacts">Kontaktlinsen</option>
@@ -175,7 +183,7 @@
           <div>
             <label for="dominant-hand-select" class="block text-sm font-medium text-gray-700 mb-2">Händigkeit</label>
             <select id="dominant-hand-select" formControlName="dominantHand" (change)="logInteraction($event)" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
-              <option value="" disabled>Bitte auswählen</option>
+              <option [ngValue]="null" disabled>Bitte auswählen</option>
               <option value="right">Rechtshänder</option>
               <option value="left">Linkshänder</option>
               <option value="ambidextrous">Beidhänder</option>
diff --git a/src/app/components/test-suite/assessments/demographics-feedback/demographics-feedback.component.ts b/src/app/components/test-suite/assessments/demographics-feedback/demographics-feedback.component.ts
index 73320ba..2839336 100644
--- a/src/app/components/test-suite/assessments/demographics-feedback/demographics-feedback.component.ts
+++ b/src/app/components/test-suite/assessments/demographics-feedback/demographics-feedback.component.ts
@@ -33,26 +33,6 @@ export class DemographicsFeedbackComponent implements OnInit, OnDestroy {
     { label: 'Ich musste eine Menge Dinge lernen, bevor ich mit dem System arbeiten konnte.', controlName: 'sus10' }
   ];
 
-  arVrDevices = [
-    { value: 'smartphone-ar', label: 'Smartphone-AR' },
-    { value: 'meta-quest', label: 'Meta Quest/Oculus' },
-    { value: 'hololens', label: 'HoloLens' },
-    { value: 'magic-leap', label: 'Magic Leap' },
-    { value: 'playstation-vr', label: 'PlayStation VR' },
-    { value: 'htc-vive', label: 'HTC Vive' },
-    { value: 'google-cardboard', label: 'Google Cardboard' },
-    { value: 'other', label: 'Andere' },
-    { value: 'none', label: 'Keine' }
-  ];
-
-  technologyComfort = [
-    { label: 'Kompetenz im Umgang mit Smartphones', formControl: 'smartphoneComfort' },
-    { label: 'Allgemeine Technologieaffinität', formControl: 'techComfort' },
-    { label: 'Erfahrung mit Videospielen', formControl: 'gamingExperience' }
-  ];
-
-  selectedDevices: string[] = [];
-
   constructor(private formBuilder: FormBuilder) {
     this.logInteraction = this.logInteraction.bind(this);
   }
@@ -67,51 +47,36 @@ export class DemographicsFeedbackComponent implements OnInit, OnDestroy {
 
   createForm() {
     this.demographicsForm = this.formBuilder.group({
-      comfortHold: ['', Validators.required],
-      enduranceFiveMinutes: ['', Validators.required],
-      physicalStrain: ['', Validators.required],
-      physicalStrain5min: ['', Validators.required],
+      comfortHold: [null, Validators.required],
+      enduranceFiveMinutes: [null, Validators.required],
+      physicalStrain: [null, Validators.required],
+      physicalStrain5min: [null, Validators.required],
 
-      age: ['', [Validators.required, Validators.min(13), Validators.max(120)]],
-      gender: ['', Validators.required],
-      education: [''],
-      occupation: [''],
+      age: [null, [Validators.required, Validators.min(13), Validators.max(120)]],
+      gender: [null, Validators.required],
+      education: [null],
+      occupation: [null],
 
-      arExperience: [1, Validators.required],
-      vrExperience: [1, Validators.required],
-      arVrFrequency: [''],
+      arExperience: [null, Validators.required],
+      vrExperience: [null, Validators.required],
 
-      visionCorrection: [''],
-      dominantHand: [''],
+      visionCorrection: [null],
+      dominantHand: [null],
       
-      smartphoneComfort: [3, Validators.required],
-      techComfort: [3, Validators.required],
-      gamingExperience: [3, Validators.required],
-
-      sus1: ['', Validators.required],
-      sus2: ['', Validators.required],
-      sus3: ['', Validators.required],
-      sus4: ['', Validators.required],
-      sus5: ['', Validators.required],
-      sus6: ['', Validators.required],
-      sus7: ['', Validators.required],
-      sus8: ['', Validators.required],
-      sus9: ['', Validators.required],
-      sus10: ['', Validators.required],
+      sus1: [null, Validators.required],
+      sus2: [null, Validators.required],
+      sus3: [null, Validators.required],
+      sus4: [null, Validators.required],
+      sus5: [null, Validators.required],
+      sus6: [null, Validators.required],
+      sus7: [null, Validators.required],
+      sus8: [null, Validators.required],
+      sus9: [null, Validators.required],
+      sus10: [null, Validators.required],
 
       comments: [''],
-      
     });
   }
-
-  onDeviceChange(event: any) {
-    const value = event.target.value;
-    if (event.target.checked) {
-      this.selectedDevices.push(value);
-    } else {
-      this.selectedDevices = this.selectedDevices.filter(device => device !== value);
-    }
-  }
   
   onSubmit() {
     if (this.demographicsForm.valid) {
@@ -119,7 +84,6 @@ export class DemographicsFeedbackComponent implements OnInit, OnDestroy {
       
       const formData = {
         ...this.demographicsForm.value,
-        devicesUsed: this.selectedDevices,
         susScore: this.calculateSusScore(this.demographicsForm.value),
         submittedAt: new Date().toISOString()
       };
@@ -128,7 +92,6 @@ export class DemographicsFeedbackComponent implements OnInit, OnDestroy {
         next: () => {
           this.isSubmitting = false;
           this.isSubmitted = true;
-          // Optionally delay before emitting final completion
           setTimeout(() => this.testComplete.emit(), 2000);
         },
         error: (err) => {
@@ -148,28 +111,19 @@ export class DemographicsFeedbackComponent implements OnInit, OnDestroy {
   private calculateSusScore(formData: any): number {
     let score = 0;
     score += (formData.sus1 - 1);
-    score += (formData.sus3 - 1);
-    score += (formData.sus5 - 1);
-    score += (formData.sus7 - 1);
-    score += (formData.sus9 - 1);
-
     score += (5 - formData.sus2);
+    score += (formData.sus3 - 1);
     score += (5 - formData.sus4);
+    score += (formData.sus5 - 1);
     score += (5 - formData.sus6);
+    score += (formData.sus7 - 1);
     score += (5 - formData.sus8);
+    score += (formData.sus9 - 1);
     score += (5 - formData.sus10);
 
     return score * 2.5;
   }
 
-  finishAssessment() {
-    this.testComplete.emit();
-  }
-
-  retryCurrent() {
-    this.redoTest.emit(4);
-  }
-
   ngOnDestroy() {
     this.metricsService.cleanup();
   }