Enhance quiz app UI with new components and layouts

QuizExperiment.Admin/Client/Pages/Tests/Client/AnswerSummary.razor

@@ -0,0 +1,37 @@
+@page "/test/client/answersummary"  
+@using QuizModels = QuizExperiment.Models.Client
+@layout QuizExperiment.Admin.Client.Shared.Client.Layout
+
+<QuizExperiment.Admin.Client.Shared.Client.AnswerSummary   MyAnswer="@myAnswer"
+                                                                Question="@question"
+                                                                IsLastQuestion="false"
+                                                                CorrectAnswer="@correctAnswer"
+                                                                CurrentScore="0"
+                                                                Position="1"
+/>
+
+@code {  
+    QuizModels.ClientMultipleChoiceAnswer myAnswer = new QuizModels.ClientMultipleChoiceAnswer
+    {
+        AnswerIndex = 1
+    };
+
+    QuizModels.ClientMultipleChoiceQuestion question = new QuizModels.ClientMultipleChoiceQuestion
+    {
+        Title = "This is a test Question, it goes on a bit, in fact it goes on for ages and ages and ages",
+        ImageUrl = "https://imgur.com/NkMONh3",
+        Options = new List<string>
+        {
+            "Option 1",
+            "Option 2 - This option is really long and will wrap to the next line",
+            "Option 3",
+            "Option 4"
+        },
+    };
+
+    QuizModels.ClientMultipleChoiceAnswer correctAnswer = new QuizModels.ClientMultipleChoiceAnswer
+    {
+        AnswerIndex = 0
+    };
+
+}

QuizExperiment.Admin/Client/Pages/Tests/Client/JoinQuiz.razor

@@ -0,0 +1,13 @@
+@page "/test/client/joinquiz"  
+@layout QuizExperiment.Admin.Client.Shared.Client.Layout
+
+<QuizExperiment.Admin.Client.Shared.Client.JoinQuiz OnQuizIdSubmit="@HandleQuizIdSubmit"  />
+
+@code {  
+    private void HandleQuizIdSubmit(string quizId)
+    {
+        // Handle the submitted quiz ID
+        Console.WriteLine($"Quiz ID submitted: {quizId}");
+        // Potentially invoke a method to initiate the quiz based on the quiz ID
+    }
+}

QuizExperiment.Admin/Client/Pages/Tests/Client/MultipleChoiceQuestion.razor

@@ -0,0 +1,26 @@
+@page "/test/client/multiplechoice"  
+@using QuizModels = QuizExperiment.Models.Client  
+@layout QuizExperiment.Admin.Client.Shared.Client.Layout
+
+<QuizExperiment.Admin.Client.Shared.Client.SingleAnswerMultiSelectQuestion Question="@_currentQuestion"  
+OnAnswerSubmit="@AnswerQuestion" />  
+
+@code {  
+    private QuizModels.ClientMultipleChoiceQuestion _currentQuestion = new QuizModels.ClientMultipleChoiceQuestion
+    {  
+        Title = "This is a test Question, it goes on a bit, in fact it goes on for ages and ages and ages",  
+        Options = new List<string>
+        {  
+            "Option 1",  
+            "Option 2 - This option is really long and will wrap to the next line",  
+            "Option 3",  
+            "Option 4"  
+        },  
+        ImageUrl = "https://imgur.com/NkMONh3"  
+    };  
+
+    private void AnswerQuestion(QuizModels.ClientAnswer answerIndex)
+    {
+        Console.WriteLine($"User answered: {answerIndex}");  
+    }  
+}

QuizExperiment.Admin/Client/Pages/Tests/PlayerPositionTest.razor → QuizExperiment.Admin/Client/Pages/Tests/Client/PlayerPosition.razor

