File size: 67,405 Bytes
f8794d4 e4ab6d0 f8794d4 e4ab6d0 3f95782 e4ab6d0 f8794d4 c2b277a 972a21e 87f9e15 972a21e 62d3c8a 972a21e 87f9e15 00ec4c0 87f9e15 00ec4c0 3f95782 f8794d4 e4ab6d0 f8794d4 e4ab6d0 f8794d4 e4ab6d0 f8794d4 e4ab6d0 a5d3fab e4ab6d0 f8794d4 e4ab6d0 f8794d4 e4ab6d0 f8794d4 e4ab6d0 6dc3ffe f8794d4 6dc3ffe |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 988 989 990 991 992 993 994 995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014 1015 1016 1017 1018 1019 1020 1021 1022 1023 1024 1025 1026 1027 1028 1029 1030 1031 1032 1033 1034 1035 1036 1037 1038 1039 1040 1041 1042 1043 1044 1045 1046 1047 1048 1049 1050 1051 1052 1053 1054 1055 1056 1057 1058 1059 1060 1061 1062 1063 1064 1065 1066 1067 1068 1069 1070 1071 1072 1073 1074 1075 1076 1077 1078 1079 1080 1081 1082 1083 1084 1085 1086 1087 1088 1089 1090 1091 1092 1093 1094 1095 1096 1097 1098 1099 1100 1101 1102 1103 1104 1105 1106 1107 1108 1109 1110 1111 1112 1113 1114 1115 1116 1117 1118 1119 1120 1121 1122 1123 1124 1125 1126 1127 1128 1129 1130 1131 1132 1133 1134 1135 1136 1137 1138 1139 1140 1141 1142 1143 1144 1145 1146 1147 1148 1149 1150 1151 1152 1153 1154 1155 1156 1157 1158 1159 1160 1161 1162 1163 1164 1165 1166 1167 1168 1169 1170 1171 1172 1173 1174 1175 1176 1177 1178 1179 1180 1181 1182 1183 1184 1185 1186 1187 1188 1189 1190 1191 1192 1193 1194 1195 1196 1197 1198 1199 1200 1201 1202 1203 1204 1205 1206 1207 1208 1209 1210 1211 1212 1213 1214 1215 1216 1217 1218 1219 1220 1221 1222 1223 1224 1225 1226 1227 1228 1229 1230 1231 1232 1233 1234 1235 1236 1237 1238 1239 1240 1241 1242 1243 1244 1245 1246 1247 1248 1249 1250 1251 1252 1253 1254 1255 1256 1257 1258 1259 1260 1261 1262 1263 1264 1265 1266 1267 1268 1269 1270 |
<!-- ================= NAVIGATION BAR ================= -->
<div class="hero">
<nav class="navbar">
<div class="navbar-container">
<div class="logo">
<img [src]="brand.logo" [alt]="brand.name + ' Logo'" (click)="reloadPage()" />
</div>
<ul class="nav-links">
<li><a routerLink="/chat" routerLinkActive="active-link">Chat</a></li>
<li><a routerLink="/generate-questions" routerLinkActive="active-link">Grammar</a></li>
<li><a class="nav-link--disabled" routerLink="/voice" routerLinkActive="active-link">Voice</a></li>
<li><a routerLink="/listen" routerLinkActive="active-link">Listening</a></li>
<li><a routerLink="/reading" routerLinkActive="active-link">Reading</a></li>
<li><a routerLink="/writing" routerLinkActive="active-link">Writing</a></li>
<li><a routerLink="/vocabulary-builder" routerLinkActive="active-link">Vocabulary-Builder</a></li>
<li><a routerLink="/findword" routerLinkActive="active-link">Find Word</a></li>
<li class="main-menu-dropdown">
<a class="nav-link" href="#" (click)="$event.preventDefault()" aria-haspopup="true" aria-expanded="false">
General
<i class="fas fa-caret-down"></i>
</a>
<ul class="submenu">
<li>
<a href="#" (click)="openPronunciation(); $event.preventDefault()" role="button" aria-pressed="false">
Pronunciation Trainer
</a>
</li>
<li>
<a href="#" (click)="openPronunciationVideo(); $event.preventDefault()" role="button" aria-pressed="false">
Pronunciation Trainer Video
</a>
</li>
<!--<li>
<a href="#" (click)="openPronunciationRagg(); $event.preventDefault()" role="button" aria-pressed="false">
Pronunciation Trainer Rag
</a>
</li>-->
<li>
<a href="#" (click)="openPronunciationRagUpgrade(); $event.preventDefault()" role="button" aria-pressed="false">
Pronunciation Trainer Rag
</a>
</li>
<li><a class="nav-link--disabled" routerLink="/personality-improvement" routerLinkActive="active-link">Personality Improvement</a></li>
<li><a class="nav-link--disabled" routerLink="/body-language-improvement" routerLinkActive="active-link">Body Language Improvement</a></li>
</ul>
</li>
</ul>
<!-- ================= ACCOUNT/LOGIN MENU ================= -->
<div class="nav-actions">
<ng-container *ngIf="isAuthenticated && username; else loginIcon">
<div class="avatar" (click)="toggleAccountMenu()" [attr.title]="usernameInitial">
{{ usernameInitial }}
</div>
<div class="account-menu" *ngIf="showAccountMenu" (mouseleave)="closeAccountMenu()">
<div class="account-header">
<div class="avatar avatar-lg">{{ usernameInitial }}</div>
<div class="account-meta">
<div class="account-name">{{ displayName }}</div>
<div class="account-email">{{ displayEmail }}</div>
</div>
</div>
<div class="account-item" (click)="goToAccount()">My account</div>
<hr />
<div class="account-item" (click)="logout()">Logout</div>
</div>
</ng-container>
<ng-template #loginIcon>
<a routerLink="/auth" class="login-button" [attr.title]="'Login'" aria-label="Login">
<i class="fas fa-user"></i>
</a>
</ng-template>
</div>
</div>
</nav>
<!-- ================= HERO SECTION ================= -->
<div class="hero-text">
<h1>{{ brand.name }}</h1>
<h2>A Self-Learning System</h2>
<p>
It is a personalized self-learning system helps students to improve their language skills through interactive<br />and customized exercises.
With engaging activities and instant feedback,<br />learning becomes easy and enjoyable!
</p>
</div>
<!-- ================= CARDS SECTION ================= -->
<section class="cards-section">
<h2 class="section-title">
What would you like to <span class="highlight">learn</span> today?
</h2>
<div class="cards-container">
<div class="card" *ngFor="let card of cards; let i = index" (click)="card.action()" role="button" tabindex="0" (keydown.enter)="card.action()" (keydown.space)="card.action()">
<div class="card-image">
<img [src]="card.image" [alt]="card.title" />
</div>
<div class="card-content">
<div class="card-buttons">
<button class="know-more-btn" (click)="$event.stopPropagation(); openGuidePopup(card.title)">Know More</button>
</div>
</div>
</div>
</div>
</section>
<!-- ================= GUIDE POPUP ================= -->
<div *ngIf="showGuidePopup">
<div class="user-guide-overlay" (click)="closeGuidePopup()"></div>
<div class="user-guide-modal" role="dialog" aria-modal="true">
<button class="user-guide-close-icon" (click)="closeGuidePopup()" aria-label="Close">×</button>
<ng-container [ngSwitch]="selectedCardTitle">
<!-- Card-specific guide content (all used) -->
<ng-container *ngSwitchCase="'Grammar Chat'">
<ul style="text-align: justify; font-size: 15px;">
<li>
<b>Introduction</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>The Chat Module is an interactive learning environment designed to assist learners through text and voice-based communication.</li>
<li>Users can type their question or select from follow-up suggestions, using either the text input or the microphone.</li>
<li>Predefined questions appear above the input field for quick access.</li>
<li>This creates an engaging and personalised learning experience similar to interacting with a real tutor.</li>
</ul>
</li>
<li>
<b>Starting the Chat</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>When learners open the module, they will see a text input box and a microphone icon. They can type a question or activate the microphone to speak.</li>
<li>While the microphone is active, a listening popup appears with options to mute or stop recording. Once the learner finishes speaking or typing, their question is displayed in the chat area along with a timestamp.</li>
<li>This simple interface ensures that both typing and speaking interactions are smooth and user-friendly.</li>
</ul>
</li>
<li>
<b>Accessing the Syllabus</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>Before learners begin, an administrator uploads the syllabus or textbook in digital format.</li>
<li>The system analyses the document and automatically generates a list of predefined questions based on the uploaded syllabus.</li>
<li>These predefined questions are displayed above the input field, allowing learners to choose any topic without needing to type.</li>
<li>When a learner selects a question, the system locates the relevant section from the syllabus and prepares an answer. The response appears instantly in the chat area in a clear and readable format.</li>
</ul>
</li>
<li>
<b>Receiving the Response</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>
After a question is sent, the system generates an immediate response that includes:
<ul>
<li>A text-based explanation</li>
<li>An audio narration in the tutor’s real voice</li>
<li>A derived video explanation, when applicable</li>
</ul>
</li>
<li>The response is first produced as text. If the learner chooses to listen, the system plays an audio narration that has been synthetically generated using the real voice of the teacher.</li>
<li>The voice is not a generic computer voice; it has been trained and modelled on the actual tutor’s speech patterns, ensuring that the tone, pronunciation, and expression closely resemble the teacher’s natural way of speaking.</li>
<li>Similarly, when a video explanation is requested, the system displays a derived video of the teacher. This video is not a pre-recorded clip or animation, but is generated to resemble the real teacher’s voice and reactions.</li>
<li>All audio and video responses are created dynamically for each question, providing unique, real-time explanations. Learners can replay or stop the narration at any time, copy text responses, and follow the conversation naturally with the speaking indicator showing when the tutor’s voice is active.</li>
<li>By default, audio is muted; you can enable it as needed.</li>
</ul>
</li>
<li>
<b>Handling Out-of-Syllabus Questions</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>If a learner asks a question that is not part of the uploaded syllabus or textbook, the system responds with the message: “This topic is out of syllabus.”</li>
<li>Only administrators can configure whether such questions can be answered using external information sources.</li>
<li>This ensures that all discussions remain within the approved syllabus unless authorised otherwise.</li>
</ul>
</li>
<li>
<b>Follow-Up and Progressive Learning</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>After each response, the system displays related or next-level questions below the chat. This feature helps learners progress through topics in a logical sequence.</li>
<li>A breadcrumb trail is also displayed, showing the topic flow and subtopics covered during the conversation.</li>
<li>Learners can easily revisit previous points and continue from where they left off.</li>
</ul>
</li>
<li>
<b>Audio, Video, and Mode Controls</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>
At the top of the chat interface, four control buttons provide flexibility and accessibility:
<ul>
<li>Audio Control – Enable or disable narration.</li>
<li>Video Control – Show or hide derived video explanations.</li>
<li>Syllabus Mode Control – Keep learning limited to syllabus topics.</li>
<li>Breadcrumb Control – Display or hide the topic trail.</li>
</ul>
</li>
<li>Only administrators can modify the syllabus mode to include out-of-syllabus responses.</li>
</ul>
</li>
<li>
<b>Interface and Usability</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>The chat interface presents a clear, conversational layout between the learner and the tutor. Each message includes a profile icon and timestamp for a natural reading flow.</li>
<li>Typing indicators appear while the system prepares responses, and a scroll button allows quick access to the most recent messages.</li>
<li>The design is responsive and adapts to different devices such as desktops, tablets, etc.</li>
</ul>
</li>
<li>
<b>Summary</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>The Chat Module provides an engaging, syllabus-focused learning experience where learners can type or speak their questions and receive immediate answers through text, real teacher voice, and derived video.</li>
<li>With predefined questions, real-time explanations, structured progression, and easy-to-use controls, this module offers a complete and intelligent conversational learning environment—all within a single platform.</li>
<li>Use this feature for summary-guided training.</li>
</ul>
</li>
</ul>
</ng-container>
<!-- Grammar Quiz specific content -->
<ng-container *ngSwitchCase="'Grammar Quiz'">
<ul style="text-align: justify; font-size: 15px;">
<li>
<b>Introduction</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>The <b>Generate Questions</b> module helps children practise English grammar with step-by-step questions, instant feedback, and level-based progression.</li>
<li>All questions, hints, and follow-ups are drawn from a <b>predefined syllabus</b> prepared by your school or administrator.</li>
<li>The layout is simple and child-friendly, with clear buttons and readable text.</li>
</ul>
</li>
<li>
<b>Syllabus Source</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>The module uses a <b>predefined syllabus</b> that includes topics, chapters, sections, and pages.</li>
<li>Predefined content ensures that practice stays aligned with the lessons taught in class.</li>
<li>If a topic is not found in the syllabus, the system displays a clear message (see “Out-of-Syllabus Control”).</li>
</ul>
</li>
<li>
<b>Choose a Topic</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>Type a grammar topic (e.g., <i>verbs</i>, <i>nouns</i>, <i>tenses</i>, <i>subject–verb agreement</i>) or select from the suggestion list.</li>
<li>Use specific terms (e.g., <i>simple past tense</i>) for better results.</li>
<li>If the topic is unclear or unrelated to grammar, the system may show: “Please enter a valid <b>grammar topic</b>, not a general word or unrelated question.”</li>
</ul>
</li>
<li>
<b>Generate Questions</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>Click <b>Generate</b> to create a set of questions based on the chosen topic from the predefined syllabus.</li>
<li>A brief loading screen appears while the questions are prepared.</li>
<li>To keep the practice consistent, the topic may be locked after generation until you reset the session.</li>
</ul>
</li>
<li>
<b>Answer the Questions</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>Each <b>question</b> presents a sentence with a <b>blank</b>. The learner may type any suitable <b>answer</b> in the blank.</li>
<li>All blanks must be filled before you can check answers. The <b>Validate/Check Answers</b> button enables automatically.</li>
<li>The input fields are designed for easy typing and clear visibility.</li>
</ul>
</li>
<li>
<b>Check Your Answers</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>Click <b>Check Answers</b> to validate all responses together.</li>
<li><b>Color guidance:</b> correct answers are shown in green with the label <b>Correct</b>; incorrect answers are shown in red with the label <b>Wrong</b>.</li>
<li>During validation or timed messages, inputs may be temporarily read-only to prevent accidental edits.</li>
</ul>
</li>
<li>
<b>Try Again (First Wrong Attempt)</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>For each incorrect <b>answer</b>, a <b>“Try Again”</b> message appears with a short countdown.</li>
<li>After the countdown, the wrong entry is cleared so the learner can attempt again.</li>
<li>This encourages self-correction with gentle guidance.</li>
</ul>
</li>
<li>
<b>Show Correct Answer (Second Wrong Attempt)</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>If a <b>question</b> remains incorrect after the second attempt, another countdown appears.</li>
<li>When the countdown ends, the <b>correct answer</b> is shown and filled automatically.</li>
<li>This provides closure and allows the learner to continue smoothly.</li>
</ul>
</li>
<li>
<b>Hints and Teacher Coaching</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>Click the <b>Hint</b> icon to open helpful hints based on the same syllabus section as the questions.</li>
<li>When a hint is displayed or when an answer is incorrect, the module can also present the teacher’s voice and a short teacher video that explains the idea in simple words.</li>
<li>Audio is muted by default; you may enable it. You can play, pause, or close the video at any time.</li>
</ul>
</li>
<li>
<b>Breadcrumb and Follow-Up Questions</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>The <b>breadcrumb</b> shows the learning path (Topic ? Chapter ? Section ? Page). Clicking a level focuses the practice on that part.</li>
<li><b>Predefined follow-up questions</b> appear below the main set. They come from the same syllabus section and guide the next step (e.g., identification, transformation, short explanation).</li>
<li>As answers are submitted, the follow-ups adjust to reinforce areas that need more practice.</li>
</ul>
</li>
<li>
<b>Out-of-Syllabus Control</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>If a learner asks about a topic that is not part of the predefined syllabus, the system shows: “This topic is out of syllabus.”</li>
<li>Only administrators can decide whether such questions may be answered using other sources.</li>
<li>This keeps practice within approved lessons unless specific permission is given.</li>
</ul>
</li>
<li>
<b>Level Progress and Progress Bar</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>The module uses three levels: <b>Basic ? Intermediate ? Expert</b>.</li>
<li>A <b>progress bar</b> with level markers shows the current level and the remaining path.</li>
<li>Clear labels and gentle animations help children track progress.</li>
</ul>
</li>
<li>
<b>Moving to the Next Level</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>When all <b>questions</b> in a level are correct, a message and a short countdown appear.</li>
<li>The module then advances to the next level and updates the progress bar.</li>
<li>Difficulty increases gradually to build mastery step by step.</li>
</ul>
</li>
<li>
<b>Celebrate Success</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>After completing all three levels, a <b>celebration</b> screen appears.</li>
<li>Learners can click <b>Start Over</b> to practise the same topic again or choose a new topic.</li>
</ul>
</li>
<li>
<b>Reset or Change Topic</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>Use <b>Reset</b> to clear the current session and unlock the topic field.</li>
<li>Enter a new topic or select another suggestion to begin a new practice set.</li>
</ul>
</li>
<li>
<b>Accessibility and Layout</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>Countdowns and status messages are written clearly so learners understand what is happening.</li>
<li>The layout adapts to different screens. Buttons and inputs are sized for comfortable tapping and clicking.</li>
</ul>
</li>
<li>
<b>Troubleshooting</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li><b>Invalid topic message:</b> Enter a clear grammar term (e.g., <i>articles</i>, <i>comparatives</i>, <i>passive voice</i>).</li>
<li><b>Out of syllabus:</b> Choose a topic that appears in the syllabus list or ask an administrator about permission for extra topics.</li>
<li><b>Buttons disabled:</b> The <i>Generate</i> button appears after entering a valid topic; the <i>Validate</i> button appears after all blanks are filled.</li>
</ul>
</li>
<li>
<b>Benefits for Children</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li><b>Guided practice</b> with clear feedback builds confidence and accuracy.</li>
<li><b>Level-based progression</b> supports steady growth from basic understanding to higher skills.</li>
<li><b>Hints and teacher coaching</b> help learners correct mistakes and understand rules in simple language.</li>
<li><b>Predefined syllabus alignment</b> keeps practice consistent with classroom lessons.</li>
</ul>
</li>
</ul>
</ng-container>
<!-- Voice specific content -->
<ng-container *ngSwitchCase="'Voice'">
<ul style="text-align: justify; font-size: 15px;">
<li>
<b>Introduction</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>The <b>voice </b> module helps children practise English grammar with step-by-step questions, instant feedback, and level-based progression.</li>
<li>All questions, hints, and follow-ups are drawn from a <b>predefined syllabus</b> prepared by your school or administrator.</li>
<li>The layout is simple and child-friendly, with clear buttons and readable text.</li>
</ul>
</li>
<li>
<b>Syllabus Source</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>The module uses a <b>predefined syllabus</b> that includes topics, chapters, sections, and pages.</li>
<li>Predefined content ensures that practice stays aligned with the lessons taught in class.</li>
<li>If a topic is not found in the syllabus, the system displays a clear message (see “Out-of-Syllabus Control”).</li>
</ul>
</li>
<li>
<b>Choose a Topic</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>Type a grammar topic (e.g., <i>verbs</i>, <i>nouns</i>, <i>tenses</i>, <i>subject–verb agreement</i>) or select from the suggestion list.</li>
<li>Use specific terms (e.g., <i>simple past tense</i>) for better results.</li>
<li>If the topic is unclear or unrelated to grammar, the system may show: “Please enter a valid <b>grammar topic</b>, not a general word or unrelated question.”</li>
</ul>
</li>
<li>
<b>Generate Questions</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>Click <b>Generate</b> to create a set of questions based on the chosen topic from the predefined syllabus.</li>
<li>A brief loading screen appears while the questions are prepared.</li>
<li>To keep the practice consistent, the topic may be locked after generation until you reset the session.</li>
</ul>
</li>
<li>
<b>Answer the Questions</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>Each <b>question</b> presents a sentence with a <b>blank</b>. The learner may type any suitable <b>answer</b> in the blank.</li>
<li>All blanks must be filled before you can check answers. The <b>Validate/Check Answers</b> button enables automatically.</li>
<li>The input fields are designed for easy typing and clear visibility.</li>
</ul>
</li>
<li>
<b>Check Your Answers</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>Click <b>Check Answers</b> to validate all responses together.</li>
<li><b>Color guidance:</b> correct answers are shown in green with the label <b>Correct</b>; incorrect answers are shown in red with the label <b>Wrong</b>.</li>
<li>During validation or timed messages, inputs may be temporarily read-only to prevent accidental edits.</li>
</ul>
</li>
<li>
<b>Try Again (First Wrong Attempt)</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>For each incorrect <b>answer</b>, a <b>“Try Again”</b> message appears with a short countdown.</li>
<li>After the countdown, the wrong entry is cleared so the learner can attempt again.</li>
<li>This encourages self-correction with gentle guidance.</li>
</ul>
</li>
<li>
<b>Show Correct Answer (Second Wrong Attempt)</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>If a <b>question</b> remains incorrect after the second attempt, another countdown appears.</li>
<li>When the countdown ends, the <b>correct answer</b> is shown and filled automatically.</li>
<li>This provides closure and allows the learner to continue smoothly.</li>
</ul>
</li>
<li>
<b>Hints and Teacher Coaching</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>Click the <b>Hint</b> icon to open helpful hints based on the same syllabus section as the questions.</li>
<li>When a hint is displayed or when an answer is incorrect, the module can also present the teacher’s voice and a short teacher video that explains the idea in simple words.</li>
<li>Audio is muted by default; you may enable it. You can play, pause, or close the video at any time.</li>
</ul>
</li>
<li>
<b>Breadcrumb and Follow-Up Questions</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>The <b>breadcrumb</b> shows the learning path (Topic ? Chapter ? Section ? Page). Clicking a level focuses the practice on that part.</li>
<li><b>Predefined follow-up questions</b> appear below the main set. They come from the same syllabus section and guide the next step (e.g., identification, transformation, short explanation).</li>
<li>As answers are submitted, the follow-ups adjust to reinforce areas that need more practice.</li>
</ul>
</li>
<li>
<b>Out-of-Syllabus Control</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>If a learner asks about a topic that is not part of the predefined syllabus, the system shows: “This topic is out of syllabus.”</li>
<li>Only administrators can decide whether such questions may be answered using other sources.</li>
<li>This keeps practice within approved lessons unless specific permission is given.</li>
</ul>
</li>
<li>
<b>Level Progress and Progress Bar</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>The module uses three levels: <b>Basic ? Intermediate ? Expert</b>.</li>
<li>A <b>progress bar</b> with level markers shows the current level and the remaining path.</li>
<li>Clear labels and gentle animations help children track progress.</li>
</ul>
</li>
<li>
<b>Moving to the Next Level</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>When all <b>questions</b> in a level are correct, a message and a short countdown appear.</li>
<li>The module then advances to the next level and updates the progress bar.</li>
<li>Difficulty increases gradually to build mastery step by step.</li>
</ul>
</li>
<li>
<b>Celebrate Success</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>After completing all three levels, a <b>celebration</b> screen appears.</li>
<li>Learners can click <b>Start Over</b> to practise the same topic again or choose a new topic.</li>
</ul>
</li>
<li>
<b>Reset or Change Topic</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>Use <b>Reset</b> to clear the current session and unlock the topic field.</li>
<li>Enter a new topic or select another suggestion to begin a new practice set.</li>
</ul>
</li>
<li>
<b>Accessibility and Layout</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>Countdowns and status messages are written clearly so learners understand what is happening.</li>
<li>The layout adapts to different screens. Buttons and inputs are sized for comfortable tapping and clicking.</li>
</ul>
</li>
<li>
<b>Troubleshooting</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li><b>Invalid topic message:</b> Enter a clear grammar term (e.g., <i>articles</i>, <i>comparatives</i>, <i>passive voice</i>).</li>
<li><b>Out of syllabus:</b> Choose a topic that appears in the syllabus list or ask an administrator about permission for extra topics.</li>
<li><b>Buttons disabled:</b> The <i>Generate</i> button appears after entering a valid topic; the <i>Validate</i> button appears after all blanks are filled.</li>
</ul>
</li>
<li>
<b>Benefits for Children</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li><b>Guided practice</b> with clear feedback builds confidence and accuracy.</li>
<li><b>Level-based progression</b> supports steady growth from basic understanding to higher skills.</li>
<li><b>Hints and teacher coaching</b> help learners correct mistakes and understand rules in simple language.</li>
<li><b>Predefined syllabus alignment</b> keeps practice consistent with classroom lessons.</li>
</ul>
</li>
</ul>
</ng-container>
<!-- Listening specific content -->
<ng-container *ngSwitchCase="'Listening'">
<ul style="text-align: justify; font-size: 15px;">
<li>
<b>Introduction</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>The Listen module helps learners improve listening skills using short videos.</li>
<li>It provides questions based on the video and gives instant feedback.</li>
<li>It supports repeated attempts, so learners can review, retry, and improve.</li>
</ul>
</li>
<li>
<b>Preparing Your Video</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>Upload a video from your device or select one from the list (if available).</li>
<li>Check your audio device (headphones/speakers) before you start.</li>
<li>Use a quiet environment for better focus.</li>
</ul>
</li>
<li>
<b>Playing and Enabling Questions</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>Press <b>Play</b> and watch the video from start to finish.</li>
<li>After you complete the video, the <b>Generate Questions</b> button becomes active.</li>
<li>You may replay parts of the video before generating questions if needed.</li>
</ul>
</li>
<li>
<b>Generating and Answering Questions</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>Click <b>Generate Questions</b> to create questions based on the video content.</li>
<li>Question types include multiple choice, fill-in-the-blank, short answer, and dictation.</li>
<li>Answer each question carefully; you can move between questions if navigation is enabled.</li>
</ul>
</li>
<li>
<b>Validation and Feedback</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>Click <b>Validate Answers</b> to check your responses.</li>
<li>You will see which answers are correct and which need revision.</li>
<li>Incorrect items can be retried; use the video or hints to correct your answers.</li>
</ul>
</li>
<li>
<b>Hints and Transcript</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>Hints may give a short clue, a key phrase, or a time range to review.</li>
<li>A transcript may be available after your first attempt, depending on settings.</li>
<li>Use these aids to understand difficult sections before retrying.</li>
</ul>
</li>
<li>
<b>Playback Controls</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>Use <b>replay</b> to review important parts and <b>seek</b> to jump to a time.</li>
<li>Adjust <b>playback speed</b> to slow down or speed up the audio.</li>
<li>Audio may start muted by default; enable sound when ready.</li>
</ul>
</li>
<li>
<b>Progress and Scoring</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>Your attempts and scores are recorded for review.</li>
<li>You can retry incorrect questions to improve your score.</li>
<li>Use your history to track improvement over time.</li>
</ul>
</li>
<li>
<b>Good Practice</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>Use headphones for clear audio and fewer distractions.</li>
<li>Pause and replay difficult parts before answering.</li>
<li>Focus on key words, speaker tone, and context.</li>
</ul>
</li>
<li>
<b>Summary</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>The Listen module provides video-based practice with questions and instant feedback.</li>
<li>Replay, hints, and transcripts support understanding and correction.</li>
<li>Use it regularly to build confident and accurate listening skills.</li>
</ul>
</li>
</ul>
</ng-container>
<!--Reading-->
<!--Reading-->
<ng-container *ngSwitchCase="'Reading'">
<ul style="text-align: justify; font-size: 15px;">
<li>
<b>Introduction</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>
The <b>Reading</b> module is a guided reading-comprehension exercise where learners
enter a topic, get a short passage at a chosen difficulty level, and then answer
questions based on that passage.
</li>
<li>
It is designed as a self-learning tool for children, with simple controls, large
buttons, and clear visual feedback.
</li>
<li>
The module can be used in class, in labs, or at home to give structured,
independent reading practice.
</li>
</ul>
</li>
<li>
<b>Selecting the Difficulty Level</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>
Before typing any topic, the learner must choose a <b>difficulty level</b>:
<b>Easy</b>, <b>Medium</b>, or <b>Hard</b>.
</li>
<li>
The topic box remains locked until a level is selected, so children follow the
steps in the right order and do not get confused.
</li>
<li>
Teachers can guide younger students to use Easy level, while older or stronger
readers can use Medium or Hard passages for more challenge.
</li>
</ul>
</li>
<li>
<b>Entering the Topic and Generating the Passage</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>
After selecting the level, the learner types a topic (for example:
<i>Rainy Day</i>, <i>Animals</i>, <i>My School</i>, <i>Space</i>).
</li>
<li>
The system checks that the topic is meaningful and safe. If it is not valid,
a clear message is shown so the learner can correct it.
</li>
<li>
When the topic is valid, clicking <b>Generate Passage</b> creates a short,
level-appropriate reading passage based on that topic.
</li>
<li>
A loading indicator is shown while the passage is being generated so learners
know the system is working.
</li>
</ul>
</li>
<li>
<b>Reading the Passage</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>
The passage is displayed in a dedicated reading card, with neat spacing and
comfortable line height for children.
</li>
<li>
Learners can adjust the <b>font size</b> using A− / A+ buttons so the text is
easy to see on different devices.
</li>
<li>
A <b>Read Aloud</b> button lets the passage be read using audio. Children can
start, pause, or resume listening as needed.
</li>
<li>
These options help visual and auditory learners, and support children who need
help with pronunciation or slower reading.
</li>
</ul>
</li>
<li>
<b>Generating Questions from the Passage</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>
Once the learner has read or listened to the passage, they click
<b>Generate Questions</b>.
</li>
<li>
The system creates a set of <b>multiple-choice questions</b> directly linked
to the passage so that all questions stay within the same context.
</li>
<li>
A small loader or waiting message appears during question generation to prevent
repeated clicks and to show progress.
</li>
</ul>
</li>
<li>
<b>Answering and Validating Questions</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>
Questions are presented <b>one at a time</b>, each with four options.
Answer choices are shown as clear radio buttons with child-friendly layout.
</li>
<li>
The learner first selects an option. The selected option is highlighted so the
child clearly sees their current choice before checking.
</li>
<li>
After choosing an option, the learner clicks <b>Validate</b>:
<ul style="list-style: disc; margin-left: 1.4rem;">
<li>Correct answers are shown with a friendly success style (e.g. green with a tick).</li>
<li>Wrong answers are shown with a clear but gentle error style (e.g. red with a cross).</li>
</ul>
</li>
<li>
The Validate button is disabled after use for that question, preventing
repeated clicks and keeping the flow simple.
</li>
<li>
The button label then changes to allow the learner to move to the
<b>Next</b> question. On the final question it may change to a reset or
completion action.
</li>
</ul>
</li>
<li>
<b>Completion, Score, and Restart</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>
When all questions are completed, the module shows a <b>summary</b> with the
learner’s score (for example, “You answered 4 out of 5 questions correctly”).
</li>
<li>
A simple congratulations or encouragement message is shown to keep motivation high.
</li>
<li>
Learners can then click <b>Start Over</b> or a similar button to clear the
current session, choose a new topic, or change the level and begin a fresh
reading exercise.
</li>
</ul>
</li>
<li>
<b>Benefits for Children</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>
Builds <b>reading comprehension</b> by connecting text with follow-up questions.
</li>
<li>
Improves <b>vocabulary</b> naturally through level-based passages on familiar topics.
</li>
<li>
Encourages <b>focus and attention</b> by showing only one question at a time.
</li>
<li>
Provides <b>instant feedback</b> so learners understand their mistakes and learn immediately.
</li>
<li>
Supports different learning needs with font size controls and read-aloud options.
</li>
<li>
Reduces teacher workload, because passages and questions are generated automatically
instead of being prepared manually for each topic.
</li>
</ul>
</li>
</ul>
</ng-container>
<!--Writing-->
<!-- Writing -->
<ng-container *ngSwitchCase="'Writing'">
<ul style="text-align: justify; font-size: 15px;">
<li>
<b>Introduction</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>
The <b>Writing</b> module gives students a structured way to practise
writing in English. It provides a topic based on the selected grade
level, lets students write their answer, and then shows clear
suggestions for improvement.
</li>
<li>
The activity is designed for children to use at school or at home,
with a simple layout, friendly images, and clear buttons that guide
them step by step.
</li>
<li>
It helps students develop better sentence structure, grammar, and
expression through regular practice.
</li>
</ul>
</li>
<li>
<b>Selecting the Grade and Getting a Topic</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>
Students first choose a <b>grade band</b> from the dropdown:
Lower, Middle, or Upper.
</li>
<li>
After selecting the grade, they click <b>Get Topic</b>. The system
then provides a suitable topic for that level, such as a simple daily
life topic for lower grades or a slightly more thoughtful topic for
higher grades.
</li>
<li>
A small loader is shown while the topic is being fetched, so students
understand that the system is working and do not keep clicking.
</li>
</ul>
</li>
<li>
<b>Writing on the Given Topic</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>
Once the topic is loaded, it is displayed inside a highlighted topic
box so students always see what they need to write about.
</li>
<li>
A large, notebook-style <b>writing box</b> is provided where students
type their answer in their own words.
</li>
<li>
The text area is big enough for a short paragraph and is easy to use
on both laptops and tablets.
</li>
</ul>
</li>
<li>
<b>Minimum Word Requirement and Submit Button</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>
To encourage meaningful writing, the submit button remains disabled
until the student has written at least <b>10 words</b>.
</li>
<li>
When the button is disabled, a small blue tooltip appears explaining
that “We need at least 10 words to enable the submit button.”
</li>
<li>
After the minimum length is reached, the <b>Submit Writing</b> button
becomes active. On click, the text is sent for checking and the
button text changes to “Submitting...” while the response is being
processed.
</li>
</ul>
</li>
<li>
<b>Feedback and Suggestions for Improvement</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>
After submission, students see a <b>Suggestions for Improvement</b>
section.
</li>
<li>
Feedback is shown as a list of clear, short points, such as
suggestions about grammar, sentence formation, or clarity.
</li>
<li>
This helps students understand what they did well and what they can
improve in their writing next time.
</li>
</ul>
</li>
<li>
<b>Try Another Topic</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>
A <b>Try Another</b> button allows students to reset the activity,
get a new topic, and practise again.
</li>
<li>
This makes the module suitable for regular writing practice, such as
weekly writing tasks or extra homework.
</li>
</ul>
</li>
<li>
<b>Benefits for Students</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>
Develops regular <b>writing habit</b> and improves confidence in
expressing ideas in English.
</li>
<li>
Strengthens <b>grammar, vocabulary, and sentence structure</b>
through repeated practice.
</li>
<li>
Provides <b>instant, clear feedback</b> instead of only marks, so
students know what to improve.
</li>
<li>
Reduces teacher workload by automating topic generation and basic
feedback, while still keeping the activity meaningful for students.
</li>
</ul>
</li>
</ul>
</ng-container>
<!--Vocabulary Builder-->
<!-- Vocabulary Builder -->
<ng-container *ngSwitchCase="'Vocabulary Builder'">
<ul style="text-align: justify; font-size: 15px;">
<li>
<b>Introduction</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>
The <b>Vocabulary Builder</b> module helps students strengthen their vocabulary step by step.
It shows one main word, asks them to choose related words, and then helps them form sentences
using the correct words.
</li>
<li>
The activity is designed like a small game with clear cards, big buttons, and simple instructions,
so children can use it easily in class, in the lab, or at home.
</li>
<li>
It focuses on understanding word meanings, recognising related words, and using them in complete sentences.
</li>
</ul>
</li>
<li>
<b>Step 1 – Start the Vocabulary Builder</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>
On the first screen, students see the title <b>“Vocabulary Builder”</b> and a short introduction
explaining what they will do.
</li>
<li>
When they click the <b>“Let’s Build”</b> button, the system loads a new word and its options
in the background.
</li>
<li>
A loader overlay appears while the word and options are being fetched, so students understand
that the system is working and do not click repeatedly.
</li>
</ul>
</li>
<li>
<b>Step 2 – Choosing Related Words</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>
The next screen shows the main vocabulary word in a highlighted box and may include a small
image related to that word.
</li>
<li>
Below the word, several option buttons are shown. Students are asked to
<b>“Choose the related words (select only three)”</b>.
</li>
<li>
Students can select up to <b>three options</b>. Once three options are selected,
the other options are disabled so they cannot choose more than allowed.
</li>
<li>
A large action button (for example, <b>Check</b> or <b>Validate</b>) lets students confirm
their chosen words and move to the feedback stage.
</li>
</ul>
</li>
<li>
<b>Step 3 – Feedback on Word Selection</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>
After validation, each option clearly shows whether it was a <b>correct</b> or
<b>incorrect</b> choice using colours and simple styles (for example, green for correct
and red for incorrect).
</li>
<li>
A separate <b>Feedback</b> screen summarises the result with short points, such as which
words were not related or why some choices were wrong.
</li>
<li>
This helps students understand word relationships and avoid repeating the same mistake
with similar words in future.
</li>
<li>
A button at the bottom (for example, <b>Form a Sentence</b>) takes them to the next step
where they will use the correct words in sentences.
</li>
</ul>
</li>
<li>
<b>Step 4 – Forming Sentences with Correct Words</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>
In the sentence formation screen, the correctly related words are displayed in a list
at the top, usually highlighted in a positive colour.
</li>
<li>
For each correct word, there is a separate small textarea where the student has to
<b>write a sentence using that word</b>.
</li>
<li>
This moves the student from simply recognising the word to actually using it in
meaningful context.
</li>
<li>
The <b>Check Sentence</b> button remains disabled until all sentence boxes are filled.
This ensures students write something for each word before asking for feedback.
</li>
</ul>
</li>
<li>
<b>Step 5 – Sentence Feedback and Reset</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>
After checking, a <b>Sentence Feedback</b> screen shows clear comments on each sentence,
such as whether it is correct or how it can be improved.
</li>
<li>
Positive feedback (for example, correct answers) is highlighted clearly, and suggestions
are given in simple language so children can understand what to change.
</li>
<li>
A <b>Reset</b> or <b>Try Again</b> button allows students to start a new round with a
different word, making the activity suitable for daily or weekly practice.
</li>
</ul>
</li>
<li>
<b>Navigation, Buttons and Safety</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>
Each screen includes a <b>Back</b> icon and a <b>Close</b> button so students and teachers
can move safely between steps or leave the exercise if needed.
</li>
<li>
Buttons are disabled while the loader is visible, which prevents accidental double-clicks
and keeps the flow stable.
</li>
<li>
All main actions use the shared button style from the rest of the platform so the module
looks consistent with other exercises.
</li>
</ul>
</li>
<li>
<b>Benefits for Students</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>
Helps students <b>understand word meanings</b> by connecting a word with related words,
not just memorising definitions.
</li>
<li>
Trains them to <b>distinguish similar and unrelated words</b>, which is important for
reading comprehension.
</li>
<li>
Encourages students to <b>use new vocabulary in sentences</b>, improving both
writing and speaking skills.
</li>
<li>
Provides <b>instant, specific feedback</b> on both choices and sentences, so students
know exactly what to correct.
</li>
<li>
Can be reused many times with different words, making it a strong tool for regular
vocabulary practice in class and at home.
</li>
</ul>
</li>
</ul>
</ng-container>
<!--Find Word-->
<!-- Find the Word -->
<ng-container *ngSwitchCase="'Find Word'">
<ul style="text-align: justify; font-size: 15px;">
<li>
<b>Introduction</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>
The <b>Find the Word</b> module is a listening and spelling exercise.
Students listen to a spoken word, type what they hear, and receive
immediate feedback.
</li>
<li>
It is designed to connect <b>listening skills</b> with <b>correct spelling</b>,
and also helps students learn the word’s meaning and example sentence.
</li>
<li>
The activity uses a simple two-panel layout: an audio player on the left
and a typing area with attempts and feedback on the right.
</li>
</ul>
</li>
<li>
<b>Step 1 – Start the Activity</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>
The first screen explains that students will listen to a word and type
it correctly to improve their word skills.
</li>
<li>
When they click the <b>Start Learning</b> button, the module opens the
main game screen.
</li>
<li>
From the game screen, a <b>Back</b> icon and a <b>Close</b> button are
always available at the top, so students and teachers can safely move
back or exit the exercise at any time.
</li>
</ul>
</li>
<li>
<b>Step 2 – Listening to the Word (Audio Panel)</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>
On the left side, students see the <b>audio panel</b> with:
<ul style="list-style: disc; margin-left: 1.4rem;">
<li>A <b>Generate audio</b> button to load a new word.</li>
<li>A large <b>Play / Pause</b> button to listen to the word.</li>
<li>A <b>progress bar</b> showing how much of the word has played.</li>
</ul>
</li>
<li>
When students click <b>Generate audio</b>, the system fetches a new
audio word. While loading, the button and controls are temporarily
disabled to prevent repeated clicks.
</li>
<li>
The play button changes state while the audio is playing, and small
animations (like moving bars) make it clear that sound is active.
</li>
<li>
The audio can be replayed as many times as needed, so students can
listen carefully before typing.
</li>
</ul>
</li>
<li>
<b>Step 3 – Typing the Word (Input Panel)</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>
On the right side, students see the <b>Type the word</b> panel with:
<ul style="list-style: disc; margin-left: 1.4rem;">
<li>The title “Type the word”.</li>
<li>Three <b>hearts</b> showing how many attempts are left.</li>
<li>An input box for typing the word they heard.</li>
<li>A <b>Submit</b> button to check their answer.</li>
</ul>
</li>
<li>
The input box is enabled only after the audio has played at least once.
This encourages students to listen before they start typing.
</li>
<li>
Each time the student submits an answer, the number of hearts (attempts)
is updated. When there are no hearts left, the Submit button is disabled.
</li>
<li>
If the answer is <b>correct</b>, the input box is highlighted in green
and a small tick icon appears. If the answer is <b>wrong</b>, the box
is highlighted in red and a clear message encourages the student to try again.
</li>
<li>
A short <b>validation message</b> under the input box gives feedback in simple words
(for example, “Try again” or “Well done!”).
</li>
</ul>
</li>
<li>
<b>Step 4 – Meaning, Example and Reset</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>
Below the Submit button, there is an action bar with three options:
<ul style="list-style: disc; margin-left: 1.4rem;">
<li><b>📘 Meaning</b> – shows the meaning of the word.</li>
<li><b>✍️ Example</b> – shows an example sentence using the word.</li>
<li><b>⟲ Reset</b> – loads the next question or restarts the activity.</li>
</ul>
</li>
<li>
The Meaning and Example buttons are enabled only when it is appropriate
(for example, after a word is loaded or after an attempt), so students
follow the correct order.
</li>
<li>
The Reset button becomes available when the student has finished their
attempts or answered correctly. It clears the input and fetches a new word,
making it easy to practise many words in one session.
</li>
<li>
A popup message may also appear in the centre of the screen to give
encouragement or clear information, with a Close button to return to the game.
</li>
</ul>
</li>
<li>
<b>Attempts, Safety and Controls</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>
The three-heart system shows students exactly how many tries they have left.
This keeps them focused and makes the exercise feel like a small challenge.
</li>
<li>
Buttons are disabled during loading and when attempts are over, so there are
no accidental double-clicks or confusing states.
</li>
<li>
The Back and Close buttons at the top of the game screen allow teachers and
students to leave the exercise at any time without losing control.
</li>
</ul>
</li>
<li>
<b>Benefits for Students</b><br>
<ul style="list-style: unset; margin-left: 1.25rem;">
<li>
Improves <b>listening skills</b> by training students to hear individual sounds
in English words.
</li>
<li>
Strengthens <b>spelling and phonics</b>, as students must convert the sounds
they hear into the correct letters.
</li>
<li>
Builds <b>vocabulary</b> by linking each word with its meaning and an example sentence.
</li>
<li>
Encourages <b>careful thinking</b> through limited attempts, instead of guessing
many times without focus.
</li>
<li>
Can be used as a short daily warm-up or regular practice activity in class,
in the lab, or at home.
</li>
</ul>
</li>
</ul>
</ng-container>
</ng-container>
</div>
</div>
</div>
<app-footer></app-footer>
|