Implementa seleção de temas (parcial)

index.html

@@ -14,11 +14,32 @@
   </head>
   <body>
     <div class="start-screen">
-      <h4>
+      <div class="header">
           Tela inicial - blá blá blá inicial
-      </h4>
+      </div>
+      <div class="content">
+
+      </div>
       <button id="start-button">Iniciar</button>
     </div>
+    <div class="select-theme-screen">
+      <div class="header">
+        Tela seleção de temas
+      </div>
+      <div class="content">
+
+      </div>
+      <button id="select-theme-button">Selecionar</button>
+    </div>
+    <div class="start-theme-screen">
+      <div class="header">
+        Tela inicial de tema
+      </div>
+      <div class="content">
+
+      </div>
+      <button id="start-theme-button">Iniciar</button>
+    </div>
     <div id="display-container">
       <div class="header">
         <div class="number-of-count">

perguntas.js

@@ -30,7 +30,7 @@
 // maxScore: 2,   // número máximo de pontos que podem ser obtidos ao responder a pergunta
 //
 
-const quizArray = [
+const quizDataBase = [
     {
         id: "01.01",
         type: "noAnswer",
@@ -93,7 +93,7 @@ const quizArray = [
     }
 ];
 
-const quizArrayBASE = [
+const quizDataBaseComplete = [
     {
         id: "01.01",
         type: "noAnswer",

script.js

@@ -4,7 +4,7 @@
 
 // Configurações
 const time4Question = 0       // tempo em segundos (+1) para cada pergunta ser respondida, se 0 (zero) não tem tempo
-const porTemas = false        // perguntas apresentadas agrupadas por tema (true) ou não (false) 
+const porTemas = true        // perguntas apresentadas agrupadas por tema (true) ou não (false) 
 
 //References
 let timerOnIcon = document.getElementById("timer-on-icon");
@@ -20,17 +20,22 @@ let userScore = document.getElementById("user-score");
 let themeScore = document.getElementById("theme-score");
 let startScreen = document.querySelector(".start-screen");
 let startButton = document.getElementById("start-button");
+let selThemeScreen = document.querySelector(".select-theme-screen");
+let selThemeButton = document.getElementById("select-theme-button");
+let startThemeScreen = document.querySelector(".start-theme-screen");
+let startThemeButton = document.getElementById("start-theme-button");
 let questionCount;
+let themeCount;
 let scoreCount = 0;
 let count = time4Question;
 let countdown;
+let selectedThemes = [];
 let themeList = [];
+let quizArray = [];
 
 //Restart Quiz
 restart.addEventListener("click", () => {
-  initial();
-  displayContainer.classList.remove("hide");
-  scoreContainer.classList.add("hide");
+  startQuiz();
 });
 
 //Next Button
@@ -186,7 +191,9 @@ function checker(userOption) {
   themeList[quizArray[questionCount].themeIndex].maxScoreTheme += quizArray[questionCount].maxScore;
 
   //clear interval(stop timer)
+  if ( time4Question > 0 ) {
     clearInterval(countdown);
+  }
   //disable all options
   options.forEach((element) => {
     element.disabled = true;
@@ -220,11 +227,38 @@ function themeListCreator() {
   });
 } 
 
-//initial setup
-function initial() {
+function runQuiz() {
   quizContainer.innerHTML = "";
   questionCount = 0;
-  scoreCount = 0;
+  quizCreator();
+  quizDisplay(questionCount);
+}
+
+// Processes que select theme screen 
+startThemeButton.addEventListener("click", () => {
+  startThemeScreen.classList.add("hide");
+  displayContainer.classList.remove("hide");
+  runQuiz();
+});
+
+// Shows theme start screen
+function themeDisplay(themeCount) {
+  // Carrega o html do tema para a tela
+  // questionCount = 0
+  // Filtra o quizArray para as perguntas do tema
+  // Mostra a tela do tema
+  startThemeScreen.classList.remove("hide");
+}
+
+// Processes que select theme screen 
+selThemeButton.addEventListener("click", () => {
+  selThemeScreen.classList.add("hide");
+  themeCount = 0;
+  themeDisplay(themeCount)
+});
+
+//initial setup
+function initial() {
   // if time to answer question is enabled
   if ( time4Question > 0 ) {
     count = time4Question;
@@ -239,21 +273,48 @@ function initial() {
     timeLeft.classList.add("hide");
     timerOffIcon.classList.remove("hide");
   }
+
+  scoreCount = 0;
+  // Renomear no nome do array quizArray do perguntas.js para quizDataBase -- ele continua CONST
+  quizArray = quizDataBase;
+
+  // Cria a lista de temas (completa)
   themeList = [];
   themeListCreator();
-  quizCreator();
-  quizDisplay(questionCount);
+
+  // 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();
+  }
 }
 
 //when user click on start button
 startButton.addEventListener("click", () => {
   startScreen.classList.add("hide");
-  displayContainer.classList.remove("hide");
   initial();
 });
 
-//hide quiz and display start screen
-window.onload = () => {
+function startQuiz() {
   startScreen.classList.remove("hide");
   displayContainer.classList.add("hide");
+  selThemeScreen.classList.add("hide");
+  startThemeScreen.classList.add("hide");
+  scoreContainer.classList.add("hide");
+}
+
+//hide quiz and display start screen
+window.onload = () => {
+  startQuiz();
 };

style.css

@@ -7,7 +7,22 @@
 body {
   background-color: #0a69ed;
 }
+
 .start-screen,
+.select-theme-screen,
+.start-theme-screen {
+  background-color: #ffffff;
+  padding: 3.1em 1.8em;
+  width: 80%;
+  max-width: 37.5em;
+  margin: 0 auto;
+  position: absolute;
+  transform: translate(-50%, -50%);
+  top: 50%;
+  left: 50%;
+  border-radius: 0.6em;
+}
+
 .score-container {
   position: absolute;
   top: 0;
@@ -32,15 +47,20 @@ button {
   outline: none;
   cursor: pointer;
 }
+
 #start-button,
+#select-theme-button,
+#start-theme-button,
 #restart {
   font-size: 1.3em;
   padding: 0.5em 1.8em;
   border-radius: 0.2em;
 }
+
 #restart {
   margin-top: 0.9em;
 }
+
 #display-container {
   background-color: #ffffff;
   padding: 3.1em 1.8em;