flip flop quiz changes

piyalidas10 · piyalidas10 · commit 0322ba580fa4 · 2020-03-21T14:52:15.000+05:30
diff --git a/README.md b/README.md
@@ -9,4 +9,5 @@ ng generate class models/Quiz
 # Run Application
 ```
 ng serve
+localhost:4200/
 ```
diff --git a/src/app/app.component.css b/src/app/app.component.css
@@ -0,0 +1,3 @@
+h4{
+    margin-top: 10px;
+}
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,4 +1,13 @@
 <!--The content below is only a placeholder and can be replaced.-->
-<h4 class="text-center">Flip Flop Quiz</h4>
-<p class="text-center">Click on the card</p>
-<app-quizhome></app-quizhome>
+<div class="container">
+    <div class="row">
+        <div class="col-lg-9 col-md-8 col-sm-7">
+            <h4>Flip Flop Quiz</h4>
+            <p>Click on the card</p>
+        </div>
+        <div class="col-lg-3 col-md-4 col-sm-5">
+            <app-quizresult [isResultSubmitted]="isResultSubmitted"></app-quizresult>
+        </div>
+    </div>
+    <app-quizhome (isSubmitted)="checkIsSubmitted($event)"></app-quizhome>
+</div>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -7,4 +7,12 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
   title = 'flipflop';
+  public isResultSubmitted = false;
+
+  checkIsSubmitted(evt) {
+    console.log('evt => ', evt);
+    if (evt === 'true') {
+      this.isResultSubmitted = true;
+    }
+  }
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -2,6 +2,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { HttpClientModule } from '@angular/common/http';
 import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
 
 import { AppComponent } from './app.component';
 import { QuizhomeComponent } from './quizhome/quizhome.component';
@@ -10,18 +11,21 @@ import { QuizexpandComponent } from './quizexpand/quizexpand.component';
 import { ApiService } from './services/api.service';
 
 import { QuizcontainerDirective } from './quizhome/quizhome.component';
+import { QuizresultComponent } from './quizresult/quizresult.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     QuizhomeComponent,
     QuizcontainerDirective,
