polishing 2
parent
5b1daac97b
commit
ddd487e72a
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue