major layout changes for quizzes

Management.Web/Shared/Components/ConfirmationModal.razor

@@ -15,6 +15,8 @@
   [Parameter]
   [EditorRequired]
   public string Class { get; set; } = "";
+  [Parameter]
+  public bool Disabled { get; set; } = false;
 
   private Modal? modal { get; set; } = null;
 
@@ -49,6 +51,7 @@
 <button 
   class="btn btn-danger"
   @onclick="() => modal?.Show()"
+  disabled="@Disabled"
 >
   @Label
 </button>
@@ -60,12 +63,14 @@
       <button 
         class="btn btn-secondary"
         @onclick="HandleDeny"
+        disabled="@Disabled"
       >
         no
       </button>
       <button 
         class="btn btn-primary"
         @onclick="HandleConfirm"
+        disabled="@Disabled"
       >
         yes
       </button>

Management.Web/Shared/Components/Quiz/Markdown/MarkdownQuizForm.razor

@@ -2,13 +2,13 @@
 
 @inject QuizEditorContext quizContext
 
-
 @code {
   private Modal? modal { get; set; }
 
   private LocalQuiz testQuiz;
 
   private string? error { get; set; } = null;
+  private bool showHelp = false;
   private string _quizMarkdownInput { get; set; } = "";
   private string quizMarkdownInput
   {
@@ -53,33 +53,68 @@
     quizContext.StateHasChanged -= reload;
   }
 
+  private readonly static string exampleMarkdownQuestion = @"HELP
+---
+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
+";
+
 }
 
+<div class="d-flex flex-column h-100">
 
-<div class="row justify-content-between">
-  <div class="col-auto">
-    <h2>
-      @quizContext.Quiz?.Name
-    </h2>
-  </div>
-  <div class="col-auto me-3">
-    <h3>
-      Points: @quizContext.Quiz?.Questions.Sum(q => q.Points)
-    </h3>
-  </div>
-</div>
-
-<div class="row">
-  <div class="col-6">
-    <textarea rows="30" class="form-control" @bind="quizMarkdownInput" @bind:event="oninput" />
-  </div>
-  <div class="col-6">
-    @if (error != null)
+  <div class="d-flex flex-row flex-grow-1">
+    @if(showHelp)
     {
-      <p class="text-danger text-truncate">Error: @error</p>
+      <pre class="bg-dark-subtle me-3 pe-5 ps-3 rounded rounded-3">
+        @exampleMarkdownQuestion
+      </pre>
     }
-    <QuizPreview Quiz="testQuiz" />
+    <div class="row flex-grow-1">
+      <div class="col-6">
+        <textarea 
+          class="form-control h-100" 
+          @bind="quizMarkdownInput" 
+          @bind:event="oninput" 
+        />
+      </div>
+      <div class="col-6">
+        @if (error != null)
+        {
+          <p class="text-danger text-truncate">Error: @error</p>
+        }
+        <QuizPreview Quiz="testQuiz" />
+      </div>
+    </div>
   </div>
-</div>
 
-<hr>
+  <div>
+    <button 
+      class="btn btn-outline-secondary mt-3"
+      @onclick="@(() => showHelp = !showHelp)"
+    >
+      toggle help
+    </button>
+  </div>
+</div>

Management.Web/Shared/Components/Quiz/Markdown/QuizPreview.razor

@@ -24,34 +24,37 @@
 
 @if(Quiz != null)
 {
-  
-  <div class="row">
-    <div class="col-6 text-end">Name: </div>
-    <div class="col-6">@Quiz.Name</div>
-  </div>
-  <div class="row">
-    <div class="col-6 text-end">Due At: </div>
-    <div class="col-6">@Quiz.DueAt</div>
-  </div>
-  <div class="row">
-    <div class="col-6 text-end">Lock At: </div>
-    <div class="col-6">@Quiz.LockAt</div>
-  </div>
-  <div class="row">
-    <div class="col-6 text-end">Shuffle Answers: </div>
-    <div class="col-6">@Quiz.ShuffleAnswers</div>
-  </div>
-  <div class="row">
-    <div class="col-6 text-end">Allowed Attempts: </div>
-    <div class="col-6">@Quiz.AllowedAttempts</div>
-  </div>
-  <div class="row">
-    <div class="col-6 text-end">One question at a time: </div>
-    <div class="col-6">@Quiz.OneQuestionAtATime</div>
-  </div>
-  <div class="row">
-    <div class="col-6 text-end">Assignment Group: </div>
-    <div class="col-6">@Quiz.LocalAssignmentGroupName</div>
+  <div class="row justify-content-start">
+    <div class="col-auto" style="min-width: 35em;"> 
+      <div class="row">
+        <div class="col-6 text-end">Name: </div>
+        <div class="col-6">@Quiz.Name</div>
+      </div>
+      <div class="row">
+        <div class="col-6 text-end">Due At: </div>
+        <div class="col-6">@Quiz.DueAt</div>
+      </div>
+      <div class="row">
+        <div class="col-6 text-end">Lock At: </div>
+        <div class="col-6">@Quiz.LockAt</div>
+      </div>
+      <div class="row">
+        <div class="col-6 text-end">Shuffle Answers: </div>
+        <div class="col-6">@Quiz.ShuffleAnswers</div>
+      </div>
+      <div class="row">
+        <div class="col-6 text-end">Allowed Attempts: </div>
+        <div class="col-6">@Quiz.AllowedAttempts</div>
+      </div>
+      <div class="row">
+        <div class="col-6 text-end">One question at a time: </div>
+        <div class="col-6">@Quiz.OneQuestionAtATime</div>
+      </div>
+      <div class="row">
+        <div class="col-6 text-end">Assignment Group: </div>
+        <div class="col-6">@Quiz.LocalAssignmentGroupName</div>
+      </div>
+    </div>
   </div>
 
   <div class="p-3" style="white-space: pre-wrap;">@Quiz.Description</div>

Management.Web/Shared/MainLayout.razor

@@ -13,7 +13,7 @@
             <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
         </div> *@
 
-        <article class="content px-4">
+        <article class="content px-4 py-0">
             @Body
         </article>
     </main>