-    QuizexpandComponent
+    QuizexpandComponent,
+    QuizresultComponent
   ],
   imports: [
     BrowserModule,
     CommonModule,
-    HttpClientModule
+    HttpClientModule,
+    ReactiveFormsModule
   ],
   schemas: [
     CUSTOM_ELEMENTS_SCHEMA
diff --git a/src/app/models/quiz.ts b/src/app/models/quiz.ts
@@ -1,7 +1,10 @@
-import { ArrayType } from '@angular/compiler';
 
-export class Quiz {
+export class QuizModel {
+    public questions: Questions[];
+}
+
+export class Questions {
     question: string;
-    answers: ArrayType;
+    answers: Array<any>;
     correctIndex: number;
 }
diff --git a/src/app/quizexpand/quizexpand.component.html b/src/app/quizexpand/quizexpand.component.html
@@ -1,6 +1,6 @@
 <h6>{{serialno+1}}. {{data.question}}</h6>
             <ul>
               <li *ngFor="let ans of data.answers; let i = index;">
-                <input type="radio" name="answer{{serialno}}" value="{{ans}}" (click)="chooseAns(serialno, i)"> {{ans}}
+                <input type="radio" name="answer{{serialno}}" value="{{ans}}" [checked]="i===alreadychoosedans" (click)="chooseAns(serialno, i)"> {{ans}}
               </li>
             </ul>
diff --git a/src/app/quizexpand/quizexpand.component.ts b/src/app/quizexpand/quizexpand.component.ts
@@ -8,6 +8,7 @@ import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
 export class QuizexpandComponent implements OnInit {
   @Input() data: any;
   @Input() serialno: number;
+  @Input() alreadychoosedans: number;
   @Output() chooseVal = new EventEmitter();
 
   constructor() { }
diff --git a/src/app/quizhome/quizhome.component.css b/src/app/quizhome/quizhome.component.css
@@ -5,11 +5,14 @@
   display: flex;
   flex-wrap: wrap;
 }
+.flip-card-wrapper {
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
 .flip-card {
     position: relative;
     min-height: 200px;
-    height: 96%;
-    margin: 20px 0;
+    height: 100%;
     transition: transform 0.6s;
     transform-style: preserve-3d;
 }
diff --git a/src/app/quizhome/quizhome.component.html b/src/app/quizhome/quizhome.component.html
@@ -1,6 +1,5 @@
-<div class="container">
   <div class="row">
-    <div class="col-12 col-sm-6 col-md-4 col-lg-3 quiz{{i}}" *ngFor="let quiz of quizLists; let i = index;">
+    <div class="col-12 col-sm-6 col-md-4 col-lg-3 flip-card-wrapper quiz{{i}}" *ngFor="let quiz of quizLists; let i = index;">
       <div class="flip-card">
           <div class="flip-card-front" (click)="expandSection(i)">
             <div class="num">{{i+1}}</div>
@@ -11,4 +10,7 @@
       </div>
     </div>
   </div>
-</div>
+  <div class="form-group text-right">
+    <button type="button" class="btn btn-success" (click)="submitQuiz()">Submit Quiz</button>
+  </div>
+
diff --git a/src/app/quizhome/quizhome.component.ts b/src/app/quizhome/quizhome.component.ts
@@ -1,13 +1,14 @@
-import { Component, OnInit, Directive, ViewContainerRef, ViewChildren, QueryList, ComponentFactoryResolver, ElementRef } from '@angular/core';
+import { Component, OnInit, Directive, ViewContainerRef, ViewChildren, QueryList, ComponentFactoryResolver, ElementRef, Output, EventEmitter } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { ApiService } from '../services/api.service';
 import { QuizexpandComponent } from '../quizexpand/quizexpand.component';
+import { SharedService } from '../services/shared.service';
 
 @Directive({
   // tslint:disable-next-line:directive-selector
   selector: '[quizcontainer]',
 })
-export class QuizcontainerDirective  {
+export class QuizcontainerDirective {
   constructor(public viewContainerRef: ViewContainerRef) {
   }
 }
@@ -21,19 +22,21 @@ export class QuizcontainerDirective  {
 export class QuizhomeComponent implements OnInit {
   public quizLists: any;
   public quizAnsLists = [];
+  @Output() isSubmitted = new EventEmitter();
 
   // @ViewChildren decorator to grab elements from the host view
   /* The return type of ViewChildren is QueryList.
   QueryList is just a fancy name for an object that stores
   a list of items. What is special about this object is
   when the state of the application changes Angular will
   automatically update the object items for you. */
-  @ViewChildren (QuizcontainerDirective) entry: QueryList<QuizcontainerDirective>;
+  @ViewChildren(QuizcontainerDirective) entry: QueryList<QuizcontainerDirective>;
 
   constructor(
     public apiService: ApiService,
     private resolver: ComponentFactoryResolver,
-    private ele: ElementRef
+    private ele: ElementRef,
+    private sharedSrv: SharedService
   ) {
     this.getDataLists();
   }
@@ -46,44 +49,50 @@ export class QuizhomeComponent implements OnInit {
       this.apiService.getData()
         .subscribe(
           data => {
-            this.quizLists = data.questions;
+            this.quizLists = data['questions'];
             console.log('quizLists => ', this.quizLists);
+            const originalansLists = this.quizLists.map( ele => ele.correctIndex);
+            console.log('originalansLists => ', originalansLists);
+            this.sharedSrv.setOriginalAnsLists(originalansLists);
           },
           err => {
             console.log('Error => ', err);
           }
         );
-      } catch (error) {
-        console.log('error => ', error);
-      }
+    } catch (error) {
+      console.log('error => ', error);
+    }
   }
 
   notifyAns(evt) {
     console.log('Question Ans => ', evt);
   }
 
   // ViewContainerRef — create templates or components dynamically
-  public openComponent(index) {
+  openComponent(index) {
     console.log(this.entry);
+    const alreadyChoosedAns = this.showAlreadySelectedAns(index);
+    console.log('alreadyChoosedAns => ', alreadyChoosedAns);
     const myFactory = this.resolver.resolveComponentFactory(QuizexpandComponent);
-    if (this.entry.toArray()[index].viewContainerRef.length <= 0 ) {
+    if (this.entry.toArray()[index].viewContainerRef.length <= 0) {
       const myRef = this.entry.toArray()[index].viewContainerRef.createComponent(myFactory);
       myRef.instance['data'] = this.quizLists[index];
       myRef.instance['serialno'] = index;
+      myRef.instance['alreadychoosedans'] = alreadyChoosedAns;
       myRef.instance['chooseVal'].subscribe(event => {
         console.log('chooseVal => ', event);
-        this.quizAnsLists.push(event);
-        console.log('quizAnsLists => ', this.quizAnsLists);
+        this.checkDuplicateAns(event);
       });
       myRef.changeDetectorRef.detectChanges();
     }
   }
 
-  public closeComponent(index) {
-    this.entry[index].ViewContainerRef.remove();
+  closeComponent(index) {
+    console.log('close component', index);
+    this.entry.toArray()[index].viewContainerRef.remove();
   }
 
-  public expandSection(index) {
+  expandSection(index) {
     const expandElement = this.ele.nativeElement.querySelectorAll('.quiz' + index)[0];
     console.log('expandElement => ', expandElement);
     const rowElement = expandElement.parentElement;
@@ -93,14 +102,54 @@ export class QuizhomeComponent implements OnInit {
     rowElement.classList.add('equal');
   }
 
-  public closeSection(index) {
+  closeSection(index) {
     const closeElement = this.ele.nativeElement.querySelectorAll('.quiz' + index)[0];
     console.log('closeElement => ', closeElement);
     const rowElement = closeElement.parentElement;
     console.log('rowElement => ', rowElement);
     closeElement.children[0].classList.remove('is-flipped');
     rowElement.classList.remove('equal');
     rowElement.classList.add('equal');
+    this.closeComponent(index);
+  }
+
+  showAlreadySelectedAns(index) {
+    let serialNo = 0;
+    console.log('quizAnsLists => ', this.quizAnsLists);
+    console.log('index => ', index);
+    if (this.quizAnsLists.length > 0) {
+      this.quizAnsLists.forEach(ele => {
+        if (ele.slno === index) {
+          serialNo = ele.index;
+        } else {
+          serialNo = -1;
+        }
+      });
+    } else {
+      serialNo = -1;
+    }
+    return serialNo;
+  }
+
+  checkDuplicateAns(evt) {
+    if (this.quizAnsLists.length > 0) {
+      const position = this.quizAnsLists.findIndex(ele => ele.slno === evt.slno);
+      console.log('position => ', position);
+      if (position !== -1) {
+        this.quizAnsLists[position].index = evt.index;
+      } else {
+        this.quizAnsLists.push(evt);
+      }
+    } else {
+      this.quizAnsLists.push(evt);
+    }
+    console.log('quizAnsLists => ', this.quizAnsLists);
+  }
+
+  public submitQuiz() {
+    this.sharedSrv.setQuizResult(this.quizAnsLists);
+    console.log('quizAnsLists => ', this.quizAnsLists);
+    this.isSubmitted.emit('true');
   }
 
 }
diff --git a/src/app/quizresult/quizresult.component.css b/src/app/quizresult/quizresult.component.css
@@ -0,0 +1,7 @@
+.scorebox {
+    background: #b50b0b;
+    color: #FFF;
+    margin-top: 20px;
+    text-align: center;
+    padding: 10px 15px;
+}
diff --git a/src/app/quizresult/quizresult.component.html b/src/app/quizresult/quizresult.component.html
@@ -0,0 +1,5 @@
+<div class="scorebox" *ngIf="isResultSubmitted">
+  <h4>Score :
+    <span>{{score}}/{{count}}</span>
+  </h4>
+</div>
diff --git a/src/app/quizresult/quizresult.component.spec.ts b/src/app/quizresult/quizresult.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { QuizresultComponent } from './quizresult.component';
+
+describe('QuizresultComponent', () => {
+  let component: QuizresultComponent;
+  let fixture: ComponentFixture<QuizresultComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ QuizresultComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(QuizresultComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/quizresult/quizresult.component.ts b/src/app/quizresult/quizresult.component.ts
diff --git a/src/app/services/api.service.ts b/src/app/services/api.service.ts
diff --git a/src/app/services/shared.service.spec.ts b/src/app/services/shared.service.spec.ts
diff --git a/src/app/services/shared.service.ts b/src/app/services/shared.service.ts
