canvasManagement/Management.Web/Shared/Components/Quiz/EditableQuizAnswer.razor

@code {
  [Parameter, EditorRequired]
  public LocalQuizQuestionAnswer Answer { get; set; } = default!;
  [Parameter, EditorRequired]
  public int AnswerIndex { get; set; } = default!;
  [Parameter, EditorRequired]
  public int QuestionIndex { get; set; } = default!;
  [Parameter, EditorRequired]
  public LocalQuizQuestion Question { get; set; } = default!;

  [Parameter, EditorRequired]
  public Action<LocalQuizQuestionAnswer, int> SaveAnswer { get; set; } = (_, _) => {};

  private string label => "question_" + QuestionIndex + "_answer_" + AnswerIndex;
  private string _text { get; set; } = string.Empty;
  private string text 
  { 
    get => _text;
    set
    {
      _text = value;
      SaveAnswer(Answer with { Text = _text }, AnswerIndex);
    }
  }

  protected override void OnParametersSet()
  {
    if(_text == string.Empty)
      _text = Answer.Text;
    base.OnParametersSet();
  }

  private void handleOneAnswerChange()
  {
    SaveAnswer(Answer with {Correct = !Answer.Correct}, AnswerIndex);
  }
}


<div class="row">
  <div class="col-auto my-auto">
    @if(Question.QuestionType == QuestionType.MULTIPLE_ANSWERS)
    {
      <div class="form-check form-switch">
        <input 
          class="form-check-input" 
          type="checkbox"
          role="switch" 
          id="@label"
          checked="@Answer.Correct"
          @onchange="@(() => handleOneAnswerChange())"
        >
        <label 
          class="form-check-label" for="@label">
          Is Correct
        </label>
      </div>
    }
    @if(Question.QuestionType == QuestionType.MULTIPLE_CHOICE)
    {
      <div class="form-check">
        <input 
          class="form-check-input" 
          type="radio" 
          id="@label"
          checked="@Answer.Correct"

          @onchange="@(() => handleOneAnswerChange())"
        >
        <label
          class="form-check-label" for="@label">
          Is Correct
        </label>
      </div>
    }
  </div>
  <div class="col">
    <div class="m-1">
      <textarea 
        class="form-control"
        @bind="text"
        @bind:event="oninput"
      />
    </div>
  </div>
</div>