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

Trivia ergänzen Fragebogen leicht anpassen

master
MrPlatnum 2025-09-15 15:43:05 +02:00
parent 83c4ece1e8
commit e044b1c731
4 changed files with 74 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -43,6 +43,28 @@
</p>
</div>
<details class="mt-6 bg-gray-50 rounded-lg group">
<summary class="p-4 font-semibold cursor-pointer flex justify-between items-center text-gray-700 hover:text-gray-900">
Hintergrund und Ziele der Studie
<svg class="w-5 h-5 transition-transform duration-200 group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
</summary>
<div class="p-4 border-t border-gray-200 text-gray-600 space-y-4">
<div>
<h4 class="font-bold text-gray-800">Was ist Augmented Reality (AR)?</h4>
<p>AR erweitert unsere reale Welt um digitale Elemente. Anders als in der Virtual Reality (VR), bei der man man komplett in eine künstliche Welt eintaucht, sehen Sie bei AR Ihre normale Umgebung, die durch virtuelle Objekte und Informationen ergänzt wird.</p>
</div>
<div>
<h4 class="font-bold text-gray-800">Was ist das Neuartige an dieser Forschung?</h4>
<p>Diese Studie konzentriert sich auf die Gestaltung von Augmented Reality (AR), die gezielt an Deckenflächen stattfindet. Dies ist ein relativ neues Anwendungsfeld, das besondere Herausforderungen an die Interaktion und Wahrnehmung stellt. Ich möchte herausfinden, wie man solche Anwendungen am besten gestaltet.</p>
</div>
<div>
<h4 class="font-bold text-gray-800">Was ist das Ziel?</h4>
<p>Mit den Ergebnissen dieser Studie will ich wissenschaftlich fundierte <strong>Design-Prinzipien</strong> ableiten. Diese sollen zukünftigen Entwicklern helfen, AR-Anwendungen an ungewöhnlichen Orten wie Decken von Anfang an intuitiv, komfortabel und nützlich zu gestalten.</p>
</div>
</div>
</details>
<div class="mt-6">
<label class="flex items-start space-x-3 cursor-pointer">
<input
@ -52,7 +74,7 @@
(change)="onConsentChange($event)"
>
<span class="text-gray-700">
Ich stimme der Datenerhebung zu und erkläre mich bereit, an dieser Studie teilzunehmen.
Ich habe die Informationen gelesen, verstanden und stimme der Datenerhebung zu, um an dieser Studie teilzunehmen.
</span>
</label>
</div>
@ -66,7 +88,7 @@
disabled:bg-gray-400 disabled:cursor-not-allowed transition-all duration-200
transform hover:scale-105 disabled:hover:scale-100"
>
Umfrage starten
Studie starten
</button>
</div>
</div>

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

@ -86,6 +86,22 @@
</div>
</div>
<div class="p-4 border border-gray-200 rounded-lg">
<label id="label-user-position" class="block text-sm font-medium text-gray-800 mb-3">
In welcher Position haben Sie den Test durchgeführt? *
</label>
<div class="flex items-center justify-center space-x-8 pt-2">
<label class="flex items-center cursor-pointer">
<input id="user-position-sitting" type="radio" formControlName="userPosition" value="sitting" (change)="logInteraction($event)" class="focus:ring-blue-500 text-blue-600 mr-2">
<span>Sitzend</span>
</label>
<label class="flex items-center cursor-pointer">
<input id="user-position-standing" type="radio" formControlName="userPosition" value="standing" (change)="logInteraction($event)" class="focus:ring-blue-500 text-blue-600 mr-2">
<span>Stehend</span>
</label>
</div>
</div>
<!-- Demografische Daten -->
<div class="mb-8">
<h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">

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

