Question counter view.

src/main/resources/messages.properties

@@ -110,4 +110,5 @@ timeRunOut.result=¡Se acabó el tiempo! No te preocupes, sigue intentándolo.
 game.continue=Siguiente pregunta
 answer.correct=La respuesta correcta era: 
 game.points=Puntos: 
+game.currentQuestion=Pregunta: 
 game.finish=El juego ha terminado. Tu puntuación ha sido:

src/main/resources/messages_en.properties

@@ -110,6 +110,7 @@ timeRunOut.result=Time's up! Don't worry, keep trying.
 game.continue=Next question
 answer.correct=Correct answer was: 
 game.points=Points: 
+game.currentQuestion=Question: 
 game.finish=The game has finished. Your score is:
 
 

src/main/resources/messages_es.properties

@@ -111,4 +111,5 @@ timeRunOut.result=¡Se acabó el tiempo! No te preocupes, sigue intentándolo.
 game.continue=Siguiente pregunta
 answer.correct=La respuesta correcta era: 
 game.points=Puntos: 
+game.currentQuestion=Pregunta: 
 game.finish=El juego ha terminado. Tu puntuación ha sido:

src/main/resources/messages_fr.properties

@@ -108,6 +108,7 @@ failedAnswer.result=Réponse incorrecte, ne vous découragez pas et continuez à
 timeRunOut.result=Temps écoulé ! Ne vous inquiétez pas, continuez à essayer.
 game.continue=Question suivante
 answer.correct=La réponse correcte était :
-game.points=Points :
+game.points=Points: 
+game.currentQuestion=Question:  
 game.finish=Le jeu est terminé. Votre score est :
 

src/main/resources/static/css/game.css

@@ -28,7 +28,7 @@
     margin-bottom: 10%;
 }
 
-.points {
+.points, .questionCounter {
     font-size: 2em;
     color: white;
 }

src/main/resources/templates/game/basicGame.html

@@ -9,6 +9,14 @@
     <span class="" th:text="#{game.points}"></span>
     <b id="gamePoints" th:inline="text" th:text="${session.gameSession.score}"></b>
 </p>
+<p class="questionCounter text-right mr-3">
+    <span class="" th:text="#{game.currentQuestion}"></span>
+    <b id="questionNumber" th:inline="text">
+        <span id="currentQuestion" th:text="${session.gameSession.answeredQuestions.size()+1}"></span>
+        /
+        <span id="totalQuestions" th:text="${session.gameSession.questionsToAnswer.size()}"></span>
+    </b>
+</p>
 <div id="gameFrame" th:replace="~{game/fragments/gameFrame}"></div>
 
 <footer th:replace="~{fragments/footer}"></footer>