start quiz

src/app/app.component.html

@@ -2,7 +2,7 @@
     content</a>
 <div class="flex flex-col min-h-screen">
     <app-header [title]="title"></app-header>
-    <main tabindex="0" id="mainContent" class="p-1 grow">
+    <main tabindex="0" id="mainContent" class="px-4 lg:px-8 grow">
         <router-outlet></router-outlet>
     </main>
     <app-footer></app-footer>

src/app/app.routes.ts

@@ -1,8 +1,10 @@
 import { Routes } from '@angular/router';
 import { CitationsComponent } from './citations/citations.component';
-import * as CitationsJSON from '../data/citations.json'
 import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
 import { HomeComponent } from './home/home.component';
+import { QuizComponent } from './quiz/quiz.component';
+
+import * as CitationsJSON from '../data/citations.json';
 
 export const routes: Routes = [
     {
@@ -18,5 +20,10 @@ export const routes: Routes = [
             citations: CitationsJSON.citations
         }
     },
+    {
+        path: 'quiz',
+        title: 'Quiz',
+        component: QuizComponent
+    },
     {path: '**', component: PageNotFoundComponent}
 ];

src/app/footer/footer.component.html

@@ -1,6 +1,5 @@
-<footer data-cy="site-footer" class="bg-neutral-700 text-white p-1">
-    <ul class="flex gap-1">
-        <li><a routerLink="/citations">Citations</a></li>
+<footer data-cy="site-footer" class="bg-neutral-700 text-white p-1 px-4">
+    <ul class="flex gap-3">
         <li><a href="https://github.com/dmlb/covid-care/blob/main/ACCESSIBILITY_STATEMENT.md">Accessibility Statement</a></li>
         <li><a href="https://github.com/dmlb/covid-care/issues">Report an Issue</a></li>
         <li><a href="https://github.com/dmlb/covid-care">Contribute</a></li>

src/app/header/header.component.html

@@ -1,3 +1,10 @@
-<header data-cy="site-header" class="bg-neutral-700 text-white p-1" aria-labelledby="siteTitle">
-        <h1 id="siteTitle" class="text-lg font-extrabold"><a routerLink="/">{{title}}</a></h1>
+<header data-cy="site-header" class="md:flex bg-neutral-700 text-white px-4" aria-labelledby="siteTitle">
+        <h1 id="siteTitle" class="grow text-lg font-extrabold"><a routerLink="/">{{title}}</a></h1>
+
+        <nav aria-label="main site navigation">
+                <ul class="flex flex-wrap gap-3">
+                        <li><a routerLink="/quiz">Take the Quiz</a></li>
+                        <li><a routerLink="/citations">Read Citations</a></li>
+                </ul>
+        </nav>
 </header>

src/app/home/home.component.html

@@ -3,9 +3,21 @@ <h1 class="text-5xl font-bold mb-4">Covid Care</h1>
     <h2 class="text-3xl font-bold mb-2">A Consent Communication Tool</h2>
 
     <strong>How careful are you being? What is your definition of careful? <br> What is your comfort level?</strong>
-    <p>This tool is to help you communicate your experiences, practices, and expectations to someone you have or are trying to have an interpersonal relationship with.</p>
+    <p class="mb-2">This tool is to help you communicate your experiences, practices, and expectations to someone you have or are trying to have an interpersonal relationship with.</p>
+
+    <a class="button button--primary" routerLink="/quiz">Take the Quiz</a>
 </div>
 
+<div class="flex flex-wrap justify-around gap-4">
+<!-- Contribute group -->
+<article class="text-sm card" aria-labelledby="contribute">
+    <h3 class="card__title" id="contribute">
+        Contribute
+    </h3>
+    <p>
+        This project is an open effort. Consider <a href="https://github.com/dmlb/covid-care">contributing on GitHub</a>.
+    </p>
+</article>
 
 <!-- Land Acknowledgement group -->
 <article class="text-sm card" aria-labelledby="landAck">
@@ -18,4 +30,5 @@ <h3 class="card__title" id="landAck">
     <p>
         Traditional territories of the Niitsitapi (Blackfoot) and the people of Treaty 7 which includes the Siksika, the Piikani, the Kainai, the Tsuut'ina and the Îyârhe Nakoda of Bearspaw, Chiniki and Goodstoney. Which is also home to the Métis Nation, Region 3
     </p>
-</article>
+</article>
+</div>

src/app/home/home.component.ts

@@ -1,9 +1,10 @@
 import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-home',
   standalone: true,
-  imports: [],
+  imports: [RouterLink],
   templateUrl: './home.component.html',
   styleUrl: './home.component.css'
 })

src/app/quiz/question-group/question-group.component.html

@@ -0,0 +1,33 @@
+@for (group of questionGroup(); track group.title) {
+    <article class="mb-8" [attr.aria-labelledby]="group.title">
+        <h2 [id]="group.title" class="text-xl capitalize font-bold mb-2">{{ group.title }}</h2>
+
+        @if (group.questions && group.questions.length >= 1) {
+
+            @for (question of group.questions; track question.question) {
+                <h3 class="text-lg font-bold mb-2">{{question.question}}</h3>
+                <p>{{question.description}}</p>
+
+                <div class="flex flex-col gap-2 mb-3">
+                    @if (question.type === 'radio') {
+                        @for(answer of question.answers; track answer.answer) {
+                            <label class="">
+                                <input type="radio" [value]="answer.value">
+                                {{answer.answer}}
+                            </label>
+                        }
+                    }
+
+                    @if (question.type === 'checkbox') {
+                        @for(answer of question.answers; track answer.answer) {
+                            <label>
+                                <input type="checkbox" [value]="answer.value">
+                                {{answer.answer}}
+                            </label>
+                        }
+                    }
+                </div>
+            }
+        }
+    </article>
+}