@@ -1,5 +1,6 @@
-@page "/test/playerposition"
-<PlayerPosition Position="@Position" Score="@Score" />
+@page "/test/client/playerposition"
+@layout QuizExperiment.Admin.Client.Shared.Client.Layout
+<QuizExperiment.Admin.Client.Shared.Client.PlayerPosition Position="@Position" Score="@Score" />
 
 @code {
 

QuizExperiment.Admin/Client/Pages/Tests/Client/TrueFalseQuestion.razor

@@ -0,0 +1,19 @@
+@page "/test/client/truefalse"  
+@using QuizModels = QuizExperiment.Models.Client  
+@layout QuizExperiment.Admin.Client.Shared.Client.Layout
+
+<QuizExperiment.Admin.Client.Shared.Client.TrueFalseQuestion Question="@_currentQuestion"  
+OnAnswerSubmit="@AnswerQuestion" />  
+
+@code {  
+    private QuizModels.ClientTrueFalseQuestion _currentQuestion = new QuizModels.ClientTrueFalseQuestion
+    {  
+        Title = "This is a test Question, it goes on a bit, in fact it goes on for ages and ages and ages",    
+        ImageUrl = "https://imgur.com/NkMONh3"  
+    };  
+
+    private void AnswerQuestion(QuizModels.ClientAnswer answerIndex)
+    {
+        Console.WriteLine($"User answered: {answerIndex}");  
+    }  
+}

QuizExperiment.Admin/Client/Pages/Tests/Client/UserName.razor

@@ -0,0 +1,13 @@
+@page "/test/client/username"  
+@layout QuizExperiment.Admin.Client.Shared.Client.Layout
+
+<QuizExperiment.Admin.Client.Shared.Client.UserName OnUserNameSubmit="HandleUserNameSubmit"  />
+
+@code {  
+    private void HandleUserNameSubmit(string userName)
+    {
+        // Handle the submitted username
+        // Potentially invoke a method to set the username in a service or state
+        Console.WriteLine($"Username submitted: {userName}");
+    }
+}

QuizExperiment.Admin/Client/Pages/Tests/Client/WaitingForAnswerCheck.razor

@@ -0,0 +1,7 @@
+@page "/test/client/waitingforanswer"  
+@layout QuizExperiment.Admin.Client.Shared.Client.Layout
+
+<QuizExperiment.Admin.Client.Shared.Client.WaitingForAnswerCheck />
+
+@code {  
+}

QuizExperiment.Admin/Client/Pages/Tests/Client/WaitingForQuestion.razor

@@ -0,0 +1,7 @@
+@page "/test/client/waitingforquestion"  
+@layout QuizExperiment.Admin.Client.Shared.Client.Layout
+
+<QuizExperiment.Admin.Client.Shared.Client.WaitingForQuestions UserName="Bob" />  
+
+@code {  
+}

QuizExperiment.Admin/Client/Shared/Client/AnswerSummary.razor

@@ -1,7 +1,7 @@
 @using QuizExperiment.Models
 @using QuizExperiment.Models.Client
 @{
     var answerDetails = CorrectAnswer?.GetAnswerDetails(Question);
     var correctAnswerText = answerDetails?.description ?? "Unknown answer";
 }
 
@@ -9,28 +9,28 @@
 
     @if (MyAnswer == CorrectAnswer)
     {
-        <div class="my-3 fs-2 fw-bold">Correct!</div>
+        <div class="my-3 fs-2 fw-bold px-3 text-center">Correct!</div>
         <div class="answer-icon answer-correct">
             <span class="oi oi-check" title="icon name" aria-hidden="true"></span>
         </div>
     }
     else
     {
-        
-        <div class="my-3 fs-2 fw-bold">Better luck next time!</div>
-        <div class="my-3 fs-4">The correct answer was @correctAnswerText.</div>
+
+        <div class="my-3 fs-2 fw-bold px-3 text-center">Better luck next time!</div>
+        <div class="my-3 fs-4 px-3 text-center">The correct answer was <strong>@correctAnswerText</strong>.</div>
         <div class="answer-icon answer-wrong">
             <span class="oi oi-x" title="icon name" aria-hidden="true"></span>
         </div>
     }
     @if (!IsLastQuestion)
     {
-        <div class="my-3 fs-4">You are in @Position@(Position.GetSuffix()) place with @CurrentScore points</div>
-        <div class="my-3 fs-4">Another question is on its way!</div>
+        <div class="my-3 fs-4 px-3 text-center">You are in @Position@(Position.GetSuffix()) place with @CurrentScore points</div>
+        <div class="my-3 fs-4 px-3 text-center">Another question is on its way!</div>
     }
     else
     {
-        <div class="my-3 fs-4">That was the last question, check the presenters screen to see how you did!</div>
+        <div class="my-3 fs-4 px-3 text-center">That was the last question, check the presenters screen to see how you did!</div>
     }
 </div>
 

QuizExperiment.Admin/Client/Shared/Client/JoinQuiz.razor

@@ -1,6 +1,6 @@
  <div class="d-flex flex-column min-vh-100 justify-content-center align-items-center">
-     <div class="my-3 fs-2 fw-bold">Join our quiz!</div>
-     <div class="my-3 fs-4">Enter the quiz code below</div>
+    <div class="my-3 fs-2 fw-bold px-3 text-center">Join our quiz!</div>
+    <div class="my-3 fs-4 px-3 text-center">Enter the quiz code below</div>
      <div class="my-3">
         <input class="form-control text-center fs-5 input-text-field" 
         @bind="clientQuizId" @bind:event="oninput" @onkeydown="@Enter" placeholder="Enter the quiz id" />

QuizExperiment.Admin/Client/Shared/Client/PlayerPosition.razor

@@ -1,11 +1,11 @@
 @using QuizExperiment.Models
 <div class="d-flex flex-column min-vh-100 justify-content-center align-items-center quiz-page">
-    <div class="my-3 fs-2 fw-bold">Well done!</div>
-    <div class="my-3 fs-4">You came @Position@(Position.GetSuffix()) with a score of @Score</div>
+    <div class="my-3 fs-2 fw-bold px-3 text-center">Well done!</div>
+    <div class="my-3 fs-4 px-3 text-center">You came @Position@(Position.GetSuffix()) with a score of @Score</div>
     <div class="player-position-icon-container">
         <p class="player-icon text-center">@Icon</p>
     </div>
-    <div class="my-3 fs-4">Thanks for playing</div>
+    <div class="my-3 fs-4 px-3 text-center">Thanks for playing</div>
 </div>
 
 @code {

QuizExperiment.Admin/Client/Shared/Client/SingleAnswerMultiSelectQuestion.razor

@@ -5,13 +5,13 @@
     {
 
         <div class="d-flex flex-column min-vh-100 justify-content-center align-items-center quiz-page">
-            <h1 class="h1 text-center">@Question.Title</h1>
+            <h1 class="h1 text-center quiz-client-title px-3">@Question.Title</h1>
             <div class="quiz-button-container">
                 @for (var i = 0; i < Question.Options?.Count; i++)
                 {
                     var answer = Question.Options[i];
                     var index = i;
-                    <button class="btn btn-client-quiz btn-quiz-@i" @onclick="@(e => SubmitAnswer(index))" value="@index"><span>@(index.GetButtonNameFromIndex())</span></button>
+                    <button class="btn btn-client-quiz btn-quiz-@i" @onclick="@(e => SubmitAnswer(index))" value="@index"><span>@(index.GetButtonNameFromIndex())</span><span class="multiple-choice-answer-text">@answer</span></button>
                 }
 
             </div>

QuizExperiment.Admin/Client/Shared/Client/TrueFalseQuestion.razor

@@ -4,10 +4,10 @@
     if(Question != null)
     {
         <div class="d-flex flex-column min-vh-100 justify-content-center align-items-center quiz-page">
-            <h1 class="h1 text-center">@Question.Title</h1>
+            <h1 class="h1 text-center quiz-client-title px-3">@Question.Title</h1>
             <div class="quiz-button-container">
-                <button class="btn-client-quiz-true-false btn-quiz-true" @onclick="@(e => SubmitAnswer(true))" value="1"><span>True</span></button>
-                <button class="btn-client-quiz-true-false btn-quiz-false" @onclick="@(e => SubmitAnswer(false))" value="2"><span>False</span></button>
+                <button class="btn btn-client-quiz-true-false btn-quiz-true" @onclick="@(e => SubmitAnswer(true))" value="1"><span>True</span></button>
+                <button class="btn btn-client-quiz-true-false btn-quiz-false" @onclick="@(e => SubmitAnswer(false))" value="2"><span>False</span></button>
 
             </div>
         </div>

QuizExperiment.Admin/Client/Shared/Client/UserName.razor

@@ -1,6 +1,6 @@
 <div class="d-flex flex-column min-vh-100 justify-content-center align-items-center">
-    <div class="my-3 fs-2 fw-bold">How would you like to be known?</div>
-    <div class="my-3 fs-4">Enter your username below</div>
+    <div class="my-3 fs-2 fw-bold px-3 text-center">How would you like to be known?</div>
+    <div class="my-3 fs-4 px-3 text-center">Enter your username below</div>
     <div class="my-3">
         <input class="form-control text-center fs-5 input-text-field"
                @bind="userName" @bind:event="oninput" placeholder="Username" maxlength="20" @onkeydown="@Enter" />

QuizExperiment.Admin/Client/Shared/Client/WaitingForAnswerCheck.razor

@@ -1,5 +1,5 @@
 <div class="d-flex flex-column min-vh-100 justify-content-center align-items-center">
-    <div class="my-3 fs-4">Just waiting for everyone to answer.</div>
+    <div class="my-3 fs-4 px-3 text-center">Just waiting for everyone to answer.</div>
     <div class="my-3 loading-animation">
         <span class="loading-animation-item loading-animation-item-1"></span>
         <span class="loading-animation-item loading-animation-item-2"></span>

QuizExperiment.Admin/Client/Shared/Client/WaitingForQuestions.razor

@@ -1,7 +1,7 @@
 <div class="d-flex flex-column min-vh-100 justify-content-center align-items-center">
-    <div class="my-3 fs-2 fw-bold">Hello @UserName</div>
-    <div class="my-3 fs-4">Just waiting for players to join</div>
-    <div class="my-3 fs-4">Your host will start the quiz shortly.</div>
+    <div class="my-3 fs-2 fw-bold px-3 text-center">Hello @UserName</div>
+    <div class="my-3 fs-4 px-3 text-center">Just waiting for players to join</div>
+    <div class="my-3 fs-4 px-3 text-center">Your host will start the quiz shortly.</div>
     <div class="my-3 loading-animation">
         <span class="loading-animation-item loading-animation-item-1"></span>
         <span class="loading-animation-item loading-animation-item-2"></span>

QuizExperiment.Admin/Client/Shared/Components/NavBar.razor

@@ -2,14 +2,14 @@
 
 <nav class="navbar navbar-dark bg-dark fixed-top">
     <div class="container-fluid">
-        <a class="navbar-brand ms-4" href="#">
+        <a class="navbar-brand ms-1" href="#">
             <svg width="40" height="40" class="clear">
                 <circle cx="20" cy="7" r="7" stroke="white" stroke-width="0" fill="#ECDB33" />
                 <circle cx="20" cy="33" r="7" stroke="white" stroke-width="0" fill="#3CDB4E" />
                 <circle cx="7" cy="20" r="7" stroke="white" stroke-width="0" fill="#1F75FE" />
                 <circle cx="33" cy="20" r="7" stroke="white" stroke-width="0" fill="#D04242" />
             </svg>
-            <span class="ms-4 fs-4">QuizzR</span>
+            <span class="ms-1 fs-4">QuizzR</span>
         </a>
         @if (ShowLogin)
         {