Angular 5：判断用户点击选项及实现对错样式的方法

Got it, let's fix this styling requirement for your quiz app. Since you're using Angular, we'll combine component state tracking with CSS class binding to get the behavior you want: red for the wrong selected option, green for the correct one when a wrong choice is made; green for the correct selected option when it's picked.

Step 1: Ensure Your Data Structure Includes Correct Option Info #

First, make sure each question in activeArray has a clear way to identify the correct option. For example, each question could have an options array with an isCorrect flag, or a separate correctOptionId field. Here's a sample structure:

// In your component.ts
activeArray = [
  {
    QuestionID: 1,
    Question: "What is the capital of France?",
    options: [
      { id: 1, text: "London", isCorrect: false },
      { id: 2, text: "Paris", isCorrect: true },
      { id: 3, text: "Berlin", isCorrect: false },
      { id: 4, text: "Madrid", isCorrect: false }
    ]
  },
  // Add more questions here
];

// Track user's selected answers: key = QuestionID, value = selected option ID
selectedAnswers: { [key: number]: number } = {};

Step 2: Add Click Handler and Helper Functions #

In your component, add a function to record the user's selection, plus helper functions to check when to apply styles:

// Record the selected option for a question
onSelectOption(questionId: number, optionId: number) {
  this.selectedAnswers[questionId] = optionId;
  // Call your existing validation function here if needed
}

// Check if the current option is the wrong one the user selected
isSelectedIncorrect(questionId: number, optionId: number): boolean {
  const selectedId = this.selectedAnswers[questionId];
  if (!selectedId) return false;
  
  const question = this.activeArray.find(q => q.QuestionID === questionId);
  const selectedOption = question?.options.find(o => o.id === selectedId);
  
  return selectedOption?.isCorrect === false && selectedId === optionId;
}

// Check if the current option is the correct one (to highlight green)
isCorrectOption(questionId: number, optionId: number): boolean {
  const selectedId = this.selectedAnswers[questionId];
  if (!selectedId) return false;
  
  const question = this.activeArray.find(q => q.QuestionID === questionId);
  const correctOption = question?.options.find(o => o.isCorrect);
  
  // Highlight correct option whether user picked it or a wrong one
  return correctOption?.id === optionId;
}

Step 3: Update Your HTML Template #

Modify your existing *ngFor to loop through options, bind the click event, and apply dynamic classes:

<div *ngFor="let actiVar of activeArray; let j = index" class="question-container">
  {{actiVar.QuestionID}}. {{actiVar.Question}}
  <div class="options-group">
    <div 
      *ngFor="let option of actiVar.options"
      class="option"
      [class.incorrect-selected]="isSelectedIncorrect(actiVar.QuestionID, option.id)"
      [class.correct-option]="isCorrectOption(actiVar.QuestionID, option.id)"
      (click)="onSelectOption(actiVar.QuestionID, option.id)"
    >
      {{option.text}}
    </div>
  </div>
</div>

Step 4: Add CSS Styles #

Define the styles for correct/incorrect states in your component's CSS file:

.question-container {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 8px;
}

.options-group {
  margin-top: 10px;
}

.option {
  padding: 10px 15px;
  margin: 8px 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.option:hover {
  background-color: #f8f9fa;
}

/* Style for selected wrong option */
.incorrect-selected {
  background-color: #ffebee;
  border-color: #ef5350;
  color: #c62828;
}

/* Style for correct option (whether selected or not when wrong choice is made) */
.correct-option {
  background-color: #e8f5e9;
  border-color: #66bb6a;
  color: #2e7d32;
}

How It Works #

• When a user selects an incorrect option: The clicked option gets the incorrect-selected class (red background/text), and the correct option automatically gets the correct-option class (green background/text).
• When a user selects the correct option: Only the correct option gets the correct-option class (green), with no red styling applied to other options.
• The helper functions keep your template clean by encapsulating the logic for when to apply each class.

If your question structure uses a different way to mark correct options (like correctOptionId instead of isCorrect), just adjust the helper functions to match—for example, replace question?.options.find(o => o.isCorrect) with question?.options.find(o => o.id === question.correctOptionId).

内容的提问来源于stack exchange，提问作者Snk