Fixes height of the questiontext input in the quiz manager

parent 5e30948f
Pipeline #18387 passed with stages
in 10 minutes
......@@ -9,6 +9,7 @@
[attr.aria-label]="'component.questions.enter_question_here' | translate"
id="questionText"
[placeholder]="'component.questions.enter_question_here' | translate"
[style.height]="computeQuestionTextInputHeight()"
(keyup)="fireEvent($event)">
</textarea>
</div>
......
......@@ -33,9 +33,7 @@ export class QuestiontextComponent implements OnInit, OnDestroy {
this.footerBarService.TYPE_REFERENCE = QuestiontextComponent.TYPE;
headerLabelService.headerLabel = 'component.quiz_manager.title';
this.footerBarService.replaceFooterElements([
this.footerBarService.footerElemBack,
this.footerBarService.footerElemNicknames,
this.footerBarService.footerElemProductTour,
this.footerBarService.footerElemBack, this.footerBarService.footerElemNicknames, this.footerBarService.footerElemProductTour,
]);
}
......@@ -73,8 +71,9 @@ export class QuestiontextComponent implements OnInit, OnDestroy {
}
public fireEvent(event: Event): void {
this.computeQuestionTextInputHeight();
this.questionTextService.change((<HTMLTextAreaElement>event.target).value);
this.questionTextService.change((
<HTMLTextAreaElement>event.target
).value);
}
public ngOnInit(): void {
......@@ -86,7 +85,6 @@ export class QuestiontextComponent implements OnInit, OnDestroy {
this.questionTextElement.value = this.activeQuestionGroupService.activeQuestionGroup.questionList[this._questionIndex].questionText;
this.questionTextService.change(this.activeQuestionGroupService.activeQuestionGroup.questionList[this._questionIndex].questionText);
}
this.computeQuestionTextInputHeight();
}
public ngOnDestroy(): void {
......@@ -98,11 +96,9 @@ export class QuestiontextComponent implements OnInit, OnDestroy {
this.activeQuestionGroupService.persist();
}
private computeQuestionTextInputHeight(): void {
public computeQuestionTextInputHeight(): number {
if (isPlatformBrowser(this.platformId)) {
const questionTextElem = <HTMLInputElement>document.getElementById('questionText');
const lineHeight = window.getComputedStyle(questionTextElem).getPropertyValue('line-height').replace('px', '');
questionTextElem.style.height = (parseInt(lineHeight, 10)) * (questionTextElem.value.split('\n').length + 2) + 'px';
return this.questionTextElement.scrollHeight;
}
}
......
......@@ -6,7 +6,7 @@
role="navigation"
[attr.aria-label]="'component.quiz_manager.details.aria.btn_group' | translate">
<button type="button"
*ngIf="question.canEditQuestionText"
*ngIf="question?.canEditQuestionText"
class="btn btn-default pointer"
(click)="trackDetailsTarget('question-text')"
[routerLink]="['/quiz', 'manager', questionIndex, 'questionText']">
......@@ -16,7 +16,7 @@
[innerHTML]="'component.quiz_manager.details.question_text.short' | translate"></span>
</button>
<button type="button"
*ngIf="question.canEditAnsweroptions"
*ngIf="question?.canEditAnsweroptions"
class="btn btn-default pointer"
(click)="trackDetailsTarget('answeroptions')"
[routerLink]="['/quiz', 'manager', questionIndex, 'answeroptions']">
......@@ -26,7 +26,7 @@
[innerHTML]="'component.quiz_manager.details.answeroptions.short' | translate"></span>
</button>
<button type="button"
*ngIf="question.canEditQuestionTimer"
*ngIf="question?.canEditQuestionTimer"
class="btn btn-default pointer"
(click)="trackDetailsTarget('question-timer')"
[routerLink]="['/quiz', 'manager', questionIndex, 'countdown']">
......@@ -36,7 +36,7 @@
[innerHTML]="'component.quiz_manager.details.timer.short' | translate"></span>
</button>
<button type="button"
*ngIf="question.canEditQuestionType"
*ngIf="question?.canEditQuestionType"
class="btn btn-default pointer"
(click)="trackDetailsTarget('question-type')"
[routerLink]="['/quiz', 'manager', questionIndex, 'questionType']">
......@@ -59,14 +59,14 @@
</h4>
<p>
<span [innerHTML]="'component.quiz_summary.text' | translate"></span>:&nbsp;
<span *ngIf="question.questionText"
<span *ngIf="question?.questionText"
class="break-word"
[innerHTML]="question.questionText"></span>
<span *ngIf="!question.questionText">{{'component.quiz_summary.validation_errors.reasons.empty_question_text' | translate}}</span>
[innerHTML]="question?.questionText"></span>
<span *ngIf="!question?.questionText">{{'component.quiz_summary.validation_errors.reasons.empty_question_text' | translate}}</span>
</p>
<p>
<span [innerHTML]="'component.quiz_summary.type' | translate"></span>:&nbsp;
<span [innerHTML]="question.translationReferrer() | translate"></span>
<span [innerHTML]="question?.translationReferrer() | translate"></span>
</p>
</div>
</div>
......@@ -76,55 +76,55 @@
<h4><span [innerHTML]="'component.quiz_summary.answer' | translate"></span>:&nbsp;</h4>
</div>
<div role="list">
<div *ngIf="question.TYPE === 'RangedQuestion'">
<div *ngIf="question?.TYPE === 'RangedQuestion'">
<p role="listitem">
<span [innerHTML]="'component.answeroptions.ranged_question.correct_value' | translate"></span>:&nbsp;
<span [innerHTML]="question.correctValue"></span>
<span [innerHTML]="'component.answeroptions.ranged_question?.correct_value' | translate"></span>:&nbsp;
<span [innerHTML]="question?.correctValue"></span>
</p>
<p role="listitem">
<span [innerHTML]="'component.answeroptions.ranged_question.min_range' | translate"></span>:&nbsp;
<span [innerHTML]="question.rangeMin"></span>
<span [innerHTML]="'component.answeroptions.ranged_question?.min_range' | translate"></span>:&nbsp;
<span [innerHTML]="question?.rangeMin"></span>
</p>
<p role="listitem">
<span [innerHTML]="'component.answeroptions.ranged_question.max_range' | translate"></span>:&nbsp;
<span [innerHTML]="question.rangeMax"></span>
<span [innerHTML]="'component.answeroptions.ranged_question?.max_range' | translate"></span>:&nbsp;
<span [innerHTML]="question?.rangeMax"></span>
</p>
</div>
<div *ngIf="question.TYPE === 'FreeTextQuestion'">
<p *ngIf="question.answerOptionList[0].answerText"
<div *ngIf="question?.TYPE === 'FreeTextQuestion'">
<p *ngIf="question?.answerOptionList[0].answerText"
role="listitem"
[innerHTML]="question.answerOptionList[0].answerText"></p>
<p *ngIf="!question.answerOptionList[0].answerText"
[innerHTML]="question?.answerOptionList[0].answerText"></p>
<p *ngIf="!question?.answerOptionList[0].answerText"
role="listitem">
{{'component.quiz_summary.validation_errors.reasons.empty_question_text' | translate}}
</p>
</div>
<div *ngIf="!['RangedQuestion', 'FreeTextQuestion'].includes(question.TYPE)">
<div *ngIf="!['RangedQuestion', 'FreeTextQuestion'].includes(question?.TYPE)">
<p role="listitem"
*ngFor="let answer of question.answerOptionList; let i = index;">
*ngFor="let answer of question?.answerOptionList; let i = index;">
<span [innerHTML]="'component.quiz_summary.answer' | translate"></span>
<span>{{i+1}}</span>
<span *ngIf="question.TYPE !== 'SurveyQuestion'"
<span *ngIf="question?.TYPE !== 'SurveyQuestion'"
[innerHTML]="'(' + (('component.quiz_summary.' + (answer.isCorrect ? 'correct' : 'wrong')) | translate) + ')'"></span>
<span>:&nbsp;</span>
<span *ngIf="answer.answerText"
[innerHTML]="answer.answerText"></span>
<span *ngIf="!answer.answerText">{{'component.quiz_summary.validation_errors.reasons.empty_question_text' | translate}}</span>
</p>
<p *ngIf="!question.answerOptionList.length"
<p *ngIf="!question?.answerOptionList.length"
[innerHTML]="'component.quiz_summary.validation_errors.reasons.no_answers_defined' | translate"></p>
</div>
</div>
</div>
</div>
<div *ngIf="question.TYPE === 'FreeTextQuestion'">
<div *ngIf="question?.TYPE === 'FreeTextQuestion'">
<div class="col-12">
<div class="answers">
<div>
<h4><span [innerHTML]="'component.quiz_summary.answer_configuration' | translate"></span>:&nbsp;</h4>
</div>
<div>
<p *ngFor="let config of question.answerOptionList[0].getConfig()">
<p *ngFor="let config of question?.answerOptionList[0].getConfig()">
<span [innerHTML]="config.configTitle | translate"></span>:&nbsp;
<span [innerHTML]="config.configEnabledString | translate"></span>
</p>
......@@ -134,7 +134,7 @@
<div class="col-12">
<div class="timer">
<h4><span [innerHTML]="'component.quiz_summary.timer' | translate"></span>:</h4>
<p>{{question.timer}}&nbsp;<span [innerHTML]="'component.quiz_summary.second' | translate"></span></p>
<p>{{question?.timer}}&nbsp;<span [innerHTML]="'component.quiz_summary.second' | translate"></span></p>
</div>
</div>
</div>
......@@ -143,15 +143,15 @@
<h4>
<span>{{'component.quiz_summary.validation' | translate}}:&nbsp;</span>
<span class="success"
*ngIf="question.isValid()">{{'component.quiz_summary.question_successful' | translate}}</span>
*ngIf="question?.isValid()">{{'component.quiz_summary.question_successful' | translate}}</span>
<span class="failed"
*ngIf="!question.isValid()">{{'component.quiz_summary.question_failed' | translate}}</span>
*ngIf="!question?.isValid()">{{'component.quiz_summary.question_failed' | translate}}</span>
</h4>
<ul *ngIf="!question.isValid()"
<ul *ngIf="!question?.isValid()"
id="quizSummaryValidationErrors"
[attr.data-intro]="'component.quiz_summary.description.validation_errors' | translate"
[attr.aria-label]="'component.quiz_summary.description.validation_errors' | translate">
<li *ngFor="let validationError of question.getValidationStackTrace(); let i = index">
<li *ngFor="let validationError of question?.getValidationStackTrace(); let i = index">
<span [innerHTML]="'component.quiz_summary.validation_errors.types.' + validationError.occurredAt.type | translate"></span>
<span *ngIf="validationError.occurredAt.type === 'answerOption'"
[innerHTML]="i + 1"></span>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment