|
|
|
|
|
<app-header [title]="'Writing Exercise'"></app-header> |
|
|
|
|
|
|
|
|
<img src="assets/images/grammar-bg.png" alt="Chat Background" class="grammar-bg" /> |
|
|
|
|
|
|
|
|
<div class="main-container"> |
|
|
|
|
|
|
|
|
<div class="intro-section" *ngIf="showIntro"> |
|
|
<div class="intro-left-image"> |
|
|
<img src="assets/images/writing/2.png" alt="Writing Illustration" /> |
|
|
</div> |
|
|
<div class="right-content"> |
|
|
<h2>Welcome to the Writing Exercise</h2> |
|
|
<p> |
|
|
This writing exercise is designed to build strong writing habits through regular and engaging practice. |
|
|
It begins by selecting a grade level, which then provides a topic tailored to that level. |
|
|
Writing on these topics improves grammar, sentence structure, and vocabulary, |
|
|
while also encouraging creative thinking and clear expression. |
|
|
Over time, this activity supports the development of well-organized writing and |
|
|
boosts confidence in communicating ideas effectively. With helpful suggestions and a |
|
|
positive learning experience, it serves as a valuable tool for language improvement and academic growth. |
|
|
</p> |
|
|
|
|
|
<div class="center-controls"> |
|
|
<label for="gradeSelect">Select Grade:</label> |
|
|
<select id="gradeSelect" [(ngModel)]="gradeLevel"> |
|
|
<option value="lower">📘 Lower</option> |
|
|
<option value="middle">🧠 Middle</option> |
|
|
<option value="upper">🎓 Upper</option> |
|
|
</select> |
|
|
<app-button [disabled]="isTopicFetching" |
|
|
[ngClass]="{ loading: isTopicFetching }" |
|
|
(click)="fetchTopic()"> |
|
|
<span>Get Topic</span> |
|
|
</app-button> |
|
|
</div> |
|
|
|
|
|
<div *ngIf="isLoaderVisible" class="loader-overlay"> |
|
|
<div class="loader"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="writing-section" *ngIf="showWriting"> |
|
|
<button class="user-guide-close-icon" (click)="goBack('writing')">×</button> |
|
|
<img src="assets/images/writing/back.png" alt="Go Back" class="back-icon" (click)="goBack('writing')" /> |
|
|
|
|
|
<div class="left-image"> |
|
|
<img src="assets/images/writing/pencil-character.png" alt="Pencil Character" /> |
|
|
</div> |
|
|
<div class="right-content"> |
|
|
<fieldset class="topic-fieldset"> |
|
|
<legend>📝 Your Topic:</legend> |
|
|
<p>{{ topic }}</p> |
|
|
</fieldset> |
|
|
|
|
|
<textarea [(ngModel)]="userAnswer" placeholder="Write your answer here..." (input)="checkWordCount()"></textarea> |
|
|
|
|
|
<div class="submit-area with-blue-tooltip"> |
|
|
<app-button [disabled]="isSubmitDisabled || isSubmitInProgress" |
|
|
[ngClass]="{ 'disabled-btn': isSubmitDisabled }" |
|
|
(click)="submitAnswer()"> |
|
|
{{ isSubmitInProgress ? 'Submitting...' : 'Submit Writing' }} |
|
|
</app-button> |
|
|
<div *ngIf="isLoaderVisible" class="loader-overlay"> |
|
|
<div class="loader"></div> |
|
|
</div> |
|
|
|
|
|
<div class="blue-tooltip" *ngIf="isSubmitDisabled"> |
|
|
We need at least 10 words to enable the submit button. |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feedback-section" *ngIf="showFeedback"> |
|
|
<img src="assets/images/writing/back.png" alt="Go Back" class="back-icon" (click)="goBack('feedback')" /> |
|
|
|
|
|
<div class="feedback-header"> |
|
|
<img src="assets/images/writing/feedback.png" alt="Feedback Icon" /> |
|
|
<h3>Suggestions for Improvement</h3> |
|
|
</div> |
|
|
|
|
|
<div class="feedback-box"> |
|
|
<ul> |
|
|
<li *ngFor="let suggestion of feedbackList"> {{ suggestion }}</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="try-again-button"> |
|
|
<app-button (click)="resetForm()">🔄 Try Another</app-button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
