Ajustes em responsivo e implementa resultado final

script.js

@@ -52,6 +52,26 @@ restart.addEventListener("click", () => {
   startQuiz();
 });
 
+// getResultadoTema
+function getResultadoTema( nomeTema, nota ) {
+  tema = themeDataBase.find( (theme) => theme.name == nomeTema);
+  let nivelConhecimento = "Básico"
+  // conhecimento básico
+  if ( nota > 0 && nota <= 40 ) {
+    nivelConhecimento = "Básico";
+  }
+  // conhecimento intermediário
+  else if (nota > 40 && nota < 80 ) {
+    nivelConhecimento = "Intermediário";
+  }
+  // conhecimento avançado
+  else {
+    nivelConhecimento = "Avançado";
+  }
+  resultado = tema.results.find( (r) => r.name == nivelConhecimento);
+  return ( "Conhecimento " + resultado.name + "<br /><p>" + resultado.content + "</p><a href='"+resultado.goto+"' target='_blank'><button>Acesse</button></a>" );
+}
+
 //Next Button
 nextBtn.addEventListener(
   "click",
@@ -74,10 +94,8 @@ nextBtn.addEventListener(
           <tr>
               <th class="tg-0lax">Tema</th>
               <th class="tg-0lax">Pontuação</th>
-              <th class="tg-0lax">Pontuação<br />Máxima</th>
-              <th class="tg-0lax">% Acerto</th>
               <th class="tg-0lax">Questões<br />Respondidas</th>
-              <th class="tg-0lax">Total de<br />Questões</th>
+              <th class="tg-0lax textoLongo">Resultado</th>
           </tr>
       </thead>
       <tbody>`;
@@ -86,22 +104,18 @@ nextBtn.addEventListener(
             let theme = themeList[themeID];
             let num = (theme.maxScoreTheme == 0 ? 0 : (theme.score / theme.maxScoreTheme * 100));
             table += "<tr><td data-label='Tema' class='tg-0lax'>" + theme.name + "</td>" +
-                                    "<td data-label='Pontuação' class='tg-0lax'>" + theme.score + "</td>" +
-                                    "<td data-label='Pontuação Máxima' class='tg-0lax'>" + theme.maxScoreTheme + "</td>" +
-                                    "<td data-label='% Acerto' class='tg-0lax'>" + num.toFixed(0).toLocaleString("pt-BR") + "%</td>" +
-                                    "<td data-label='Questões Respondidas' class='tg-0lax'>" + theme.answeredQuestions + "</td>" +
-                                    "<td data-label='Total de Questões' class='tg-0lax'>" + theme.numberOfQuestions + "</td></tr>\r\n";
+                          "<td data-label='Pontuação' class='tg-0lax'>" + num.toFixed(0).toLocaleString("pt-BR") + "% (" + theme.score + "/" + theme.maxScoreTheme + ")</td>" +
+                          "<td data-label='Questões Respondidas' class='tg-0lax'>" + theme.answeredQuestions + " de " + theme.numberOfQuestions + "</td>" +
+                          "<td data-label='Resultado' class='tg-0lax textoLongo'>" + getResultadoTema( theme.name, num ) + "</td></tr>\r\n";
           });
       }
       else {
         themeList.forEach( (theme) => {
           let num = (theme.maxScoreTheme == 0 ? 0 : (theme.score / theme.maxScoreTheme * 100));
           table += "<tr><td data-label='Tema' class='tg-0lax'>" + theme.name + "</td>" +
-                                  "<td data-label='Pontuação' class='tg-0lax'>" + theme.score + "</td>" +
-                                  "<td data-label='Pontuação Máxima' class='tg-0lax'>" + theme.maxScoreTheme + "</td>" +
-                                  "<td data-label='% Acerto' class='tg-0lax'>" + num.toFixed(0).toLocaleString("pt-BR") + "%</td>" +
-                                  "<td data-label='Questões Respondidas' class='tg-0lax'>" + theme.answeredQuestions + "</td>" +
-                                  "<td data-label='Total de Questões' class='tg-0lax'>" + theme.numberOfQuestions + "</td></tr>\r\n";
+                        "<td data-label='Pontuação' class='tg-0lax'>" + num.toFixed(0).toLocaleString("pt-BR") + "% (" + theme.score + "/" + theme.maxScoreTheme + ")</td>" +
+                        "<td data-label='Questões Respondidas' class='tg-0lax'>" + theme.answeredQuestions + " de " + theme.numberOfQuestions + "</td>" +
+                        "<td data-label='Resultado' class='tg-0lax textoLongo'>" + getResultadoTema( theme.name, num ) + "</td></tr>\r\n";
         });
       }
       table += "</tbody>\r\n</table>\r\n";

style.css

@@ -321,6 +321,10 @@ button {
   vertical-align: middle;
 }
 
+.tg .textoLongo {
+  width: 500px;
+}
+
 @media screen and (max-width: 600px) {
   * {
     font-size: 95% !important;
@@ -334,6 +338,10 @@ button {
     text-align: right;
   }
 
+  .tg .textoLongo {
+    width:fit-content;
+  }
+
   .tg thead {
     border: none;
     clip: rect(0 0 0 0);
@@ -352,7 +360,7 @@ button {
   }
   
   .tg td {
-    border-bottom: 1px solid #ddd;
+    /* border-bottom: 1px solid #ddd; */
     display: block;
     font-size: .8em;
     text-align: right;
@@ -387,6 +395,27 @@ button {
       margin: auto 0px;
   }
 
+.bgStart {
+  background-image: none;
+}
+
+.bgIntro {
+  background-image: none;
+}
+
+.bgQuiz {
+  background-image: none;
+}
+
+.bgThemeResult {
+  background-image: none;
+}
+
+.bgFinalResult {
+  background-image: none;  
+  background-color: #0454A1;
+}
+
   .start-screen,
   .intro-screen,
   .select-theme-screen,

temas.js

@@ -11,7 +11,7 @@
 // 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.
-//
+// results: []                  // Qualificador do resultado do tema de acordo com a nota obtida 
 //
 
 const themeDataBase= [