mudanças no layout, tela de fim de tema (parcial)

index.html

@@ -58,6 +58,14 @@
     </div>
     <button id="next-button">Próxima</button>
   </div>
+  <div class="end-theme-screen">
+    <div class="header">
+      Resultado
+    </div>
+    <div class="explicacao">
+    </div>
+    <button id="end-theme-button">Próximo</button>
+  </div>
   <div class="score-container hide">
     <div id="theme-header">Desempenho por Temas</div>
     <div id="theme-score" class="score-theme-container">

script.js

-// Baseado no tutorial em https://codingartistweb.com/2022/06/quiz-app-with-javascript/ acessado em 02/08/2023
+// Baseado no tutorial em https://codingartistweb.com/2022/06/quiz-app-with-javascript/ acessado em displayContainer02/08/2023
 // Adaptado para pt-BR e acrescentadas funcionalidades adicionais por Gastón Morales@Faros Educacional
 // 
 
 // Configurações
-const time4Question = 0       // tempo em segundos (+1) para cada pergunta ser respondida, se 0 (zero) não tem tempo
-const porTemas = true        // perguntas apresentadas agrupadas por tema (true) ou não (false) 
+const time4Question = 0;       // tempo em segundos (+1) para cada pergunta ser respondida, se 0 (zero) não tem tempo
+const porTemas = true;        // perguntas apresentadas agrupadas por tema (true) ou não (false) 
+const mostraQuadroFinal = true;  // mostra (ou não) a tela final com a tabela de resultados
 
 //References
 let timerOnIcon = document.getElementById("timer-on-icon");
@@ -31,6 +32,10 @@ let startThemeScreen = document.querySelector(".start-theme-screen");
 let startThemeHeader = document.querySelector(".start-theme-screen .header");
 let startThemeContent = document.querySelector(".start-theme-screen .explicacao");
 let startThemeButton = document.getElementById("start-theme-button");
+let endThemeScreen = document.querySelector(".end-theme-screen");
+let endThemeHeader = document.querySelector(".end-theme-screen .header");
+let endThemeContent = document.querySelector(".end-theme-screen .explicacao");
+let endThemeButton = document.getElementById("end-theme-button");
 let opcoesHTML = document.querySelector(".opcoes");
 let questionCount =0;
 let numberOfQuestionsShowed = 0;
@@ -58,6 +63,7 @@ nextBtn.addEventListener(
     if ( (porTemas ? themeCount == (selectedThemes.length - 1) : true) && questionCount == quizArray.length) {
       //hide question container and display score
       displayContainer.classList.add("hide");
+      bodyContainer.classList.value = 'bgFinalResult';
       scoreContainer.classList.remove("hide");
       //user score
       userScore.innerHTML =
@@ -101,12 +107,14 @@ nextBtn.addEventListener(
       table += "</tbody>\r\n</table>\r\n";
       themeScore.innerHTML = table;
     } else {
+      // Vamos para o próximo Tema
       if ( questionCount == quizArray.length) {
         themeCount += 1;
         displayContainer.classList.add("hide");
         themeDisplay(themeCount);
       }
       else {
+        // Vamos para próxima pergunta
         //display questionCount
         countOfQuestion.innerHTML =
           questionCount + 1 + " de " + quizArray.length + " perguntas";
@@ -268,6 +276,8 @@ function themeListCreator() {
 function runQuiz() {
   quizContainer.innerHTML = "";
   questionCount = 0;
+  bodyContainer.classList.value = 'bgQuiz';
+  displayContainer.classList.remove("hide");
   quizCreator();
   quizDisplay(questionCount);
 }
@@ -275,7 +285,6 @@ function runQuiz() {
 // Processes que select theme screen 
 startThemeButton.addEventListener("click", () => {
   startThemeScreen.classList.add("hide");
-  displayContainer.classList.remove("hide");
   runQuiz();
 });
 
@@ -345,20 +354,11 @@ function initial() {
 
   });
 
-  // Se for "por Tema", apresenta a tela de seleção de temas
-  //                    para cada tema selecionado, mostra tela introdutória do tema
-  //                                              , filtra as questões do banco buscando as questões do tema colocando em quizArray
-  //                                              , limpa quizContainer e zera questionCount
-  //                                              , chama quizCreator e quizDisplay
-  // Se não for "por Tema"... segue como está
-  // 
-
   if ( porTemas ) {
     // mostra tela seleção de temas e
     selThemeScreen.classList.remove("hide");
   }
   else {
-    displayContainer.classList.remove("hide");
     runQuiz();
   }
 }
@@ -385,6 +385,7 @@ function startQuiz() {
   displayContainer.classList.add("hide");
   selThemeScreen.classList.add("hide");
   startThemeScreen.classList.add("hide");
+  endThemeScreen.classList.add("hide");
   scoreContainer.classList.add("hide");
 }
 

style.css

@@ -21,10 +21,23 @@ body {
   background-image: url(images/bgIntro.png);
 }
 
+.bgQuiz {
+  background-image: url(images/bgQuiz.png);
+}
+
+.bgThemeResult {
+  background-image: url(images/bgResultadoTema.png);
+}
+
+.bgFinalResult {
+  background-image: url(images/bgQuadroFinal.png);  
+}
+
 /* .start-screen, */
 .intro-screen,
 .select-theme-screen,
-.start-theme-screen {
+.start-theme-screen,
+.end-theme-screen {
   background-color: #ffffff;
   padding: 3.1em 1.8em;
   width: 80%;
@@ -46,6 +59,13 @@ body {
   font-weight: 600;
 }
 
+.end-theme-screen .header {
+  color:#ffffff;
+  font-size: 4em;
+  font-weight: 600;  
+  text-align: center;
+}
+
 .explicacao {
   height: 80%;
   overflow: auto;
@@ -88,24 +108,21 @@ button {
   font-size: 1em;
   margin-top: 1.5em;
   padding: 0.7em 1.8em;
-  border-radius: 0.3em;
+  border: #ffffff 1px solid;
+  border-radius: 1em;
 }
 
 #start-button,
 #intro-button,
 #select-theme-button,
 #start-theme-button,
+#end-theme-button,
 #next-button{
   background-color: #0454A1;
   color: #ffffff;
   float: right;
 }
 
-#next-button {
-  border: #ffffff 1px solid;
-  border-radius: 1em;
-}
-
 #start-button {
   position: absolute;
   transform: translate(-50%, -50%);