|
|
|
|
|
<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)="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> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<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> |
|
|
|
