#50 | Deploy

LuongXuanNhat · Dec 21, 2023 · 994431c · 994431c
1 parent dedfc2f
commit 994431c
Show file tree

Hide file tree

Showing 18 changed files with 231 additions and 31 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -32,5 +32,5 @@
 <body class="ig-typography ig-scrollbar mat-typography">
 
   <app-root></app-root>
-<script src="runtime.10f09cdf8c3e24d5.js" type="module"></script><script src="polyfills.918ca83f6100aaee.js" type="module"></script><script src="scripts.cd816875f3dc91fb.js" defer></script><script src="main.99974addf6b49de9.js" type="module"></script></body>
+<script src="runtime.10f09cdf8c3e24d5.js" type="module"></script><script src="polyfills.918ca83f6100aaee.js" type="module"></script><script src="scripts.cd816875f3dc91fb.js" defer></script><script src="main.e684f9e2311714d8.js" type="module"></script></body>
 </html>
diff --git a/docs/main.99974addf6b49de9.js → docs/main.e684f9e2311714d8.js b/docs/main.99974addf6b49de9.js → docs/main.e684f9e2311714d8.js
diff --git a/src/app/ObjectClass/object.ts b/src/app/ObjectClass/object.ts
@@ -171,4 +171,5 @@ export interface MultipleChoiceResponseDto {
   workTime: number;
   userShort?: UserShortDto;
   quizs?: QuizDto[];
+  numberQuiz: number;
 }
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
@@ -33,6 +33,7 @@ import { SearchquestionComponent } from './forum/searchquestion/searchquestion.c
 import { MydocumentsavedComponent } from './mycategory/mydocumentsaved/mydocumentsaved.component';
 import { ExamComponent } from './exam/exam.component';
 import { ExamdetailComponent } from './exam/examdetail/examdetail.component';