src/app/quiz/question-group/question-group.component.spec.ts

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

src/app/quiz/question-group/question-group.component.ts

@@ -0,0 +1,14 @@
+import { CommonModule } from '@angular/common';
+import { Component, input } from '@angular/core';
+import { IQuestionGroup } from '../../../interfaces/questions';
+
+@Component({
+  selector: 'app-question-group',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './question-group.component.html',
+  styleUrl: './question-group.component.css'
+})
+export class QuestionGroupComponent {
+  questionGroup = input.required<IQuestionGroup[]>()
+}

src/app/quiz/quiz.component.html

@@ -0,0 +1,4 @@
+<h1 class="page-heading">{{title}}</h1>
+
+<app-question-group [questionGroup]="screeningQuestions"></app-question-group>
+<app-question-group [questionGroup]="mitigationQuestions"></app-question-group>

src/app/quiz/quiz.component.spec.ts

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

src/app/quiz/quiz.component.ts

@@ -0,0 +1,21 @@
+import { CommonModule } from '@angular/common';
+import { Component} from '@angular/core';
+
+import { QuestionGroupComponent } from "./question-group/question-group.component";
+import { IQuestionGroup } from '../../interfaces/questions';
+
+import * as ScreeningJSON from '../../data/screening.json';
+import * as MitigationJSON from '../../data/mitigation.json';
+
+@Component({
+  selector: 'app-quiz',
+  standalone: true,
+  imports: [CommonModule, QuestionGroupComponent],
+  templateUrl: './quiz.component.html',
+  styleUrl: './quiz.component.css'
+})
+export class QuizComponent {
+  screeningQuestions: IQuestionGroup[] = ScreeningJSON.screening; 
+  mitigationQuestions: IQuestionGroup[] = MitigationJSON.mitigation;
+  title = 'Quiz'
+}

src/data/activities.json

@@ -0,0 +1,158 @@
+{
+    "activities": [
+        {
+            "title": "activities",
+            "questions": [
+                {
+                    "question": "Do you do any of the following?",
+                    "description": "",
+                    "type": "checkbox",
+                    "answers": [
+                        {
+                            "answer": "Work",
+                            "value": 1
+                        },
+                        {
+                            "answer": "School",
+                            "value": 1
+                        },
+                        {
+                            "answer": "Attend events",
+                            "value": 1
+                        },
+                        {
+                            "answer": "Attend social gatherings",
+                            "value": 1
+                        },
+                        {
+                            "answer": "Run domestic errands",
+                            "value": 1
+                        },
+                        {
+                            "answer": "Seek medical care",
+                            "value": 1
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            "title": "activity details",
+            "questions": [
+                {
+                    "question": "are you attending:",
+                    "description": "",
+                    "type": "radio",
+                    "answers": [
+                        {
+                            "answer": "in person",
+                            "value": 2
+                        },
+                        {
+                            "answer": "hybrid",
+                            "value": 1
+                        },
+                        {
+                            "answer": "remote",
+                            "value": 0
+                        }
+                    ]
+                },
+                {
+                    "question": "are you attending:",
+                    "description": "",
+                    "type": "radio",
+                    "answers": [
+                        {
+                            "answer": "daily",
+                            "value": 4
+                        },
+                        {
+                            "answer": "weekly",
+                            "value": 3
+                        },
+                        {
+                            "answer": "monthly",
+                            "value": 2
+                        },
+                        {
+                            "answer": "quarterly",
+                            "value": 1
+                        },
+                        {
+                            "answer": "yearly",
+                            "value": 0
+                        }
+                    ]
+                },
+                {
+                    "question": "how many others are attending:",
+                    "description": "",
+                    "type": "radio",
+                    "answers": [
+                        {
+                            "answer": "35+",
+                            "value": 4
+                        },
+                        {
+                            "answer": "20 - 35",
+                            "value": 3
+                        },
+                        {
+                            "answer": "10 - 19",
+                            "value": 2
+                        },
+                        {
+                            "answer": "4 - 9",
+                            "value": 1
+                        },
+                        {
+                            "answer": "0 - 3",
+                            "value": 0
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            "title": "ventilation",
+            "questions": [
+                {
+                    "question": "Are you able to improve air quality with good ventilation?",
+                    "description": "",
+                    "type": "checkbox",
+                    "answers": [
+                        {
+                            "answer": "Outside, with a breeze",
+                            "value": 6
+                        },
+                        {
+                            "answer": "Inside, maintaining an optimal humidity level, between 30% and 50%",
+                            "value": 5
+                        },
+                        {
+                            "answer": "Inside, running exhaust fans that are vented to the outside",
+                            "value": 3
+                        },
+                        {
+                            "answer": "Inside, air purifier with HEPA or MERV≥13 filter",
+                            "value": 3
+                        },
+                        {
+                            "answer": "Inside, air purifier with HEPA or MERV≥13 filter,  with high enough CADR for the space",
+                            "value": 4
+                        },
+                        {
+                            "answer": "Inside, open windows",
+                            "value": 2
+                        },
+                        {
+                            "answer": "Inside, large space with distance from others",
+                            "value": 2
+                        }
+                    ]
+                }
+            ]
+        }
+    ]
+}