canvasManagement/Management.Web/Pages/QuizForm/MarkdownQuestionPreview.razor

@code {
  [Parameter, EditorRequired]
  public LocalQuizQuestion Question { get; set; } = default!;

}

<div class="row justify-content-between text-secondary">
  <div class="col">
    points: @Question.Points
  </div>
  <div class="col-auto">
    @Question.QuestionType
  </div>
</div>


@((MarkupString)Question.HtmlText)

@if(Question.QuestionType == QuestionType.MATCHING)
{
  @foreach(var answer in Question.Answers)
  {
    <div class="mx-3 mb-1 bg-dark px-2 rounded rounded-2 border row">
        <div
          class="col text-end my-auto p-1"
        >
          @answer.Text
        </div>
        <div
          class="col my-auto"
        >
          @answer.MatchedText
        </div>
    </div>
  }
}
else
{
  @foreach(var answer in Question.Answers)
  {
    string answerPreview = answer.HtmlText.StartsWith("<p>")
      ? answer.HtmlText.Replace("<p>", "<p class='m-0'>")
      : answer.HtmlText;

    <div class="mx-3 mb-1 bg-dark px-2  rounded rounded-2 d-flex flex-row border">
      @if(answer.Correct)
      {
        <svg
          style="width: 1em;"
          class="me-1 my-auto"
          viewBox="0 0 24 24"
          fill="none"
        >
          <path
            d="M4 12.6111L8.92308 17.5L20 6.5"
            stroke="var(--bs-success)"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            />
        </svg>
      }
      else
      {
        <div
          class="me-1 my-auto"
          style="width: 1em;"
        >
          @if(Question.QuestionType == QuestionType.MULTIPLE_ANSWERS)
          {
            <span>[ ]</span>
          }
        </div>
      }
      <div class="markdownQuizAnswerPreview p-1">
        @((MarkupString)answerPreview)
      </div>
    </div>
  }
}