final changes

src/app/app.module.ts

@@ -14,7 +14,7 @@ import { SpeakingComponent } from './components/speaking/speaking.component';
 import { MenubarComponent } from './components/menubar/menubar.component';
 import { HeaderComponent } from './components/header/header.component';
 import { CountDownTimerComponent } from './components/count-down-timer/count-down-timer.component';
-import { CarouselComponent } from './components/carousel/carousel.component';
+import { ProgressbarComponent } from './components/progressbar/progressbar.component';
 
 @NgModule({
  declarations: [
@@ -27,7 +27,7 @@ import { CarouselComponent } from './components/carousel/carousel.component';
  MenubarComponent,
  HeaderComponent,
  CountDownTimerComponent,
- CarouselComponent
+ ProgressbarComponent
  ],
  imports: [
  BrowserModule,

src/app/components/count-down-timer/count-down-timer.component.ts

@@ -6,7 +6,7 @@ import { Component, OnInit } from '@angular/core';
  template: `<span>{{ minutes }}m:{{ seconds | number: '2.0' }}s</span>`
 })
 export class CountDownTimerComponent {
- minutes: number = 60;
+ minutes: number = 30;
  seconds: number = 0;
  interval: any;
 

src/app/components/dictation/dictation.component.html

@@ -1,6 +1,13 @@
-<video controls>
- <source src="../../../assets/dictation.mp4" type="video/mp4">
- Your browser does not support the video tag.
-</video>
+<div class="flex flex-col justify-center m-10">
 
-<textarea></textarea>
+ <h1 class="text-2xl mb-5">Play the video below to do the dictation</h1>
+ <div class="flex flex-row w-full">
+
+ <video controls class="mr-2" width="45%">
+ <source src="../../../assets/dictation.mp4" type="video/mp4">
+ Your browser does not support the video tag.
+ </video>
+
+ <textarea class="text-black p-5 ml-2 w-full" cols="50" placeholder="Type what you hear from the video"></textarea>
+ </div>
+</div>

src/app/components/grammar/grammar.component.html

@@ -1,3 +1,42 @@
+<div class="carousel">
+
+ <app-progressbar [array]="questions" class="w-full" [currentIndex]="currentIndex"></app-progressbar>
+
+ <ng-template ngFor let-item [ngForOf]="questions" let-i="index">
+ <div class="flex flex-col items-center pt-32 slide"
+ [ngClass]="{'active': i === currentIndex, 'previous': i < currentIndex}">
+
+ <!-- <fa-icon [icon]="faVolumeHigh" (click)="item.timesHeard != 2 ? speak(i) : 0" class="text-6xl mb-3" [ngClass]="{'cursor-pointer': item.timesHeard != 2}"></fa-icon> -->
+
+ <!-- <div class="grid grid-flow-col gap-3 ">
+ <fa-icon [icon]="faHeart" [ngClass]="{'text-red-600': item.timesHeard == null || item.timesHeard == 1}"></fa-icon>
+ <fa-icon [icon]="faHeart" [ngClass]="{'text-red-600': item.timesHeard == null}"></fa-icon>
+ </div> -->
+
+ <p class="text-2xl sentence">
+ <span *ngFor="let word of item.question.split(' ')" (click)="speak(word)">{{word}}</span>
+ </p>
+
+ <div class="options mt-10">
+ <div class="mb-4">
+ <!-- <button [ngClass]="{'active': item.answered === 1}" (click)="answer(i, 1)" class="mr-4">Yes</button>
+ <button [ngClass]="{'active': item.answered === 0}" (click)="answer(i, 0)">No</button>
+ -->
+
+ <button (click)="answer(i, item.right); speak(item.right)" [ngClass]="{'active': item.answered === item.right}" class="mr-4">{{item.right}}</button>
+ <button (click)="answer(i, item.wrong); speak(item.wrong)" [ngClass]="{'active': item.answered === item.wrong}">{{item.wrong}}</button>
+
+ </div>
+ <button class="w-full" (click)="continue()" *ngIf="item.answered">
+ <span>Continue</span> <fa-icon [icon]="faArrowRight" class="ml-3"></fa-icon>
+ </button>
+ </div>
+
+ </div>
+ </ng-template>
+
+</div>
+<!-- 
 <ng-template ngFor let-item [ngForOf]="questions" let-i="index">
  <div>
  <p>
@@ -7,4 +46,4 @@
  <button (click)="speak(item.right)">{{item.right}}</button>
  <button (click)="speak(item.wrong)">{{item.wrong}}</button>
  </div>
-</ng-template>
+</ng-template> -->

src/app/components/grammar/grammar.component.scss

@@ -0,0 +1,54 @@
+.options {
+ button {
+ padding: 10px 50px;
+ border: 4px solid #1c395a;
+ border-radius: 999px;
+ font-weight: bold;
+ &.active{
+ background-color: #0679fc;
+ }
+ }
+}
+
+.carousel {
+ position: relative;
+ display: flex;
+ overflow: hidden;
+ width: 100%;
+ height: 400px
+ /* Adjust the height as needed */
+}
+
+.slide {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ transform: translateX(100%);
+ /* Initial slide position */
+ transition: transform 0.5s ease-in-out;
+
+ &.previous {
+ transform: translateX(-100%);
+
+ }
+}
+
+.active {
+ transform: translateX(0);
+}
+
+// button {
+// margin-top: 10px;
+// }
+
+.sentence span{
+ display: inline-block;
+ padding: 0 0.25rem;
+
+ &:hover{
+ cursor: pointer;
+ text-decoration: underline;
+ color: #0679fc;
+ }
+}

src/app/components/grammar/grammar.component.ts

@@ -1,13 +1,21 @@
 import { Component } from '@angular/core';
 
+import { faVolumeHigh, faArrowRight, faHeart } from '@fortawesome/free-solid-svg-icons';
+
 @Component({
  selector: 'app-grammar',
  templateUrl: './grammar.component.html',
  styleUrls: ['./grammar.component.scss']
 })
 export class GrammarComponent {
 
- questions = [
+ faVolumeHigh = faVolumeHigh;
+ faArrowRight = faArrowRight;
+ faHeart = faHeart;
+
+ currentIndex = 0;
+
+ questions: any = [
  { question: "___ average, Tim drinks three cups of tea a day.", right: "On", wrong: "In" },
  { question: "It’s ___ likely that Sam will be the last to get here; he usually is!", right: "highly", wrong: "hardly" },
  { question: "Why do I have to go to bed so early? I’m not tired ___ all.", right: "at", wrong: "in" },
@@ -20,16 +28,14 @@ export class GrammarComponent {
  { question: "I’m not afraid ___ your dog, I’m only shaking because it’s cold.", right: "of", wrong: "from" },
  { question: "She ___ me to go there again.", right: "forbade", wrong: "prevented" },
  { question: "I usually ___ asleep about ten minutes after turning off the lights.", right: "fall", wrong: "go" }
- ]
-
+];
 
- speak(speech: string) {
-
- speech = speech.replaceAll("_", "");
-
+ speak(word: string) {
  var synth = window.speechSynthesis;
 
- var utter = new SpeechSynthesisUtterance(speech)
+ var utter = new SpeechSynthesisUtterance(word.replaceAll("_", ""))
+
+ // this.questions[i].timesHeard = (this.questions[i].timesHeard ?? 0) + 1;
 
  var voice = synth.getVoices().filter(_ => _.lang.indexOf('en-') > -1)[2];
 
@@ -40,5 +46,58 @@ export class GrammarComponent {
 
  }
 
+ continue() {
+ this.currentIndex++;
+ }
+
+ answer(i: number, answered: any) {
+ this.questions[i].answered = answered;
+ }
 
 }
+
+
+// import { Component } from '@angular/core';
+
+// @Component({
+// selector: 'app-grammar',
+// templateUrl: './grammar.component.html',
+// styleUrls: ['./grammar.component.scss']
+// })
+// export class GrammarComponent {
+
+// questions = [
+// { question: "___ average, Tim drinks three cups of tea a day.", right: "On", wrong: "In" },
+// { question: "It’s ___ likely that Sam will be the last to get here; he usually is!", right: "highly", wrong: "hardly" },
+// { question: "Why do I have to go to bed so early? I’m not tired ___ all.", right: "at", wrong: "in" },
+
+// { question: "I’m not sure Jack’s very eager ___ Claudia this evening!", right: "to see", wrong: "on seeing" },
+// { question: "Ken is a very ___ man; he seems to love danger.", right: "incovenient", wrong: "daring" },
+// { question: "For heavens’ ___ stop whistling, it’s driving me round the bend!", right: "sake", wrong: "fake" },
+
+// { question: "I miss ___ to the beach every weekend; it used to be great fun.", right: "going", wrong: "to go" },
+// { question: "I’m not afraid ___ your dog, I’m only shaking because it’s cold.", right: "of", wrong: "from" },
+// { question: "She ___ me to go there again.", right: "forbade", wrong: "prevented" },
+// { question: "I usually ___ asleep about ten minutes after turning off the lights.", right: "fall", wrong: "go" }
+// ]
+
+
+// speak(speech: string) {
+
+// speech = speech.replaceAll("_", "");
+
+// var synth = window.speechSynthesis;
+
+// var utter = new SpeechSynthesisUtterance(speech)
+
+// var voice = synth.getVoices().filter(_ => _.lang.indexOf('en-') > -1)[2];
+
+// utter.voice = voice;
+// // utter.rate = 0.75;
+// synth.speak(utter)
+
+
+// }
+
+
+// }

src/app/components/menubar/menubar.component.html

@@ -3,10 +3,10 @@
  <img src="../../../assets/logo.png" alt="" class="w-1/2 mt-8 mb-16" style="filter: contrast(0) brightness(1.75);">
 
  <ul>
- <li class="active"><fa-icon [icon]="faQuestionCircle"></fa-icon> Quiz</li>
- <li><fa-icon [icon]="faBook"></fa-icon> Grammar</li>
- <li><fa-icon [icon]="faEdit"></fa-icon> Dictation</li>
- <li><fa-icon [icon]="faMicrophone"></fa-icon> Speaking</li>
+ <li (click)="changeMenu('quiz')" [ngClass]="{active: currentMenu == 'quiz'}"><fa-icon [icon]="faQuestionCircle"></fa-icon> Quiz</li>
+ <li (click)="changeMenu('grammar')" [ngClass]="{active: currentMenu == 'grammar'}"><fa-icon [icon]="faBook"></fa-icon> Grammar</li>
+ <li (click)="changeMenu('dictation')" [ngClass]="{active: currentMenu == 'dictation'}"><fa-icon [icon]="faEdit"></fa-icon> Dictation</li>
+ <li (click)="changeMenu('speaking')" [ngClass]="{active: currentMenu == 'speaking'}"><fa-icon [icon]="faMicrophone"></fa-icon> Speaking</li>
  </ul>
 
 </div>

src/app/components/menubar/menubar.component.scss

@@ -15,6 +15,7 @@
  border-bottom-left-radius: 100px;
  display: flex;
  align-items: center;
+ cursor: pointer;
 
  fa-icon {
  border-radius: 15px;

src/app/components/menubar/menubar.component.ts

@@ -1,6 +1,6 @@
-import { Component } from '@angular/core';
+import { Component, Output, EventEmitter } from '@angular/core';
 
-import { faQuestionCircle, faEdit, faMicrophone, faBook} from '@fortawesome/free-solid-svg-icons';
+import { faQuestionCircle, faEdit, faMicrophone, faBook } from '@fortawesome/free-solid-svg-icons';
 
 @Component({
  selector: 'app-menubar',
@@ -13,5 +13,13 @@ export class MenubarComponent {
  faEdit = faEdit;
  faQuestionCircle = faQuestionCircle;
  faBook = faBook;
+
+ @Output() switchTab = new EventEmitter<any>();
+ currentMenu = 'quiz';
+
+ changeMenu(menu: string) {
+ this.currentMenu = menu;
+ this.switchTab.emit(menu);
+ }
 
 }