+import { MyexamComponent } from './mycategory/myexam/myexam.component';
 
 const routes: Routes = [
   {path: 'home', component:HomeComponent},
@@ -63,6 +64,7 @@ const routes: Routes = [
       { path: 'document', component: MydocumentComponent },
       { path: 'postsaved', component: MypostsavedComponent },
       { path: 'documentsaved', component: MydocumentsavedComponent },
+      { path: 'exam', component: MyexamComponent },
     ]
   },
   {path: 'forum', 

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -399,7 +399,7 @@
         <mat-icon>local_library</mat-icon>
         <span class="fs">Bài học</span>
       </button>
-      <button mat-menu-item disabled routerLink="/mycategory/post">
+      <button mat-menu-item routerLink="/mycategory/myexam">
         <mat-icon>edit_square</mat-icon>
         <span class="fs">Bài tập</span>
       </button>

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -66,6 +66,7 @@ import { CreateexamComponent } from './exam/createexam/createexam.component';
 import { UpdateexamComponent } from './exam/updateexam/updateexam.component';
 import { ExamdetailComponent } from './exam/examdetail/examdetail.component';
 import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
+import { MyexamComponent } from './mycategory/myexam/myexam.component';
 
 @NgModule({
   declarations: [
@@ -117,7 +118,8 @@ import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
     ExamComponent,
     CreateexamComponent,
     UpdateexamComponent,
-    ExamdetailComponent
+    ExamdetailComponent,
+    MyexamComponent
   ],
   imports: [
     RouterModule,

diff --git a/src/app/exam/exam.component.css b/src/app/exam/exam.component.css
@@ -25,7 +25,7 @@ option {
 .tag-free{
     border-radius: 12px;
     font-size: 10px;
-    padding:2px 6px 4px;
+    padding:0px 6px 1px;
     display: flex;
     background-color: #7286e4;
     color: white;

diff --git a/src/app/exam/exam.component.html b/src/app/exam/exam.component.html
@@ -29,7 +29,7 @@
             <div class="flex-center-h">
                 <img src="assets/Icon/exam.png" alt="" style="width: 64px;">
                 <div style="display: grid;">
-                    <span>{{ exam.quizs?.length }} câu</span>
+                    <span>{{ exam.numberQuiz }} câu</span>
                     <span>Thời gian: {{ exam.workTime }}'</span>
                 </div>
                 <div class="po-re" style="margin-left:auto ;top:-24px;">

diff --git a/src/app/exam/examdetail/examdetail.component.css b/src/app/exam/examdetail/examdetail.component.css
@@ -4,9 +4,15 @@
     grid-gap: 8px;
     margin-left: 24px;
     margin-top: 12px;
+    max-height: 750px;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+.show-seleted::-webkit-scrollbar {
+    width: 2px;
 }
-
 .card-q {
+    border-radius: 4px;
     border: 1px solid #ccc;
     width: 40px;
     height: 30px;
@@ -16,4 +22,23 @@
 }
 .card-q.selected {
     color: white;
+}
+.countdown {
+    margin-left: 24px;
+}
+.correct {
+    color: black !important;
+    background-color: yellow;
+    padding: 0 4px;
+}
+.iscorrect {
+    color: red !important;
+}
+.qtrue {
+    background-color: green;
+    color: white;
+}
+.qfalse {
+    background-color: red;
+    color: white;
 }
diff --git a/src/app/exam/examdetail/examdetail.component.html b/src/app/exam/examdetail/examdetail.component.html
@@ -1,17 +1,25 @@
 <div class="po-re" *ngIf="isShowQuestion()">
     <div style="position: fixed; ">
-        <div class="show-seleted" style="width: 216px;">
-            <div>
-
-            </div>
+        <div class="countdown flex-center" >
+            <span class="material-symbols-outlined">
+                schedule
+                </span>
+            {{ formatTime(countdown) }}
+        </div>
+        <div *ngIf="isSubmit" style="margin-left: 24px;margin-top: 4px;" class="flex-center-h">
+            Số điểm đạt được: {{ score.toFixed(2) }}
+        </div>
+        <div class="show-seleted" style="width: 220px;">
             <div *ngFor="let q of exam.quizs;let i = index">
                 <div class="card-q cursor-p" (click)="move('q'+i)" 
-                [class.selected]="isSelected(q.id)">
+                [class.selected]="isSelected(q.id) && !submited()"
+                [class.qtrue]="submited() && checkAnswer(q)"
+                [class.qfalse]="submited() && !checkAnswer(q)">
                     {{ i+1 }}
                 </div>
             </div>
         </div>
-    </div> 
+    </div>  
 </div>
 <div class="plr-300 mt-60">
     <div class="flex-center-sb">
@@ -41,11 +49,13 @@ <h5>
             <span>
                 Thời gian thi: <strong>{{ exam.workTime }}</strong> phút
             </span>
+            <br>
+            <span>Số câu hỏi: <strong>{{ exam.quizs?.length }}</strong></span>
         </div>
     </div>
     <div>
         <div style="text-align: center;">
-            <button mat-raised-button color="primary" (click)="start()">Bắt đầu thi</button>
+            <button *ngIf="!isShowQuestion()" mat-raised-button color="primary" (click)="start()">Bắt đầu thi</button>
         </div>
         <div *ngIf="isShowQuestion()" class="mt-1">
             <div *ngFor="let q of exam.quizs; let i = index">
@@ -57,19 +67,28 @@ <h5>
                     <div>
                         <div>
                             <mat-radio-group [(ngModel)]="q.selected">
-                                <ng-container *ngFor="let a of q.quizAnswers; let j = index;trackBy: trackByFn">
-                                  <mat-radio-button class="" [value]="a.id">
-                                    <span style="font-size: 16px;">
+                                <ng-container *ngFor="let a of q.quizAnswers; let j = index;trackBy: trackByFn" >
+                                  <mat-radio-button class="answer" 
+                                    [value]="a.id" 
+                                    [disabled]="submited()"
+                                    >
+                                    <span style="font-size: 16px;" 
+                                    [class.correct]="submited() && a.isCorrect"
+                                    [class.iscorrect]="submited() && a.id == q.selected && !a.isCorrect">
                                         {{ getLetter(j) }}. {{ a.content }}
                                     </span>
+
                                   </mat-radio-button>
                                   <br>
                                 </ng-container>
-                              </mat-radio-group>
+                            </mat-radio-group>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
+        <div style="text-align: center;">
+            <button *ngIf="btnSubmit" mat-raised-button color="primary" (click)="submit()">Nộp bài</button>
+        </div>
     </div>
 </div>
diff --git a/src/app/exam/examdetail/examdetail.component.ts b/src/app/exam/examdetail/examdetail.component.ts
@@ -1,11 +1,11 @@
 import { Location } from '@angular/common';
-import { Component, ElementRef, Renderer2 } from '@angular/core';
+import { Component, ElementRef, OnDestroy, Renderer2 } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { format, parseISO } from 'date-fns';
 import { ClipboardService } from 'ngx-clipboard';
 import { ToastrService } from 'ngx-toastr';
-import { MultipleChoiceResponseDto } from 'src/app/ObjectClass/object';
+import { MultipleChoiceResponseDto, QuizDto } from 'src/app/ObjectClass/object';
 import { DataService } from 'src/app/service/datashare/data.service';
 import { PublicserviceService } from 'src/app/service/publicservice.service';
 import { SessionService } from 'src/app/service/session/session.service';
@@ -15,25 +15,41 @@ import { SessionService } from 'src/app/service/session/session.service';
   templateUrl: './examdetail.component.html',
   styleUrls: ['./examdetail.component.css']
 })
-export class ExamdetailComponent {
+export class ExamdetailComponent implements OnDestroy {
   currentUrl: any;
   exam !: MultipleChoiceResponseDto;
   examId: any;
+  startTime!: string; 
+  CompletionTime: number;
   showQuestion!: boolean;
+  countdown!: number;
+  intervalId: any;
+  isSubmit: boolean;
+  score: number;
+  btnSubmit:boolean;
   constructor(private session: SessionService,private route: ActivatedRoute, 
     private service: PublicserviceService, private  toastr: ToastrService,private clipboardService: ClipboardService,
-    private location: Location, private el: ElementRef, private renderer: Renderer2 , private dialog: MatDialog ){
+    private location: Location, private el: ElementRef, private renderer: Renderer2 , private dialog: MatDialog,
+    private router: Router,  ){
+      this.score = 0;
+      this.CompletionTime = 0;
+      this.isSubmit = false;
+      this.btnSubmit = false;
       this.route.params.subscribe(params => {
         this.currentUrl = this.location.path();
         this.examId = params['examId'] ?? '';
         this.getDetail();
       });
+  } 
+  ngOnDestroy(): void {
+    this.stopCountdown();
   }
   getDetail() {
     this.service.ExamDetail(this.examId).subscribe(
       (data: any) => {
         if(data.isSuccessed){
           this.exam = data.resultObj;
+          this.countdown = this.exam.workTime * 60;
           this.ConvertDate();
         } else {
           this.toastr.error("Lỗi: " + data.message);
@@ -55,8 +71,15 @@ export class ExamdetailComponent {
     }
   }
   start(){
-    this.showQuestion = true;
-
+    if(!this.session.getUserId()){
+      this.toastr.info("Đăng nhập để bắt đầu bài thi");
+      const currentUrl = this.router.url;
+      this.router.navigate(['/login'], { state: { redirect: currentUrl } });
+    } else {
+      this.btnSubmit = true;
+      this.showQuestion = true;
+      this.startCountdown();
+    }
   }
   isShowQuestion(){
     return this.showQuestion;
@@ -77,4 +100,96 @@ export class ExamdetailComponent {
   trackByFn(index: number, item: any): any {
     return index;
   }
+  startCountdown() {
+    this.startTime = new Date().toISOString();
+
+    this.intervalId = setInterval(() => {
+      if (this.countdown > 0) {
+        this.countdown--;
+        this.CompletionTime +=1;
+      } else {
+        clearInterval(this.intervalId);
+        this.timeout();
+        return;
+      }
+    }, 1000);
+  }
+  stopCountdown(): void {
+    if (this.intervalId) {
+      clearInterval(this.intervalId);
+    }
+  }
+  timeout() {
+    this.toastr.info("Hết giờ! Tự động nộp bài");
+    setTimeout(async ()  => {
+      await this.submit();
+    }, 1000);
+  }
+  async submit(){
+    this.stopCountdown();
+    this.calculatescore();
+    this.btnSubmit = false;
+    if(this.score > 4){
+      this.toastr.success("Chúc mừng bạn đã hoàn thành tốt bài thi","Điểm số của bạn là: "+this.score.toFixed(2), {
+        timeOut: 6000
+      });
+    } else {
+      this.toastr.info("Chúc mừng bạn đã hoàn thành bài thi","Điểm số của bạn là: "+this.score.toFixed(2), {
+        timeOut: 6000
+      });
+    }
+
+    this.SaveExam();
+  }
+  SaveExam() {
+    const formData = new FormData();
+    console.log(this.score.toFixed(2));
+    this.CompletionTime = Math.ceil(this.CompletionTime / 60);
+    formData.append('MultipleChoiceId', this.exam.id);
+    formData.append('UserId', this.session.getUserId() ?? '');
+    formData.append('Scores', this.score.toFixed(2));
+    formData.append('CompletionTime', this.CompletionTime.toString());
+    formData.append('StarDate', this.startTime);
+
+    this.service.SaveMyExam(formData).subscribe(
+      (data: any) => {
+        if(data.isSuccessed){
+
+        } else {
+          this.toastr.error(data.message);
+        }
+      }, (error: any) => {
+        this.toastr.error("Lỗi: "+ error);
+      }
+    )
+  }
+  calculatescore() {
+    var numberCorrect = 0;
+    const maxScore = 10;
+    const quantity = this.exam.quizs?.length ?? 0;
+     for (const q of this.exam.quizs || []) {
+      outerLoop:  for (const a of q.quizAnswers || []) {
+        if (q.selected == a.id && a.isCorrect) {
+          numberCorrect += 1;
+          break outerLoop;
+        }
+      }
+    }
+    this.score = maxScore / quantity * numberCorrect;
+    this.isSubmit = true;
+  }
+  submited(){
+    return this.isSubmit;
+  }
+  formatTime(seconds: number): string {
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = seconds % 60;
+    const minutesString = minutes < 10 ? `0${minutes}` : `${minutes}`;
+    const secondsString = remainingSeconds < 10 ? `0${remainingSeconds}` : `${remainingSeconds}`;
+    return `${minutesString}:${secondsString}`;
+  }
+  checkAnswer(q: QuizDto): boolean{
+    const check = q.quizAnswers?.find(x=>x.id == q.selected);
+    return check?.isCorrect ?? false;
+  }
 }
diff --git a/src/app/forum/question/question.component.ts b/src/app/forum/question/question.component.ts
@@ -108,7 +108,7 @@ export class QuestionComponent implements OnInit{
         this.question = this.ConvertDate(data.resultObj);
         this.questionId = this.question.id;
         this.userIdOfPost = data.resultObj.userShort.id;
-
+        this.commentNum = this.question.commentNumber;
         this.GetAnswers();
         this.getInteract();
       }, (error: any) => {
@@ -120,7 +120,7 @@ export class QuestionComponent implements OnInit{
     this.service.GetAnswers(this.questionId).subscribe(
       (data: any) => {
         this.answers = this.ConvertListDate(data.resultObj);
-        this.commentNum = this.answers.length;
+        // this.commentNum = this.answers.length;
       }, (error: any) => {
         this.toastr.error("Lỗi: "+ error);
       }

diff --git a/src/app/mycategory/myexam/myexam.component.css b/src/app/mycategory/myexam/myexam.component.css
diff --git a/src/app/mycategory/myexam/myexam.component.html b/src/app/mycategory/myexam/myexam.component.html
@@ -0,0 +1 @@
+<p>myexam works!</p>