1

Если приложение - тест. При клике на не правильный вариант ответа нужно правильный ответ как то обозначить, например, добавить ему какой то класс. Подскажите, пожалуйста, варианты, как это можно реализовать.

Вот объект с вопросом:

{
    title: 'Вопрос 1?',
    answerList: [
        {
            title: 'Ответ 1',
            trueAnswer: false
        }, 
        {
            title: 'Ответ 2',
            trueAnswer: false
        }, 
        { 
            title: 'Ответ 3, правильный',
            trueAnswer: true
        }
    ],

    explanation: "Объяснение, почему не верно",
    status: true
}

Варианты ответов

<div class="options" >
        <ul class="options__box">
            <li class="options__answer-box" *ngFor="let answer of currentQuestion.answerList" (click)="checkAnswer(currentQuestion, answer)" ><span class="answer"></span>{{ answer.title }}</li>
        </ul>

    </div>

И метод, который проверяет на правильность

checkAnswer(question:Question, answer:any){
    if(this.statusAnswer ){
        let indexQuestion = this.questionList.indexOf(question);

        if (answer.trueAnswer) {

            alert('Ответ верный');

            this.trueAnswerCount(answer.trueAnswer);

            this.questionNext(question);
        }else{

            this.statusAnswer = answer.trueAnswer
        }
    }
}
2
  • <span class="{{answerclass}}"></span>{{ answer.title }}</li> и менять этот самый answerclass
    – n3r0bi0m4n
    27 сен 2017 в 13:35
  • @n3r0bi0m4n Там же ж получается, что всем одинаковый класс пропишется 27 сен 2017 в 13:48

1 ответ 1

1

Один из вариантов добавить к массиву ответов класс.

{
    title: 'Вопрос 1?',
    answerList: [
        {
            title: 'Ответ 1',
            trueAnswer: false
        }, 
        {
            title: 'Ответ 2',
            trueAnswer: false
        }, 
        { 
            title: 'Ответ 3, правильный',
            trueAnswer: true
        }
    ],

    explanation: "Объяснение, почему не верно",
    status: true
}
....

checkAnswer(currentQuestion, answer) {
   answer.class = answer.trueAnswer ? 'good' : 'pass';
 
}
<div class="options" >
        <ul class="options__box">
            <li class="options__answer-box" [ngClass]="answer.class" *ngFor="let answer of currentQuestion.answerList" (click)="checkAnswer(currentQuestion, answer)" ><span class="answer"></span>{{ answer.title }}</li>
        </ul>

    </div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.