Improved responsiveness

simeneilevstjonn · Jan 24, 2021 · ecfd2ec · ecfd2ec
1 parent 493ca12
commit ecfd2ec
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/game.js b/game.js
@@ -389,7 +389,7 @@ class Quiz {
             if (!this.IsMultipleChoice && this.Attempts > 1) {
                 AttemptCounter = `<br>Attempts: ${this.Log[i].AttemptsUsed} out of ${this.Attempts}`;
             }
-            document.getElementById("SummaryPerRound").innerHTML += `<div class="col-12 col-sm-6 col-lg-4"><h5>Round ${i + 1}</h5><div class="d-flex justify-content-between"><p>Time spent: ${FormatDateDifference(this.Log[i].EndTime, this.Log[i].StartTime)}<br>Your answer: ${FormatArray(this.Log[i].Answers)}<br>Correct answer: ${this.QuestionsToAsk[i].FormatName}${AttemptCounter}</p><img class="img-fluid" src="https://maps.googleapis.com/maps/api/staticmap?center=${this.QuestionsToAsk[i].Query}&zoom=${this.QuestionsToAsk[i].Zoom}&size=150x150&scale=1&maptype=satellite&key=AIzaSyCuRDcyNsXWxQuXc6Z5sMyVJohxDC3BXtA"></div></div>`;
+            document.getElementById("SummaryPerRound").innerHTML += `<div class="col-12 col-md-6 col-xxl-4"><h5>Round ${i + 1}</h5><div class="d-flex justify-content-between flex-column flex-md-row"><p>Time spent: ${FormatDateDifference(this.Log[i].EndTime, this.Log[i].StartTime)}<br>Your answer: ${FormatArray(this.Log[i].Answers)}<br>Correct answer: ${this.QuestionsToAsk[i].FormatName}${AttemptCounter}</p><img class="img-fluid" src="https://maps.googleapis.com/maps/api/staticmap?center=${this.QuestionsToAsk[i].Query}&zoom=${this.QuestionsToAsk[i].Zoom}&size=150x150&scale=1&maptype=satellite&key=AIzaSyCuRDcyNsXWxQuXc6Z5sMyVJohxDC3BXtA"></div></div>`;
         }
 
         // Set href of sharer buttons

diff --git a/index.html b/index.html
@@ -159,7 +159,7 @@ <h5 class="mb-3 mt-3">Difficulty</h5>
             <div id="game-page" style="display: none;">
                 <!-- Headings and scores -->
                 <h2 class="text-center header-game-description"></h2>
-                <h3 class="d-flex justify-content-between px-5">
+                <h3 class="d-flex justify-content-between flex-column flex-sm-row px-sm-5 px-3">
                     <span>Current round: <span id="currentround"></span> of <span id="roundcount"></span>.</span>
                     <span>Points: <span id="points">&nbsp;&nbsp;&nbsp;</span></span>
                 </h3>
@@ -169,7 +169,7 @@ <h3 class="d-flex justify-content-between px-5">
 
                 <!-- Inputs -->
                 <!-- Text -->
-                <div id="textinput" class="px-5 py-3">
+                <div id="textinput" class="px-sm-5 px-3 py-3">
                     <!-- Attempt counter -->
                     <h5 id="attemptcounter">Attempt <span id="attempt"></span> of <span id="attempts"></span>.</h5>
 
@@ -184,15 +184,15 @@ <h5 id="attemptcounter">Attempt <span id="attempt"></span> of <span id="attempts
                 </div>
 
                 <!-- Multiple choice -->
-                <div id="mcinput" class="container px-5 py-3 text-center">
+                <div id="mcinput" class="container px-sm-5 px-3 py-3 text-center">
                     <!-- Label -->
                     <p>Please select the correct city.</p>
 
                     <!-- Please select one -->
                     <p class="text-danger" id="noneselectederror" style="display: none;">No answer selected, please select one before submitting.</p>
 
                     <!-- Radios -->
-                    <form class="d-flex justify-content-between" id="mcform">
+                    <form class="d-flex justify-content-between flex-column flex-sm-row" id="mcform">
                         <!-- Radio 0 -->
                         <div class="form-check">
                             <input type="radio" class="form-check-input" id="radio0" name="mc">