Agc test

src/app/app-routing.module.ts

@@ -1,9 +1,11 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { HomepageComponent } from './homepage/homepage.component';
+import { TeamtestComponent } from './teamtest/teamtest.component';
 
 const routes: Routes = [
   { path: 'home', component: HomepageComponent },
+  { path: 'teamtest', component:  TeamtestComponent},
   { path: '**', redirectTo: 'home' }
 ];
 

src/app/app.component.html

@@ -1,15 +1,20 @@
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
   <div class="container-fluid">
     <a class="navbar-brand" href="#">Navbar</a>
+
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
       aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
+
     <div class="collapse navbar-collapse" id="navbarSupportedContent">
       <ul class="navbar-nav me-auto mb-2 mb-lg-0">
         <li class="nav-item">
           <a class="nav-link active" aria-current="page" href="#">Home</a>
         </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLink="/teamtest">TeamTest</a>
+        </li>
         <li class="nav-item">
           <a class="nav-link" href="#">Link</a>
         </li>
@@ -41,4 +46,5 @@
 
 <div class="container">
   <router-outlet></router-outlet>
-</div>
+</div>
+

src/app/app.module.ts

@@ -7,19 +7,23 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { HomepageComponent } from './homepage/homepage.component';
 import { RoomService } from './services/rooms.service';
+import { QuestionsService } from './services/questions.service';
+import { TeamtestComponent } from './teamtest/teamtest.component';
+
 
 @NgModule({
   declarations: [
     AppComponent,
-    HomepageComponent
+    HomepageComponent,
+    TeamtestComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     FormsModule,
     HttpClientModule
   ],
-  providers: [RoomService],
+  providers: [RoomService, QuestionsService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/homepage/homepage.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { Questionare } from '../models/questionare.model';
+import { Questionnaire } from '../models/questionnaire.model';
 import { Room } from '../models/room.model';
 import { RoomService } from '../services/rooms.service';
 
@@ -9,7 +9,7 @@ import { RoomService } from '../services/rooms.service';
   styleUrls: ['./homepage.component.scss']
 })
 export class HomepageComponent implements OnInit {
-  results: Questionare = new Questionare();
+  results: Questionnaire = new Questionnaire();
   email: string = "test123";
   rooms: Room[] = [];
 

src/app/models/questionnaire.model.ts

@@ -0,0 +1,36 @@
+export class Questionnaire {
+    name: string;
+    email: string;
+    Q01: number; 
+    Q02: number;
+    Q03: number;
+    Q04: number;
+    Q05: number;
+    Q06: number;
+    Q07: number;
+    Q08: number;
+    Q09: number;
+    Q10: number;
+    Q11: number;
+    Q12: number;
+    Q13: number;
+    Q14: number;
+    Q15: number;
+    Q16: number;
+    Q17: number;
+    Q18: number;
+    Q19: number;
+    Q20: number;
+    Q21: number;
+    Q22: number;
+    Q23: number;
+    Q24: number;
+    Q25: number;
+    Q26: number;
+    Q27: number;
+    Q28: number;
+    Q29: number;
+    Q30: number;
+    Q31: number;
+    Q32: number;
+};

src/app/services/questions.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { QuestionsService } from './questions.service';
+
+describe('QuestionsService', () => {
+  let service: QuestionsService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(QuestionsService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/questions.service.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+@Injectable({
+  providedIn: 'root'
+})
+
+export class QuestionsService {
+
+  constructor(private http: HttpClient) {
+
+  }
+
+  getQuestion() {
+    return this.http.get<{Frage: string, type:string, id:string}[]>
+    ('./assets/questions.json');
+  }
+}

src/app/teamtest/teamtest.component.html

@@ -0,0 +1,66 @@
+<h3>Tuckman Team-Analyse</h3>
+
+<p>Bitte fülle die Fragen so spontan wie möglich aus. <br> Es gibt hierbei kein Richtig oder Falsch</p>
+
+
+
+
+
+
+<table style="width: 100%;">
+    <colgroup>
+        <col span="1" style="width: 35%;">
+        <col span="1" style="width: 13%;">
+        <col span="1" style="width: 13%;">
+        <col span="1" style="width: 13%;">
+        <col span="1" style="width: 13%;">
+        <col span="1" style="width: 13%;">
+    </colgroup>
+    <thead>
+        <tr>
+            <th></th>
+            <th>so gut <br>wie nie</th>
+            <th>selten</th>
+            <th>manchmal</th>
+            <th>häufig</th>
+            <th>fast <br>immer</th>
+        </tr>
+    </thead>
+    <tbody *ngFor="let fragen of Fragen | async">
+        <tr>
+            <td class=rowname>
+                {{fragen.Frage}} <br><br>
+            </td>
+            <td>
+                <div class="form-check form-check-inline">
+                    <input class="form-check-input" type="radio" name={{fragen.id}} id=option1{{fragen.id}} value="1" aria-label="...">
+                </div>
+            </td>
+            <td>
+                <div class="form-check form-check-inline">
+                    <input class="form-check-input" type="radio" name={{fragen.id}} id=option2{{fragen.id}} value="2" aria-label="...">
+                </div>
+            </td>
+            <td>
+                <div class="form-check form-check-inline">
+                    <input class="form-check-input" type="radio" name={{fragen.id}} id=option3{{fragen.id}} value="3" aria-label="...">
+                </div>
+            </td>
+            <td>
+                <div class="form-check form-check-inline">
+                    <input class="form-check-input" type="radio" name={{fragen.id}} id=option4{{fragen.id}} value="4" aria-label="...">
+                </div>
+            </td>
+            <td>
+                <div class="form-check form-check-inline">
+                    <input class="form-check-input" type="radio" name={{fragen.id}} id=option5{{fragen.id}} value="5" aria-label="...">
+                </div>
+            </td>
+        </tr>    
+    </tbody>
+
+</table>
+
+
+<button class="button" type="submit">Absenden</button>
+

src/app/teamtest/teamtest.component.scss

@@ -0,0 +1,16 @@
+th {
+    position: sticky;
+    text-align: center; 
+    z-index: 1;
+    top: 0; 
+    background:#eee;
+}
+
+td {
+    text-align: center; 
+    /*align-items: center;*/
+}
+
+.rowname {
+    text-align: left; 
+}

src/app/teamtest/teamtest.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TeamtestComponent } from './teamtest.component';
+
+
+describe('TeamtestComponent', () => {
+  let component: TeamtestComponent;
+  let fixture: ComponentFixture<TeamtestComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TeamtestComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TeamtestComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/teamtest/teamtest.component.ts

@@ -0,0 +1,17 @@
+import { Component} from '@angular/core';
+import { QuestionsService } from '../services/questions.service';
+
+@Component({
+  selector: 'app-homepage',
+  templateUrl: './teamtest.component.html',
+  styleUrls: ['./teamtest.component.scss']
+})
+
+export class TeamtestComponent{
+
+  Fragen = this.questionsService.getQuestion();
+
+  constructor(
+    private questionsService: QuestionsService) {
+   }
+}