implementa leitura dos texto introdutórios de tema

index.html

@@ -106,31 +106,8 @@
   </div>
   <div class="start-theme-screen">
     <div class="header">
-      Tela inicial de tema
     </div>
     <div class="explicacao">
-      <p>Lorem ipsum dolor sit amet. Quo nesciunt perspiciatis <strong>Et quia eos vero optio hic assumenda
-          molestiae</strong>! Aut tenetur sint vel minima laudantium <em>Et possimus ea nobis dolorem ab vitae
-          dignissimos aut quaerat minus</em> eum ipsa veniam. </p>
-      <blockquote cite="https://www.loremipzum.com">Ut inventore praesentium qui impedit explicabo ut aliquid rerum et
-        quam perferendis. </blockquote>
-      <p>Qui sint sintAut delectus qui nobis quae rem voluptates consequatur. Id natus dolorem <strong>Quo praesentium
-          sed
-          vitae ipsum ab voluptatibus aperiam</strong> qui excepturi repudiandae a temporibus voluptas. Ut deserunt
-        cumque eum rerum voluptatemvel deleniti? Aut iusto esse aut possimus maioresnon suscipit et reprehenderit
-        dignissimos. </p>
-      <ol>
-        <li>Aut molestias consequatur ea minus beatae qui nesciunt neque et consectetur enim. </li>
-        <li>Cum similique expedita a placeat nihil. </li>
-      </ol>
-      <p>Et sequi cumque non iste enimnon ipsam est iste dolores. Sed ipsa expedita et labore possimussed aliquid et
-        ipsam
-        optio nam dolor quasi. </p>
-      <ul>
-        <li>Et sint quam id perspiciatis repellendus et quisquam quos! </li>
-        <li>Non assumenda omnis ea eius quod ut voluptatem unde. </li>
-        <li>Eos fuga error At eaque nesciunt? </li>
-      </ul>
     </div>
     <button id="start-theme-button">Iniciar as perguntas</button>
   </div>
@@ -159,6 +136,7 @@
   </div>
   <!-- Script -->
   <script src="perguntas.js"></script>
+  <script src="temas.js"></script>
   <script src="script.js"></script>
 </body>
 

perguntas.js

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

script.js

 // Baseado no tutorial em https://codingartistweb.com/2022/06/quiz-app-with-javascript/ acessado em 02/08/2023
-// Adaptado para pt-BR e acrescentadas fncionalidades adicionais por Gastón Morales@Faros Educacional
+// Adaptado para pt-BR e acrescentadas funcionalidades adicionais por Gastón Morales@Faros Educacional
 // 
 
 // Configurações
@@ -23,6 +23,8 @@ 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 startThemeHeader = document.querySelector(".start-theme-screen .header");
+let startThemeContent = document.querySelector(".start-theme-screen .explicacao");
 let startThemeButton = document.getElementById("start-theme-button");
 let opcoesHTML = document.querySelector(".opcoes");
 let questionCount =0;
