Angular 8 викторина приложение

Question

Я работаю над компонентом викторины Angular 8, но у меня возникли некоторые трудности с выделением, а также с галочкой «Готово» или «Очистить значки матов», а также с переносом объяснения в поле вопроса.Пожалуйста, не могли бы вы взглянуть на мой код на StackBlitz: https://stackblitz.com/edit/angular-qykleb Спасибо.

Answer 1

Надеюсь, это поможет.

question.component.html:

<form [formGroup]="formGroup" (ngSubmit)="onSubmit()">
  <h3 class="identifyQuestion">Question #{{ question.questionId }} of {{ numberOfQuestions }}</h3>
  <div class="question">{{ question.question }}</div>

  <div class="form-group">
    <mat-radio-group formControlName="answer" name="answer" 
                      (change)="radioChange($event.value)">
        <div *ngFor="let option of question.options"
        [ngClass]="{'is-correct': option.optionValue === question.correctAnswer
                    && selectedRadioButtonOption === question.correctAnswer,
        'is-incorrect': option.optionValue !== question.correctAnswer
        && selectedRadioButtonOption === option.optionValue}"
        (click)="selectedRadioButtonOption = option.optionValue">
          <mat-radio-button 
        [checked]="selectedRadioButtonOption == option.optionValue"
        class="answer"
         [value]="option.optionValue" disableRipple="true">
          {{ option.optionText }}
        </mat-radio-button>

        <div class="explanation"
             *ngIf="option.optionValue === question.correctAnswer
                    && selectedRadioButtonOption === question.correctAnswer">
            Option {{ question.correctAnswer }} is correct because {{ question.explanation }}.
        </div>
    </div>

    </mat-radio-group>
  </div>
</form>

question.component.css:

.identifyQuestion {
  text-align: center;
}

.question {
  border: 2px solid #007aff;
  padding: 10px;
  padding-left: 30px;
  font-family: Tabular, Arial, monospace;
  font-size: 24px;
  margin-bottom: 10px;
  font-weight: 700;
  background-color: #f5f5f5;
  color: #0f0900;
  width: 38rem;
  height: 6rem;
}

.explanation {
  text-align: center;
  font-size: 20px;
  color: #0f0900;
  border: 2px solid #CCC;
  padding: 10px;
  height: 5rem !important;
  margin-top: 12px;
}

mat-radio-group >div {
    margin-bottom: 10px;
    padding: 4px;
}

mat-radio-group >div:hover {
   outline: 2px solid orange;
   cursor: pointer;
}

.initial-state {
  background-color: #f5f5f5;
}

.is-correct {
  outline: 2px solid #00c853 !important;
}

.is-incorrect {
  outline: 2px solid #ff0000 !important;
}

Замените эти два файла на чтоЯ разместил здесь, и вы должны увидеть улучшения.