MrPlatnum
/
BachelorarbeitUmfrage
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

polishing 2

master
MrPlatnum 2025-09-14 16:58:41 +02:00
parent 5b1daac97b
commit ddd487e72a
3 changed files with 55 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/components/consent/consent.component.html
View File

@ -26,9 +26,8 @@
<ul class="list-disc list-inside space-y-1 ml-4"> <ul class="list-disc list-inside space-y-1 ml-4">
<li>Gerätespezifikationen (Display-Abmessungen, Browser-Version, Betriebssystem)</li> <li>Gerätespezifikationen (Display-Abmessungen, Browser-Version, Betriebssystem)</li>
<li>WebXR-Interaktionsmetriken und Bewegungsverfolgungsdaten</li> <li>WebXR-Interaktionsmetriken und Bewegungsverfolgungsdaten</li>
<li>Parameteranpassungsmuster und Timing</li> <li>Parameterauswahl</li>
<li>Geräteorientierung und Betrachtungswinkel-Parameter</li> <li>Geräteorientierung und Betrachtungswinkel</li>
<li>Erste Eingabeerkennung und natürliche Gestenanalyse</li>
<li>Optionale demografische Informationen</li> <li>Optionale demografische Informationen</li>
</ul> </ul>
</div> </div>

46
src/app/components/test-suite/assessments/demographics-feedback/demographics-feedback.component.html
View File

@ -7,6 +7,7 @@
<form [formGroup]="demographicsForm" (ngSubmit)="onSubmit()"> <form [formGroup]="demographicsForm" (ngSubmit)="onSubmit()">
<!-- Bewertung der Halteposition -->
<div class="mb-8"> <div class="mb-8">
<h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center"> <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> <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>
</div> </div>
<!-- Frage 4: Physische Anstrengung (5 Minuten) -->
<div class="p-4 border border-gray-200 rounded-lg"> <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"> <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. * Das Halten des Geräts für 5 Minuten wäre körperlich anstrengend. *
@ -99,7 +101,7 @@
<div> <div>
<label for="gender-select" class="block text-sm font-medium text-gray-700 mb-2">Geschlecht *</label> <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"> <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="male">Männlich</option>
<option value="female">Weiblich</option> <option value="female">Weiblich</option>
<option value="non-binary">Divers</option> <option value="non-binary">Divers</option>
@ -109,7 +111,7 @@
<div> <div>
<label for="education-select" class="block text-sm font-medium text-gray-700 mb-2">Höchster Bildungsabschluss</label> <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"> <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="high-school">Schulabschluss</option>
<option value="some-college">Berufsausbildung</option> <option value="some-college">Berufsausbildung</option>
<option value="bachelors">Bachelor</option> <option value="bachelors">Bachelor</option>
@ -132,24 +134,30 @@
Vorerfahrung mit AR/VR Vorerfahrung mit AR/VR
</h3> </h3>
<div class="space-y-6"> <div class="space-y-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div class="p-4 border border-gray-200 rounded-lg">
<div> <label id="label-ar-experience" class="block text-sm font-medium text-gray-800 mb-3">Erfahrung mit Augmented Reality (AR) *</label>
<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 justify-between items-center">
<div class="flex items-center space-x-2"> <span class="text-xs text-gray-500 w-1/5 text-center">Keine<br>Erfahrung</span>
<span class="text-sm text-gray-500">1</span> <div class="flex-grow flex justify-around">
<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"> <label *ngFor="let option of [1, 2, 3, 4, 5]" class="flex flex-col items-center cursor-pointer">
<span class="text-sm text-gray-500">5</span> <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>
<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>
<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="p-4 border border-gray-200 rounded-lg">
<div class="flex items-center space-x-2"> <label id="label-vr-experience" class="block text-sm font-medium text-gray-800 mb-3">Erfahrung mit Virtual Reality (VR) *</label>
<span class="text-sm text-gray-500">1</span> <div class="flex justify-between items-center">
<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-xs text-gray-500 w-1/5 text-center">Keine<br>Erfahrung</span>
<span class="text-sm text-gray-500">5</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>
<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> </div>
</div> </div>
@ -165,7 +173,7 @@
<div> <div>
<label for="vision-correction-select" class="block text-sm font-medium text-gray-700 mb-2">Benötigen Sie eine Sehhilfe?</label> <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"> <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="none">Nein, keine</option>
<option value="glasses">Brille</option> <option value="glasses">Brille</option>
<option value="contacts">Kontaktlinsen</option> <option value="contacts">Kontaktlinsen</option>
@ -175,7 +183,7 @@
<div> <div>
<label for="dominant-hand-select" class="block text-sm font-medium text-gray-700 mb-2">Händigkeit</label> <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"> <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="right">Rechtshänder</option>
<option value="left">Linkshänder</option> <option value="left">Linkshänder</option>
<option value="ambidextrous">Beidhänder</option> <option value="ambidextrous">Beidhänder</option>

98
src/app/components/test-suite/assessments/demographics-feedback/demographics-feedback.component.ts
View File

@ -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' } { 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) { constructor(private formBuilder: FormBuilder) {
this.logInteraction = this.logInteraction.bind(this); this.logInteraction = this.logInteraction.bind(this);
} }
@ -67,51 +47,36 @@ export class DemographicsFeedbackComponent implements OnInit, OnDestroy {
createForm() { createForm() {
this.demographicsForm = this.formBuilder.group({ this.demographicsForm = this.formBuilder.group({
comfortHold: ['', Validators.required], comfortHold: [null, Validators.required],
enduranceFiveMinutes: ['', Validators.required], enduranceFiveMinutes: [null, Validators.required],
physicalStrain: ['', Validators.required], physicalStrain: [null, Validators.required],
physicalStrain5min: ['', Validators.required], physicalStrain5min: [null, Validators.required],
age: ['', [Validators.required, Validators.min(13), Validators.max(120)]], age: [null, [Validators.required, Validators.min(13), Validators.max(120)]],
gender: ['', Validators.required], gender: [null, Validators.required],
education: [''], education: [null],
occupation: [''], occupation: [null],
arExperience: [1, Validators.required], arExperience: [null, Validators.required],
vrExperience: [1, Validators.required], vrExperience: [null, Validators.required],
arVrFrequency: [''],
visionCorrection: [''], visionCorrection: [null],
dominantHand: [''], dominantHand: [null],
smartphoneComfort: [3, Validators.required], sus1: [null, Validators.required],
techComfort: [3, Validators.required], sus2: [null, Validators.required],
gamingExperience: [3, Validators.required], sus3: [null, Validators.required],
sus4: [null, Validators.required],
sus1: ['', Validators.required], sus5: [null, Validators.required],
sus2: ['', Validators.required], sus6: [null, Validators.required],
sus3: ['', Validators.required], sus7: [null, Validators.required],
sus4: ['', Validators.required], sus8: [null, Validators.required],
sus5: ['', Validators.required], sus9: [null, Validators.required],
sus6: ['', Validators.required], sus10: [null, Validators.required],
sus7: ['', Validators.required],
sus8: ['', Validators.required],
sus9: ['', Validators.required],
sus10: ['', Validators.required],
comments: [''], 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() { onSubmit() {
if (this.demographicsForm.valid) { if (this.demographicsForm.valid) {
@ -119,7 +84,6 @@ export class DemographicsFeedbackComponent implements OnInit, OnDestroy {
const formData = { const formData = {
...this.demographicsForm.value, ...this.demographicsForm.value,
devicesUsed: this.selectedDevices,
susScore: this.calculateSusScore(this.demographicsForm.value), susScore: this.calculateSusScore(this.demographicsForm.value),
submittedAt: new Date().toISOString() submittedAt: new Date().toISOString()
}; };
@ -128,7 +92,6 @@ export class DemographicsFeedbackComponent implements OnInit, OnDestroy {
next: () => { next: () => {
this.isSubmitting = false; this.isSubmitting = false;
this.isSubmitted = true; this.isSubmitted = true;
// Optionally delay before emitting final completion
setTimeout(() => this.testComplete.emit(), 2000); setTimeout(() => this.testComplete.emit(), 2000);
}, },
error: (err) => { error: (err) => {
@ -148,28 +111,19 @@ export class DemographicsFeedbackComponent implements OnInit, OnDestroy {
private calculateSusScore(formData: any): number { private calculateSusScore(formData: any): number {
let score = 0; let score = 0;
score += (formData.sus1 - 1); 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 += (5 - formData.sus2);
score += (formData.sus3 - 1);
score += (5 - formData.sus4); score += (5 - formData.sus4);
score += (formData.sus5 - 1);
score += (5 - formData.sus6); score += (5 - formData.sus6);
score += (formData.sus7 - 1);
score += (5 - formData.sus8); score += (5 - formData.sus8);
score += (formData.sus9 - 1);
score += (5 - formData.sus10); score += (5 - formData.sus10);
return score * 2.5; return score * 2.5;
} }
finishAssessment() {
this.testComplete.emit();
}
retryCurrent() {
this.redoTest.emit(4);
}
ngOnDestroy() { ngOnDestroy() {
this.metricsService.cleanup(); this.metricsService.cleanup();
} }