Frontend

Q-Wiz_Backened/src/main/java/com/example/entities/Choices.java

@@ -48,4 +48,7 @@ public class Choices {
 
 	@Column (name = "is_correct ")
 	private String isCorrect;
+
+	@Column (name = "answer")
+	private String answer;
 }

Q-Wiz_Backened/src/main/java/com/example/entities/Question_Details.java

@@ -44,7 +44,10 @@ public class Question_Details {
 	@Column (name = "question")
 	private String question;
 
-	@Column (name = "type_of_question")
-	private String typeOfQuestion;
+	@Column (name = "question_type1")
+	private String type1;
+
+	@Column (name = "question_type2")
+	private String type2;
 
 }

q-wiz/src/app/app.module.ts

@@ -1,11 +1,11 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
 
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { LoginComponent } from './login/login.component';
-import { RegisterComponent } from './register/register.component';
+import { LoginRegisterComponent } from './login-register/login-register.component';
 import { CreateQuizComponent } from './create-quiz/create-quiz.component';
 import { CreateQuestionAnswerComponent } from './create-question-answer/create-question-answer.component';
 import { NavbarComponent } from './navbar/navbar.component';
@@ -17,12 +17,12 @@ import { LeaderboardComponent } from './leaderboard/leaderboard.component';
 import { RouterModule } from '@angular/router';
 import { appRoutes } from 'src/routes';
 import { LogoutComponent } from './logout/logout.component';
+import { ProfileComponent } from './profile/profile.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    LoginComponent,
-    RegisterComponent,
+    LoginRegisterComponent,
     CreateQuizComponent,
     CreateQuestionAnswerComponent,
     NavbarComponent,
@@ -31,12 +31,14 @@ import { LogoutComponent } from './logout/logout.component';
     CreateTagsComponent,
     FilterByTagsComponent,
     LeaderboardComponent,
-    LogoutComponent
+    LogoutComponent,
+    ProfileComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
-    RouterModule.forRoot(appRoutes)
+    RouterModule.forRoot(appRoutes),
+    FormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

q-wiz/src/app/login-register/login-register.component.html

@@ -0,0 +1,97 @@
+<app-navbar></app-navbar>
+<p>login works!</p>
+
+<!-- This is a login form -->
+<div class="container-fluid" id="loginAccount" *ngIf="toggleOn">
+<form #loginForm="ngForm" class="row g-3">
+    <div class="col-md-3">
+        <label for="inputEmail" class="form-label">Email</label>
+        <input type="email" name="Email" #Email ngModel required [pattern]="emailPattern">
+    </div>
+    <div class="col-md-3">
+      <label for="inputPassword4" class="form-label">Password</label>
+      <input type="password" name="Password" #Password ngModel required>
+    </div>
+    <div class="col-12">
+      <button type="submit" [disabled]="!loginForm.valid" class="btn btn-warning">Log in</button>
+      <p id="p-index">To create an account, <button (click)="toggleOn =!toggleOn" class="btn btn-secondary" id="create-link">click here.</button></p>
+    </div>
+  </form>
+</div>
+
+<!-- This is a register form -->
+  <div class="row" id="createAccount" *ngIf="!toggleOn">
+    <div class="col s6 offset-s3">
+      <div class="card">
+        <div class="card-content">
+          <form #registerForm="ngForm">
+            <div class="row">
+              <div class="input-field col s12">
+                <input type="text" name="First Name" #Name ngModel required>
+                <label>First Name</label>
+              </div>
+            </div>
+            <div class="row">
+              <div class="input-field col s12">
+                <input type="text" name="Last Name" #Name ngModel required>
+                <label>Last Name</label>
+              </div>
+            </div>
+            <div class="row">
+              <div class="input-field col s12">
+                <input type="email" name="Email" #Email ngModel required [pattern]="emailPattern">
+                <label>Email</label>
+              </div>
+            </div>
+            <div class="row">
+              <div class="input-field col s12">
+                <input type="text" name="Username" #Username ngModel required>
+                <label>Username</label>
+              </div>
+            </div>
+            <div class="row">
+              <div class="input-field col s12">
+                <input type="password" name="Password" #Password ngModel required>
+                <label>Password</label>
+              </div>
+            </div>
+            <div class="row">
+              <div class="input-field col s12">
+                <button type="submit" [disabled]="!registerForm.valid" class="btn btn-warning">Register</button>
+                <p id="p-index">If you already have an account, <button (click)="toggleOn =!toggleOn" class="btn btn-secondary"
+                    id="create-link">click here.</button></p>
+              </div>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+<!--
+
+      <label for="inputEmail" class="form-label">First Name</label>
+      <input type="email" class="form-control" id="inputEmail">
+  </div>
+    <div class="col-md-3">
+      <label for="inputEmail" class="form-label">Last Name</label>
+      <input type="email" class="form-control" id="inputEmail">
+  </div>
+    <div class="col-md-3">
+      <label for="inputEmail" class="form-label">Email</label>
+      <input type="email" class="form-control" id="inputEmail">
+  </div>
+      <div class="col-md-3">
+          <label for="inputEmail" class="form-label">Username</label>
+          <input type="email" class="form-control" id="inputEmail">
+      </div>
+      <div class="col-md-3">
+        <label for="inputPassword4" class="form-label">Password</label>
+        <input type="password" class="form-control" id="inputPassword4">
+      </div>
+      <div class="col-12">
+        <button type="submit" class="btn btn-success">Register</button>
+        <p id="p-index">If you already have an account, <a href="./" id="login-link">click here.</a></p>
+      </div>
+    </form>
+  </div>
+-->

