this is my first commit

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

game.css

@@ -67,7 +67,13 @@
   background-color: #56a5eb;
   width: 0%;
 }
-
+#display{
+  border:2px solid black;
+  border-radius: 5px;
+  width:100%;
+  margin-bottom:2px;
+  display:block;
+}
 /* LOADER */
 #loader {
   border: 1.6rem solid white;

game.html

@@ -31,7 +31,7 @@ <h1 class="hud-main-text" id="score">
             </h1>
           </div>
         </div>
-        <h2 id="question"></h2>
+        <h2 id="question1">Question </h2><h2 id="question"></h2>
         <div class="choice-container">
           <p class="choice-prefix">A</p>
           <p class="choice-text" data-number="1"></p>
@@ -48,9 +48,11 @@ <h2 id="question"></h2>
           <p class="choice-prefix">D</p>
           <p class="choice-text" data-number="4"></p>
         </div>
+        <h2 id="display">Correct option :</h2>
       </div>
-    </div>
 
+    </div>
+
     <div>
       <input type="checkbox" class="checkbox" id="checkbox">
       <label for="checkbox" class="label">

game.js

@@ -5,7 +5,7 @@ const scoreText = document.getElementById('score');
 const progressBarFull = document.getElementById('progressBarFull');
 const loader = document.getElementById('loader');
 const game = document.getElementById('game');
-
+const question1 = document.getElementById('question1');
 var soundCorrect = new Audio("sounds/correctAns.mp3");
 var soundIncorrect = new Audio("sounds/wrongAns.mp3");
 
@@ -14,7 +14,6 @@ let acceptingAnswers = false;
 let score = 0;
 let questionCounter = 0;
 let availableQuesions = [];
-
 let questions = [];
 
 fetch(
@@ -26,7 +25,7 @@ fetch(
     .then((loadedQuestions) => {
         questions = loadedQuestions.results.map((loadedQuestion) => {
             const formattedQuestion = {
-                question: loadedQuestion.question,
+                question:loadedQuestion.question,
             };
 
             const answerChoices = [...loadedQuestion.incorrect_answers];
@@ -70,6 +69,7 @@ getNewQuestion = () => {
         return window.location.assign('end.html');
     }
     questionCounter++;
+    question1.innerText = `Question  ${questionCounter}`;//update question number
     progressText.innerText = `Question ${questionCounter}/${MAX_QUESTIONS}`;
     //Update the progress bar
     progressBarFull.style.width = `${(questionCounter / MAX_QUESTIONS) * 100}%`;
@@ -101,19 +101,43 @@ choices.forEach((choice) => {
         if (classToApply === 'correct') {
             incrementScore(CORRECT_BONUS);
             soundCorrect.play();
+
         }else {
             soundIncorrect.play();
+            display(currentQuestion.answer);
+
         }
-
+        setInterval(displaynone,4000);
         selectedChoice.parentElement.classList.add(classToApply);
 
+
         setTimeout(() => {
             selectedChoice.parentElement.classList.remove(classToApply);
             getNewQuestion();
         }, 1000);
     });
 });
+let string;
+function display(string) {
+    let display = document.getElementById('display');
+    if (string == 1) { 
+    display.innerText = `Correct option : A`;
+    }
+    if (string == 2) { 
+        display.innerText = `Correct option : B`;
+    }
+    if (string == 3) { 
+        display.innerText = `Correct option : C`;
+    }
+    if (string == 4) { 
+        display.innerText = `Correct option : D`;
+        }
 
+}
+function displaynone(){
+    let display = document.getElementById('display');
+    display.innerText = `Correct option : `;
+}
 incrementScore = (num) => {
     score += num;
     scoreText.innerText = score;