From 298049c2b7c30de21c75a7218b3032bba2fb21c7 Mon Sep 17 00:00:00 2001
From: Matthew Fortunka <1851394+fortunkam@users.noreply.github.com>
Date: Fri, 13 Jun 2025 12:49:33 +0100
Subject: [PATCH 1/3] Enhance quiz app UI with new components and layouts

Added new Razor components and updated existing ones to improve the user interface and functionality of the quiz application. Introduced layout specifications for consistency, added `@page` directives for new routes, and enhanced UI elements with better padding and centering. Implemented query string parameters for dynamic data handling and updated CSS for improved button styling and responsiveness. Overall, these changes aim to create a more interactive and visually appealing user experience.
---
 .../Pages/Tests/Client/AnswerSummary.razor    | 37 +++++++++
 .../Client/Pages/Tests/Client/JoinQuiz.razor  | 13 +++
 .../Tests/Client/MultipleChoiceQuestion.razor | 26 ++++++
 .../PlayerPosition.razor}                     |  5 +-
 .../Tests/Client/TrueFalseQuestion.razor      | 19 +++++
 .../Client/Pages/Tests/Client/UserName.razor  | 13 +++
 .../Tests/Client/WaitingForAnswerCheck.razor  |  7 ++
 .../Tests/Client/WaitingForQuestion.razor     |  7 ++
 .../Tests/SingleAnswerQuestionTest.razor      | 26 ------
 .../Client/Shared/Client/AnswerSummary.razor  | 14 ++--
 .../Client/Shared/Client/JoinQuiz.razor       |  4 +-
 .../Client/Shared/Client/PlayerPosition.razor |  6 +-
 .../SingleAnswerMultiSelectQuestion.razor     |  4 +-
 .../Shared/Client/TrueFalseQuestion.razor     |  2 +-
 .../Client/Shared/Client/UserName.razor       |  4 +-
 .../Shared/Client/WaitingForAnswerCheck.razor |  2 +-
 .../Shared/Client/WaitingForQuestions.razor   |  6 +-
 .../Client/Shared/Components/NavBar.razor     |  4 +-
 .../Client/wwwroot/css/app.css                | 83 ++++++++++++++++++-
 19 files changed, 228 insertions(+), 54 deletions(-)
 create mode 100644 QuizExperiment.Admin/Client/Pages/Tests/Client/AnswerSummary.razor
 create mode 100644 QuizExperiment.Admin/Client/Pages/Tests/Client/JoinQuiz.razor
 create mode 100644 QuizExperiment.Admin/Client/Pages/Tests/Client/MultipleChoiceQuestion.razor
 rename QuizExperiment.Admin/Client/Pages/Tests/{PlayerPositionTest.razor => Client/PlayerPosition.razor} (70%)
 create mode 100644 QuizExperiment.Admin/Client/Pages/Tests/Client/TrueFalseQuestion.razor
 create mode 100644 QuizExperiment.Admin/Client/Pages/Tests/Client/UserName.razor
 create mode 100644 QuizExperiment.Admin/Client/Pages/Tests/Client/WaitingForAnswerCheck.razor
 create mode 100644 QuizExperiment.Admin/Client/Pages/Tests/Client/WaitingForQuestion.razor
 delete mode 100644 QuizExperiment.Admin/Client/Pages/Tests/SingleAnswerQuestionTest.razor

