canvasManagement/Management.Web/Pages/QuizFormPage.razor

@page "/course/{CourseName}/quiz/{QuizName}"

@using CanvasModel.EnrollmentTerms
@using CanvasModel.Quizzes
@using Management.Web.Shared.Components.AssignmentForm
@using Management.Web.Shared.Course
@using Management.Web.Shared.Semester
@using CanvasModel.Courses
@using Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage
@using LocalModels
@using Management.Web.Shared.Module.Assignment
@using Management.Web.Shared.Components
@using Management.Web.Shared.Components.Quiz.Markdown

@inject FileStorageManager fileStorageManager
@inject CanvasService canvas
@inject CoursePlanner planner
@inject QuizEditorContext quizContext
@inject MyLogger<QuizFormPage> logger
@inject NavigationManager Navigation

@code {
  [Parameter]
  public string? CourseName { get; set; } = default!;
  [Parameter]
  public string? QuizName { get; set; } = default!;

  private bool loading { get; set; } = true;
  private bool addingQuizToCanvas = false;

  protected override void OnInitialized()
  {
    quizContext.StateHasChanged += reload;
  }
  private void reload()
  {
    this.InvokeAsync(this.StateHasChanged);
  }
  public void Dispose()
  {
    quizContext.StateHasChanged -= reload;
  }
  protected override async Task OnInitializedAsync()
  {
    if (loading)
    {
      loading = false;
      logger.Log($"loading quiz {CourseName} {QuizName}");
      if (planner.LocalCourse == null)
      {
        var courses = await fileStorageManager.LoadSavedCourses();
        planner.LocalCourse = courses.First(c => c.Settings.Name == CourseName);
        logger.Log($"set course to '{planner.LocalCourse?.Settings.Name}'");
      }

      if (quizContext.Quiz == null)
      {
        var quiz = planner
          .LocalCourse?
          .Modules
          .SelectMany(m => m.Quizzes)
          .FirstOrDefault(q => q.Name == QuizName);

        quizContext.Quiz = quiz;
        logger.Log($"set quiz to '{quizContext.Quiz?.Name}'");
      }
      StateHasChanged();

      if (planner.CanvasQuizzes == null)
      {
        await planner.LoadCanvasData();
      }

      base.OnInitialized();
      StateHasChanged();
    }
  }

  private void deleteQuiz()
  {
    quizContext.DeleteQuiz();
    Navigation.NavigateTo("/course/" + planner.LocalCourse?.Settings.Name);
  }

  private async Task addToCanvas()
  {
    addingQuizToCanvas = true;
    await quizContext.AddQuizToCanvas();
    await planner.LoadCanvasData();
    addingQuizToCanvas = false;
  }
  private void done()
  {
    quizContext.Quiz = null;
    Navigation.NavigateTo("/course/" + planner.LocalCourse?.Settings.Name);
  }

  private CanvasQuiz? quizInCanvas => planner.CanvasQuizzes?.FirstOrDefault(q => q.Title == quizContext.Quiz?.Name);

  private string canvasQuizUrl =>
  $"https://snow.instructure.com/courses/{planner.LocalCourse?.Settings.CanvasId}/quizzes/{quizInCanvas?.Id}";

  private int? quizPoints => quizContext.Quiz?.Questions.Sum(q => q.Points);
  private bool showHelp = false;

  private readonly static string exampleMarkdownQuestion = @"QUESTION REFERENCE
---
Points: 2
this is a question?
*a) correct
b) not correct
---
points: 1
question goes here
[*] correct
[ ] not correct
[] not correct
---
the points default to 1?
*a) true
b) false
---
Markdown is supported

- like
- this
- list

[*] true
[ ] false
---
This is a one point essay question
essay
---
points: 4
this is a short answer question
short_answer
---
points: 4
the underscore is optional
short answer
---
this is a matching question
^ left answer - right dropdown
^ other thing shown -  another option
";
}

<div class="d-flex flex-column py-3" style="height: 100vh;">

  <section>
    <div class="row justify-content-between">
      <div class="col-auto my-auto">
        <button class="btn btn-outline-secondary" @onclick="done">
          ← go back
        </button>
      </div>
      <div class="col-auto my-auto">
        <h2>
          @quizContext.Quiz?.Name
        </h2>
      </div>

      @if (quizContext.Quiz == null)
      {
        <div class="col-auto">
          <Spinner />
        </div>
      }
      <div class="col-auto me-3">
        <h3>
          Questions: @quizContext.Quiz?.Questions.Count() -  Points: @quizPoints
        </h3>
        @if (quizInCanvas != null)
        {
          @if (quizInCanvas?.Published == true)
          {
            <div class="text-success">
              Published!
            </div>
          }
          else
          {
            <div class="text-danger">
              Not Published
            </div>
          }
        }
      </div>
    </div>
  </section>

  <section
    class="flex-grow-1 w-100 d-flex justify-content-center border rounded-4 bg-dark-subtle"
    style="min-height: 10%; max-width: 100%;"
  >

    @if(showHelp)
    {
      <pre class="bg-dark-subtle me-3 pe-5 ps-3 rounded rounded-3">
        @exampleMarkdownQuestion
      </pre>
    }
    <div class="w-100" style="max-width: 120em; max-height: 100%;">
      @if (quizContext.Quiz != null)
      {
        <MarkdownQuizForm />
      }
    </div>
  </section>

  <div>
    <button 
      class="btn btn-outline-secondary mt-3"
      @onclick="@(() => showHelp = !showHelp)"
    >
      toggle help
    </button>
  </div>
  <section class="p-2">
    @if (quizContext.Quiz != null)
    {
      <div class="row justify-content-end">
        <div class="col-auto">
          <ConfirmationModal 
            Label="Delete" 
            Class="btn btn-danger" 
            OnConfirm="deleteQuiz"
            Disabled="@addingQuizToCanvas" 
          />
          <button class="btn btn-outline-secondary me-1" @onclick="addToCanvas" disabled="@addingQuizToCanvas">
            Add to Canvas
          </button>
          @if (quizInCanvas != null)
          {
            <a class="btn btn-outline-secondary me-1" href="@canvasQuizUrl" target="_blank">
              View in Canvas
            </a>
          }
          <button class="btn btn-primary" @onclick="done" disabled="@addingQuizToCanvas">
            Done
          </button>
        </div>
      </div>
    }

    @if (addingQuizToCanvas)
    {
      <Spinner />
    }
  </section>
</div>