q-wiz/src/app/login/login.component.spec.ts → q-wiz/src/app/login-register/login-register.component.spec.ts

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

q-wiz/src/app/login-register/login-register.component.ts

@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-login-register',
+  templateUrl: './login-register.component.html',
+  styleUrls: ['./login-register.component.css']
+})
+export class LoginRegisterComponent implements OnInit {
+
+/*for validation of inputs*/
+  emailPattern = "^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$"
+
+  constructor() { }
+/*for hiding/unhiding elements*/
+  toggleOn:boolean = true;
+
+  ngOnInit() {
+this.toggleOn = true;
+
+  }
+
+}
+
+

q-wiz/src/app/navbar/navbar.component.html

@@ -1,9 +1,12 @@
 <p>navbar works!</p>
 <div class="btn-group" role="group" aria-label="Basic mixed styles example">
-    <button type="button" class="btn btn-success">Login/Register</button>
-    <button type="button" class="btn btn-warning">Create A Quiz</button>
-    <button type="button" class="btn btn-warning">Take A Quiz </button>
-    <button type="button" class="btn btn-warning">Leaderboard </button>
-    <button type="button" class="btn btn-danger">Logout</button>
+    <nav>
+        <a routerLink="/login-register"><button type="button" class="btn btn-warning">Login/Register</button></a>
+        <a routerLink="/profile"><button type="button" class="btn btn-primary">My Profile</button></a>
+        <a routerLink="/create-quiz"><button type="button" class="btn btn-primary">Create A Quiz</button></a>
+        <a routerLink="/take-quiz"><button type="button" class="btn btn-primary">Take A Quiz </button></a>
+        <a routerLink="/leaderboard"><button type="button" class="btn btn-primary">Leaderboard </button></a>
+        <a routerLink="/logout"><button type="button" class="btn btn-secondary">Logout</button></a>
+    </nav>
 </div>
 

q-wiz/src/app/profile/profile.component.html

@@ -0,0 +1,2 @@
+<app-navbar></app-navbar>
+<p>profile works!</p>

q-wiz/src/app/register/register.component.spec.ts → q-wiz/src/app/profile/profile.component.spec.ts

@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { RegisterComponent } from './register.component';
+import { ProfileComponent } from './profile.component';
 
-describe('RegisterComponent', () => {
-  let component: RegisterComponent;
-  let fixture: ComponentFixture<RegisterComponent>;
+describe('ProfileComponent', () => {
+  let component: ProfileComponent;
+  let fixture: ComponentFixture<ProfileComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ RegisterComponent ]
+      declarations: [ ProfileComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(RegisterComponent);
+    fixture = TestBed.createComponent(ProfileComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

q-wiz/src/app/profile/profile.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-profile',
+  templateUrl: './profile.component.html',
+  styleUrls: ['./profile.component.css']
+})
+export class ProfileComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

q-wiz/src/app/take-quiz/take-quiz.component.html

@@ -1,2 +1,31 @@
 <app-navbar></app-navbar>
 <p>take-quiz works!</p>
+<!-- This is a card for the question and answers to be on for taking quiz -->
+<div class="row row-cols-1 row-cols-md-2 g-4">
+    <div class="col">
+        <div class="card">
+            <img src="..." class="card-img-top" alt="...">
+            <div class="card-body">
+                <h5 class="card-title">Card title</h5>
+                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
+                    content. This content is a little bit longer.</p>
+            </div>
+        </div>
+    </div>
+
+    <div class="input-group mb-3">
+        <div class="input-group-text">
+            <input class="form-check-input mt-0" type="checkbox" value=""
+                aria-label="Checkbox for following text input">
+        </div>
+        <input type="text" class="form-control" aria-label="Text input with checkbox">
+    </div>
+
+    <div class="input-group">
+        <div class="input-group-text">
+            <input class="form-check-input mt-0" type="radio" value=""
+                aria-label="Radio button for following text input">
+        </div>
+        <input type="text" class="form-control" aria-label="Text input with radio button">
+    </div>
+</div>