diff --git a/QuizExperiment.Admin/Client/Pages/Tests/Client/AnswerSummary.razor b/QuizExperiment.Admin/Client/Pages/Tests/Client/AnswerSummary.razor
new file mode 100644
index 0000000..9e60b56
--- /dev/null
+++ b/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
+    };
+
+}
\ No newline at end of file
diff --git a/QuizExperiment.Admin/Client/Pages/Tests/Client/JoinQuiz.razor b/QuizExperiment.Admin/Client/Pages/Tests/Client/JoinQuiz.razor
new file mode 100644
index 0000000..b33b8b7
--- /dev/null
+++ b/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
+    }
+}
\ No newline at end of file
diff --git a/QuizExperiment.Admin/Client/Pages/Tests/Client/MultipleChoiceQuestion.razor b/QuizExperiment.Admin/Client/Pages/Tests/Client/MultipleChoiceQuestion.razor
new file mode 100644
index 0000000..f90d494
--- /dev/null
+++ b/QuizExperiment.Admin/Client/Pages/Tests/Client/MultipleChoiceQuestion.razor
@@ -0,0 +1,26 @@
+@page "/test/client/mulitplechoice"  
+@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}");  
+    }  
+}
\ No newline at end of file
diff --git a/QuizExperiment.Admin/Client/Pages/Tests/PlayerPositionTest.razor b/QuizExperiment.Admin/Client/Pages/Tests/Client/PlayerPosition.razor
similarity index 70%
rename from QuizExperiment.Admin/Client/Pages/Tests/PlayerPositionTest.razor
rename to QuizExperiment.Admin/Client/Pages/Tests/Client/PlayerPosition.razor
index 10a3a8f..5f872ca 100644
--- a/QuizExperiment.Admin/Client/Pages/Tests/PlayerPositionTest.razor
+++ b/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 {
 
diff --git a/QuizExperiment.Admin/Client/Pages/Tests/Client/TrueFalseQuestion.razor b/QuizExperiment.Admin/Client/Pages/Tests/Client/TrueFalseQuestion.razor
new file mode 100644
index 0000000..79e3513
--- /dev/null
+++ b/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}");  
+    }  
+}
\ No newline at end of file
diff --git a/QuizExperiment.Admin/Client/Pages/Tests/Client/UserName.razor b/QuizExperiment.Admin/Client/Pages/Tests/Client/UserName.razor
new file mode 100644
index 0000000..4276edd
--- /dev/null
+++ b/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}");
+    }
+}
\ No newline at end of file
diff --git a/QuizExperiment.Admin/Client/Pages/Tests/Client/WaitingForAnswerCheck.razor b/QuizExperiment.Admin/Client/Pages/Tests/Client/WaitingForAnswerCheck.razor
new file mode 100644
index 0000000..b5085e7
--- /dev/null
+++ b/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 {  
+}
\ No newline at end of file
diff --git a/QuizExperiment.Admin/Client/Pages/Tests/Client/WaitingForQuestion.razor b/QuizExperiment.Admin/Client/Pages/Tests/Client/WaitingForQuestion.razor
new file mode 100644
index 0000000..b693b31
--- /dev/null
+++ b/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 {  
+}
\ No newline at end of file
diff --git a/QuizExperiment.Admin/Client/Pages/Tests/SingleAnswerQuestionTest.razor b/QuizExperiment.Admin/Client/Pages/Tests/SingleAnswerQuestionTest.razor
deleted file mode 100644
index b13f46b..0000000
--- a/QuizExperiment.Admin/Client/Pages/Tests/SingleAnswerQuestionTest.razor
+++ /dev/null
@@ -1,26 +0,0 @@
-@* @page "/test/singleanswerquestion"  
-@using QuizExperiment.Models  
-@layout AdminLayout  
-
-<SingleAnswerMultiSelectQuestion Question="@_currentQuestion.Title"  
-PossibleAnswers="@_currentQuestion.Options"   
-OnAnswerSubmit="@AnswerQuestion" />  
-
-@code {  
-    private Question _currentQuestion = new MultipleChoiceQuestion  
-    {  
-        Title = "This is a test Question",  
-        Options = new[]  
-        {  
-            "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(int answerIndex){  
-        Console.WriteLine($"User answered: {answerIndex}");  
-    }  
-} *@
\ No newline at end of file
diff --git a/QuizExperiment.Admin/Client/Shared/Client/AnswerSummary.razor b/QuizExperiment.Admin/Client/Shared/Client/AnswerSummary.razor
index 631f954..eeaf2aa 100644
--- a/QuizExperiment.Admin/Client/Shared/Client/AnswerSummary.razor
+++ b/QuizExperiment.Admin/Client/Shared/Client/AnswerSummary.razor
@@ -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>
 
diff --git a/QuizExperiment.Admin/Client/Shared/Client/JoinQuiz.razor b/QuizExperiment.Admin/Client/Shared/Client/JoinQuiz.razor
index bcb82fa..64f6e59 100644
--- a/QuizExperiment.Admin/Client/Shared/Client/JoinQuiz.razor
+++ b/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" />
diff --git a/QuizExperiment.Admin/Client/Shared/Client/PlayerPosition.razor b/QuizExperiment.Admin/Client/Shared/Client/PlayerPosition.razor
index 090343c..951a404 100644
--- a/QuizExperiment.Admin/Client/Shared/Client/PlayerPosition.razor
+++ b/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 {
diff --git a/QuizExperiment.Admin/Client/Shared/Client/SingleAnswerMultiSelectQuestion.razor b/QuizExperiment.Admin/Client/Shared/Client/SingleAnswerMultiSelectQuestion.razor
index 9137684..466c61b 100644
--- a/QuizExperiment.Admin/Client/Shared/Client/SingleAnswerMultiSelectQuestion.razor
+++ b/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>
diff --git a/QuizExperiment.Admin/Client/Shared/Client/TrueFalseQuestion.razor b/QuizExperiment.Admin/Client/Shared/Client/TrueFalseQuestion.razor
index a173ba5..6e747d4 100644
--- a/QuizExperiment.Admin/Client/Shared/Client/TrueFalseQuestion.razor
+++ b/QuizExperiment.Admin/Client/Shared/Client/TrueFalseQuestion.razor
@@ -4,7 +4,7 @@
     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>
diff --git a/QuizExperiment.Admin/Client/Shared/Client/UserName.razor b/QuizExperiment.Admin/Client/Shared/Client/UserName.razor
index 55800fd..b55743e 100644
--- a/QuizExperiment.Admin/Client/Shared/Client/UserName.razor
+++ b/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" />
diff --git a/QuizExperiment.Admin/Client/Shared/Client/WaitingForAnswerCheck.razor b/QuizExperiment.Admin/Client/Shared/Client/WaitingForAnswerCheck.razor
index 15794b0..822a85c 100644
--- a/QuizExperiment.Admin/Client/Shared/Client/WaitingForAnswerCheck.razor
+++ b/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>
diff --git a/QuizExperiment.Admin/Client/Shared/Client/WaitingForQuestions.razor b/QuizExperiment.Admin/Client/Shared/Client/WaitingForQuestions.razor
index 22823a9..b875957 100644
--- a/QuizExperiment.Admin/Client/Shared/Client/WaitingForQuestions.razor
+++ b/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>
diff --git a/QuizExperiment.Admin/Client/Shared/Components/NavBar.razor b/QuizExperiment.Admin/Client/Shared/Components/NavBar.razor
index 61aab25..c58e3ac 100644
--- a/QuizExperiment.Admin/Client/Shared/Components/NavBar.razor
+++ b/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)
         {
diff --git a/QuizExperiment.Admin/Client/wwwroot/css/app.css b/QuizExperiment.Admin/Client/wwwroot/css/app.css
index d24fee5..303337e 100644
--- a/QuizExperiment.Admin/Client/wwwroot/css/app.css
+++ b/QuizExperiment.Admin/Client/wwwroot/css/app.css
@@ -149,12 +149,12 @@ nav.title-bar {
 }
 
 .btn-client-quiz {
-    position:relative;
+    position: relative;
     width: 200px;
     height: 200px;
-    border-radius:100px;
+    border-radius: 100px;
     font-size: 64pt;
-    font-weight:bolder;
+    font-weight: bolder;
 }
 
 .btn-client-quiz-true-false {
@@ -164,6 +164,7 @@ nav.title-bar {
     border-radius: 100px;
     font-size: 56pt;
     font-weight: bolder;
+    border:none;
 }
 
 .btn-quiz-true {
@@ -977,4 +978,80 @@ nav.title-bar {
     background-color: lightgray;
     color: black;
     font-weight: bold;
+}
+
+.multiple-choice-answer-text {
+    font-size: small;
+    display: block;
+    margin-top: -20px;
+    height: 20px;
+    overflow-wrap: break-word;
+    overflow: auto;
+    text-overflow: ellipsis;
+}
+
+@media (max-width: 560px), (max-height: 800px) {
+    .btn-client-quiz {
+        width: 120px;
+        height: 120px;
+        border-radius: 60px;
+        font-size: 48pt;
+    }
+
+    .btn-quiz-0 {
+        background-color: #ECDB33;
+        left: 190px;
+    }
+
+    .btn-quiz-1 {
+        background-color: #1F75FE;
+        top: 100px;
+        left: -20px;
+    }
+
+    .btn-quiz-2 {
+        background-color: #D04242;
+        top: 98px;
+        left: 40px;
+    }
+
+    .btn-quiz-3 {
+        background-color: #3CDB4E;
+        top: 200px;
+        left: -170px;
+    }
+
+    .btn-client-quiz-true-false {
+        position: relative;
+        width: 280px;
+        height: 100px;
+        border-radius: 100px;
+        font-size: 48pt;
+        font-weight: bolder;
+        border: none;
+    }
+
+    .btn-quiz-true {
+        background-color: #3CDB4E;
+        left: 110px;
+    }
+
+    .btn-quiz-false {
+        background-color: #D04242;
+        top: 30px;
+        left: 110px;
+    }
+
+    .quiz-client-title {
+        margin-top: -90px;
+    }
+
+    .quiz-button-container {
+        margin-top:75px;
+    }
+
+    .multiple-choice-answer-text {
+        font-size: x-small;
+        height: 18px;
+    }
 }
\ No newline at end of file

From 2c752a65d72c666d50459900a9ccde0aced11bbc Mon Sep 17 00:00:00 2001
From: Matthew Fortunka <1851394+fortunkam@users.noreply.github.com>
Date: Fri, 13 Jun 2025 12:53:13 +0100
Subject: [PATCH 2/3] Update
 QuizExperiment.Admin/Client/Pages/Tests/Client/MultipleChoiceQuestion.razor

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 .../Client/Pages/Tests/Client/MultipleChoiceQuestion.razor      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/QuizExperiment.Admin/Client/Pages/Tests/Client/MultipleChoiceQuestion.razor b/QuizExperiment.Admin/Client/Pages/Tests/Client/MultipleChoiceQuestion.razor
index f90d494..012b0e2 100644
--- a/QuizExperiment.Admin/Client/Pages/Tests/Client/MultipleChoiceQuestion.razor
+++ b/QuizExperiment.Admin/Client/Pages/Tests/Client/MultipleChoiceQuestion.razor
@@ -1,4 +1,4 @@
-@page "/test/client/mulitplechoice"  
+@page "/test/client/multiplechoice"  
 @using QuizModels = QuizExperiment.Models.Client  
 @layout QuizExperiment.Admin.Client.Shared.Client.Layout
 

From a531e61f8ceb178ac392517108a75f8b2a6e7566 Mon Sep 17 00:00:00 2001
From: Matthew Fortunka <1851394+fortunkam@users.noreply.github.com>
Date: Fri, 13 Jun 2025 14:05:49 +0100
Subject: [PATCH 3/3] Fixed button layout issue

---
 .../Client/Shared/Client/TrueFalseQuestion.razor              | 4 ++--
 QuizExperiment.Admin/Client/wwwroot/css/app.css               | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/QuizExperiment.Admin/Client/Shared/Client/TrueFalseQuestion.razor b/QuizExperiment.Admin/Client/Shared/Client/TrueFalseQuestion.razor
index 6e747d4..92da7da 100644
--- a/QuizExperiment.Admin/Client/Shared/Client/TrueFalseQuestion.razor
+++ b/QuizExperiment.Admin/Client/Shared/Client/TrueFalseQuestion.razor
@@ -6,8 +6,8 @@
         <div class="d-flex flex-column min-vh-100 justify-content-center align-items-center quiz-page">
             <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>
diff --git a/QuizExperiment.Admin/Client/wwwroot/css/app.css b/QuizExperiment.Admin/Client/wwwroot/css/app.css
index 303337e..293761f 100644
--- a/QuizExperiment.Admin/Client/wwwroot/css/app.css
+++ b/QuizExperiment.Admin/Client/wwwroot/css/app.css
@@ -1026,7 +1026,7 @@ nav.title-bar {
         width: 280px;
         height: 100px;
         border-radius: 100px;
-        font-size: 48pt;
+        font-size: 36pt;
         font-weight: bolder;
         border: none;
     }