@@ -228,8 +230,14 @@ function checker(userOption) {
 function themeListCreator() {
   quizArray.forEach((question) => {
     let i = -1;
+    let j = -1;
     let themeIndex = 0;
 
+    // find the introduction text for the theme
+    j = themeIntro.findIndex( (theme) => {
+      return ((question.theme === theme.name))
+    });
+
     i = themeList.findIndex((theme) => {
           return (question.theme === theme.name)
     })
@@ -239,6 +247,7 @@ function themeListCreator() {
         numberOfQuestions: 1,
         answeredQuestions: 0,
         maxScoreTheme: 0,
+        introText: ( j == -1 ? "" : themeIntro[j].introText ),
         score: 0,
       });
       themeIndex--;
@@ -268,6 +277,8 @@ startThemeButton.addEventListener("click", () => {
 // Shows theme start screen
 function themeDisplay(themeCount) {
   // Carrega o html do tema para a tela
+  startThemeHeader.innerHTML = themeList[selectedThemes[themeCount]].name;
+  startThemeContent.innerHTML = themeList[selectedThemes[themeCount]].introText;
   // Começa questionário do tema
   questionCount = 0
   // Filtra o quizArray para as perguntas do tema
@@ -314,6 +325,8 @@ function initial() {
   numberOfQuestionsShowed = 0;
   // Renomear no nome do array quizArray do perguntas.js para quizDataBase -- ele continua CONST
   quizArray = quizDataBase;
+  // Idem para os temas
+  themeIntro = themeDataBase;
 
   // Cria a lista de temas (completa)
   themeList = [];

temas.js

+//Themes array
+
+// Modelo de dados:
+//
+//------------------------------------------------------------------------------------------
+// Temas:
+//------------------------------------------------------------------------------------------
+// name: question.theme,        // Nome do tema
+// introText: "..."             // Texto (em HTML) de apresentação do tema
+// numberOfQuestions: 1,        // # de questões no tema
+// answeredQuestions: 0,        // # de questões respondidas no tema
+// maxScoreTheme: 0,            // Maior pontuação possivel
+// score: 0,                    // Peso do Tema no todo (0 a 100), onde 0 = não considerado.
+//
+//
+
+const themeDataBase= [
+        {
+            "name": "Gestão Financeira",
+            "introText": `<p>Lorem ipsum dolor sit amet. Quo nesciunt perspiciatis <strong>Et quia eos vero optio hic assumenda
+                            molestiae</strong>! Aut tenetur sint vel minima laudantium <em>Et possimus ea nobis dolorem ab vitae
+                            dignissimos aut quaerat minus</em> eum ipsa veniam. </p>
+                            <blockquote cite="https://www.loremipzum.com">Ut inventore praesentium qui impedit explicabo ut aliquid rerum et
+                            quam perferendis. </blockquote>
+                            <p>Qui sint sintAut delectus qui nobis quae rem voluptates consequatur. Id natus dolorem <strong>Quo praesentium
+                                sed
+                                vitae ipsum ab voluptatibus aperiam</strong> qui excepturi repudiandae a temporibus voluptas. Ut deserunt
+                            cumque eum rerum voluptatemvel deleniti? Aut iusto esse aut possimus maioresnon suscipit et reprehenderit
+                            dignissimos. </p>
+                            <ol>
+                            <li>Aut molestias consequatur ea minus beatae qui nesciunt neque et consectetur enim. </li>
+                            <li>Cum similique expedita a placeat nihil. </li>
+                            </ol>
+                            <p>Et sequi cumque non iste enimnon ipsam est iste dolores. Sed ipsa expedita et labore possimussed aliquid et
+                            ipsam
+                            optio nam dolor quasi. </p>
+                            <ul>
+                            <li>Et sint quam id perspiciatis repellendus et quisquam quos! </li>
+                            <li>Non assumenda omnis ea eius quod ut voluptatem unde. </li>
+                            <li>Eos fuga error At eaque nesciunt? </li>
+                            </ul>`,
+        },
+        {
+            "name": "Planejamento Estratégico",
+            "introText": "",
+        },
+        {
+            "name": "Mercado",
+            "introText": "",
+        },
+        {
+            "name": "Marketing",
+            "introText": "",
+        },
+        {
+            "name": "Tecnologia, Inovação e Sustentabilidade",
+            "introText": "",
+        },
+        {
+            "name": "Pessoas",
+            "introText": "",
+        },
+        {
+            "name": "Qualidade",
+            "introText": "",
+        },
+        {
+            "name": "Crédito",
+            "introText": "",
+        },
+        {
+            "name": "Comércio Internacional",
+            "introText": "",
+        },
+        {
+            "name": "Franquias",
+            "introText": "",
+        },
+        {
+            "name": "Legalização/Legislação",
+            "introText": "",
+        }
+];
\ No newline at end of file