@ -12,28 +12,30 @@ import { MetricsTrackerService } from '../../../../services/metrics-tracker.serv
})
export class DemographicsFeedbackComponent implements OnInit {
private metricsService = inject(MetricsTrackerService);
private formBuilder = inject(FormBuilder);
@Output() testComplete = new EventEmitter<void>();
@Output() redoTest = new EventEmitter<number>();
demographicsForm!: FormGroup;
isSubmitting = false;
isSubmitted = false;
susItems = [
{ label: 'Ich denke, dass ich dieses System gerne regelmäßig nutzen würde.', controlName: 'sus1' },
{ label: 'Ich empfinde das System als unnötig komplex.', controlName: 'sus2' },
{ label: 'Ich empfinde das System als einfach zu nutzen.', controlName: 'sus3' },
{ label: 'Ich denke, dass ich technischen Support brauchen würde, um das System zu nutzen.', controlName: 'sus4' },
{ label: 'Ich finde, dass die verschiedenen Funktionen des Systems gut integriert sind.', controlName: 'sus5' },
{ label: 'Ich finde, dass es im System zu viele Inkonsistenzen gibt.', controlName: 'sus6' },
{ label: 'Ich kann mir vorstellen, dass die meisten Leute das System schnell zu beherrschen lernen.', controlName: 'sus7' },
{ label: 'Ich empfinde die Bedienung als sehr umständlich.', controlName: 'sus8' },
{ label: 'Ich habe mich bei der Nutzung des Systems sehr sicher gefühlt.', controlName: 'sus9' },
{ label: 'Ich musste eine Menge Dinge lernen, bevor ich mit dem System arbeiten konnte.', controlName: 'sus10' }
{ label: 'Ich denke, dass ich diese AR-Anwendung gerne regelmäßig nutzen würde.', controlName: 'sus1' },
{ label: 'Ich empfinde diese AR-Anwendung als unnötig komplex.', controlName: 'sus2' },
{ label: 'Ich empfinde diese AR-Anwendung als einfach zu nutzen.', controlName: 'sus3' },
{ label: 'Ich denke, dass ich technischen Support brauchen würde, um diese AR-Anwendung zu nutzen.', controlName: 'sus4' },
{ label: 'Ich finde, dass die verschiedenen Funktionen dieser AR-Anwendung gut integriert sind.', controlName: 'sus5' },
{ label: 'Ich finde, dass es in dieser AR-Anwendung zu viele Inkonsistenzen gibt.', controlName: 'sus6' },
{ label: 'Ich kann mir vorstellen, dass die meisten Leute diese AR-Anwendung schnell zu beherrschen lernen.', controlName: 'sus7' },
{ label: 'Ich empfinde die Bedienung dieser AR-Anwendung als sehr umständlich.', controlName: 'sus8' },
{ label: 'Ich habe mich bei der Nutzung dieser AR-Anwendung sehr sicher gefühlt.', controlName: 'sus9' },
{ label: 'Ich musste eine Menge Dinge lernen, bevor ich mit dieser AR-Anwendung arbeiten konnte.', controlName: 'sus10' }
];
constructor(private formBuilder: FormBuilder) {
constructor() {
this.logInteraction = this.logInteraction.bind(this);
}
@ -47,22 +49,26 @@ export class DemographicsFeedbackComponent implements OnInit {
createForm() {
this.demographicsForm = this.formBuilder.group({
// Ergonomics and Physical Feedback
comfortHold: [null, Validators.required],
enduranceFiveMinutes: [null, Validators.required],
physicalStrain: [null, Validators.required],
physicalStrain5min: [null, Validators.required],
userPosition: [null, Validators.required], // ++ ADDED THIS LINE ++
// Demographics
age: [null, [Validators.required, Validators.min(13), Validators.max(120)]],
gender: [null, Validators.required],
education: [null],
occupation: [null],
// Experience
arExperience: [null, Validators.required],
vrExperience: [null, Validators.required],
// Visual & Physical
visionCorrection: [null],
dominantHand: [null],
// SUS items
sus1: [null, Validators.required],
sus2: [null, Validators.required],
sus3: [null, Validators.required],
@ -74,14 +80,15 @@ export class DemographicsFeedbackComponent implements OnInit {
sus9: [null, Validators.required],
sus10: [null, Validators.required],
// Final Comments
comments: [''],
});
}
onSubmit() {
if (this.demographicsForm.valid) {
this.isSubmitting = true;
const formData = {
...this.demographicsForm.value,
susScore: this.calculateSusScore(this.demographicsForm.value),
@ -101,26 +108,26 @@ export class DemographicsFeedbackComponent implements OnInit {
});
} else {
Object.keys(this.demographicsForm.controls).forEach(key => {
this.demographicsForm.get(key)?.markAsTouched();
});
// Mark all fields as touched to show validation errors
this.demographicsForm.markAllAsTouched();
console.error("Form is invalid. Please fill out all required fields.");
}
}
private calculateSusScore(formData: any): number {
let score = 0;
// Odd items (1, 3, 5, 7, 9)
score += (formData.sus1 - 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);
// Even items (2, 4, 6, 8, 10)
score += (5 - formData.sus2);
score += (5 - formData.sus4);
score += (5 - formData.sus6);
score += (5 - formData.sus8);
score += (5 - formData.sus10);
return score * 2.5;
}
}
}

2
src/app/components/test-suite/test-suite.component.html
View File

@ -61,7 +61,7 @@
<div *ngIf="currentTest === 3" class="w-full h-full flex flex-col">
<div class="bg-gray-50 border border-gray-200 rounded-lg p-4 mb-4 font-mono text-sm">
<div class="text-black-600">
<h2 class="text-base mb-2">In diesem Testabschnitt untersuchen wir die ergonomisch optimale Positionierung eines virtuellen Objekts an der Decke.</h2>
<h2 class="text-base mb-2">In diesem Testabschnitt wird die ergonomisch optimale Positionierung eines virtuellen Objekts an der Decke untersucht.</h2>
<ul class="list-disc pl-4 space-y-1">
<li>Das Ziel ist, eine Position zu finden, die es Ihnen erlaubt, das Objekt für 20 Sekunden mit möglichst geringer körperlicher Anstrengung zu betrachten.</li>
<li>Positionieren Sie das virtuelle Objekt mithilfe der Steuerung an der Decke.</li>