From e4cae72856c4cace44d609326f99820fdaff4eda Mon Sep 17 00:00:00 2001
From: Alex Mickelson <alexmickelson96@gmail.com>
Date: Thu, 9 Nov 2023 15:27:34 -0700
Subject: [PATCH] got toggle help to still work

---
 Management.Web/Pages/QuizFormPage.razor       | 60 +++++++++++++++++--
 .../Quiz/Markdown/MarkdownQuizForm.razor      | 55 +----------------
 Management/Models/Local/LocalQuizQuestion.cs  |  5 +-
 3 files changed, 62 insertions(+), 58 deletions(-)

diff --git a/Management.Web/Pages/QuizFormPage.razor b/Management.Web/Pages/QuizFormPage.razor
index 01d5136..8ec6f35 100644
--- a/Management.Web/Pages/QuizFormPage.razor
+++ b/Management.Web/Pages/QuizFormPage.razor
@@ -102,6 +102,44 @@
   $"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";
 }
 
 <div class="d-flex flex-column py-3" style="height: 100vh;">
@@ -149,8 +187,15 @@
   </section>
 
   <section
-    class="flex-grow-1 w-100 d-flex justify-content-center overflow-y-auto overflow-x-hidden  border rounded-4 bg-dark-subtle py-3 px-1"
-    style="min-height: 10%;max-width: 100%;">
+    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)
       {
@@ -159,8 +204,15 @@
     </div>
   </section>
 
-  <hr>
-  <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">
diff --git a/Management.Web/Shared/Components/Quiz/Markdown/MarkdownQuizForm.razor b/Management.Web/Shared/Components/Quiz/Markdown/MarkdownQuizForm.razor
index 1e2d120..96b51be 100644
--- a/Management.Web/Shared/Components/Quiz/Markdown/MarkdownQuizForm.razor
+++ b/Management.Web/Shared/Components/Quiz/Markdown/MarkdownQuizForm.razor
@@ -8,7 +8,6 @@
   private LocalQuiz testQuiz;
 
   private string? error { get; set; } = null;
-  private bool showHelp = false;
   private string _quizMarkdownInput { get; set; } = "";
   private string quizMarkdownInput
   {
@@ -54,53 +53,11 @@
     quizContext.StateHasChanged -= reload;
   }
 
-  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";
 
 }
 
 <div class="d-flex flex-column h-100">
-  <div class="d-flex flex-row flex-grow-1">
-    @if(showHelp)
-    {
-      <pre class="bg-dark-subtle me-3 pe-5 ps-3 rounded rounded-3">
-        @exampleMarkdownQuestion
-      </pre>
-    }
+  <div class="d-flex flex-row h-100 p-2">
     <div class="row flex-grow-1">
       <div class="col-6">
         @* <textarea 
@@ -114,7 +71,7 @@ short answer";
         />
 
       </div>
-      <div class="col-6">
+      <div class="col-6 h-100 overflow-y-auto">
         @if (error != null)
         {
           <p class="text-danger text-truncate">Error: @error</p>
@@ -124,12 +81,4 @@ short answer";
     </div>
   </div>
 
-  <div>
-    <button 
-      class="btn btn-outline-secondary mt-3"
-      @onclick="@(() => showHelp = !showHelp)"
-    >
-      toggle help
-    </button>
-  </div>
 </div>
\ No newline at end of file
diff --git a/Management/Models/Local/LocalQuizQuestion.cs b/Management/Models/Local/LocalQuizQuestion.cs
index a0de3c6..3b08b86 100644
--- a/Management/Models/Local/LocalQuizQuestion.cs
+++ b/Management/Models/Local/LocalQuizQuestion.cs
@@ -26,7 +26,10 @@ public record LocalQuizQuestion
         : $"[{correctIndicator}] ";
 
       // var textWithSpecificNewline = answer.Text.Replace(Environment.NewLine, Environment.NewLine + "   ");
-      return $"{questionTypeIndicator}{answer.Text}";
+      var multilineMarkdownCompatibleText = answer.Text.StartsWith("```")
+        ? Environment.NewLine + answer.Text
+        : answer.Text;
+      return $"{questionTypeIndicator}{multilineMarkdownCompatibleText}";
     });
     var answersText = string.Join(Environment.NewLine, answerArray);
     var questionTypeIndicator = QuestionType == "essay" || QuestionType == "short_answer" ? QuestionType : "";